diff --git a/internal/web/static/css/style.css b/internal/web/static/css/style.css
index cbeac7c..09d20ca 100644
--- a/internal/web/static/css/style.css
+++ b/internal/web/static/css/style.css
@@ -1,5 +1,3 @@
-/* Abuse registration POC — styled to match the FLÓ/zeitkort POC shell. */
-
 *, *::before, *::after { box-sizing: border-box; }
 
 :root,
@@ -9,7 +7,7 @@
   --fg: #1a1d22;
   --muted: #595f68;
   --dim: #9299a2;
-  --border: rgba(26, 29, 34, 0.12);
+  --border: rgba(26, 29, 34, 0.1);
   --border-soft: rgba(26, 29, 34, 0.06);
   --dotted: rgba(26, 29, 34, 0.12);
   --field-bg: rgba(26, 29, 34, 0.03);
@@ -18,10 +16,10 @@
   --btn-bg-hover: rgba(26, 29, 34, 0.09);
   --btn-border: rgba(26, 29, 34, 0.18);
   --header-border: rgba(26, 29, 34, 0.12);
-  --link: #2c5a7a;
-  --accent: #2c5a7a;
-  --nav-bg: rgba(244, 241, 236, 0.6);
-  --bg-panel: rgba(255, 253, 250, 0.72);
+  --link: #0f527d;
+  --accent: #164f75;
+  --nav-bg: rgba(255, 253, 250, 0.92);
+  --bg-panel: rgba(255, 255, 255, 0.85);
   --notice-fg: #2a6e2a;
   --notice-bg: rgba(42, 110, 42, 0.06);
   --notice-border: rgba(42, 110, 42, 0.25);
@@ -29,45 +27,45 @@
   --error-bg: rgba(160, 48, 48, 0.06);
   --error-border: rgba(160, 48, 48, 0.25);
   --shadow: rgba(0, 0, 0, 0.12);
