diff --git a/backup-monitor/templates/index.html b/backup-monitor/templates/index.html
index 6eb279d..8a8a2e4 100644
--- a/backup-monitor/templates/index.html
+++ b/backup-monitor/templates/index.html
@@ -1,295 +1,201 @@
-<!DOCTYPE html>
-<html class="dark" lang="de">
+<!doctype html>
+<html lang="de">
 <head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>The Sentinel – Backup Monitor</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
-<script>
-tailwind.config = {
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        "surface-dim": "#0b1326", "surface": "#0b1326", "surface-bright": "#31394d",
-        "surface-container-lowest": "#060e20", "surface-container-low": "#131b2e",
-        "surface-container": "#171f33", "surface-container-high": "#222a3d",
-        "surface-container-highest": "#2d3449", "surface-variant": "#2d3449",
-        "on-surface": "#dae2fd", "on-surface-variant": "#c1c6d6",
-        "primary": "#adc6ff", "primary-container": "#0069de", "on-primary": "#002e69",
-        "secondary": "#4edea3", "secondary-container": "#00a572", "on-secondary": "#003824",
-        "tertiary": "#ffb95f", "tertiary-container": "#9a6100",
-        "error": "#ffb4ab", "error-container": "#93000a", "on-error": "#690005",
-        "outline": "#8b909f", "outline-variant": "#414753",
-      },
-      fontFamily: { headline: ["Manrope"], body: ["Inter"], label: ["Inter"] },
-      borderRadius: { DEFAULT: "0.25rem", lg: "0.5rem", xl: "0.75rem", full: "9999px" },
-    },
-  },
-}
-</script>
-<style>
-.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
-.pulse-ok { animation: pulse-g 2s infinite; }
-@keyframes pulse-g { 0%{box-shadow:0 0 0 0 rgba(78,222,163,.4)} 70%{box-shadow:0 0 0 10px rgba(78,222,163,0)} 100%{box-shadow:0 0 0 0 rgba(78,222,163,0)} }
-.pulse-err { animation: pulse-r 2s infinite; }
-@keyframes pulse-r { 0%{box-shadow:0 0 0 0 rgba(255,180,171,.4)} 70%{box-shadow:0 0 0 10px rgba(255,180,171,0)} 100%{box-shadow:0 0 0 0 rgba(255,180,171,0)} }
-.glass { background: rgba(45,52,73,.6); backdrop-filter: blur(20px); }
-::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2d3449; border-radius: 3px; }
-</style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <title>The Sentinel · Backup-Monitor</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='10' fill='%23171917'/><path d='M18 20h28M18 32h28M18 44h18' stroke='%237abf8a' stroke-width='5' stroke-linecap='round'/></svg>">
+  <link rel="stylesheet" href="/static/css/style.css">
 </head>
-<body class="bg-surface-dim font-body text-on-surface antialiased">
+<body>
+  <header class="site-header">
+    <div class="topbar">
+      <a class="brand" href="#dashboard" onclick="showPage('dashboard'); return false;" aria-label="The Sentinel Startseite">
+        <span class="brand-mark" aria-hidden="true">S</span>
+        <span>
+          <strong>The Sentinel</strong>
+          <small>Backup-Monitor</small>
+        </span>
+      </a>
 
-<!-- ── Top Nav ──────────────────────────────────────────── -->
-<nav class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-slate-900/60 backdrop-blur-xl shadow-2xl shadow-slate-950/40">
-  <div class="flex items-center gap-8">
-    <span class="text-xl font-bold tracking-tighter text-white font-headline">The Sentinel</span>
-    <div class="hidden md:flex gap-1 items-center">
-      <a href="#" onclick="showPage('dashboard')" id="nav-dashboard" class="text-sm font-bold tracking-tight text-blue-400 px-3 py-1 rounded-lg font-headline">Dashboard</a>
-      <a href="#" onclick="showPage('alerts')" id="nav-alerts" class="text-sm font-medium tracking-tight text-slate-400 hover:bg-slate-800/50 px-3 py-1 rounded-lg transition-colors font-headline">Alert Center</a>
-      <a href="#" onclick="showPage('hosts')" id="nav-hosts" class="text-sm font-medium tracking-tight text-slate-400 hover:bg-slate-800/50 px-3 py-1 rounded-lg transition-colors font-headline">Backup Hosts</a>
-    </div>
-  </div>
-  <div class="flex items-center gap-4">
-    <div id="sysStatus" class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800/50">
-      <span class="material-symbols-outlined text-sm text-secondary" style="font-variation-settings:'FILL' 1">cloud_done</span>
-      <span class="font-headline text-xs font-medium text-slate-300">System OK</span>
-    </div>
-    <button onclick="loadAll()" class="material-symbols-outlined text-slate-400 hover:bg-slate-800/50 p-2 rounded-full transition-colors">refresh</button>
-    <button onclick="openAddHost()" class="material-symbols-outlined text-slate-400 hover:bg-slate-800/50 p-2 rounded-full transition-colors">add_circle</button>
-  </div>
-</nav>
+      <nav class="main-nav" aria-label="Hauptnavigation">
+        <a href="#dashboard" onclick="showPage('dashboard'); return false;" id="nav-dashboard" class="is-active" aria-current="page">Übersicht</a>
+        <a href="#alerts" onclick="showPage('alerts'); return false;" id="nav-alerts">Meldungen</a>
+        <a href="#hosts" onclick="showPage('hosts'); return false;" id="nav-hosts">Hosts</a>
+        <a href="#config" onclick="showPage('config'); return false;" id="nav-config">Einstellungen</a>
+      </nav>
 
