diff --git a/templates/dashboard.html b/templates/dashboard.html
index d9e55ec..6c704b3 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -2,82 +2,99 @@
 {% block title %}Dashboard - Busylight{% endblock %}
 
 {% block content %}
-<div class="d-flex justify-content-between align-items-center mb-3">
-    <h5 class="mb-0">Dashboard</h5>
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h4 class="mb-0">Dashboard</h4>
     <div>
         <form method="post" action="/api/poll" class="d-inline">
-            <button type="submit" class="btn btn-sm btn-outline-primary py-0">
-                <i class="bi bi-arrow-clockwise"></i> Abfragen
+            <button type="submit" class="btn btn-sm btn-outline-primary">
+                <i class="bi bi-arrow-clockwise"></i> Jetzt abfragen
             </button>
         </form>
-        <small class="text-muted ms-2" id="last-update"></small>
+        <span class="text-muted ms-2" id="last-update"></span>
     </div>
 </div>
 
 {% if not authenticated %}
-<div class="alert alert-warning py-2 mb-3">
-    <small><i class="bi bi-exclamation-triangle"></i> Azure nicht verbunden.
-    <a href="/settings">Einstellungen</a> pruefen.</small>
+<div class="alert alert-warning">
+    <i class="bi bi-exclamation-triangle"></i>
+    Azure ist nicht verbunden. Bitte unter <a href="/settings">Einstellungen</a> konfigurieren und
+    <code>python app.py --auth</code> ausfuehren.
 </div>
 {% endif %}
 
 {% if devices %}
-<div class="row g-2">
+<div class="row g-3">
     {% for device in devices %}
-    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
+    <div class="col-md-6 col-lg-4 col-xl-3">
         <div class="card busylight-card h-100">
-            <div class="card-body p-2">
-                <div class="d-flex justify-content-between align-items-center mb-1">
-                    <strong class="small">{{ device.name }}</strong>
+            <div class="card-header bg-white border-0 pb-0">
+                <div class="d-flex justify-content-between align-items-center">
+                    <strong>{{ device.name }}</strong>
+                    <small class="text-muted">{{ device.hostname }}</small>
                 </div>
+            </div>
+            <div class="card-body pt-2">
                 {% for seg in device.segments|reverse %}
-                {% if seg.user %}
-                    {% if seg.aida == '-' and seg.teams == '-' %}
-                    <div class="seg-compact" style="background: #f0f0f0; border-left: 3px solid #ccc;">
-                        <span class="seg-name">{{ seg.user }}</span>
-                        <small class="text-muted"><i class="bi bi-hourglass-split"></i></small>
-                    </div>
-                    {% else %}
-                    <div class="seg-compact" style="background: rgba({{ seg.r }}, {{ seg.g }}, {{ seg.b }}, 0.15); border-left: 3px solid rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});">
-                        <span class="seg-name">{{ seg.user }}</span>
-                        <div class="seg-badges">
+                <div class="mb-2">
+                    <small class="text-muted d-block mb-1">Segment {{ seg.index }}</small>
+                    {% if seg.user %}
+                        {% if seg.aida == '-' and seg.teams == '-' %}
+                        <div class="segment-bar" style="background: #f0f0f0; border-color: #ccc;">
+                            <span class="status-dot me-2" style="background: #ccc;"></span>
+                            {{ seg.user }}
+                        </div>
+                        <small class="text-muted"><i class="bi bi-hourglass-split"></i> Warte auf Status...</small>
+                        {% else %}
+                        <div class="segment-bar" style="background: rgba({{ seg.r }}, {{ seg.g }}, {{ seg.b }}, 0.3); border-color: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});">
+                            <span class="status-dot me-2" style="background: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});"></span>
+                            {{ seg.user }}
+                        </div>
+                        <div class="d-flex gap-2 mt-1">
                             {% if seg.aida == 'anwesend' %}
-                                <span class="badge-sm bg-success">Buero</span>
+                                <span class="badge bg-success"><i class="bi bi-building"></i> Anwesend</span>
                             {% elif seg.aida == 'abwesend' %}
