diff --git a/borgweb/borg/static/borg/js/index.js b/borgweb/borg/static/borg/js/index.js
index 2ab1218..6e583d6 100644
--- a/borgweb/borg/static/borg/js/index.js
+++ b/borgweb/borg/static/borg/js/index.js
@@ -1,4 +1,4 @@
-function inflateRepo(repo_json, label, template_id, container_id) {
+function colourRepo(repo_json, label, container_id) {
     const repoLabel = `#repo-${label}`
 
     $(container_id).find(repoLabel).removeClass("bg-primary");
@@ -15,7 +15,6 @@ function inflateRepo(repo_json, label, template_id, container_id) {
 
 window.addEventListener("DOMContentLoaded", function () {
     // todo: inflate each repo and colour background accordingly
-    const template = $('#repo-template').html();
     const container = $('#repo-container');
 
     $('[data-json-string-request]').each(function (index, element) {
@@ -23,4 +22,19 @@ window.addEventListener("DOMContentLoaded", function () {
             $(element).html(data['data']);
         })
     });
+
+    $.getJSON(`/repo-list.json`, function (repo_list) {
+        repo_list.labels.forEach(function (repo_label) {
+            $.getJSON(`/repo/${repo_label}.json`, function (repo_json) {
+                colourRepo(repo_json, repo_label, container);
+            })
+
+            $.getJSON(`/repo/${repo_label}/monthly-size.json`, function (repo_size_json) {
+                draw_time_series_graph(`repo-${repo_label}-size-graph`, repo_size_json.repo,
+                    repo_size_json.dates, repo_size_json.units);
+            })
+
+        });
+    })
+
 }, false);