-<!-- ── Sidebar ─────────────────────────────────────────── -->
-<aside class="fixed left-0 top-0 h-full flex-col py-6 bg-slate-950 w-56 z-40 pt-20 hidden lg:flex">
-  <div class="px-5 mb-8">
-    <div class="flex items-center gap-3">
-      <div class="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center">
-        <span class="material-symbols-outlined text-white text-lg" style="font-variation-settings:'FILL' 1">shield</span>
-      </div>
-      <div>
-        <div class="text-sm font-black text-white font-headline leading-tight">The Sentinel</div>
-        <div class="text-[10px] text-slate-500 uppercase tracking-widest font-semibold">Backup Monitor</div>
-      </div>
-    </div>
-  </div>
-  <div class="flex-1 px-3 space-y-1">
-    <a href="#" onclick="showPage('dashboard')" id="side-dashboard" class="flex items-center gap-3 px-4 py-3 rounded-xl bg-blue-600/10 text-blue-400 border-r-2 border-blue-500 font-headline text-sm font-semibold">
-      <span class="material-symbols-outlined">dashboard</span><span>Dashboard</span>
-    </a>
-    <a href="#" onclick="showPage('alerts')" id="side-alerts" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-slate-900/80 transition-all font-headline text-sm font-semibold">
-      <span class="material-symbols-outlined">warning</span><span>Alert Center</span>
-    </a>
-    <a href="#" onclick="showPage('hosts')" id="side-hosts" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-slate-900/80 transition-all font-headline text-sm font-semibold">
-      <span class="material-symbols-outlined">dns</span><span>Backup Hosts</span>
-    </a>
-    <a href="#" onclick="showPage('config')" id="side-config" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-slate-900/80 transition-all font-headline text-sm font-semibold">
-      <span class="material-symbols-outlined">settings</span><span>Configuration</span>
-    </a>
-  </div>
-  <div class="px-3 mt-auto">
-    <button onclick="openAddHost()" class="w-full bg-primary text-on-primary font-bold py-3 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all text-sm">
-      <span class="material-symbols-outlined text-sm">add</span> New Host
-    </button>
-  </div>
-</aside>
-
-<!-- ── Main Content ────────────────────────────────────── -->
-<main class="lg:ml-56 pt-24 px-6 lg:px-8 pb-12 min-h-screen">
-
-<!-- ════════ PAGE: DASHBOARD ════════ -->
-<div id="page-dashboard">
-  <!-- Header -->
-  <header class="mb-10 flex flex-col md:flex-row justify-between md:items-end gap-4">
-    <div>
-      <h1 class="text-3xl font-extrabold font-headline tracking-tight text-white">Vault Overview</h1>
-      <p class="text-on-surface-variant mt-1">Operational command for Borgmatic backup infrastructure.</p>
-    </div>
-    <div class="flex gap-3">
-      <div class="flex items-center gap-2 bg-surface-container-low px-4 py-2 rounded-lg text-sm">
-        <span class="text-on-surface-variant">Last Scan:</span>
-        <span class="text-primary font-semibold" id="lastScan">–</span>
-      </div>
-      <button onclick="loadAll()" class="bg-surface-container-highest px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 hover:bg-surface-bright transition-colors">
-        <span class="material-symbols-outlined text-sm">refresh</span> Refresh
-      </button>
-    </div>
-  </header>
-
-  <!-- Metric Cards -->
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6 mb-8" id="metricCards">
-    <div class="bg-surface-container-low p-6 rounded-xl relative overflow-hidden">
-      <div class="absolute top-0 right-0 w-24 h-24 bg-secondary/5 rounded-full -mr-8 -mt-8 blur-2xl"></div>
-      <div class="flex justify-between items-start mb-4">
-        <div class="p-2 bg-secondary/10 rounded-lg"><span class="material-symbols-outlined text-secondary" style="font-variation-settings:'FILL' 1">check_circle</span></div>
-      </div>
-      <div class="text-4xl font-extrabold font-headline text-white mb-1" id="mOk">–</div>
-      <div class="text-xs text-on-surface-variant font-medium uppercase tracking-wider">Hosts OK</div>
-    </div>
-    <div class="bg-surface-container-low p-6 rounded-xl relative overflow-hidden">
-      <div class="flex justify-between items-start mb-4">
-        <div class="p-2 bg-primary/10 rounded-lg"><span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1">database</span></div>
-      </div>
-      <div class="text-4xl font-extrabold font-headline text-white mb-1" id="mSize">–</div>
-      <div class="text-xs text-on-surface-variant font-medium uppercase tracking-wider">Today Backed Up</div>
-    </div>
-    <div class="bg-surface-container-low p-6 rounded-xl relative overflow-hidden">
-      <div class="flex justify-between items-start mb-4">
-        <div class="p-2 bg-secondary/10 rounded-lg pulse-ok"><span class="material-symbols-outlined text-secondary" style="font-variation-settings:'FILL' 1">bolt</span></div>
-        <div class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-secondary"></div><span class="text-xs font-bold text-secondary">LIVE</span></div>
-      </div>
-      <div class="text-2xl font-bold font-headline text-white mb-1" id="mLatest">–</div>
-      <div class="text-xs text-on-surface-variant font-medium uppercase tracking-wider">Latest Backup</div>
-      <div class="text-[10px] mt-2 font-mono text-slate-500" id="mLatestHost">–</div>
-    </div>
-    <div class="bg-surface-container-low p-6 rounded-xl" id="mWarnCard">
-      <div class="flex justify-between items-start mb-4">
-        <div class="p-2 bg-error/10 rounded-lg"><span class="material-symbols-outlined text-error" style="font-variation-settings:'FILL' 1">report_problem</span></div>
-      </div>
-      <div class="text-4xl font-extrabold font-headline text-error mb-1" id="mWarn">0</div>
-      <div class="text-xs text-on-surface-variant font-medium uppercase tracking-wider">Issues</div>
-      <button onclick="showPage('alerts')" class="mt-3 text-xs font-bold text-error flex items-center gap-1 hover:underline">
-        View alerts <span class="material-symbols-outlined text-xs">arrow_forward</span>
-      </button>
-    </div>
-  </div>
-
-  <!-- Chart + Clusters -->
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-    <!-- Volume Trend Chart -->
-    <div class="lg:col-span-2 bg-surface-container-low rounded-xl p-6 lg:p-8">
-      <div class="flex justify-between items-center mb-8">
-        <div>
-          <h3 class="text-lg font-bold font-headline text-white">Backup Volume Trends</h3>
-          <p class="text-sm text-on-surface-variant">Storage growth across all hosts (Last 30 Days)</p>
+      <div class="topbar-actions">
+        <div id="sysStatus" class="system-state status--ok" aria-live="polite">
+          <span class="status-dot status--ok" aria-hidden="true"></span>
+          <span>Betriebsbereit</span>
         </div>
