diff --git a/templates/webcam.html b/templates/webcam.html
index 3ef3162..c0704da 100644
--- a/templates/webcam.html
+++ b/templates/webcam.html
@@ -69,22 +69,40 @@
         .offline-overlay .sub { font-size: 14px; opacity: 0.8; }
         .counter-box {
             position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.78);
+            top: 14px;
+            left: 14px;
+            background: rgba(18, 20, 26, 0.82);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 14px;
+            padding: 14px 16px;
             color: #fff;
-            padding: 8px 14px 10px;
-            border-radius: 6px;
-            font-family: monospace;
-            font-size: 14px;
-            line-height: 1.5;
+            font-family: system-ui, -apple-system, sans-serif;
             cursor: move;
             user-select: none;
             z-index: 4;
-            min-width: 150px;
+            min-width: 215px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(2px);
         }
-        .counter-box .cb-total { font-size: 18px; font-weight: bold; margin-bottom: 2px; }
-        .counter-box .cb-grip { opacity: 0.5; font-size: 11px; margin-top: 4px; }
+        .cb-header {
+            display: flex; align-items: center; gap: 8px;
+            font-size: 12px; letter-spacing: 1.5px; color: #cfd3dc;
+            padding-bottom: 10px; margin-bottom: 4px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .cb-dot { width: 9px; height: 9px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
+        .cb-row { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
+        .cb-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--accent, #fff); }
+        .cb-label { flex: 1; font-size: 14px; letter-spacing: 0.5px; color: #e7e9ee; }
+        .cb-val { font-size: 18px; font-weight: 700; color: var(--accent, #fff); font-variant-numeric: tabular-nums; }
+        .cb-car   { --accent: #22c55e; }
+        .cb-truck { --accent: #3b82f6; }
+        .cb-bus   { --accent: #a855f7; }
+        .cb-moto  { --accent: #ef4444; }
+        .cb-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 6px 0; }
+        .cb-total-row { padding-top: 4px; }
+        .cb-total-label { flex: 1; font-size: 13px; letter-spacing: 1.5px; color: #9aa0a6; }
+        .cb-total-val { font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
         .video-container {
             position: relative;
             width: 1020px;
@@ -162,12 +180,27 @@
         <img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
         <canvas id="lineCanvas"></canvas>
         <div id="counterBox" class="counter-box" title="Zum Verschieben ziehen">
-            <div class="cb-total">Gesamt: <span id="cTotal">0</span></div>
-            <div>Autos: <span id="cCar">0</span></div>
-            <div>LKW: <span id="cTruck">0</span></div>
-            <div>Busse: <span id="cBus">0</span></div>
-            <div>Motorräder: <span id="cMoto">0</span></div>
-            <div class="cb-grip">⠿ ziehen</div>
+            <div class="cb-header"><span class="cb-dot"></span>LIVE COUNT</div>
+            <div class="cb-row cb-car">
+                <svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>
+                <span class="cb-label">CARS</span><span class="cb-val" id="cCar">0</span>
+            </div>
+            <div class="cb-row cb-truck">
+                <svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
+                <span class="cb-label">TRUCKS</span><span class="cb-val" id="cTruck">0</span>
+            </div>
+            <div class="cb-row cb-bus">
+                <svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v6"/><path d="M15 6v6"/><path d="M2 12h19.6"/><path d="M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3"/><circle cx="7" cy="18" r="2"/><path d="M9 18h5"/><circle cx="16" cy="18" r="2"/></svg>
+                <span class="cb-label">BUSES</span><span class="cb-val" id="cBus">0</span>
+            </div>
+            <div class="cb-row cb-moto">
+                <svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/></svg>
+                <span class="cb-label">MOTORCYCLES</span><span class="cb-val" id="cMoto">0</span>
+            </div>
+            <div class="cb-divider"></div>
+            <div class="cb-row cb-total-row">
+                <span class="cb-total-label">TOTAL</span><span class="cb-total-val" id="cTotal">0</span>
+            </div>
         </div>
         <div id="offlineOverlay" class="offline-overlay">
             <div class="icon" id="ovIcon">📷</div>