-  --toggle-bg: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
+  --toggle-bg: linear-gradient(135deg, #24273a 0%, #8aadf4 100%);
   --toggle-border: rgba(26, 29, 34, 0.2);
   --toggle-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
-[data-theme="tokyo"] {
+[data-theme="macchiato"] {
   color-scheme: dark;
-  --bg: #07070d;
-  --fg: #e8f4ff;
-  --muted: #a3b3cc;
-  --dim: #7886a0;
-  --border: rgba(100, 220, 255, 0.12);
-  --border-soft: rgba(100, 220, 255, 0.06);
-  --dotted: rgba(100, 220, 255, 0.1);
-  --field-bg: rgba(100, 220, 255, 0.04);
-  --field-border: rgba(100, 220, 255, 0.15);
-  --btn-bg: rgba(100, 220, 255, 0.06);
-  --btn-bg-hover: rgba(100, 220, 255, 0.1);
-  --btn-border: rgba(100, 220, 255, 0.18);
-  --header-border: rgba(100, 220, 255, 0.12);
-  --link: #64dcff;
-  --accent: #64dcff;
-  --nav-bg: rgba(7, 7, 13, 0.65);
-  --bg-panel: rgba(15, 16, 28, 0.72);
-  --notice-fg: #8fe08f;
-  --notice-bg: rgba(143, 224, 143, 0.06);
-  --notice-border: rgba(143, 224, 143, 0.25);
-  --error-fg: #ff9b9b;
-  --error-bg: rgba(255, 155, 155, 0.06);
-  --error-border: rgba(255, 155, 155, 0.2);
-  --shadow: rgba(0, 0, 0, 0.5);
-  --toggle-bg: #f4f1ec;
-  --toggle-border: rgba(100, 220, 255, 0.4);
-  --toggle-shadow: 0 0 10px rgba(100, 220, 255, 0.5), 0 0 25px rgba(100, 220, 255, 0.3);
+  --bg: #181926;
+  --fg: #cad3f5;
+  --muted: #a5adcb;
+  --dim: #8087a2;
+  --border: rgba(165, 173, 203, 0.15);
+  --border-soft: rgba(165, 173, 203, 0.08);
+  --dotted: rgba(165, 173, 203, 0.12);
+  --field-bg: rgba(165, 173, 203, 0.08);
+  --field-border: rgba(165, 173, 203, 0.2);
+  --btn-bg: rgba(165, 173, 203, 0.1);
+  --btn-bg-hover: rgba(165, 173, 203, 0.15);
+  --btn-border: rgba(165, 173, 203, 0.22);
+  --header-border: rgba(165, 173, 203, 0.12);
+  --link: #8aadf4;
+  --accent: #8aadf4;
+  --nav-bg: rgba(36, 39, 58, 0.65);
+  --bg-panel: #24273a;
+  --notice-fg: #a6da95;
+  --notice-bg: rgba(166, 218, 149, 0.08);
+  --notice-border: rgba(166, 218, 149, 0.25);
+  --error-fg: #ed8796;
+  --error-bg: rgba(237, 135, 150, 0.08);
+  --error-border: rgba(237, 135, 150, 0.25);
+  --shadow: rgba(0, 0, 0, 0.35);
+  --toggle-bg: #1e2030;
+  --toggle-border: rgba(138, 173, 244, 0.4);
+  --toggle-shadow: 0 0 10px rgba(138, 173, 244, 0.4), 0 0 25px rgba(138, 173, 244, 0.2);
 }
 
 html, body { max-width: 100%; overflow-x: hidden; }
 body {
-  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
   font-size: 0.88rem;
   font-weight: 300;
   line-height: 1.55;
@@ -140,7 +138,7 @@ header {
   text-transform: uppercase;
   color: var(--muted);
 }
-[data-theme="tokyo"] .brand { color: #e8f4ff; text-shadow: 0 0 8px rgba(100, 220, 255, 0.3); }
+[data-theme="macchiato"] .brand { color: #cad3f5; text-shadow: 0 0 8px rgba(138, 173, 244, 0.25); }
 
 footer {
   padding: 0.9rem 1.5rem;
@@ -161,7 +159,7 @@ footer a:hover { color: var(--accent); }
 .footer-icon { color: var(--muted); text-decoration: none; display: flex; align-items: center; border-bottom: none; transition: color 0.25s ease; }
 .footer-icon:hover { color: var(--accent); border-bottom: none; }
 
-h1, h2, h3 { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-weight: 700; letter-spacing: -0.02em; }
+h1, h2, h3 { font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-weight: 700; letter-spacing: -0.02em; }
 h1 { margin: 0 0 0.9rem; font-size: clamp(1.35rem, 4vw, 2rem); }
 h2 { margin: 0 0 0.9rem; font-size: 1.1rem; }
 h3 { margin: 1rem 0 0.4rem; font-size: 0.86rem; color: var(--fg); }
@@ -215,7 +213,7 @@ pre {
   font-size: 0.78rem;
   line-height: 1.45;
 }
-[data-theme="tokyo"] pre { background: rgba(100, 220, 255, 0.04); }
+[data-theme="macchiato"] pre { background: rgba(138, 173, 244, 0.04); }
 
 .harmonium {
   display: grid;
@@ -282,8 +280,8 @@ select, input[type=text], input[type=number], input:not([type]) {
   outline: none;
   width: 100%;
 }
-[data-theme="tokyo"] select,
-[data-theme="tokyo"] option { background: #0f1018; color: #e8f4ff; }
+[data-theme="macchiato"] select,
+[data-theme="macchiato"] option { background: #1e2030; color: #cad3f5; }
 select:focus, input:focus { border-color: var(--accent); }
 label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.75rem; }
 label input, label select { margin-top: 0.25rem; }
@@ -340,7 +338,7 @@ button:hover { background: var(--btn-bg-hover); }
 }
 .reset-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
 .reset-countdown {
-  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
   font-size: clamp(1.5rem, 6vw, 2.5rem);
   font-weight: 700;
   line-height: 1;
diff --git a/internal/web/static/js/theme.js b/internal/web/static/js/theme.js
index aedba53..b51c6a2 100644
--- a/internal/web/static/js/theme.js
+++ b/internal/web/static/js/theme.js
@@ -1,13 +1,13 @@
 (function () {
   function currentSystemTheme() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'macchiato' : 'light';
   }
 
   var btn = document.getElementById('theme-toggle');
   if (btn) {
     btn.addEventListener('click', function () {
       var current = document.documentElement.getAttribute('data-theme') || 'light';
-      var next = current === 'light' ? 'tokyo' : 'light';
+      var next = current === 'light' ? 'macchiato' : 'light';
       document.documentElement.setAttribute('data-theme', next);
       localStorage.setItem('poc-theme', next);
       window.dispatchEvent(new Event('theme-change'));
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
index ff40f8e..add3c6a 100644
--- a/internal/web/templates/index.html
+++ b/internal/web/templates/index.html
@@ -8,11 +8,14 @@
 <script>
 (function () {
   var stored = localStorage.getItem('poc-theme');
-  var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+  var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'macchiato' : 'light');
   document.documentElement.setAttribute('data-theme', theme);
 })();
 </script>
 
+<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=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/static/css/style.css">
 <link rel="icon" href="/favicon.ico" type="image/x-icon">
 </head>