1 files changed, 30 insertions, 3 deletions

diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
index 7d06547..0c0c2e8 100644
--- a/renderer/src/components/SettingsPage.tsx
+++ b/renderer/src/components/SettingsPage.tsx
@@ -4,15 +4,18 @@ import { GitSettings } from "./settings/GitSettings";
 import { ModelSettings } from "./settings/ModelSettings";
 import { McpSettings } from "./settings/McpSettings";
 
-type SettingsSection = "model" | "mcp" | "system-prompts" | "git";
+type Theme = "dark" | "light";
+type SettingsSection = "appearance" | "model" | "mcp" | "system-prompts" | "git";
 
 interface SettingsPageProps {
   onClose: () => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }
 
-export function SettingsPage({ onClose }: SettingsPageProps) {
+export function SettingsPage({ onClose, theme, onToggleTheme }: SettingsPageProps) {
   const [activeSection, setActiveSection] =
-    useState<SettingsSection>("model");
+    useState<SettingsSection>("appearance");
 
   return (
     <div className="settings-overlay">
@@ -35,6 +38,14 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
         <nav className="settings-nav">
           <button
             className={`settings-nav-item${
+              activeSection === "appearance" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("appearance")}
+          >
+            Appearance
+          </button>
+          <button
+            className={`settings-nav-item${
               activeSection === "model" ? " active" : ""
             }`}
             onClick={() => setActiveSection("model")}
@@ -69,6 +80,22 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
 
         {/* Content */}
         <div className="settings-content">
+          {activeSection === "appearance" && (
+            <div>
+              <div className="settings-section-title">Theme</div>
+              <div className="settings-section-desc">
+                Choose between light and dark mode.
+              </div>
+              <div className="settings-toggle-row">
+                <span className="settings-toggle-label">
+                  {theme === "dark" ? "Dark" : "Light"}
+                </span>
+                <button className="btn-secondary" onClick={onToggleTheme}>
+                  Switch to {theme === "dark" ? "Light" : "Dark"} mode
+                </button>
+              </div>
+            </div>
+          )}
           {activeSection === "model" && <ModelSettings />}
           {activeSection === "mcp" && <McpSettings />}
           {activeSection === "system-prompts" && <SystemPromptsSettings />}