-      </div>
-      <div class="h-48 w-full relative" id="volumeChart">
-        <svg class="w-full h-full" preserveAspectRatio="none" id="chartSvg"></svg>
-      </div>
-    </div>
-    <!-- Host Clusters -->
-    <div class="bg-surface-container-low rounded-xl p-6 lg:p-8">
-      <h3 class="text-lg font-bold font-headline text-white mb-6">Host Status</h3>
-      <div class="space-y-3 max-h-[300px] overflow-y-auto" id="clusterList"></div>
-    </div>
-  </div>
-
-  <!-- Live Stream -->
-  <div class="bg-surface-container-low rounded-xl p-6 lg:p-8">
-    <div class="flex justify-between items-center mb-6">
-      <h3 class="text-lg font-bold font-headline text-white">Live Backup Stream</h3>
-      <span class="text-xs text-on-surface-variant font-mono">Auto-refresh: 30s</span>
-    </div>
-    <div class="space-y-0" id="liveStream"></div>
-  </div>
-</div>
-
-<!-- ════════ PAGE: ALERTS ════════ -->
-<div id="page-alerts" class="hidden">
-  <header class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
-    <div>
-      <h1 class="text-3xl font-extrabold tracking-tighter font-headline text-white">Alert Center</h1>
-      <p class="text-on-surface-variant max-w-lg">Real-time surveillance of the backup infrastructure.</p>
-    </div>
-    <div class="flex gap-3">
-      <div class="bg-surface-container-low px-6 py-4 rounded-xl flex flex-col gap-1 border-b-2 border-error">
-        <span class="text-error font-bold text-2xl" id="aCrit">0</span>
-        <span class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">Errors</span>
-      </div>
-      <div class="bg-surface-container-low px-6 py-4 rounded-xl flex flex-col gap-1 border-b-2 border-tertiary">
-        <span class="text-tertiary font-bold text-2xl" id="aStale">0</span>
-        <span class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">Stale</span>
+        <button type="button" class="icon-button" onclick="loadAll()" aria-label="Daten aktualisieren" title="Aktualisieren">↻</button>
+        <button type="button" class="icon-button" onclick="openAddHost()" aria-label="Host hinzufügen" title="Host hinzufügen">＋</button>
       </div>
     </div>
   </header>
