diff --git a/apps/web/src/pages/settings.tsx b/apps/web/src/pages/settings.tsx
index 29671d5..e9546dd 100644
--- a/apps/web/src/pages/settings.tsx
+++ b/apps/web/src/pages/settings.tsx
@@ -53,6 +53,15 @@ export const SettingsPage = () => {
       const updated = await updateUserConfig(update);
       setConfig(updated);
       setSaveStatus("saved");
+      
+      // Apply theme immediately
+      const theme = updated.theme ?? "system";
+      if (theme === "system") {
+        document.documentElement.removeAttribute("data-theme");
+      } else {
+        document.documentElement.setAttribute("data-theme", theme);
+      }
+      
       setTimeout(() => setSaveStatus("idle"), 2000);
     } catch {
       setSaveStatus("error");
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 3cd36e9..0a3e2e1 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -43,6 +43,14 @@
   --brand: #4a9e7f;
   --brand-strong: #3d8a6e;
   --border: #3d3d38;
+  --success: #22c55e;
+  --success-light: rgba(34, 197, 94, 0.15);
+  --warning: #f59e0b;
+  --warning-light: rgba(245, 158, 11, 0.15);
+  --danger: #ef4444;
+  --danger-light: rgba(239, 68, 68, 0.15);
+  --info: #3b82f6;
+  --info-light: rgba(59, 130, 246, 0.15);
 }
 
 * {
@@ -80,6 +88,10 @@ a {
   backdrop-filter: blur(7px);
 }
 
+[data-theme="dark"] .shell-header {
+  background: rgba(37, 37, 34, 0.85);
+}
+
 .brand {
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -366,11 +378,14 @@ a {
 }
 
 .form-field input,
-.form-field textarea {
+.form-field textarea,
+.form-field select {
   padding: 0.55rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: 10px;
   font: inherit;
+  background: var(--panel);
+  color: var(--ink);
 }
 
 .dialog-actions {
@@ -469,18 +484,18 @@ a {
 
 /* URL Validation Styles */
 .valid-url {
-  border-color: #16a34a !important;
-  background-color: #f0fdf4 !important;
+  border-color: var(--success, #16a34a) !important;
+  background-color: var(--success-light, #f0fdf4) !important;
 }
 
 .needs-parsing-url {
-  border-color: #ca8a04 !important;
-  background-color: #fefce8 !important;
+  border-color: var(--warning, #ca8a04) !important;
+  background-color: var(--warning-light, #fefce8) !important;
 }
 
 .invalid-url {
-  border-color: #dc2626 !important;
-  background-color: #fef2f2 !important;
+  border-color: var(--danger, #dc2626) !important;
+  background-color: var(--danger-light, #fef2f2) !important;
 }
 
 .validation-status {
@@ -490,11 +505,11 @@ a {
 }
 
 .validation-status.valid {
-  color: #16a34a;
+  color: var(--success, #16a34a);
 }
 
 .validation-status.warning {
-  color: #ca8a04;
+  color: var(--warning, #ca8a04);
 }
 
 .validation-status.invalid {