diff --git a/web-dashboard/index.html b/web-dashboard/index.html
index a80c02a..a37cc02 100644
--- a/web-dashboard/index.html
+++ b/web-dashboard/index.html
@@ -797,9 +797,13 @@
       <p style="color:var(--text-muted); font-size:13px; margin-top:-8px;">
         Zeigt für alle sichtbar, wer wann für welchen Bereich zuständig ist und ob die Aufgabe bereits erledigt wurde, sowie eingetragene Abwesenheiten (Urlaub, "kann nicht").
       </p>
-      <p style="color:var(--text-muted); font-size:12px; margin-top:-8px;">
-        ○ Offen &nbsp; ✓ Erledigt &nbsp; ✓✓ Bestätigt &nbsp; ✕ Verpasst
-      </p>
+      <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; font-size:13px;">
+        <span class="calendar-badge calendar-badge-task-pending" style="padding:3px 8px;">○ Offen</span>
+        <span class="calendar-badge calendar-badge-task-completed" style="padding:3px 8px;">✓ Erledigt</span>
+        <span class="calendar-badge calendar-badge-task-verified" style="padding:3px 8px;">✓✓ Bestätigt</span>
+        <span class="calendar-badge calendar-badge-task-missed" style="padding:3px 8px;">✕ Verpasst</span>
+        <span class="calendar-badge calendar-badge-absence" style="padding:3px 8px;">Abwesend</span>
+      </div>
       <div class="invite-card" style="margin-bottom:16px;">
         <div id="absenceFormError" style="display:none" class="form-error"></div>
         <form id="absenceForm" class="invite-form-row" style="flex-wrap:wrap;">