-  <div class="space-y-4" id="alertList">
-    <div class="text-center py-12 text-on-surface-variant">No active alerts – all systems operational ✓</div>
-  </div>
-</div>
 
-<!-- ════════ PAGE: HOSTS ════════ -->
-<div id="page-hosts" class="hidden">
-  <header class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
-    <div>
-      <h1 class="text-3xl font-extrabold tracking-tighter font-headline text-white">Backup Hosts</h1>
-      <p class="text-on-surface-variant">Manage and monitor all registered backup endpoints.</p>
-    </div>
-    <button onclick="openAddHost()" class="bg-primary text-on-primary font-bold py-3 px-6 rounded-xl flex items-center gap-2 shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all text-sm">
-      <span class="material-symbols-outlined text-sm">add</span> Add Host
-    </button>
-  </header>
-  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" id="hostGrid"></div>
-</div>
+  <main class="app-shell">
+    <section id="page-dashboard" class="page" aria-labelledby="dashboard-title">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Borgmatic-Infrastruktur</p>
+          <h1 id="dashboard-title">Backup-Übersicht</h1>
+          <p class="lede">Der aktuelle Stand aller gemeldeten Sicherungen.</p>
+        </div>
+        <div class="scan-state">
+          <span>Letzte Aktualisierung</span>
+          <time id="lastScan">–</time>
+        </div>
+      </header>
 
-<!-- ════════ PAGE: CONFIG ════════ -->
-<div id="page-config" class="hidden">
-  <header class="mb-10">
-    <h1 class="text-3xl font-extrabold tracking-tighter font-headline text-white">Configuration</h1>
-    <p class="text-on-surface-variant mt-1">API endpoint and integration settings.</p>
-  </header>
-  <div class="bg-surface-container-low rounded-xl p-8 max-w-2xl space-y-6">
-    <div>
-      <h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-wider mb-3">Push Endpoint</h3>
-      <code class="block bg-surface-dim px-4 py-3 rounded-lg text-primary text-sm font-mono">POST /api/push</code>
-    </div>
-    <div>
-      <h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-wider mb-3">Prometheus Metrics</h3>
-      <code class="block bg-surface-dim px-4 py-3 rounded-lg text-primary text-sm font-mono">GET /metrics</code>
-    </div>
-    <div>
-      <h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-wider mb-3">API Key</h3>
-      <p class="text-sm text-on-surface-variant">{{ 'Enabled – set via API_KEY env var' if api_key_required else 'Disabled – all endpoints open' }}</p>
-    </div>
-  </div>
-</div>
+      <section class="metric-strip" id="metricCards" aria-label="Zusammenfassung">
+        <article class="metric">
+          <span class="metric-label">Hosts in Ordnung</span>
+          <strong id="mOk">–</strong>
+        </article>
+        <article class="metric">
+          <span class="metric-label">Heute gesichert</span>
+          <strong id="mSize">–</strong>
+        </article>
+        <article class="metric">
+          <span class="metric-label">Letzte Sicherung</span>
+          <strong id="mLatest">–</strong>
+          <small id="mLatestHost">–</small>
+        </article>
+        <article class="metric metric--issue" id="mWarnCard">
+          <span class="metric-label">Auffälligkeiten</span>
+          <strong id="mWarn">0</strong>
+          <button type="button" class="text-button" onclick="showPage('alerts')">Meldungen öffnen</button>
+        </article>
+      </section>
 
