diff --git a/web/index.html b/web/index.html
index c888bf7..333857c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#863bff" />
+    <meta name="theme-color" content="#00e87a" />
+    <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=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
diff --git a/web/public/manifest.json b/web/public/manifest.json
index 96cb14c..9023aa4 100644
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@@ -4,8 +4,8 @@
   "description": "Decentralized friend-to-friend encrypted mesh networking",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#0d0d0d",
-  "theme_color": "#863bff",
+  "background_color": "#080808",
+  "theme_color": "#00e87a",
   "icons": [
     {
       "src": "/icon-192.png",
diff --git a/web/src/App.css b/web/src/App.css
index 22f01fd..60fd0d0 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -1,26 +1,33 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --bg: #0f0f13;
-  --surface: #1a1a22;
-  --border: #2a2a36;
-  --accent: #7c6af7;
-  --text: #e0e0e8;
-  --muted: #6b6b80;
+  --bg: #080808;
+  --surface: #0e0e0e;
+  --border: rgba(255, 255, 255, 0.09);
+  --accent: #00e87a;
+  --accent-dim: rgba(0, 232, 122, 0.12);
+  --accent-border: rgba(0, 232, 122, 0.3);
+  --text: #c8c8c8;
+  --heading: #f0f0f0;
+  --muted: #666;
+  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
   --sidebar-w: 220px;
 }
 
 html, body, #root { height: 100%; }
-body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; }
+body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; -webkit-font-smoothing: antialiased; }
 
-button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; }
+button { cursor: pointer; background: var(--accent); color: #000; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-family: var(--mono); font-weight: 600; transition: all 0.15s; }
+button:hover:not(:disabled) { background: #00ff88; border-color: #00ff88; }
+button:active:not(:disabled) { transform: scale(0.98); }
 button:disabled { opacity: 0.4; cursor: default; }
-input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; }
-input:focus { border-color: var(--accent); }
+input { background: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--mono); outline: none; width: 100%; }
+input:focus { border-color: var(--accent-border); }
 
 /* ── onboarding ── */
 .onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; max-width: 380px; margin: 0 auto; padding: 2rem; }
-.onboarding h1 { font-size: 2rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; }
+.onboarding h1 { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--heading); margin-bottom: 4px; }
+.onboarding h1::before { content: '> '; color: var(--muted); font-weight: 400; }
 .onboarding .status { color: var(--muted); font-size: 13px; }
 .onboarding .status.connecting { color: var(--accent); }
 .onboarding .status.disconnected { color: #e06060; }
@@ -69,7 +76,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
 .sidebar-new-room input { font-size: 12px; padding: 4px 8px; }
 .sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
 .sidebar-item:hover { background: rgba(255,255,255,0.04); }
-.sidebar-item.active { background: var(--accent); color: #fff; }
+.sidebar-item.active { background: var(--accent); color: #000; font-weight: 600; }
 .sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; }
 
 /* peer rows in sidebar */
@@ -127,7 +134,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
 .file-entry-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .file-entry-size { color: var(--muted); font-size: 11px; flex-shrink: 0; }
 .file-entry-dl { background: none; color: var(--accent); font-size: 14px; padding: 1px 4px; flex-shrink: 0; }
-.file-entry-dl:hover { background: rgba(124,106,247,0.15); }
+.file-entry-dl:hover { background: var(--accent-dim); }
 
 /* ── share manager ── */
 .share-manager { width: 100%; display: flex; flex-direction: column; gap: 4px; }
@@ -179,11 +186,11 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
 .reaction-add:hover { color: var(--accent); background: none; }
 .reaction-picker { display: flex; gap: 4px; padding: 4px 16px 2px; }
 .reaction-picker-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 18px; padding: 2px 6px; line-height: 1.4; cursor: pointer; }
-.reaction-picker-btn:hover { border-color: var(--accent); background: rgba(124,106,247,0.12); }
+.reaction-picker-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
 .reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 16px 4px; }
 .reaction-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; padding: 1px 8px; cursor: pointer; color: var(--text); }
-.reaction-chip:hover { border-color: var(--accent); background: rgba(124,106,247,0.1); }
-.reaction-chip.mine { border-color: var(--accent); background: rgba(124,106,247,0.18); }
+.reaction-chip:hover { border-color: var(--accent); background: rgba(0,232,122,0.1); }
+.reaction-chip.mine { border-color: var(--accent); background: rgba(0,232,122,0.18); }
 
 /* ── mobile hamburger / close buttons ── */
 .menu-btn-mobile { display: none; background: none; color: var(--muted); font-size: 18px; padding: 0 8px 0 0; line-height: 1; }
diff --git a/web/src/index.css b/web/src/index.css
index 5fb3313..06e5567 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,23 +1,23 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
+  --text: #c8c8c8;
+  --text-h: #f0f0f0;
+  --bg: #080808;
+  --border: rgba(255, 255, 255, 0.09);
+  --code-bg: #0e0e0e;
+  --accent: #00e87a;
+  --accent-bg: rgba(0, 232, 122, 0.12);
+  --accent-border: rgba(0, 232, 122, 0.3);
+  --social-bg: rgba(14, 14, 14, 0.5);
   --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+    0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.6);
 
   --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  --heading: 'JetBrains Mono', ui-monospace, monospace;
+  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
 
   font: 18px/145% var(--sans);
   letter-spacing: 0.18px;
-  color-scheme: light dark;
+  color-scheme: dark;
   color: var(--text);
   background: var(--bg);
   font-synthesis: none;
@@ -30,24 +30,8 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
+#social .button-icon {
+  filter: invert(1) brightness(2);
 }
 
 #root {