diff --git a/apps/dashboard/dashboard.html b/apps/dashboard/dashboard.html
index 77483ac..dbc8c21 100644
--- a/apps/dashboard/dashboard.html
+++ b/apps/dashboard/dashboard.html
@@ -1,431 +1,1180 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>KalliLab Control Panel</title>
-<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #060b09;
-    --bg2: #0a1210;
-    --card: rgba(8, 18, 15, 0.88);
-    --card-border: rgba(0, 220, 140, 0.18);
-    --card-hover: rgba(0, 220, 140, 0.28);
-    --teal: #00dc8c;
-    --teal-dim: #009e65;
-    --teal-bright: #00ffaa;
-    --teal-glow: rgba(0, 220, 140, 0.4);
-    --text: #b8d4cc;
-    --text-dim: #5a8a7a;
-    --text-bright: #d8f0e8;
-    --clr-warn: #ff4466;
-    --red: #ff4466;
-    --yellow: #ffcc44;
-    --blue: #44aaff;
-    --graph: #00cc88;
-    --font-display: 'Orbitron', monospace;
-    --font-mono: 'Share Tech Mono', monospace;
-    --font-body: 'Exo 2', sans-serif;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font-body);
-    min-height: 100vh;
-    overflow-x: hidden;
-    position: relative;
-  }
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-      linear-gradient(rgba(0, 220, 140, 0.025) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(0, 220, 140, 0.025) 1px, transparent 1px);
-    background-size: 40px 40px;
-    z-index: 0;
-    pointer-events: none;
-  }
-  @keyframes scanline {
-    0% { top: -5%; }
-    100% { top: 105%; }
-  }
-  .scanline {
-    position: fixed;
-    left: 0; right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(0,220,140,0.06), rgba(0,220,140,0.10), rgba(0,220,140,0.06), transparent);
-    z-index: 1;
-    animation: scanline 8s linear infinite;
-    pointer-events: none;
-  }
-  .wrapper {
-    position: relative;
-    z-index: 2;
-    max-width: 1340px;
-    margin: 0 auto;
-    padding: 0 10px 32px;
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 0 8px;
-    border-bottom: 1px solid var(--card-border);
-    margin-bottom: 10px;
-    gap: 12px;
-  }
-  .header-logo { display: flex; align-items: center; gap: 10px; }
-  .logo-text {
-    font-family: var(--font-display);
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--teal-bright);
-    text-shadow: 0 0 20px var(--teal-glow);
-    letter-spacing: 2px;
-  }
-  .logo-sub {
-    font-family: var(--font-mono);
-    font-size: 9px;
-    color: var(--text-dim);
-    letter-spacing: 2px;
-    text-transform: uppercase;
-  }
-  .header-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
-  .overall-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--teal-dim); }
-  .status-indicator {
-    display: flex; align-items: center; gap: 6px;
-    font-family: var(--font-display); font-size: 11px;
-    color: var(--teal-bright); text-shadow: 0 0 10px var(--teal-glow);
-  }
-  .status-dot-main { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); }
-  .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
-  .clock {
-    font-family: var(--font-display); font-size: 24px; font-weight: 700;
-    color: var(--teal-bright); text-shadow: 0 0 20px var(--teal-glow), 0 0 40px rgba(0,220,140,0.2);
-    letter-spacing: 2px;
-  }
-  .date-str { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-align: right; }
-  #last-updated { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-align: right; }
-  .section-header {
-    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
-    font-family: var(--font-display); font-size: 8px; font-weight: 600;
-    letter-spacing: 3px; text-transform: uppercase; color: var(--teal-dim);
-  }
-  .section-header::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-border), transparent); }
-  .widget-row { display: grid; gap: 8px; margin-bottom: 8px; }
-  .row-5 { grid-template-columns: repeat(5, 1fr); }
-  .row-4 { grid-template-columns: repeat(4, 1fr); }
-  .row-3 { grid-template-columns: repeat(3, 1fr); }
-  .row-2 { grid-template-columns: repeat(2, 1fr); }
-  .row-2-1 { grid-template-columns: 2fr 1fr; }
-  .row-1-2 { grid-template-columns: 1fr 2fr; }
-  .row-3-2 { grid-template-columns: 3fr 2fr; }
-  .card {
-    background: rgba(6, 14, 11, 0.78);
-    border: 1px solid var(--card-border);
-    border-radius: 8px;
-    padding: 8px 10px;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    backdrop-filter: blur(14px) saturate(1.4);
-    -webkit-backdrop-filter: blur(14px) saturate(1.4);
-  }
-  .card:hover { border-color: rgba(0,220,140,0.32); box-shadow: 0 0 16px rgba(0,220,140,0.07), inset 0 0 20px rgba(0,220,140,0.02); }
-  .card-title {
-    font-family: var(--font-display); font-size: 8px; font-weight: 600;
-    letter-spacing: 2px; text-transform: uppercase; color: var(--teal-dim);
-    margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
-  }
-  .card-title-left { display: flex; align-items: center; gap: 6px; }
-  .card-title .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 5px var(--teal-glow); flex-shrink: 0; }
-  .stats-grid { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
-  .stat-block { text-align: center; min-width: 40px; }
-  .stat-num { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--teal-bright); text-shadow: 0 0 10px var(--teal-glow); line-height: 1.1; }
-  .stat-num.dim { color: var(--teal-dim); text-shadow: none; font-size: 14px; }
-  .stat-num.warn { color: var(--yellow); text-shadow: 0 0 10px rgba(255,204,68,0.4); }
-  .stat-num.danger { color: var(--red); text-shadow: 0 0 10px rgba(255,68,102,0.4); }
-  .stat-num.blue { color: var(--blue); text-shadow: 0 0 10px rgba(68,170,255,0.4); }
-  .stat-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }
-  .status-pill { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
-  .pill-online { background: rgba(0,220,140,0.12); color: var(--teal); border: 1px solid rgba(0,220,140,0.3); }
-  .pill-offline { background: rgba(255,68,102,0.1); color: var(--red); border: 1px solid rgba(255,68,102,0.25); }
-  .pill-degraded { background: rgba(255,204,68,0.1); color: var(--yellow); border: 1px solid rgba(255,204,68,0.25); }
-  .progress-wrap { margin-top: 5px; }
-  .progress-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); margin-bottom: 2px; }
-  .progress-bar { height: 3px; background: rgba(0,220,140,0.1); border-radius: 2px; overflow: hidden; }
-  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal-bright)); border-radius: 2px; box-shadow: 0 0 5px var(--teal-glow); transition: width 1s ease; }
-  .progress-fill.warn { background: linear-gradient(90deg, #cc8800, var(--yellow)); }
-  .progress-fill.danger { background: linear-gradient(90deg, #cc2244, var(--red)); }
-  .service-header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
-  .service-icon { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
-  .service-name { font-family: var(--font-display); font-size: 9px; font-weight: 600; color: var(--text-bright); letter-spacing: 1px; flex: 1; }
-  .service-version { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); }
-  .sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; font-family: var(--font-mono); font-size: 10px; }
-  .sys-row { display: flex; justify-content: space-between; padding: 1px 0; }
-  .sys-key { color: var(--text-dim); }
-  .sys-val { color: var(--teal); }
-  .disk-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
-  .disk-name { font-family: var(--font-display); font-size: 9px; color: var(--text-bright); letter-spacing: 1px; }
-  .disk-usage { font-family: var(--font-mono); font-size: 9px; color: var(--teal); }
-  .disk-sub { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); margin-bottom: 4px; }
-  .scrutiny-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-family: var(--font-mono); font-size: 9px; border-bottom: 1px solid rgba(0,220,140,0.05); }
-  .scrutiny-row:last-child { border-bottom: none; }
-  .disk-icon { font-size: 10px; font-weight: bold; width: 12px; text-align: center; }
-  .disk-ok { color: var(--teal); }
-  .disk-fail { color: var(--red); }
-  .disk-unk { color: var(--text-dim); }
-  .disk-name-col { flex: 1; color: var(--text-bright); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .disk-model { color: var(--text-dim); font-size: 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .disk-temp { color: var(--teal-dim); font-size: 8px; white-space: nowrap; }
-  .scrutiny-offline { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); padding: 4px 0; }
-  .uk-monitor-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
-  .uk-monitor-name { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); min-width: 70px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .uk-bar { display: flex; gap: 1px; flex: 1; }
-  .hb-seg { height: 7px; flex: 1; border-radius: 1px; }
-  .hb-up { background: var(--teal); box-shadow: 0 0 3px var(--teal-glow); opacity: 0.85; }
-  .hb-down { background: var(--red); box-shadow: 0 0 3px rgba(255,68,102,0.4); opacity: 0.85; }
-  .uk-down-name { display: block; font-family: var(--font-mono); font-size: 8px; color: var(--red); padding: 1px 0; }
-  .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
-  .dot-ok { background: var(--teal); box-shadow: 0 0 5px var(--teal-glow); }
-  .dot-err { background: var(--red); box-shadow: 0 0 5px rgba(255,68,102,0.4); }
-  .dot-unk { background: var(--text-dim); }
-  .adguard-bar-wrap { margin-top: 5px; }
-  .adguard-bar { height: 3px; background: rgba(0,220,140,0.1); border-radius: 2px; overflow: hidden; position: relative; }
-  .adguard-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal-bright)); border-radius: 2px; box-shadow: 0 0 5px var(--teal-glow); width: 0%; transition: width 1s ease; }
-  .net-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-  #quick-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
-  .quick-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; background: rgba(6, 14, 11, 0.72); border: 1px solid var(--card-border); border-radius: 7px; cursor: pointer; transition: all 0.18s; text-decoration: none; color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
-  .quick-tile:hover { border-color: rgba(0,220,140,0.4); background: rgba(0,220,140,0.05); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,220,140,0.10); }
-  .quick-tile-icon { font-size: 18px; line-height: 1; }
-  .quick-tile-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-align: center; line-height: 1.2; }
-  .quick-tile:hover .quick-tile-label { color: var(--teal); }
-  .docker-row { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 9px; margin-top: 4px; flex-wrap: wrap; }
-  .docker-chip { padding: 2px 6px; border-radius: 3px; background: rgba(0,220,140,0.07); border: 1px solid rgba(0,220,140,0.15); color: var(--teal-dim); }
-  .docker-chip.running { color: var(--teal); border-color: rgba(0,220,140,0.3); }
-  .docker-chip.stopped { color: var(--yellow); border-color: rgba(255,204,68,0.3); background: rgba(255,204,68,0.06); }
-  .docker-chip.unhealthy { color: var(--red); border-color: rgba(255,68,102,0.3); background: rgba(255,68,102,0.06); }
-  @media (max-width: 1100px) {
-    .row-5 { grid-template-columns: repeat(3, 1fr); }
-    .row-4 { grid-template-columns: repeat(2, 1fr); }
-  }
-  @media (max-width: 780px) {
-    .row-5, .row-4, .row-3 { grid-template-columns: repeat(2, 1fr); }
-    .row-2, .row-2-1, .row-1-2, .row-3-2 { grid-template-columns: 1fr; }
-    .net-health-grid { grid-template-columns: 1fr; }
-    #quick-access-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
-  }
-</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KalliLab Control Panel</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-0: #040806;
+      --bg-1: #060b09;
+      --bg-2: #08120f;
+      --bg-3: #0d1c18;
+      --panel: rgba(7, 18, 15, 0.68);
+      --panel-strong: rgba(8, 20, 17, 0.82);
+      --panel-soft: rgba(10, 26, 21, 0.54);
+      --panel-border: rgba(0, 220, 140, 0.18);
+      --panel-border-strong: rgba(0, 220, 140, 0.3);
+      --text: #c6e0d8;
+      --text-dim: #7da397;
+      --text-soft: #58766b;
+      --white: #e9fff7;
+      --teal: #00dc8c;
+      --teal-strong: #00ffaa;
+      --teal-deep: #009c66;
+      --green: #67ffb3;
+      --red: #ff5a73;
+      --yellow: #ffca57;
+      --blue: #55b8ff;
+      --blue-soft: #85d5ff;
+      --glow: 0 0 20px rgba(0, 220, 140, 0.18);
+      --glow-strong: 0 0 32px rgba(0, 220, 140, 0.28);
+      --radius-lg: 20px;
+      --radius-md: 14px;
+      --radius-sm: 10px;
+      --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
+      --font-display: "Orbitron", monospace;
+      --font-mono: "Share Tech Mono", monospace;
+      --font-body: "Exo 2", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 14px;
+    }
+
+    body {
+      min-height: 100vh;
+      font-family: var(--font-body);
+      color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(0, 255, 170, 0.12), transparent 28%),
+        radial-gradient(circle at 85% 18%, rgba(0, 220, 140, 0.12), transparent 24%),
+        radial-gradient(circle at 50% 110%, rgba(0, 135, 100, 0.18), transparent 35%),
+        linear-gradient(160deg, rgba(9, 30, 24, 0.86), rgba(3, 8, 6, 0.96)),
+        linear-gradient(180deg, var(--bg-2), var(--bg-0));
+      overflow-x: hidden;
+      position: relative;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      background:
+        linear-gradient(rgba(0, 220, 140, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 220, 140, 0.03) 1px, transparent 1px);
+      background-size: 46px 46px;
+      mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    body::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      background:
+        radial-gradient(circle at 30% 20%, rgba(0, 255, 170, 0.08), transparent 18%),
+        radial-gradient(circle at 80% 28%, rgba(0, 255, 170, 0.05), transparent 24%),
+        linear-gradient(transparent, rgba(0, 0, 0, 0.18));
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .hud-noise,
+    .hud-vignette {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .hud-noise {
+      opacity: 0.08;
+      background-image:
+        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 1px, transparent 0);
+      background-size: 16px 16px;
+      mix-blend-mode: soft-light;
+    }
+
+    .hud-vignette {
+      box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.7);
+    }
+
+    .app-shell {
+      position: relative;
+      z-index: 1;
+      max-width: 1800px;
+      margin: 0 auto;
+      padding: 16px 16px 20px;
+    }
+
+    .top-frame {
+      display: grid;
+      grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.78fr);
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .panel {
+      position: relative;
+      background: linear-gradient(180deg, rgba(10, 23, 20, 0.78), rgba(6, 14, 12, 0.66));
+      border: 1px solid var(--panel-border);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(18px) saturate(1.22);
+      -webkit-backdrop-filter: blur(18px) saturate(1.22);
+      overflow: hidden;
+    }
+
+    .panel::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(130deg, rgba(255, 255, 255, 0.045), transparent 24%),
+        radial-gradient(circle at top right, rgba(0, 255, 170, 0.08), transparent 22%);
+      pointer-events: none;
+    }
+
+    .panel-inner {
+      position: relative;
+      z-index: 1;
+      padding: 18px 20px;
+    }
+
+    .hero {
+      min-height: 192px;
+    }
+
+    .hero-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.95fr);
+      gap: 12px;
+      align-items: stretch;
+    }
+
+    .eyebrow,
+    .section-label,
+    .card-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--font-display);
+      font-size: 11px;
+      letter-spacing: 0.28em;
+      text-transform: uppercase;
+      color: var(--teal);
+    }
+
+    .eyebrow::before,
+    .section-label::before,
+    .card-label::before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--teal-strong);
+      box-shadow: 0 0 14px rgba(0, 255, 170, 0.7);
+    }
+
+    .hero h1 {
+      margin-top: 18px;
+      font-family: var(--font-display);
+      font-size: clamp(2.6rem, 4.4vw, 4.8rem);
+      line-height: 0.90;
+      letter-spacing: 0.06em;
+      color: var(--white);
+      text-shadow: 0 0 36px rgba(0, 255, 170, 0.16);
+    }
+
+    .hero-copy {
+      margin-top: 12px;
+      max-width: 66ch;
+      color: var(--text-dim);
+      font-size: 0.92rem;
+      line-height: 1.42;
+    }
+
+    .hero-meta {
+      margin-top: 18px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .meta-chip {
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(0, 220, 140, 0.2);
+      background: rgba(5, 17, 13, 0.54);
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: 0.72rem;
+      letter-spacing: 0.05em;
+    }
+
+    .status-stack {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      align-content: start;
+    }
+
+    .status-tile {
+      padding: 14px 15px;
+      border-radius: 14px;
+      background: linear-gradient(180deg, rgba(8, 20, 17, 0.84), rgba(5, 14, 11, 0.8));
+      border: 1px solid rgba(0, 220, 140, 0.18);
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), var(--glow);
+    }
+
+    .status-tile strong {
+      display: block;
+      margin-top: 8px;
+      font-family: var(--font-display);
+      font-size: 1.16rem;
+      color: var(--white);
+      letter-spacing: 0.06em;
+    }
+
+    .status-tile span {
+      display: block;
+      margin-top: 5px;
+      color: var(--text-dim);
+      font-size: 0.82rem;
+    }
+
+    .clock-panel {
+      min-height: 156px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .clock-readout {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .clock-time {
+      font-family: var(--font-display);
+      font-size: clamp(2.15rem, 3.2vw, 3.2rem);
+      font-weight: 800;
+      line-height: 0.95;
+      letter-spacing: 0.16em;
+      color: var(--teal-strong);
+      text-shadow: 0 0 26px rgba(0, 255, 170, 0.28);
+    }
+
+    .clock-date,
+    .clock-meta {
+      font-family: var(--font-mono);
+      color: var(--text-dim);
+      font-size: 0.78rem;
+      letter-spacing: 0.08em;
+    }
+
+    .clock-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .mini-cell {
+      border-radius: 12px;
+      padding: 10px 12px;
+      background: rgba(5, 16, 13, 0.7);
+      border: 1px solid rgba(0, 220, 140, 0.12);
+    }
+
+    .mini-cell dt {
+      font-family: var(--font-display);
+      font-size: 0.6rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--text-soft);
+    }
+
+    .mini-cell dd {
+      margin-top: 5px;
+      font-family: var(--font-mono);
+      font-size: 0.88rem;
+      color: var(--white);
+    }
+
+    .section {
+      margin-top: 13px;
+    }
+
+    .section-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      margin-bottom: 8px;
+      padding: 0 4px;
+    }
+
+    .section-head p {
+      color: var(--text-soft);
+      font-family: var(--font-mono);
+      font-size: 0.72rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .stats-grid,
+    .storage-grid,
+    .service-grid,
+    .quick-grid {
+      display: grid;
+      gap: 12px;
+    }
+
+    .stats-grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .storage-grid {
+      grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.2fr);
+    }
+
+    .service-grid {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .quick-grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .net-health-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+      gap: 12px;
+    }
+
+    .card {
+      position: relative;
+      min-height: 168px;
+      background: linear-gradient(180deg, rgba(8, 19, 16, 0.8), rgba(5, 12, 10, 0.76));
+      border: 1px solid rgba(0, 220, 140, 0.16);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
+      backdrop-filter: blur(16px) saturate(1.18);
+      -webkit-backdrop-filter: blur(16px) saturate(1.18);
+    }
+
+    .card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 24%),
+        radial-gradient(circle at 100% 0, rgba(0, 255, 170, 0.08), transparent 28%);
+      pointer-events: none;
+    }
+
+    .card:hover {
+      border-color: var(--panel-border-strong);
+      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), var(--glow-strong);
+    }
+
+    .card-inner {
+      position: relative;
+      z-index: 1;
+      height: 100%;
+      padding: 18px 20px 20px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-head {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      gap: 14px;
+    }
+
+    .signal {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      box-shadow: 0 0 16px currentColor;
+      flex: 0 0 auto;
+      margin-top: 4px;
+    }
+
+    .signal.online { color: var(--teal-strong); background: var(--teal-strong); }
+    .signal.warning { color: var(--yellow); background: var(--yellow); }
+    .signal.offline { color: var(--red); background: var(--red); }
+    .signal.info { color: var(--blue-soft); background: var(--blue-soft); }
+
+    .card-title {
+      margin-top: 11px;
+      font-family: var(--font-display);
+      font-size: 1.04rem;
+      line-height: 1.1;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--white);
+    }
+
+    .card-value {
+      margin-top: auto;
+      font-family: var(--font-display);
+      font-size: clamp(2.3rem, 3.1vw, 3.2rem);
+      line-height: 0.95;
+      letter-spacing: 0.06em;
+      color: var(--teal-strong);
+      text-shadow: 0 0 22px rgba(0, 255, 170, 0.18);
+    }
+
+    .value-online {
+      color: var(--green);
+      text-shadow: 0 0 22px rgba(103, 255, 179, 0.18);
+    }
+
+    .value-warning {
+      color: var(--yellow);
+      text-shadow: 0 0 22px rgba(255, 202, 87, 0.16);
+    }
+
+    .value-danger {
+      color: var(--red);
+      text-shadow: 0 0 22px rgba(255, 90, 115, 0.16);
+    }
+
+    .value-info {
+      color: var(--blue-soft);
+      text-shadow: 0 0 22px rgba(85, 184, 255, 0.16);
+    }
+
+    .card-subvalue {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      color: var(--text-dim);
+      font-family: var(--font-mono);
+      font-size: 0.76rem;
+      letter-spacing: 0.05em;
+    }
+
+    .metric-accent {
+      color: var(--white);
+    }
+
+    .metric-accent.online {
+      color: var(--green);
+    }
+
+    .metric-accent.warning {
+      color: var(--yellow);
+    }
+
+    .metric-accent.danger {
+      color: var(--red);
+    }
+
+    .metric-accent.info {
+      color: var(--blue-soft);
+    }
+
+    .metric-bar {
+      margin-top: 14px;
+      height: 7px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.05);
+      overflow: hidden;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .metric-bar > span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--teal-deep), var(--teal-strong));
+      box-shadow: 0 0 18px rgba(0, 255, 170, 0.28);
+    }
+
+    .metric-bar.warning > span {
+      background: linear-gradient(90deg, #b88d2a, var(--yellow));
+      box-shadow: 0 0 18px rgba(255, 202, 87, 0.25);
+    }
+
+    .metric-bar.danger > span {
+      background: linear-gradient(90deg, #b93d58, var(--red));
+      box-shadow: 0 0 18px rgba(255, 90, 115, 0.24);
+    }
+
+    .metric-bar.info > span {
+      background: linear-gradient(90deg, #2679c6, var(--blue-soft));
+      box-shadow: 0 0 18px rgba(85, 184, 255, 0.22);
+    }
+
+    .root-card .card-value {
+      font-size: clamp(2.6rem, 3.4vw, 3.6rem);
+    }
+
+    .storage-list {
+      margin-top: 12px;
+      display: grid;
+      gap: 9px;
+    }
+
+    .storage-row {
+      display: grid;
+      grid-template-columns: minmax(110px, 140px) minmax(70px, 90px) 1fr minmax(70px, 80px);
+      gap: 12px;
+      align-items: center;
+      padding: 9px 11px;
+      border-radius: 12px;
+      background: rgba(5, 16, 13, 0.6);
+      border: 1px solid rgba(0, 220, 140, 0.11);
+      font-family: var(--font-mono);
+    }
+
+    .storage-row strong {
+      color: var(--white);
+      font-size: 0.84rem;
+      letter-spacing: 0.05em;
+    }
+
+    .storage-row span {
+      color: var(--text-dim);
+      font-size: 0.74rem;
+    }
+
+    .storage-row .status-pill {
+      justify-self: end;
+    }
+
+    .service-card {
+      min-height: 196px;
+    }
+
+    .service-card.primary {
+      grid-column: span 2;
+    }
+
+    .service-card.secondary {
+      grid-column: span 2;
+    }
+
+    .service-card.standard {
+      grid-column: span 2;
+    }
+
+    .service-card .card-copy {
+      margin-top: 10px;
+      color: var(--text-dim);
+      line-height: 1.42;
+      font-size: 0.82rem;
+    }
+
+    .service-meta {
+      margin-top: auto;
+      display: grid;
+      gap: 7px;
+      padding-top: 12px;
+    }
+
+    .service-meta-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      font-family: var(--font-mono);
+      font-size: 0.74rem;
+      color: var(--text-dim);
+    }
+
+    .service-meta-row strong {
+      color: var(--white);
+      font-weight: 400;
+    }
+
+    .service-meta-row strong.online {
+      color: var(--green);
+    }
+
+    .service-meta-row strong.warning {
+      color: var(--yellow);
+    }
+
+    .service-meta-row strong.offline {
+      color: var(--red);
+    }
+
+    .service-meta-row strong.info {
+      color: var(--blue-soft);
+    }
+
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 8px;
+      border-radius: 999px;
+      background: rgba(7, 18, 15, 0.78);
+      border: 1px solid rgba(0, 220, 140, 0.14);
+      font-family: var(--font-display);
+      font-size: 0.58rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--text);
+    }
+
+    .status-pill::before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: currentColor;
+      box-shadow: 0 0 14px currentColor;
+    }
+
+    .status-pill.online {
+      color: var(--teal-strong);
+    }
+
+    .status-pill.warning {
+      color: var(--yellow);
+    }
+
+    .status-pill.offline {
+      color: var(--red);
+    }
+
+    .status-pill.info {
+      color: var(--blue-soft);
+    }
+
+    .quick-card {
+      min-height: 98px;
+    }
+
+    .quick-card a {
+      margin-top: auto;
+      text-decoration: none;
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      padding: 8px 10px;
+      border-radius: 12px;
+      border: 1px solid rgba(0, 220, 140, 0.12);
+      background: rgba(4, 12, 10, 0.55);
+      font-family: var(--font-mono);
+      font-size: 0.74rem;
+      letter-spacing: 0.05em;
+    }
+
+    .quick-card .card-title {
+      font-size: 0.94rem;
+      margin-top: 9px;
+    }
+
+    .quick-card a span:last-child {
+      color: var(--teal-strong);
+    }
+
+    .section:last-of-type {
+      margin-top: 32px;
+    }
+
+    .footer-note {
+      margin-top: 12px;
+      padding: 0 4px;
+      color: var(--text-soft);
+      font-family: var(--font-mono);
+      font-size: 0.68rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    .api-error {
+      color: var(--yellow);
+    }
+
+    @media (max-width: 1220px) {
+      .top-frame,
+      .hero-grid,
+      .storage-grid,
+      .net-health-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .stats-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .quick-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .status-stack {
+        grid-template-columns: 1fr;
+      }
+
+      .clock-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .service-card.primary,
+      .service-card.secondary,
+      .service-card.standard {
+        grid-column: span 2;
+      }
+    }
+
+    @media (max-width: 860px) {
+      .app-shell {
+        padding: 16px 14px 26px;
+      }
+
+      .stats-grid,
+      .quick-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .service-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .service-card.primary,
+      .service-card.secondary,
+      .service-card.standard {
+        grid-column: span 1;
+      }
+
+      .storage-row {
+        grid-template-columns: 1fr;
+      }
+
+      .clock-grid {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .status-stack {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
 </head>
 <body>
-<div class="scanline"></div>
-<div class="wrapper">
+  <div class="hud-noise"></div>
+  <div class="hud-vignette"></div>
 
-  <!-- HEADER -->
-  <header class="header" id="header">
-    <div class="header-logo">
-      <div>
-        <div class="logo-text">KALLILAB</div>
-        <div class="logo-sub">Control Panel</div>
-      </div>
-    </div>
-    <div class="header-center">
-      <div class="overall-status">SYSTEM STATUS</div>
-      <div class="status-indicator">
-        <span class="status-dot-main" id="overall-dot"></span>
-        <span id="overall-status-text">LOADING</span>
-      </div>
-    </div>
-    <div class="header-right">
-      <div class="clock" id="clock">--:--:--</div>
-      <div class="date-str" id="date-str">---</div>
-      <div id="last-updated">never updated</div>
-    </div>
-  </header>
+  <main class="app-shell">
+    <section class="top-frame">
+      <article class="panel hero">
+        <div class="panel-inner hero-grid">
+          <div>
+            <span class="eyebrow">Homelab Command Surface</span>
+            <h1>KALLILAB<br>CONTROL PANEL</h1>
+            <p class="hero-copy" id="hero-copy">
+              Eigenstaendiges MVP-v1 Frontend-Mockup mit voller visueller Praesenz:
+              atmosphaerischer Dark-Tech-Look, neon teal Highlights, technische Typografie,
+              Glass Panels und dichte Control-Surface-Stimmung.
+            </p>
+            <div class="hero-meta">
+              <span class="meta-chip">MVP-V1 SCOPE LOCKED</span>
+              <span class="meta-chip">FASTAPI AGGREGATOR READY</span>
+              <span class="meta-chip">VANILLA JS FRONTEND</span>
+            </div>
+          </div>
 
-  <!-- SYSTEM STATS ROW -->
-  <div class="section-header"><span>&#x2B21;</span> SYSTEM</div>
-  <div class="widget-row row-5" id="stats-row" style="margin-bottom:8px;">
-    <div class="card">
-      <div class="card-title"><span class="dot"></span>CPU</div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="cpu-percent">&#x2014;</div><div class="stat-label">Usage %</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="cpu-cores">&#x2014;</div><div class="stat-label">Cores</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="cpu-load">&#x2014;</div><div class="stat-label">Load 5m</div></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title"><span class="dot"></span>MEMORY</div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="ram-percent">&#x2014;</div><div class="stat-label">Usage %</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="ram-used">&#x2014;</div><div class="stat-label">Used GB</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="ram-total">&#x2014;</div><div class="stat-label">Total GB</div></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title"><span class="dot"></span>NETWORK</div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="net-rx">&#x2014;</div><div class="stat-label">&#x2193; Mbps</div></div>
-        <div class="stat-block"><div class="stat-num" id="net-tx">&#x2014;</div><div class="stat-label">&#x2191; Mbps</div></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title"><span class="dot"></span>HOST</div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="uptime-days">&#x2014;</div><div class="stat-label">Uptime d</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="host-platform">&#x2014;</div><div class="stat-label">OS</div></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title"><span class="dot"></span>DOCKER</div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="docker-running">&#x2014;</div><div class="stat-label">Running</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="docker-stopped">&#x2014;</div><div class="stat-label">Stopped</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="docker-total">&#x2014;</div><div class="stat-label">Total</div></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- STORAGE + SCRUTINY ROW -->
-  <div class="section-header"><span>&#x2B21;</span> STORAGE &amp; HEALTH</div>
-  <div style="display:grid; grid-template-columns: 1fr 280px; gap:8px; margin-bottom:8px;">
-    <div>
-      <div class="widget-row row-3" id="storage-grid">
-        <!-- Disk cards injected by renderer -->
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left"><span class="dot"></span>SCRUTINY</div>
-        <span class="status-pill pill-offline" id="scrutiny-pill">OFFLINE</span>
-      </div>
-      <div class="stats-grid" style="margin-bottom:5px;">
-        <div class="stat-block"><div class="stat-num" id="scrutiny-total">&#x2014;</div><div class="stat-label">Disks</div></div>
-        <div class="stat-block"><div class="stat-num" id="scrutiny-passed">&#x2014;</div><div class="stat-label">Passed</div></div>
-        <div class="stat-block"><div class="stat-num danger" id="scrutiny-failed">&#x2014;</div><div class="stat-label">Failed</div></div>
-      </div>
-      <div id="scrutiny-list"></div>
-    </div>
-  </div>
-
-  <!-- SERVICE WIDGETS ROW 1 -->
-  <div class="section-header"><span>&#x2B21;</span> SERVICES</div>
-  <div class="widget-row row-3" style="margin-bottom:8px;">
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left">
-          <span class="service-icon" style="background:rgba(65,105,225,0.15);">&#x1F3E0;</span>
-          <span class="service-name">HOME ASSISTANT</span>
+          <div class="status-stack">
+            <div class="status-tile" id="overall-status-tile">
+              <span class="card-label">Overall Cluster State</span>
+              <strong id="overall-status-label">NOMINAL</strong>
+              <span id="overall-status-summary">8 Services online, 2 degraded, 1 offline</span>
+            </div>
+            <div class="status-tile" id="home-assistant-tile">
+              <span class="card-label">Home Assistant</span>
+              <strong id="ha-status-label">ONLINE</strong>
+              <span id="ha-status-summary">Basisstatus aktiv, API-Mapping fuer MVP vorbereitet</span>
+            </div>
+          </div>
         </div>
-        <span class="status-pill pill-offline" id="ha-pill">OFFLINE</span>
-      </div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="ha-lights">&#x2014;</div><div class="stat-label">Lights</div></div>
-        <div class="stat-block"><div class="stat-num" id="ha-climate">&#x2014;</div><div class="stat-label">Climate</div></div>
-        <div class="stat-block"><div class="stat-num" id="ha-doors">&#x2014;</div><div class="stat-label">Doors</div></div>
-        <div class="stat-block"><div class="stat-num danger" id="ha-alerts">&#x2014;</div><div class="stat-label">Alerts</div></div>
-      </div>
-      <div style="margin-top:4px; font-family:var(--font-mono); font-size:8px; color:var(--text-dim);" id="ha-version"></div>
-    </div>
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left">
-          <span class="service-icon" style="background:rgba(0,220,140,0.12);">&#x1F43B;</span>
-          <span class="service-name">UPTIME KUMA</span>
-        </div>
-        <span class="status-pill pill-offline" id="uk-pill">OFFLINE</span>
-      </div>
-      <div class="stats-grid" style="margin-bottom:5px;">
-        <div class="stat-block"><div class="stat-num" id="uk-up">&#x2014;</div><div class="stat-label">Up</div></div>
-        <div class="stat-block"><div class="stat-num danger" id="uk-down">&#x2014;</div><div class="stat-label">Down</div></div>
-        <div class="stat-block"><div class="stat-num" id="uk-uptime">&#x2014;</div><div class="stat-label">24h %</div></div>
-      </div>
-      <div id="uk-down-list"></div>
-      <div id="uk-bars"></div>
-    </div>
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left">
-          <span class="service-icon" style="background:rgba(255,204,68,0.12);">&#x1F4F7;</span>
-          <span class="service-name">IMMICH</span>
-        </div>
-        <span class="status-pill pill-offline" id="immich-pill">OFFLINE</span>
-      </div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="immich-photos">&#x2014;</div><div class="stat-label">Photos</div></div>
-        <div class="stat-block"><div class="stat-num" id="immich-videos">&#x2014;</div><div class="stat-label">Videos</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="immich-storage">&#x2014;</div><div class="stat-label">Storage</div></div>
-      </div>
-    </div>
-  </div>
+      </article>
 
-  <!-- SERVICE WIDGETS ROW 2 -->
-  <div class="widget-row row-3" style="margin-bottom:8px;">
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left">
-          <span class="service-icon" style="background:rgba(68,170,255,0.12);">&#x1F4BE;</span>
-          <span class="service-name">BACKREST</span>
-          <span class="status-dot dot-unk" id="backrest-status-dot" title="unknown"></span>
+      <aside class="panel clock-panel">
+        <div class="panel-inner">
+          <span class="eyebrow">Local Time Sync</span>
+          <div class="clock-readout">
+            <div class="clock-time" id="clock-time">00:00</div>
+            <div class="clock-date" id="clock-date">SAMSTAG / 04 APR 2026</div>
+            <div class="clock-meta" id="last-refresh">LAST RENDER 12:00:00 CET</div>
+          </div>
+
+          <dl class="clock-grid">
+            <div class="mini-cell">
+              <dt>Mode</dt>
+              <dd>CONTROL</dd>
+            </div>
+            <div class="mini-cell">
+              <dt>Refresh</dt>
+              <dd>15 SEC</dd>
+            </div>
+            <div class="mini-cell">
+              <dt>Theme</dt>
+              <dd>ATMOS DARK</dd>
+            </div>
+            <div class="mini-cell">
+              <dt>Profile</dt>
+              <dd>MVP-V1</dd>
+            </div>
+          </dl>
         </div>
-        <span class="status-pill pill-offline" id="backrest-pill">OFFLINE</span>
+      </aside>
+    </section>
+
+    <section class="section">
+      <div class="section-head">
+        <span class="section-label">System Stats</span>
+        <p>Beszel-backed host telemetry</p>
       </div>
+
       <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num dim" id="backrest-last">&#x2014;</div><div class="stat-label">Last Backup</div></div>
-        <div class="stat-block"><div class="stat-num" id="backrest-repos">&#x2014;</div><div class="stat-label">Repos</div></div>
-        <div class="stat-block"><div class="stat-num danger" id="backrest-errors">&#x2014;</div><div class="stat-label">Errors</div></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left">
-          <span class="service-icon" style="background:rgba(0,220,140,0.12);">&#x1F6E1;&#xFE0F;</span>
-          <span class="service-name">ADGUARD DNS</span>
-        </div>
-        <span class="status-pill pill-offline" id="adguard-pill">OFFLINE</span>
-      </div>
-      <div class="stats-grid" style="margin-bottom:5px;">
-        <div class="stat-block"><div class="stat-num" id="adguard-total">&#x2014;</div><div class="stat-label">Queries</div></div>
-        <div class="stat-block"><div class="stat-num" id="adguard-blocked">&#x2014;</div><div class="stat-label">Blocked</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="adguard-blocked-pct">&#x2014;</div><div class="stat-label">Block %</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="adguard-latency">&#x2014;</div><div class="stat-label">Latency</div></div>
-      </div>
-      <div class="adguard-bar-wrap"><div class="adguard-bar"><div class="adguard-bar-fill" id="adguard-bar-fill"></div></div></div>
-    </div>
-    <div class="card">
-      <div class="card-title">
-        <div class="card-title-left"><span class="dot"></span>SERVICES OVERVIEW</div>
-        <span class="status-pill pill-offline" id="services-pill">&#x2014;</span>
-      </div>
-      <div class="stats-grid">
-        <div class="stat-block"><div class="stat-num" id="svc-online">&#x2014;</div><div class="stat-label">Online</div></div>
-        <div class="stat-block"><div class="stat-num warn" id="svc-degraded">&#x2014;</div><div class="stat-label">Degraded</div></div>
-        <div class="stat-block"><div class="stat-num danger" id="svc-offline">&#x2014;</div><div class="stat-label">Offline</div></div>
-        <div class="stat-block"><div class="stat-num dim" id="svc-total">&#x2014;</div><div class="stat-label">Total</div></div>
-      </div>
-    </div>
-  </div>
+        <article class="card" id="cpu-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">CPU</span>
+              <span class="signal online" id="cpu-signal"></span>
+            </div>
+            <h2 class="card-title">Compute Load</h2>
+            <div class="card-value value-online" id="cpu-value">23%</div>
+            <div class="card-subvalue" id="cpu-subvalue">
+              <span><span class="metric-accent online" id="cpu-cores">8 CORES</span> ACTIVE</span>
+              <span><span class="metric-accent info">L1</span> <span id="cpu-load">0.82</span></span>
+            </div>
+            <div class="metric-bar" id="cpu-bar"><span id="cpu-bar-fill" style="width:23%"></span></div>
+          </div>
+        </article>
 
-  <!-- QUICK ACCESS -->
-  <div class="section-header"><span>&#x2B21;</span> QUICK ACCESS</div>
-  <div id="quick-access-grid"></div>
+        <article class="card" id="ram-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">RAM</span>
+              <span class="signal warning" id="ram-signal"></span>
+            </div>
+            <h2 class="card-title">Memory Pressure</h2>
+            <div class="card-value value-warning" id="ram-value">61%</div>
+            <div class="card-subvalue" id="ram-subvalue">
+              <span><span class="metric-accent warning" id="ram-used">19.6 GB</span> USED</span>
+              <span><span class="metric-accent info" id="ram-free">12.4 GB</span> FREE</span>
+            </div>
+            <div class="metric-bar warning" id="ram-bar"><span id="ram-bar-fill" style="width:61%"></span></div>
+          </div>
+        </article>
 
-</div><!-- /wrapper -->
+        <article class="card" id="network-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Network</span>
+              <span class="signal info" id="network-signal"></span>
+            </div>
+            <h2 class="card-title">Traffic Flow</h2>
+            <div class="card-value value-info" id="network-value">12.4</div>
+            <div class="card-subvalue" id="network-subvalue">
+              <span><span class="metric-accent info">RX</span> MBPS</span>
+              <span><span class="metric-accent online">TX</span> <span id="network-tx">3.1 MBPS</span></span>
+            </div>
+            <div class="metric-bar info" id="network-bar"><span id="network-bar-fill" style="width:48%"></span></div>
+          </div>
+        </article>
 
-<script type="module" src="/assets/js/app.js"></script>
-<script>
-  // Clock
-  function updateClock() {
-    const now = new Date();
-    const pad = n => String(n).padStart(2, '0');
-    document.getElementById('clock').textContent =
-      `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
-    document.getElementById('date-str').textContent =
-      now.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' });
-  }
-  updateClock();
-  setInterval(updateClock, 1000);
-</script>
+        <article class="card" id="uptime-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Uptime</span>
+              <span class="signal online" id="uptime-signal"></span>
+            </div>
+            <h2 class="card-title">Host Runtime</h2>
+            <div class="card-value value-online" id="uptime-value">10D</div>
+            <div class="card-subvalue" id="uptime-subvalue">
+              <span><span class="metric-accent info">NODE</span> <span id="uptime-host">HOMELAB-01</span></span>
+              <span><span class="metric-accent online" id="uptime-hours">240</span> HRS</span>
+            </div>
+            <div class="metric-bar" id="uptime-bar"><span id="uptime-bar-fill" style="width:84%"></span></div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head">
+        <span class="section-label">Storage</span>
+        <p>Root capacity plus disk overview</p>
+      </div>
+
+      <div class="storage-grid">
+        <article class="card root-card" id="root-storage-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Root Storage</span>
+              <span class="status-pill online" id="root-storage-pill">Stable</span>
+            </div>
+            <h2 class="card-title">Primary Volume</h2>
+            <div class="card-value value-online" id="root-storage-value">48.7%</div>
+            <div class="card-subvalue" id="root-storage-subvalue">
+              <span><span class="metric-accent warning" id="root-storage-used">233.8 GB</span> USED</span>
+              <span><span class="metric-accent info" id="root-storage-free">246.2 GB</span> FREE</span>
+            </div>
+            <div class="metric-bar" id="root-storage-bar"><span id="root-storage-bar-fill" style="width:49%"></span></div>
+          </div>
+        </article>
+
+        <article class="card" id="disk-matrix-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Disk Matrix</span>
+              <span class="signal warning" id="disk-matrix-signal"></span>
+            </div>
+            <h2 class="card-title">Mounted Volumes</h2>
+            <div class="storage-list" id="storage-list">
+              <div class="storage-row">
+                <strong>rootfs</strong>
+                <span>/</span>
+                <div class="metric-bar"><span style="width:49%"></span></div>
+                <span class="status-pill online">49%</span>
+              </div>
+              <div class="storage-row">
+                <strong>data</strong>
+                <span>/data</span>
+                <div class="metric-bar warning"><span style="width:71%"></span></div>
+                <span class="status-pill warning">71%</span>
+              </div>
+              <div class="storage-row">
+                <strong>backup</strong>
+                <span>/backup</span>
+                <div class="metric-bar info"><span style="width:10%"></span></div>
+                <span class="status-pill online">10%</span>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head">
+        <span class="section-label">Service Grid</span>
+        <p>Core runtime and monitored services</p>
+      </div>
+
+      <div class="service-grid" id="service-grid">
+        <article class="card service-card primary">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Docker Summary</span>
+              <span class="status-pill online" id="docker-summary-pill">Online</span>
+            </div>
+            <h2 class="card-title">Container Runtime</h2>
+            <p class="card-copy">Secure proxy-backed Docker state for the MVP service layer.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Running</span><strong class="online" id="docker-running">18</strong></div>
+              <div class="service-meta-row"><span>Stopped</span><strong class="offline" id="docker-stopped">2</strong></div>
+              <div class="service-meta-row"><span>Unhealthy</span><strong class="warning" id="docker-unhealthy">1</strong></div>
+            </div>
+          </div>
+        </article>
+
+        <article class="card service-card primary">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Uptime Kuma</span>
+              <span class="status-pill online" id="kuma-summary-pill">Synced</span>
+            </div>
+            <h2 class="card-title">Monitor Surface</h2>
+            <p class="card-copy">Availability layer for service health, latency and incident signals.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Monitors Up</span><strong class="online" id="kuma-up">8</strong></div>
+              <div class="service-meta-row"><span>Monitors Down</span><strong class="offline" id="kuma-down">1</strong></div>
+              <div class="service-meta-row"><span>Paused</span><strong class="warning" id="kuma-paused">1</strong></div>
+            </div>
+          </div>
+        </article>
+
+        <article class="card service-card primary">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Home Assistant</span>
+              <span class="status-pill online" id="service-ha-pill">Reachable</span>
+            </div>
+            <h2 class="card-title">Core Automation Hub</h2>
+            <p class="card-copy">MVP scope limited to online and basis status, no entity rendering yet.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Version</span><strong class="info" id="service-ha-version">2026.3.4</strong></div>
+              <div class="service-meta-row"><span>Latency</span><strong class="online" id="service-ha-latency">142 MS</strong></div>
+              <div class="service-meta-row"><span>Last Check</span><strong id="service-ha-last-check">11:59:58</strong></div>
+            </div>
+          </div>
+        </article>
+
+        <article class="card service-card secondary" id="service-card-fallback-1">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Immich</span>
+              <span class="status-pill warning">Degraded</span>
+            </div>
+            <h2 class="card-title">Photo Pipeline</h2>
+            <p class="card-copy">Container active, response times elevated beyond nominal threshold.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Latency</span><strong class="warning">821 MS</strong></div>
+              <div class="service-meta-row"><span>Docker</span><strong class="online">RUNNING</strong></div>
+            </div>
+          </div>
+        </article>
+
+        <article class="card service-card secondary" id="service-card-fallback-2">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Gitea</span>
+              <span class="status-pill online">Healthy</span>
+            </div>
+            <h2 class="card-title">Git Platform</h2>
+            <p class="card-copy">Service healthy across monitor and container state layers.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Latency</span><strong class="online">98 MS</strong></div>
+              <div class="service-meta-row"><span>Docker</span><strong class="online">RUNNING</strong></div>
+            </div>
+          </div>
+        </article>
+
+        <article class="card service-card secondary" id="service-card-fallback-3">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">AdGuard</span>
+              <span class="status-pill offline">Offline</span>
+            </div>
+            <h2 class="card-title">DNS Layer</h2>
+            <p class="card-copy">Placeholder service card within MVP grid and future optional adapter set.</p>
+            <div class="service-meta">
+              <div class="service-meta-row"><span>Latency</span><strong class="offline">N/A</strong></div>
+              <div class="service-meta-row"><span>Docker</span><strong class="offline">STOPPED</strong></div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head">
+        <span class="section-label">Network &amp; Health</span>
+        <p>AdGuard DNS stats · Scrutiny SMART disk health</p>
+      </div>
+
+      <div class="net-health-grid">
+        <article class="card" id="adguard-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">AdGuard Home</span>
+              <span class="status-pill offline" id="adguard-pill">Offline</span>
+            </div>
+            <h2 class="card-title">DNS Filter Layer</h2>
+            <div class="card-subvalue" style="margin-top:14px">
+              <span>Total Queries</span>
+              <strong class="metric-accent" id="adguard-total">0</strong>
+            </div>
+            <div class="card-subvalue" style="margin-top:8px">
+              <span>Blocked &nbsp;<span id="adguard-blocked-pct" class="metric-accent online">0%</span></span>
+              <strong class="metric-accent online" id="adguard-blocked">0</strong>
+            </div>
+            <div class="metric-bar" id="adguard-bar" style="margin-top:14px">
+              <span id="adguard-bar-fill" style="width:0%"></span>
+            </div>
+            <div class="card-subvalue" style="margin-top:10px">
+              <span>Avg. Processing</span>
+              <strong class="metric-accent online" id="adguard-latency">N/A</strong>
+            </div>
+          </div>
+        </article>
+
+        <article class="card" id="scrutiny-card">
+          <div class="card-inner">
+            <div class="card-head">
+              <span class="card-label">Scrutiny</span>
+              <span class="status-pill offline" id="scrutiny-pill">Offline</span>
+            </div>
+            <h2 class="card-title">Disk SMART Health</h2>
+            <div class="storage-list" id="scrutiny-list" style="margin-top:14px">
+              <div class="storage-row">
+                <strong style="color:var(--text-dim)">Loading…</strong>
+                <span>—</span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head">
+        <span class="section-label">Quick Access</span>
+        <p>Supplemental launch surface only</p>
+      </div>
+
+      <div class="quick-grid" id="quick-grid">
+        <article class="card quick-card">
+          <div class="card-inner">
+            <span class="card-label">Core</span>
+            <h2 class="card-title">Home Assistant</h2>
+            <a href="#"><span>OPEN CONTROL HUB</span><span>&gt;</span></a>
+          </div>
+        </article>
+
+        <article class="card quick-card">
+          <div class="card-inner">
+            <span class="card-label">Ops</span>
+            <h2 class="card-title">Uptime Kuma</h2>
+            <a href="#"><span>OPEN MONITORS</span><span>&gt;</span></a>
+          </div>
+        </article>
+
+        <article class="card quick-card">
+          <div class="card-inner">
+            <span class="card-label">Containers</span>
+            <h2 class="card-title">Portainer</h2>
+            <a href="#"><span>OPEN RUNTIME</span><span>&gt;</span></a>
+          </div>
+        </article>
+
+        <article class="card quick-card">
+          <div class="card-inner">
+            <span class="card-label">Media</span>
+            <h2 class="card-title">Immich</h2>
+            <a href="#"><span>OPEN GALLERY</span><span>&gt;</span></a>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <div class="footer-note" id="footer-note">Live dashboard connected to aggregator API.</div>
+  </main>
+
+  <script type="module" src="./assets/js/app.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
