diff --git a/borgweb/borg/templates/borg/base.html b/borgweb/borg/templates/borg/base.html
new file mode 100644
index 0000000..c367ca3
--- /dev/null
+++ b/borgweb/borg/templates/borg/base.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    {% load static %}
+    {% load compress %}
+    {% compress css %}
+    <link type="text/x-scss" href="{% static 'theme.scss' %}" rel="stylesheet" media="screen">
+    {% endcompress %}
+
+    {% block script %}{% endblock %}
+    <style>{% block style %}{% endblock %}</style>
+    <title>{% block title %}Title{% endblock %}</title>
+</head>
+<body>
+<nav class="navbar navbar-expand-md navbar-dark bg-secondary mb-2">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">Home</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="/archives">Archives</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/errors">Errors</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form class="d-flex">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>
+
+{% block body %}{% endblock %}
+</body>
+</html>
\ No newline at end of file
diff --git a/borgweb/borg/templates/borg/index.html b/borgweb/borg/templates/borg/index.html
index ec0b4f3..966499f 100644
--- a/borgweb/borg/templates/borg/index.html
+++ b/borgweb/borg/templates/borg/index.html
@@ -1,61 +1,55 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Borg Summary</title>
+{% extends "borg/base.html" %}
+{% load static %}
 
-    {% load static %}
-    {% load compress %}
-    {% compress css %}
-    <link type="text/x-scss" href="{% static 'theme.scss' %}" rel="stylesheet" media="screen">
-    {% endcompress %}
+{% block title %}Borg Summary{% endblock %}
+
+{% block script %}
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
     {{ hour_list|json_script:"hour_list" }}
     <script src="{% static 'js/index.js' %}"></script>
-    <style>
-        div {
-            padding: 8px;
-            margin: 4px;
-        }
+{% endblock %}
 
-        dl {
-            margin-top: 4px;
-            margin-bottom: 4px;
-        }
-    </style>
-</head>
-<body>
+{% block style %}
+    .repo-container {
+        padding: 8px;
+        margin: 8px;
+    }
+
+    .att-label {
+        margin-top: 4px;
+        margin-bottom: 4px;
+    }
+{% 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="shadow rounded bg-primary overflow-hidden
+    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden
                 {% if not repo.archive_after_latest_error %}bg-danger{% endif %}">
         <div class="row me-1 overflow-hidden text-truncate">
             <h2 class="h2">{{ repo.label }}
                 <small class="text-muted"> {{ repo.location }}</small>
             </h2>
         </div>
-        <dl class="row ps-3">
+        <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="row ps-3">
+        <dl class="att-label row ps-3">
             <dt class="col-4">Hourly backups:</dt>
             <dd class="col-8 text-truncate">{{ repo.hourly_archive_string }}</dd>
         </dl>
-        <dl class="row ps-3">
+        <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="row">
+        <dl class="att-label row">
             <dt class="col-12 h4">Recent errors:</dt>
         </dl>
         {% endif %}
-        <dl class="row ps-3">
+        <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>
@@ -63,13 +57,12 @@
         </dl>
     </div>
     {% endfor %}
-    <div style="width: 600px;" class="shadow rounded bg-primary overflow-hidden">
+    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">
         <canvas id="backup_csize_hourly" width="400" height="200"></canvas>
     </div>
     {% else %}
     <p>No repos found.</p>
     {% endif %}
 </div>
-</div>
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
+
