diff --git a/static/styles/main.css b/static/styles/main.css
index 58aaeb3..4470f50 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -9,37 +9,36 @@
 
 /* tokens */
 :root {
-    --bg: #0a0a0f;
-    --bg-surface: rgba(255, 255, 255, 0.04);
-    --bg-surface-hover: rgba(255, 255, 255, 0.07);
-    --border: rgba(255, 255, 255, 0.08);
-    --border-accent: rgba(139, 92, 246, 0.4);
+    --bg: #0d0d12;
+    --bg-surface: #15151e;
+    --bg-surface-hover: #1c1c28;
+    --border: #232332;
+    --border-accent: rgba(99, 102, 241, 0.4);
 
-    --text-primary: #f1f5f9;
+    --text-primary: #f8fafc;
     --text-secondary: #94a3b8;
-    --text-muted: #475569;
+    --text-muted: #64748b;
 
-    --accent: #8b5cf6;
-    --accent-hover: #7c3aed;
-    --accent-glow: rgba(139, 92, 246, 0.25);
+    --accent: #6366f1; /* Indigo */
+    --accent-hover: #4f46e5;
+    --accent-glow: rgba(99, 102, 241, 0.15);
 
-    --success-bg: rgba(16, 185, 129, 0.08);
-    --success-border: rgba(16, 185, 129, 0.25);
-    --success-text: #34d399;
-    --success-label: #6ee7b7;
+    --success-bg: rgba(16, 185, 129, 0.05);
+    --success-border: rgba(16, 185, 129, 0.2);
+    --success-text: #10b981;
+    --success-label: #34d399;
 
-    --radius-sm: 6px;
-    --radius-md: 12px;
-    --radius-lg: 20px;
+    --radius-sm: 8px;
+    --radius-md: 14px;
+    --radius-lg: 24px;
+    --radius-full: 9999px;
 
-    --shadow-card: 0 0 0 1px var(--border), 0 24px 48px rgba(0, 0, 0, 0.4);
-    --shadow-btn: 0 0 20px var(--accent-glow);
+    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-btn: 0 0 30px var(--accent-glow);
 
-    --font:
-        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-        sans-serif;
-    --font-mono:
-        "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
+    --font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
+    --font-heading: "Outfit", "Inter", sans-serif;
+    --font-mono: "JetBrains Mono", monospace;
 }
 
 /* base */
@@ -58,20 +57,6 @@ body {
     justify-content: center;
     padding: 2rem;
     line-height: 1.6;
-
-    /* subtle grid bg */
-    background-image:
-        radial-gradient(
-            ellipse 80% 60% at 50% -10%,
-            rgba(139, 92, 246, 0.12),
-            transparent
-        ),
-        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-    background-size:
-        auto,
-        40px 40px,
-        40px 40px;
 }
 
 /* card */
@@ -79,15 +64,12 @@ body {
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-card);
-    padding: 3rem 2.75rem;
+    padding: 3.5rem 3rem;
     max-width: 480px;
     width: 100%;
     text-align: center;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
     position: relative;
-    overflow: hidden;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 /* app shell body — reset centering, fill viewport */
@@ -353,9 +335,7 @@ footer a:hover {
     border-radius: 99px;
 }
 
