diff --git a/index.html b/index.html
index 523836c..31fea73 100644
--- a/index.html
+++ b/index.html
@@ -208,6 +208,51 @@
 
         <!-- Chat Tab -->
         <div class="settings-pane" id="stab-chat">
+          <div class="settings-group">
+            <label>Theme</label>
+            <div class="theme-grid" id="theme-grid">
+              <button class="theme-swatch active" data-theme="midnight-purple" title="Midnight Purple">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#8a2be2,#ff00ff)"></span>
+                <span class="swatch-label">Midnight</span>
+              </button>
+              <button class="theme-swatch" data-theme="crimson-noir" title="Crimson Noir">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#b71c1c,#ff1744)"></span>
+                <span class="swatch-label">Crimson</span>
+              </button>
+              <button class="theme-swatch" data-theme="ocean-deep" title="Ocean Deep">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#0277bd,#00bcd4)"></span>
+                <span class="swatch-label">Ocean</span>
+              </button>
+              <button class="theme-swatch" data-theme="ember" title="Ember">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#e65100,#ff9800)"></span>
+                <span class="swatch-label">Ember</span>
+              </button>
+              <button class="theme-swatch" data-theme="neon-green" title="Neon Green">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#00c853,#00ff41)"></span>
+                <span class="swatch-label">Neon</span>
+              </button>
+              <button class="theme-swatch" data-theme="cyberpunk" title="Cyberpunk">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#e040fb,#f5ee28)"></span>
+                <span class="swatch-label">Cyber</span>
+              </button>
+              <button class="theme-swatch" data-theme="rose-gold" title="Rose Gold">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#c2185b,#f48fb1)"></span>
+                <span class="swatch-label">Rosé</span>
+              </button>
+              <button class="theme-swatch" data-theme="arctic" title="Arctic">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#3949ab,#f5f7fa)"></span>
+                <span class="swatch-label">Arctic</span>
+              </button>
+              <button class="theme-swatch" data-theme="daylight" title="Daylight">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#9c27b0,#fafafa)"></span>
+                <span class="swatch-label">Light</span>
+              </button>
+              <button class="theme-swatch" data-theme="midnight-blue" title="Midnight Blue">
+                <span class="swatch-fill" style="background:linear-gradient(135deg,#1a237e,#448aff)"></span>
+                <span class="swatch-label">Navy</span>
+              </button>
+            </div>
+          </div>
           <div class="settings-group">
             <label>Font Size</label>
             <div class="settings-row">
diff --git a/static/chat.js b/static/chat.js
index ebdc79b..0a15a65 100644
--- a/static/chat.js
+++ b/static/chat.js
@@ -656,10 +656,13 @@ const prefs = {
     timeFormat:  localStorage.getItem("sc_timeformat") || "12h",
     enterToSend: localStorage.getItem("sc_enter_send") !== "false",
     sounds:      localStorage.getItem("sc_sounds") !== "false",
+    theme:       localStorage.getItem("sc_theme") || "midnight-purple",
 };
 
 // Apply saved font size on load
 document.documentElement.style.setProperty("--chat-font-size", prefs.fontSize + "px");
