diff --git a/borgweb/borg/static/borg/js/index.js b/borgweb/borg/static/borg/js/index.js
index b797a69..c2a0c5d 100644
--- a/borgweb/borg/static/borg/js/index.js
+++ b/borgweb/borg/static/borg/js/index.js
@@ -1,8 +1,41 @@
+function inflateRepo(repo_json, label, template_id, container_id) {
+    const template_copy = $(template_id).clone();
+    $(template_copy).find(".repo-label").html(label);
+    $(template_copy).find(".repo-location").html(repo_json.location);
+    $(template_copy).find(".repo-latest-backup").html(repo_json.latest_backup);
+    $(template_copy).find(".repo-size").html(repo_json.size);
+    $(template_copy).find(".repo-recent-errors").html(repo_json.recent_errors);
+
+    let bg_class = "bg-primary";
+    if (repo_json.error) {
+        bg_class = "bg-danger";
+    } else if (repo_json.warning) {
+        bg_class = "bg-warning";
+    }
+    $(template_copy).addClass(bg_class);
+
+    $(container_id).append(template_copy);
+}
+
+
 window.addEventListener("DOMContentLoaded", function () {
-    $.getJSON( "repo_daily.json", function( json ) {
+    // todo: inflate each repo and colour background accordingly
+    const template = $('#repo-template').html();
+    const container = $('#repo-container');
+
+    $.getJSON(`/repo_list.json`, function (repo_list) {
+        repo_list.labels.forEach(function (repo_label) {
+            $.getJSON(`/repo/${repo_label}.json`, function (repo_json) {
+                inflateRepo(repo_json, repo_label, template, container);
+            })
+        });
+    })
+
+
+    $.getJSON("repo_daily.json", function (json) {
         draw_time_graph("daily_backup_size", json.repos, json.dates, json.units);
-     });
-    $.getJSON( "repo_monthly.json", function( json ) {
+    });
+    $.getJSON("repo_monthly.json", function (json) {
         draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
-     });
+    });
 }, false);
diff --git a/borgweb/borg/templates/borg/index.html b/borgweb/borg/templates/borg/index.html
index a91b2b0..634784a 100644
--- a/borgweb/borg/templates/borg/index.html
+++ b/borgweb/borg/templates/borg/index.html
@@ -26,50 +26,18 @@
 {% endblock %}
 
 {% block body %}
-{% if repo_list %}
-<div class="grid mx-auto d-flex justify-content-center flex-wrap">
-    {% for repo in repo_list %}
-    <div style="width: 600px;" class="repo-container shadow rounded overflow-hidden
-                {% if repo.error %}bg-danger{% elif repo.warning %}bg-warning{% else %}bg-primary{% endif %}">
-        <div class="row me-1 overflow-hidden text-truncate">
-            <h2 class="h2"><a href="/repo/{{ repo.label }}">{{ repo.label }}</a>
-                <small class="text-muted"> {{ repo.location }}</small>
-            </h2>
-        </div>
-        <dl class="att-label row ps-3">
-            <dt class="col-4">Latest backup:</dt>
-            <dd class="col-8">{{ repo.last_backup }}</dd>
-        </dl>
-        <dl class="att-label row ps-3">
-            <dt class="col-4">Size:</dt>
-            <dd class="col-8">{{ repo.size_string }}</dd>
-        </dl>
-        {% if repo.recent_errors|length > 0 %}
-        <dl class="att-label row">
-            <dt class="col-12 h4">Recent errors:</dt>
-        </dl>
-        <dl class="att-label row ps-3">
-            {% for error in repo.recent_errors %}
-            <dt class="col-4">{{ error.time_ago }}</dt>
-            <dd class="col-8 text-truncate">{{ error.error }}</dd>
-            {% endfor %}
-        {% endif %}
-        </dl>
-    </div>
-    {% endfor %}
+<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
     <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">
         <canvas id="daily_backup_size" width="400" height="200"></canvas>
     </div>
     <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">
         <canvas id="monthly_backup_size" width="400" height="200"></canvas>
     </div>
