diff --git a/src/App.tsx b/src/App.tsx
index e3b2cd8..adcb8a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -133,9 +133,8 @@ export default function App() {
               <Layers size={12} /> Console
               {apiLogCount > 0 && <span className="badge mono">{apiLogCount}</span>}
             </button>
-            <button className="link-btn" onClick={() => useApp.getState().setTheme(useApp.getState().theme === "dark" ? "light" : "dark")} title="Toggle theme">
-              {useApp.getState().theme === "dark" ? <Sun size={13} /> : <Moon size={13} />}
-            </button>
+            <ThemeToggle />
+
             <button className="link-btn" onClick={() => setCmdOpen(true)}>
               <Cmd size={13} /> <kbd>⌘K</kbd>
             </button>
@@ -159,3 +158,20 @@ export default function App() {
     </div>
   );
 }
+
+function ThemeToggle() {
+  const theme = useApp((s) => s.theme);
+  const setTheme = useApp((s) => s.setTheme);
+  const isDark = theme === "dark";
+  return (
+    <button
+      className="link-btn theme-toggle"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      title={isDark ? "Switch to light theme" : "Switch to dark theme"}
+      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+    >
+      {isDark ? <Sun size={13} /> : <Moon size={13} />}
+      <span className="theme-toggle-label">{isDark ? "LIGHT" : "DARK"}</span>
+    </button>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 46ebbe2..ad83fb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1787,3 +1787,6 @@ select.studio-input { background: var(--bp-paper); }
   gap: var(--space-md);
   align-items: center;
 }
+
+.theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
+.theme-toggle-label { font-size: 10px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }