diff --git a/templates/accommodation.html b/templates/accommodation.html
index 5a78d6d..ee98ef4 100644
--- a/templates/accommodation.html
+++ b/templates/accommodation.html
@@ -40,20 +40,6 @@
 
   <h1>Accommodation</h1>
 
-  <p>
-  <a href="{{ url_for("index") }}">&larr; back to agenda</a>
-      |
-      <a href="{{ url_for("travel_list") }}">travel</a>
-      |
-      <a href="{{ url_for("conference_list") }}">conference</a>
-      |
-      <a href="{{ url_for("gaps_page") }}">gaps</a>
-      |
-      <strong>accommodation</strong>
-  </p>
-
-
-
   <ul>
     <li>Total nights away in 2024: {{ total_nights_2024 }}</li>
     <li>Total nights abroad in 2024: {{ nights_abroad_2024 }}</li>
diff --git a/templates/base.html b/templates/base.html
index 97520a0..a994aa9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,12 +12,11 @@
 {% block style %}
 {% endblock %}
 </head>
+{% from "navbar.html" import navbar with context %}
 
 <body>
-{% block content %}
-{% endblock %}
-
-{% block scripts %}
-{% endblock %}
+{% block nav %}{{ navbar() }}{% endblock %}
+{% block content %}{% endblock %}
+{% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/templates/conference_list.html b/templates/conference_list.html
index 05bd4e7..5d490c1 100644
--- a/templates/conference_list.html
+++ b/templates/conference_list.html
@@ -53,18 +53,6 @@
 
   <h1>Conferences</h1>
 
-  <p>
-    <a href="{{ url_for("index") }}">&larr; back to agenda</a>
-    |
-    <a href="{{ url_for("travel_list") }}">travel</a>
-    |
-    <strong>conference</strong>
-    |
-    <a href="{{ url_for("gaps_page") }}">gaps</a>
-    |
-    <a href="{{ url_for("accommodation_list") }}">accommodation</a>
-  </p>
-
   <div class="grid-container">
     {{ section("Current", current, "attending") }}
     {{ section("Future", future, "going") }}
diff --git a/templates/gaps.html b/templates/gaps.html
index cbb5e5c..ae24883 100644
--- a/templates/gaps.html
+++ b/templates/gaps.html
@@ -4,20 +4,6 @@
 <div class="p-2">
 
   <h1>Gaps</h1>
-    <p>
-      <a href="{{ url_for("index") }}">&larr; back to agenda</a>
-      |
-      <a href="{{ url_for("travel_list") }}">travel</a>
-      |
-      <a href="{{ url_for("conference_list") }}">conference</a>
-      |
-      <strong>gaps</strong>
-      |
-      <a href="{{ url_for("accommodation_list") }}">accommodation</a>
-    </p>
-
-
-
   <table class="table table-hover w-auto">
     <thead>
       <tr>
diff --git a/templates/index.html b/templates/index.html
index 81d30ff..d841e0c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,3 @@
-{# vim: set ft=htmljinja
-#}
 <!doctype html>
 <html lang="en">
 <head>
@@ -103,20 +101,14 @@
 
 
 
+{% from "navbar.html" import navbar with context %}
 <body>
+  {{ navbar() }}
 
   <div class="container-fluid mt-2">
     <h1>Agenda</h1>
     <p>
       <a href="/tools">&larr; personal tools</a>
-      |
-      <a href="{{ url_for("travel_list") }}">travel</a>
-      |
-      <a href="{{ url_for("conference_list") }}">conference</a>
-      |
-      <a href="{{ url_for("gaps_page") }}">gaps</a>
-      |
-      <a href="{{ url_for("accommodation_list") }}">accommodation</a>
     </p>
 
     <ul>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..26fde4f
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,29 @@
+{% macro navbar() %}
+
+{% set pages = [
+  {"endpoint": "index", "label": "Home" },
+  {"endpoint": "conference_list", "label": "Conference" },
+  {"endpoint": "travel_list", "label": "Travel" },
+  {"endpoint": "accommodation_list", "label": "Accommodation" },
+  {"endpoint": "gaps_page", "label": "Gaps" },
+] %}
+
+<nav class="navbar navbar-expand-lg bg-success" data-bs-theme="dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="{{ url_for("index") }}">Agenda</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">
+        {% for page in pages %}
+        <li class="nav-item">
+          <a class="nav-link{% if request.endpoint == page.endpoint %} border border-white border-2 active{% endif %}" href="{{ url_for(page.endpoint) }}">{{ page.label }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</nav>
+
+{% endmacro %}
diff --git a/templates/travel.html b/templates/travel.html
index b7666a0..86ae8bc 100644
--- a/templates/travel.html
+++ b/templates/travel.html
@@ -22,8 +22,6 @@
   justify-content: start;
 }
 
-
-
 .grid-item {
   /* Additional styling for grid items can go here */
 }
@@ -36,18 +34,6 @@
 
   <h1>Travel</h1>
 
-  <p>
-  <a href="{{ url_for("index") }}">&larr; back to agenda</a>
-      |
-      <strong>travel</strong>
-      |
-      <a href="{{ url_for("conference_list") }}">conference</a>
-      |
-      <a href="{{ url_for("gaps_page") }}">gaps</a>
-      |
-      <a href="{{ url_for("accommodation_list") }}">accommodation</a>
-  </p>
-
   <h3>flights</h3>
 
   <div class="grid-container">