-</main>
+      <div class="dashboard-grid">
+        <section class="panel panel--chart" aria-labelledby="volume-title">
+          <header class="panel-header">
+            <div>
+              <h2 id="volume-title">Gesichertes Datenvolumen</h2>
+              <p>Summe der letzten 30 Tage, über die zehn zuerst gemeldeten Hosts.</p>
+            </div>
+          </header>
+          <div class="chart" id="volumeChart">
+            <svg id="chartSvg" role="img" aria-label="Backup-Volumen der letzten 30 Tage" viewBox="0 0 100 100" preserveAspectRatio="none"></svg>
+          </div>
+        </section>
 
-<!-- ── Host Detail Drawer ──────────────────────────────── -->
-<div id="drawerBg" onclick="closeDrawer()" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 opacity-0 pointer-events-none transition-opacity duration-300"></div>
-<aside id="drawer" class="fixed top-0 right-0 bottom-0 w-[500px] max-w-[90vw] bg-surface-container-lowest z-[51] shadow-2xl transform translate-x-full transition-transform duration-300 flex flex-col">
-  <div class="flex justify-between items-center px-6 py-5 border-b border-outline-variant/10">
-    <h2 class="text-lg font-bold font-headline text-white" id="drawerTitle">Host</h2>
-    <button onclick="closeDrawer()" class="material-symbols-outlined text-slate-400 hover:text-white p-1 rounded-lg hover:bg-surface-container-high transition-colors">close</button>
-  </div>
-  <div class="flex-1 overflow-y-auto px-6 py-6" id="drawerBody"></div>
-</aside>
+        <section class="panel panel--hosts" aria-labelledby="host-status-title">
+          <header class="panel-header">
+            <h2 id="host-status-title">Host-Status</h2>
+          </header>
+          <div id="clusterList" class="cluster-list"></div>
+        </section>
+      </div>
 
-<!-- ── Add/Edit Modal ──────────────────────────────────── -->
-<div id="modalBg" onclick="closeModal()" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] opacity-0 pointer-events-none transition-opacity duration-300"></div>
-<div id="modal" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] max-w-[90vw] bg-surface-container-lowest rounded-xl z-[61] shadow-2xl scale-95 opacity-0 pointer-events-none transition-all duration-300">
-  <div class="flex justify-between items-center px-6 py-5 border-b border-outline-variant/10">
-    <h2 class="text-lg font-bold font-headline text-white" id="modalTitle">Add Host</h2>
-    <button onclick="closeModal()" class="material-symbols-outlined text-slate-400 hover:text-white">close</button>
-  </div>
-  <form id="hostForm" onsubmit="saveHost(event)" class="p-6 space-y-4">
-    <input type="hidden" id="formMode" value="add">
-    <div>
-      <label class="block text-xs text-on-surface-variant uppercase tracking-wider font-bold mb-2">Hostname</label>
-      <input type="text" id="formName" required class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3 text-on-surface text-sm focus:ring-2 focus:ring-primary/30" placeholder="e.g. arrapps">
-    </div>
-    <div>
-      <label class="block text-xs text-on-surface-variant uppercase tracking-wider font-bold mb-2">Uptime Kuma Push URL</label>
-      <input type="url" id="formKumaUrl" class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3 text-on-surface text-sm focus:ring-2 focus:ring-primary/30" placeholder="https://status.example.com/api/push/...">
-    </div>
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="checkbox" id="formEnabled" checked class="rounded bg-surface-container-highest border-none text-primary focus:ring-primary/30">
-      <span class="text-sm text-on-surface">Enabled</span>
-    </label>
-    <div class="flex justify-end gap-3 pt-4">
-      <button type="button" onclick="closeModal()" class="px-5 py-2.5 rounded-lg text-sm font-bold text-on-surface-variant hover:bg-surface-container-high transition-colors">Cancel</button>
-      <button type="submit" class="bg-primary text-on-primary px-6 py-2.5 rounded-lg text-sm font-bold hover:brightness-110 active:scale-95 transition-all">Save</button>
-    </div>
-  </form>
-</div>
+      <section class="panel" aria-labelledby="stream-title">
+        <header class="panel-header panel-header--split">
+          <h2 id="stream-title">Letzte Meldungen</h2>
+          <span class="quiet-note">automatisch alle 30 Sekunden</span>
+        </header>
+        <div id="liveStream" class="event-list" aria-live="polite"></div>
+      </section>
+    </section>
 