-                                <span class="badge-sm bg-secondary">Weg</span>
+                                <span class="badge bg-secondary"><i class="bi bi-door-open"></i> Abwesend</span>
                             {% elif seg.aida == 'homeoffice' %}
-                                <span class="badge-sm bg-warning text-dark">HO</span>
+                                <span class="badge bg-warning text-dark"><i class="bi bi-house"></i> Homeoffice</span>
+                            {% else %}
+                                <span class="badge bg-light text-dark">{{ seg.aida }}</span>
                             {% endif %}
 
                             {% if seg.teams != '-' %}
                                 {% if 'available' in seg.teams %}
-                                    <span class="badge-sm bg-success">Frei</span>
+                                    <span class="badge bg-success"><i class="bi bi-microsoft-teams"></i> Verfuegbar</span>
                                 {% elif 'busy' in seg.teams or 'inacall' in seg.teams or 'inameeting' in seg.teams %}
-                                    <span class="badge-sm bg-danger">Besetzt</span>
+                                    <span class="badge bg-danger"><i class="bi bi-microsoft-teams"></i> Beschaeftigt</span>
                                 {% elif 'donotdisturb' in seg.teams %}
-                                    <span class="badge-sm" style="background:#8b00ff;color:#fff">DND</span>
+                                    <span class="badge" style="background:#8b00ff;color:#fff"><i class="bi bi-microsoft-teams"></i> Nicht stoeren</span>
                                 {% elif 'away' in seg.teams or 'berightback' in seg.teams %}
-                                    <span class="badge-sm bg-warning text-dark">Weg</span>
+                                    <span class="badge bg-warning text-dark"><i class="bi bi-microsoft-teams"></i> Abwesend</span>
+                                {% elif 'offline' in seg.teams %}
+                                    <span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Offline</span>
                                 {% elif 'presenting' in seg.teams %}
-                                    <span class="badge-sm bg-danger">Praes.</span>
-                                {% elif 'offline' in seg.teams or 'inactive' in seg.teams or 'offwork' in seg.teams %}
-                                    <span class="badge-sm bg-secondary">Off</span>
+                                    <span class="badge bg-danger"><i class="bi bi-microsoft-teams"></i> Praesentiert</span>
                                 {% elif 'outofoffice' in seg.teams %}
-                                    <span class="badge-sm bg-secondary">OoO</span>
+                                    <span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Nicht im Buero</span>
+                                {% elif 'inactive' in seg.teams or 'offwork' in seg.teams %}
+                                    <span class="badge bg-secondary"><i class="bi bi-microsoft-teams"></i> Inaktiv</span>
+                                {% else %}
+                                    <span class="badge bg-light text-dark"><i class="bi bi-microsoft-teams"></i> {{ seg.teams }}</span>
                                 {% endif %}
                             {% endif %}
 
                             {% if seg.phone %}
-                                <span class="badge-sm bg-danger"><i class="bi bi-telephone-fill"></i></span>
+                                <span class="badge bg-danger"><i class="bi bi-telephone-fill"></i> Telefoniert</span>
+                            {% else %}
+                                <span class="badge bg-light text-dark"><i class="bi bi-telephone"></i> Frei</span>
                             {% endif %}
                         </div>
+                        {% endif %}
+                    {% else %}
+                    <div class="segment-bar empty">
+                        <i class="bi bi-dash-circle me-2"></i> Nicht zugeordnet
                     </div>
                     {% endif %}
-                {% else %}
-                <div class="seg-compact seg-empty">
-                    <small class="text-muted">-- leer --</small>
                 </div>
-                {% endif %}
                 {% endfor %}
             </div>
         </div>
@@ -95,6 +112,7 @@
 
 {% block scripts %}
 <script>
+    // Auto-refresh every 10 seconds
     setTimeout(() => location.reload(), 10000);
     document.getElementById('last-update').textContent =
         'Aktualisiert: ' + new Date().toLocaleTimeString('de-DE');