diff --git a/shiftregister/app/templates/shiftlist.html b/shiftregister/app/templates/shiftlist.html
index 972bc3d..2e050d2 100644
--- a/shiftregister/app/templates/shiftlist.html
+++ b/shiftregister/app/templates/shiftlist.html
@@ -18,16 +18,17 @@
 <hr>
 {% endif %}
 {% if free_shifts %}
-<h3 class="title">Freie Schichten</h3>
-<div class="breadcrumb has-bullet-separator">
-    <ul>
+<h3 class="title mb-0">Freie Schichten</h3>
+<div class="breadcrumb has-bullet-separator mb-0" style="background-color:var(--background);overflow-x:auto;padding:1em 0;position:sticky;top:0;z-index:42;">
+    <ul style="flex-wrap:nowrap;">
 {% for day in days %}
-        <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l, d.m.Y" }}</a></li>
+        <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li>
 {% endfor %}
+        <li><a href="#">zurück nach oben</a></li>
     </ul>
 </div>
 {% for shifts in free_shifts %}
-<h5 class="subtitle" id="{{ shifts.0.start_at|date:"Y-m-d" }}">{{ shifts.0.start_at|date:"l, d.m.Y" }}</h5>
+<h5 class="subtitle" id="{{ shifts.0.start_at|date:"Y-m-d" }}">{{ shifts.0.start_at|date:"l" }}</h5>
 <div class="columns is-multiline">
 {% for shift in shifts %}
     {% include "partials/shift_listitem.html" %}
diff --git a/templates/base.html b/templates/base.html
index 364aa22..1eaf536 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,6 +17,16 @@
     * {
         font-family: "Maven Pro", sans-serif !important;
     }
+
+    :root {
+        --background: #fff;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background: #17181c;
+        }
+    }
     </style>
 </head>
 <body>