-<!-- ── Toast ───────────────────────────────────────────── -->
-<div id="toasts" class="fixed bottom-6 right-6 z-[70] flex flex-col gap-2"></div>
+    <section id="page-alerts" class="page hidden" aria-labelledby="alerts-title">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Prüfbedarf</p>
+          <h1 id="alerts-title">Meldungen</h1>
+          <p class="lede">Fehlgeschlagene oder überfällige Sicherungen.</p>
+        </div>
+        <dl class="inline-counts">
+          <div><dt>Fehler</dt><dd id="aCrit">0</dd></div>
+          <div><dt>Überfällig</dt><dd id="aStale">0</dd></div>
+        </dl>
+      </header>
+      <div id="alertList" class="alert-list">
+        <p class="empty-state">Keine offenen Meldungen.</p>
+      </div>
+    </section>
 
-<script src="/static/js/app.js"></script>
+    <section id="page-hosts" class="page hidden" aria-labelledby="hosts-title">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Inventar</p>
+          <h1 id="hosts-title">Backup-Hosts</h1>
+          <p class="lede">Alle registrierten Endpunkte und ihre letzten Sicherungen.</p>
+        </div>
+        <button type="button" class="button button--primary" onclick="openAddHost()">Host hinzufügen</button>
+      </header>
+      <div id="hostGrid" class="host-grid"></div>
+    </section>
+
+    <section id="page-config" class="page hidden" aria-labelledby="config-title">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Schnittstellen</p>
+          <h1 id="config-title">Einstellungen</h1>
+          <p class="lede">Die Endpunkte, über die Sentinel Daten annimmt und ausliefert.</p>
+        </div>
+      </header>
+      <dl class="settings-list">
+        <div>
+          <dt>Backup-Meldungen</dt>
+          <dd><code>POST /api/push</code></dd>
+        </div>
+        <div>
+          <dt>Prometheus</dt>
+          <dd><code>GET /metrics</code></dd>
+        </div>
+        <div>
+          <dt>API-Schlüssel</dt>
+          <dd>{{ 'Aktiviert (Umgebungsvariable API_KEY)' if api_key_required else 'Deaktiviert' }}</dd>
+        </div>
+      </dl>
+    </section>
+  </main>
+
+  <div id="drawerBg" class="backdrop is-hidden" onclick="closeDrawer()"></div>
+  <aside id="drawer" class="drawer is-closed" aria-labelledby="drawerTitle" aria-hidden="true">
+    <header class="overlay-header">
+      <div>
+        <span class="eyebrow">Host-Details</span>
+        <h2 id="drawerTitle">Host</h2>
+      </div>
+      <button type="button" class="icon-button" onclick="closeDrawer()" aria-label="Details schließen">×</button>
+    </header>
+    <div id="drawerBody" class="drawer-body"></div>
+  </aside>
+
+  <div id="modalBg" class="backdrop is-hidden" onclick="closeModal()"></div>
+  <section id="modal" class="modal is-closed" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true">
+    <header class="overlay-header">
+      <h2 id="modalTitle">Host hinzufügen</h2>
+      <button type="button" class="icon-button" onclick="closeModal()" aria-label="Dialog schließen">×</button>
+    </header>
+    <form id="hostForm" onsubmit="saveHost(event)" class="form-stack">
+      <input type="hidden" id="formMode" value="add">
+      <label>
+        <span>Hostname</span>
+        <input type="text" id="formName" required placeholder="zum Beispiel arrapps">
+      </label>
+      <label>
+        <span>Uptime-Kuma Push-URL</span>
+        <input type="url" id="formKumaUrl" placeholder="https://status.example.com/api/push/…">
+      </label>
+      <label class="checkbox-row">
+        <input type="checkbox" id="formEnabled" checked>
+        <span>Host überwachen</span>
+      </label>
+      <div class="form-actions">
+        <button type="button" class="button" onclick="closeModal()">Abbrechen</button>
+        <button type="submit" class="button button--primary">Speichern</button>
+      </div>
+    </form>
+  </section>
+
+  <div id="toasts" class="toast-stack" aria-live="polite"></div>
+  <script src="/static/js/app.js"></script>
 </body>
 </html>