-    {% else %}
-    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">
-        <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">
-        <h2 class="h2">No repositories found</h2>
+{#    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">#}
+{#        <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">#}
+{#        <h2 class="h2">No repositories found</h2>#}
+{#    </div>#}
     </div>
-    </div>
-    {% endif %}
 </div>
 {% endblock %}
 
diff --git a/borgweb/borg/templates/borg/repo-template.html b/borgweb/borg/templates/borg/repo-template.html
index cc9217f..b8fb989 100644
--- a/borgweb/borg/templates/borg/repo-template.html
+++ b/borgweb/borg/templates/borg/repo-template.html
@@ -1,7 +1,7 @@
 <script id="repo-template" type="text/x-custom-template">
     <div style="width: 600px;" class="repo-container shadow rounded overflow-hidden">
         <div class="row me-1 overflow-hidden text-truncate">
-            <h2 class="repo-label h2">
+            <h2 class="h2"> <span class="repo-label"></span>
                 <small class="repo-location text-muted"></small>
             </h2>
         </div>
diff --git a/borgweb/borg/urls.py b/borgweb/borg/urls.py
index 06d7a6d..d4a2980 100644
--- a/borgweb/borg/urls.py
+++ b/borgweb/borg/urls.py
@@ -7,7 +7,8 @@ urlpatterns = [
     path('', cache_page(60)(views.index), name='index'),
     path('repo_daily.json', cache_page(3600)(views.repo_daily_json), name='daily repo json'),
     path('repo_monthly.json', cache_page(3600 * 12)(views.repo_monthly_json), name='monthly repo json'),
-    path('repo_list.json', cache_page(3600)(views.repo_list), name='repo list'),
+    path('repo_list.json', cache_page(60)(views.repo_list_json), name='repo list'),
+    path('repo/<str:repo_label>.json', cache_page(60)(views.repo_json), name='repo json'),
     path('repo/<str:repo_label>', cache_page(60)(views.repo), name='repo'),
     path('post/repo', views.post_repo, name='post repo'),
     path('post/archive', views.post_archive, name='post archive'),
diff --git a/borgweb/borg/views/__init__.py b/borgweb/borg/views/__init__.py
index 7a3fb6c..fb30390 100644
--- a/borgweb/borg/views/__init__.py
+++ b/borgweb/borg/views/__init__.py
@@ -1,3 +1,3 @@
 from .views import index, repo, axes
 from .post import post_repo, post_archive, post_error, post_location
-from .json import repo_daily_json, repo_monthly_json, repo_list
+from .json import repo_daily_json, repo_monthly_json, repo_list_json, repo_json
diff --git a/borgweb/borg/views/json.py b/borgweb/borg/views/json.py
index 70ea66a..072ca57 100644
--- a/borgweb/borg/views/json.py
+++ b/borgweb/borg/views/json.py
@@ -1,11 +1,23 @@
 from datetime import datetime, timedelta
+from django.shortcuts import get_object_or_404
 from django.http import JsonResponse
 from ..models import Repo, Label
 from ..utility import data
 from ..utility.time import last_day_previous_months
 
 
-def repo_list(request):
+def repo_json(request, repo_label):
+    repo = get_object_or_404(Repo, label__label=repo_label)
+    repo_dict = {'location': repo.location,
+                 'latest_backup': repo.last_backup(),
+                 'size': repo.size_string(),
+                 'recent_errors': "not implemented",
+                 'warning': repo.warning(),
+                 'error': repo.error()}
+    return JsonResponse(repo_dict)
+
+
+def repo_list_json(request):
     return JsonResponse({'labels': [repo.label.label for repo in Repo.objects.all()]})
 
 
diff --git a/borgweb/borg/views/views.py b/borgweb/borg/views/views.py
index 085f79c..9537ec4 100644
--- a/borgweb/borg/views/views.py
+++ b/borgweb/borg/views/views.py
@@ -3,12 +3,7 @@ from ..models import Repo
 
 
 def index(request):
-    repo_list = Repo.objects.all()
-
-    context = {
-        'repo_list': repo_list,
-    }
-    return render(request, 'borg/index.html', context)
+    return render(request, 'borg/index.html', {})
 
 
 def repo(request, repo_label: str):