+// Apply saved theme on load
+document.documentElement.setAttribute("data-theme", prefs.theme);
 
 $("settings-btn").onclick = () => {
     // Populate current values
@@ -684,6 +687,11 @@ $("settings-btn").onclick = () => {
     $("settings-sounds").textContent = prefs.sounds ? "On" : "Off";
     $("settings-sounds").classList.toggle("active", prefs.sounds);
 
+    // Sync theme picker
+    document.querySelectorAll(".theme-swatch").forEach(s => {
+        s.classList.toggle("active", s.dataset.theme === prefs.theme);
+    });
+
     settingsModal.classList.remove("hidden");
 };
 
@@ -711,6 +719,18 @@ $("settings-fontsize").addEventListener("input", (e) => {
     document.documentElement.style.setProperty("--chat-font-size", val + "px");
 });
 
+// Theme picker
+document.querySelectorAll(".theme-swatch").forEach(swatch => {
+    swatch.addEventListener("click", () => {
+        const theme = swatch.dataset.theme;
+        prefs.theme = theme;
+        localStorage.setItem("sc_theme", theme);
+        document.documentElement.setAttribute("data-theme", theme);
+        document.querySelectorAll(".theme-swatch").forEach(s => s.classList.remove("active"));
+        swatch.classList.add("active");
+    });
+});
+
 // Timestamp format toggle
 document.querySelectorAll("[data-tf]").forEach(btn => {
     btn.addEventListener("click", () => {
diff --git a/static/style.css b/static/style.css
index 5b1ce00..113e7d0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -6,14 +6,123 @@
 :root {
   --bg-deep: #0a0015;
   --bg-card: rgba(26, 0, 48, 0.7);
+  --bg-header: rgba(10, 0, 20, 0.8);
   --accent-magenta: #ff00ff;
   --accent-purple: #8a2be2;
+  --accent-glow: rgba(255, 0, 255, 0.3);
+  --accent-glow-strong: rgba(255, 0, 255, 0.5);
+  --bg-gradient-1: rgba(138, 43, 226, 0.15);
+  --bg-gradient-2: rgba(255, 0, 255, 0.1);
   --text-main: #f0f0f0;
   --text-dim: #b0b0b0;
   --glass-border: rgba(255, 255, 255, 0.1);
   --error-red: #ff3366;
   --success-green: #00ffaa;
   --ai-teal: #00f2ff;
+  --msg-received-bg: rgba(255, 255, 255, 0.08);
+  --msg-received-border: rgba(255, 255, 255, 0.05);
+}
+
+/* ── Themes ──────────────────────────────────────────────────────────────── */
+[data-theme="midnight-purple"] {
+  --bg-deep: #0a0015; --bg-card: rgba(26, 0, 48, 0.7); --bg-header: rgba(10, 0, 20, 0.8);
+  --accent-magenta: #ff00ff; --accent-purple: #8a2be2;
+  --accent-glow: rgba(255, 0, 255, 0.3); --accent-glow-strong: rgba(255, 0, 255, 0.5);
+  --bg-gradient-1: rgba(138, 43, 226, 0.15); --bg-gradient-2: rgba(255, 0, 255, 0.1);
+  --text-main: #f0f0f0; --text-dim: #b0b0b0;
+  --msg-received-bg: rgba(255, 255, 255, 0.08); --msg-received-border: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="crimson-noir"] {
+  --bg-deep: #0d0000; --bg-card: rgba(40, 0, 0, 0.7); --bg-header: rgba(15, 0, 0, 0.85);
+  --accent-magenta: #ff1744; --accent-purple: #b71c1c;
+  --accent-glow: rgba(255, 23, 68, 0.3); --accent-glow-strong: rgba(255, 23, 68, 0.5);
+  --bg-gradient-1: rgba(183, 28, 28, 0.15); --bg-gradient-2: rgba(255, 23, 68, 0.1);
+  --text-main: #f0e8e8; --text-dim: #b09090;
+  --msg-received-bg: rgba(255, 200, 200, 0.06); --msg-received-border: rgba(255, 200, 200, 0.04);
+  --ai-teal: #ff6e6e;
+}
+
+[data-theme="ocean-deep"] {
+  --bg-deep: #000a14; --bg-card: rgba(0, 20, 48, 0.7); --bg-header: rgba(0, 8, 20, 0.85);
+  --accent-magenta: #00bcd4; --accent-purple: #0277bd;
+  --accent-glow: rgba(0, 188, 212, 0.3); --accent-glow-strong: rgba(0, 188, 212, 0.5);
+  --bg-gradient-1: rgba(2, 119, 189, 0.15); --bg-gradient-2: rgba(0, 188, 212, 0.1);
+  --text-main: #e0f0f0; --text-dim: #90b0b0;
+  --msg-received-bg: rgba(200, 255, 255, 0.06); --msg-received-border: rgba(200, 255, 255, 0.04);
+  --ai-teal: #4dd0e1;
+}
+
+[data-theme="ember"] {
+  --bg-deep: #0d0800; --bg-card: rgba(40, 20, 0, 0.7); --bg-header: rgba(15, 8, 0, 0.85);
+  --accent-magenta: #ff9800; --accent-purple: #e65100;
+  --accent-glow: rgba(255, 152, 0, 0.3); --accent-glow-strong: rgba(255, 152, 0, 0.5);
+  --bg-gradient-1: rgba(230, 81, 0, 0.15); --bg-gradient-2: rgba(255, 152, 0, 0.1);
+  --text-main: #f0e8e0; --text-dim: #b09880;
+  --msg-received-bg: rgba(255, 230, 200, 0.06); --msg-received-border: rgba(255, 230, 200, 0.04);
+  --ai-teal: #ffb74d;
+}
+
+[data-theme="neon-green"] {
+  --bg-deep: #000a00; --bg-card: rgba(0, 30, 0, 0.7); --bg-header: rgba(0, 10, 0, 0.85);
+  --accent-magenta: #00ff41; --accent-purple: #00c853;
+  --accent-glow: rgba(0, 255, 65, 0.3); --accent-glow-strong: rgba(0, 255, 65, 0.5);
+  --bg-gradient-1: rgba(0, 200, 83, 0.12); --bg-gradient-2: rgba(0, 255, 65, 0.08);
+  --text-main: #e0ffe0; --text-dim: #80b080;
+  --msg-received-bg: rgba(200, 255, 200, 0.06); --msg-received-border: rgba(200, 255, 200, 0.04);
+  --ai-teal: #69f0ae;
+}
+
+[data-theme="cyberpunk"] {
+  --bg-deep: #0a0014; --bg-card: rgba(20, 0, 40, 0.75); --bg-header: rgba(10, 0, 20, 0.85);
+  --accent-magenta: #f5ee28; --accent-purple: #e040fb;
+  --accent-glow: rgba(245, 238, 40, 0.3); --accent-glow-strong: rgba(245, 238, 40, 0.5);
+  --bg-gradient-1: rgba(224, 64, 251, 0.15); --bg-gradient-2: rgba(245, 238, 40, 0.08);
+  --text-main: #f0f0f0; --text-dim: #b0a0c0;
+  --msg-received-bg: rgba(245, 238, 40, 0.06); --msg-received-border: rgba(245, 238, 40, 0.04);
+  --ai-teal: #e040fb;
+}
+
+[data-theme="rose-gold"] {
+  --bg-deep: #0d0508; --bg-card: rgba(40, 15, 20, 0.7); --bg-header: rgba(15, 5, 8, 0.85);
+  --accent-magenta: #f48fb1; --accent-purple: #c2185b;
+  --accent-glow: rgba(244, 143, 177, 0.3); --accent-glow-strong: rgba(244, 143, 177, 0.5);
+  --bg-gradient-1: rgba(194, 24, 91, 0.12); --bg-gradient-2: rgba(244, 143, 177, 0.08);
+  --text-main: #f5e8ed; --text-dim: #c0a0a8;
+  --msg-received-bg: rgba(255, 200, 220, 0.06); --msg-received-border: rgba(255, 200, 220, 0.04);
+  --ai-teal: #f48fb1;
+}
+
+[data-theme="arctic"] {
+  --bg-deep: #f5f7fa; --bg-card: rgba(255, 255, 255, 0.85); --bg-header: rgba(240, 242, 248, 0.95);
+  --accent-magenta: #5c6bc0; --accent-purple: #3949ab;
+  --accent-glow: rgba(92, 107, 192, 0.25); --accent-glow-strong: rgba(92, 107, 192, 0.4);
+  --bg-gradient-1: rgba(57, 73, 171, 0.08); --bg-gradient-2: rgba(92, 107, 192, 0.06);
+  --text-main: #1a1a2e; --text-dim: #666680;
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --msg-received-bg: rgba(0, 0, 0, 0.05); --msg-received-border: rgba(0, 0, 0, 0.08);
+  --ai-teal: #5c6bc0; --success-green: #43a047;
+}
+
+[data-theme="daylight"] {
+  --bg-deep: #fafafa; --bg-card: rgba(255, 255, 255, 0.9); --bg-header: rgba(245, 245, 245, 0.95);
+  --accent-magenta: #e91e63; --accent-purple: #9c27b0;
+  --accent-glow: rgba(233, 30, 99, 0.2); --accent-glow-strong: rgba(233, 30, 99, 0.35);
+  --bg-gradient-1: rgba(156, 39, 176, 0.06); --bg-gradient-2: rgba(233, 30, 99, 0.05);
+  --text-main: #212121; --text-dim: #757575;
+  --glass-border: rgba(0, 0, 0, 0.12);
+  --msg-received-bg: rgba(0, 0, 0, 0.04); --msg-received-border: rgba(0, 0, 0, 0.06);
+  --ai-teal: #e91e63; --success-green: #2e7d32;
+}
+
+[data-theme="midnight-blue"] {
+  --bg-deep: #0a0a1a; --bg-card: rgba(10, 10, 40, 0.75); --bg-header: rgba(5, 5, 20, 0.85);
+  --accent-magenta: #448aff; --accent-purple: #1a237e;
+  --accent-glow: rgba(68, 138, 255, 0.3); --accent-glow-strong: rgba(68, 138, 255, 0.5);
+  --bg-gradient-1: rgba(26, 35, 126, 0.15); --bg-gradient-2: rgba(68, 138, 255, 0.1);
+  --text-main: #e0e8f0; --text-dim: #8090b0;
+  --msg-received-bg: rgba(200, 220, 255, 0.06); --msg-received-border: rgba(200, 220, 255, 0.04);
+  --ai-teal: #82b1ff;
 }
 
 * {
@@ -27,8 +136,8 @@ body {
   font-family: 'Inter', sans-serif;
   background-color: var(--bg-deep);
   background-image: 
-    radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 40%),
-    radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%);
+    radial-gradient(circle at 20% 30%, var(--bg-gradient-1) 0%, transparent 40%),
+    radial-gradient(circle at 80% 70%, var(--bg-gradient-2) 0%, transparent 40%);
   color: var(--text-main);
   height: 100vh;
   overflow: hidden;
@@ -83,7 +192,7 @@ h1, h2, h3, .logo-text, .paywall-header h2 {
 
 .logo-accent {
   color: var(--accent-magenta);
-  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
+  text-shadow: 0 0 10px var(--accent-glow-strong);
 }
 
 .logo-sub {
@@ -117,7 +226,7 @@ h1, h2, h3, .logo-text, .paywall-header h2 {
 .auth-tab.active {
   background: var(--accent-purple);
   color: white;
-  box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
+  box-shadow: 0 4px 12px var(--accent-glow);
 }
 
 /* Form */
@@ -144,7 +253,7 @@ input:focus {
 .crypto-note {
   font-size: 0.75rem;
   color: var(--accent-magenta);
-  background: rgba(255, 0, 255, 0.05);
+  background: color-mix(in srgb, var(--accent-magenta) 5%, transparent);
   padding: 10px;
   border-radius: 8px;
   margin: 1rem 0;
@@ -161,13 +270,13 @@ input:focus {
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3);
+  box-shadow: 0 4px 15px var(--accent-glow);
   transition: transform 0.2s, box-shadow 0.2s;
   margin-top: 1rem;
 }
 
 .btn-primary:active { transform: scale(0.98); }
-.btn-primary:hover { box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4); }
+.btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow-strong); }
 
 .mod-login {
   text-align: left;
@@ -194,7 +303,7 @@ input:focus {
 
 .glass-header {
   height: 64px;
-  background: rgba(10, 0, 20, 0.8);
+  background: var(--bg-header);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--glass-border);
@@ -409,16 +518,16 @@ input:focus {
 
 .msg-received { align-self: flex-start; }
 .msg-received .msg-bubble { 
-  background: rgba(255, 255, 255, 0.08); 
+  background: var(--msg-received-bg); 
   border-bottom-left-radius: 4px;
-  border: 1px solid rgba(255,255,255,0.05);
+  border: 1px solid var(--msg-received-border);
 }
 
 .msg-sent { align-self: flex-end; }
 .msg-sent .msg-bubble {
   background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
   border-bottom-right-radius: 4px;
-  box-shadow: 0 4px 12px rgba(255, 0, 255, 0.2);
+  box-shadow: 0 4px 12px var(--accent-glow);
 }
 
 .msg-system { 
@@ -434,7 +543,7 @@ input:focus {
 .msg-system strong { color: var(--accent-magenta); }
 
 /* ── AI Area ─────────────────────────────────────────────────────────────── */
-.chat-ai { background: radial-gradient(circle at top, rgba(0, 242, 255, 0.05), transparent 70%); }
+.chat-ai { background: radial-gradient(circle at top, color-mix(in srgb, var(--ai-teal) 5%, transparent), transparent 70%); }
 
 .ai-header {
   padding: 1rem;
@@ -475,7 +584,7 @@ input:focus {
   display: flex;
   align-items: flex-end;
   gap: 10px;
-  background: rgba(10, 0, 20, 0.8);
+  background: var(--bg-header);
   border-top: 1px solid var(--glass-border);
 }
 
@@ -504,7 +613,7 @@ textarea {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
+  box-shadow: 0 0 15px var(--accent-glow-strong);
 }
 
 /* ── Modals ──────────────────────────────────────────────────────────────── */
@@ -529,7 +638,7 @@ textarea {
 
 .paywall-card {
   border: 2px solid var(--ai-teal);
-  box-shadow: 0 0 40px rgba(0, 242, 255, 0.2);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--ai-teal) 20%, transparent);
 }
 
 .ai-avatar.large { width: 80px; height: 80px; font-size: 2.5rem; margin: 0 auto 1.5rem; }
@@ -556,7 +665,7 @@ textarea {
   border-radius: 12px;
   background: rgba(15, 0, 30, 0.95);
   border: 1px solid var(--glass-border);
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 10px rgba(138, 43, 226, 0.2);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 10px color-mix(in srgb, var(--accent-purple) 20%, transparent);
   display: flex;
   flex-direction: column;
 }
@@ -646,7 +755,7 @@ textarea {
 .settings-tab.active {
   background: var(--accent-purple);
   color: white;
-  box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
+  box-shadow: 0 2px 8px var(--accent-glow);
 }
 
 .settings-body {
@@ -860,6 +969,49 @@ textarea {
 }
 
 /* ── Mobile Overrides ─────────────────────────────────────────────────────── */
+
+/* ── Theme Picker ─────────────────────────────────────────────────────────── */
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.theme-swatch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  padding: 6px;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.15s;
+}
+
+.theme-swatch:hover { transform: scale(1.08); }
+.theme-swatch.active {
+  border-color: var(--accent-magenta);
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.swatch-fill {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: block;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+}
+
+.swatch-label {
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
 @media (max-width: 768px) {
   .nicklist-sidebar {
     position: absolute;