diff --git a/guarddog_nexus/web/templates/dashboard.html b/guarddog_nexus/web/templates/dashboard.html
index d55d475..cb23fad 100644
--- a/guarddog_nexus/web/templates/dashboard.html
+++ b/guarddog_nexus/web/templates/dashboard.html
@@ -1,4 +1,12 @@
 {% extends "base.html" %}
+{% block title %}Dashboard — GuardDog Nexus{% endblock %}
+{% block breadcrumbs %}
+<div class="breadcrumbs">
+    <a href="/">Home</a>
+    <span class="separator">/</span>
+    <span>Dashboard</span>
+</div>
+{% endblock %}
 {% block content %}
 <h1>Dashboard</h1>
 
diff --git a/guarddog_nexus/web/templates/dashboard_stats.html b/guarddog_nexus/web/templates/dashboard_stats.html
index 9aee305..99eaffa 100644
--- a/guarddog_nexus/web/templates/dashboard_stats.html
+++ b/guarddog_nexus/web/templates/dashboard_stats.html
@@ -26,30 +26,37 @@
 </div>
 
 {% if total_findings > 0 %}
-<div style="margin-bottom: 2rem;">
+<div>
     <small>Severity ratio</small>
-    <div style="display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 4px;">
+    <div class="severity-bar">
         {% set err_pct = (errors_count / total_findings * 100) | int %}
         {% set warn_pct = 100 - err_pct %}
-        <div style="width: {{ err_pct }}%; background: var(--pico-color-red-400);" title="ERROR: {{ errors_count }}"></div>
-        <div style="width: {{ warn_pct }}%; background: var(--pico-color-yellow-400);" title="WARNING: {{ warnings_count }}"></div>
+        <div class="bar-error" style="width: {{ err_pct }}%;" title="ERROR: {{ errors_count }}"></div>
+        <div class="bar-warning" style="width: {{ warn_pct }}%;" title="WARNING: {{ warnings_count }}"></div>
     </div>
-    <div style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 2px;">
+    <div class="severity-bar-labels">
         <span class="severity-ERROR">ERROR {{ errors_count }}</span>
         <span class="severity-WARNING">WARNING {{ warnings_count }}</span>
     </div>
 </div>
+{% else %}
+<div class="empty-state" style="padding: 1rem;">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    <h3>No findings yet</h3>
+    <small>Scan results will appear here once packages are processed.</small>
+</div>
 {% endif %}
 
 {% if days %}
-<div style="margin-bottom: 2rem;">
+<div>
     <small>Scan activity (14 days)</small>
-    <div style="display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: 4px;">
+    <div class="heatmap">
         {% set max_cnt = days | map(attribute=1) | max %}
         {% for day, cnt, fl in days %}
-        <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end;" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
+        <div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
             {% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
-            <div style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %}; border-radius: 2px 2px 0 0; opacity: 0.8;"></div>
+            <div class="bar" style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %};"></div>
+            <div class="tooltip">{{ day }}: {{ cnt }} scans, {{ fl }} flagged</div>
         </div>
         {% endfor %}
     </div>
@@ -57,7 +64,7 @@
 {% endif %}
 
 {% if most_flagged %}
-<div style="margin-bottom: 2rem;">
+<div>
     <h3>⚠ Most Flagged Packages</h3>
     <table>
         <thead>
@@ -80,7 +87,7 @@
 {% endif %}
 
 {% if latest_flagged %}
-<div style="margin-bottom: 2rem;">
+<div>
     <h3>🔴 Latest Flagged</h3>
     <table>
         <thead>
@@ -118,7 +125,9 @@
             <td><a href="/packages/{{ s.package_name }}/{{ s.package_version }}">{{ s.package_name }}</a></td>
             <td>{{ s.package_version }}</td>
             <td><small>{{ s.repository }}</small></td>
-            <td><span class="status-{{ s.status }}">{{ s.status }}</span></td>
+            <td>
+                {% if s.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ s.status }}">{{ s.status }}</span>{% endif %}
+            </td>
             <td>{% if s.flagged %}<span class="flagged">⚠ {{ s.total_findings }}</span>{% elif s.status == 'completed' %}<span class="clean">✓</span>{% else %}<span>-</span>{% endif %}</td>
             <td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
         </tr>
@@ -128,15 +137,18 @@
 <small><a href="/scans">View all scans →</a></small>
 
 {% if top_rules %}
-<h3>Top Rules Triggered</h3>
-<table>
-    <thead><tr><th>Rule</th><th>Count</th></tr></thead>
-    <tbody>
+<div class="top-rules-chart">
+    <h3>Top Rules Triggered</h3>
     {% for rule, cnt in top_rules %}
-        <tr><td><code>{{ rule }}</code></td><td>{{ cnt }}</td></tr>
+    <div class="rule-bar-row">
+        <span class="rule-name" title="{{ rule }}"><code>{{ rule }}</code></span>
+        <div class="rule-bar-container">
+            <div class="rule-bar" style="width: {{ (cnt / top_rules[0][1] * 100) | int if top_rules[0][1] > 0 else 0 }}%;"></div>
+        </div>
+        <span class="rule-count">{{ cnt }}</span>
+    </div>
     {% endfor %}
-    </tbody>
-</table>
+</div>
 {% endif %}
 
 <small style="opacity: 0.5;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>