-/* ============================================================
-   AUTH PAGES (login / register)
-   ============================================================ */
+/* Auth */
 
 /* body variant — keeps the grid bg from body, just re-centers */
 .auth-body {
@@ -485,41 +465,27 @@ footer a:hover {
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    background: linear-gradient(135deg, var(--accent), #6366f1);
+    background: var(--accent);
     color: #fff;
     font-family: var(--font);
     font-size: 0.95rem;
     font-weight: 600;
-    padding: 0.75rem;
-    border: none;
+    padding: 0.85rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-md);
     cursor: pointer;
-    letter-spacing: 0.01em;
-    transition:
-        opacity 0.2s ease,
-        transform 0.15s ease,
-        box-shadow 0.2s ease;
-    box-shadow: var(--shadow-btn);
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-primary::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(rgba(255, 255, 255, 0.12), transparent);
-    pointer-events: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .btn-primary:hover {
-    opacity: 0.9;
-    box-shadow: 0 0 32px var(--accent-glow);
+    background: var(--accent-hover);
     transform: translateY(-1px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
 }
 
 .btn-primary:active {
-    transform: scale(0.97) translateY(0);
+    transform: translateY(0);
 }
 
 /* footer link line below the card */
@@ -557,61 +523,64 @@ footer a:hover {
     background: var(--border);
 }
 
-/* ============================================================
-   HOME / DASHBOARD — app shell
-   ============================================================ */
+/* Dashboard */
 
 .app-shell {
     display: grid;
-    grid-template-columns: 240px 1fr;
-    grid-template-rows: 1fr;
+    grid-template-columns: 260px 1fr;
     height: 100vh;
     width: 100%;
     overflow: hidden;
+    background: #09090b;
 }
 
 /* sidebar */
 .sidebar {
-    background: rgba(255, 255, 255, 0.02);
-    border-right: 1px solid var(--border);
+    background: #09090b;
+    border-right: 1px solid #18181b;
     display: flex;
     flex-direction: column;
     padding: 1.5rem 1rem;
     overflow-y: auto;
+    z-index: 10;
 }
 
 .sidebar-logo {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.75rem;
     padding: 0.5rem 0.75rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 2.5rem;
 }
 
 .sidebar-logo .logo-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: var(--radius-sm);
-    background: linear-gradient(135deg, var(--accent), #6366f1);
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, var(--accent), #4f46e5);
+    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: white;
     font-size: 1.1rem;
-    box-shadow: 0 0 16px var(--accent-glow);
+    font-weight: bold;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
     flex-shrink: 0;
 }
 
 .sidebar-logo .logo-text {
-    font-weight: 700;
-    font-size: 1rem;
-    background: linear-gradient(135deg, #c4b5fd, var(--accent));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-family: var(--font-heading);
+    font-size: 1.15rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
 }
 
-/* nav links */
-.sidebar-nav {
+.sidebar-logo .logo-text span {
+    color: var(--accent);
+}
+
+/* Nav */
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -633,14 +602,15 @@ footer a:hover {
 }
 
 .nav-item:hover {
-    background: var(--bg-surface-hover);
+    background: #18181b;
     color: var(--text-primary);
 }
 
 .nav-item.active {
-    background: rgba(139, 92, 246, 0.12);
-    color: var(--accent);
-    border-color: rgba(139, 92, 246, 0.2);
+    background: #18181b;
+    color: var(--text-primary);
+    border-color: #27272a;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
 .nav-item svg {
@@ -667,14 +637,14 @@ footer a:hover {
 .user-avatar {
     width: 32px;
     height: 32px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--accent), #6366f1);
+    border-radius: 8px;
+    background: #27272a;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: #fff;
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 0.85rem;
     flex-shrink: 0;
 }
 
@@ -728,16 +698,20 @@ footer a:hover {
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    background: var(--bg);
+    background: #0d0d12;
 }
 
 .topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1.25rem 2rem;
-    border-bottom: 1px solid var(--border);
+    padding: 1rem 2.5rem;
+    border-bottom: 1px solid #18181b;
+    background: #0d0d12;
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 5;
 }
 
 .topbar-title {
@@ -915,22 +889,21 @@ footer a:hover {
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(9, 9, 11, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
-    backdrop-filter: blur(4px);
 }
 
 .modal {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
+    background: #18181b;
+    border: 1px solid #27272a;
     border-radius: var(--radius-lg);
-    padding: 2rem;
+    padding: 2.5rem;
     max-width: 420px;
     width: 90%;
-    box-shadow: var(--shadow-card);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
 
 .modal-header {
@@ -947,16 +920,21 @@ footer a:hover {
 }
 
 .modal-close {
-    background: none;
+    background: #27272a;
     border: none;
     color: var(--text-secondary);
-    font-size: 1.5rem;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    padding: 0.25rem;
-    line-height: 1;
+    transition: all 0.2s;
 }
 
 .modal-close:hover {
+    background: #3f3f46;
     color: var(--text-primary);
 }
 
@@ -1030,20 +1008,24 @@ footer a:hover {
 }
 
 .story-card {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--border);
+    background: #18181b;
+    border: 1px solid #27272a;
     border-radius: var(--radius-md);
-    padding: 1rem;
-    transition: all 0.15s;
+    padding: 1.25rem;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    cursor: default;
 }
 
 .story-card:hover {
-    border-color: var(--border-accent);
+    border-color: #3f3f46;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
 }
 
 .story-revealed {
-    border-color: rgba(139, 92, 246, 0.3);
-    background: rgba(139, 92, 246, 0.05);
+    border-color: rgba(99, 102, 241, 0.2);
+    background: rgba(99, 102, 241, 0.03);
 }
 
 .story-header {
@@ -1145,15 +1127,15 @@ footer a:hover {
 }
 
 .vote-option {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
+    background: #1c1c28;
+    border: 1px solid #2d2d3d;
     border-radius: var(--radius-md);
-    padding: 0.4rem 0.75rem;
+    padding: 0.5rem 0.85rem;
     font-family: var(--font-mono);
     font-size: 0.85rem;
     color: var(--text-secondary);
     cursor: pointer;
-    transition: all 0.15s;
+    transition: all 0.2s;
 }
 
 .vote-option:hover {
@@ -1164,13 +1146,14 @@ footer a:hover {
 
 .vote-option.vote-selected {
     border-color: var(--accent);
-    background: rgba(139, 92, 246, 0.12);
-    color: var(--text-primary);
+    background: var(--accent);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
 .story-active {
-    border-color: var(--success-border);
-    background: var(--success-bg);
+    border-color: rgba(16, 185, 129, 0.2);
+    background: rgba(16, 185, 129, 0.02);
 }
 
 .story-action-btn {
@@ -1286,9 +1269,7 @@ footer a:hover {
     animation: pulse 2s ease infinite;
 }
 
-/* ============================================================
-   RESPONSIVE
-   ============================================================ */
+/* Responsive */
 
 .sidebar-backdrop {
     display: none;
diff --git a/templates/index.html b/templates/index.html
index f9395ed..f45b489 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,7 +7,7 @@
         <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
             rel="stylesheet"
         />
         <link rel="stylesheet" href="/static/styles/main.css" />
diff --git a/templates/login.html b/templates/login.html
index 4391ffa..b37be69 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -7,7 +7,7 @@
         <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
             rel="stylesheet"
         />
         <link rel="stylesheet" href="/static/styles/main.css" />
diff --git a/templates/register.html b/templates/register.html
index e8ec340..cecbf1a 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -7,7 +7,7 @@
         <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
             rel="stylesheet"
         />
         <link rel="stylesheet" href="/static/styles/main.css" />
diff --git a/templates/room.html b/templates/room.html
index b234e61..74e996e 100644
--- a/templates/room.html
+++ b/templates/room.html
@@ -7,7 +7,7 @@
         <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
             rel="stylesheet"
         />
 <link rel="stylesheet" href="/static/styles/main.css" />