1 files changed, 51 insertions, 0 deletions

diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
new file mode 100644
index 0000000..5267665
--- /dev/null
+++ b/renderer/src/components/SettingsPage.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { SystemPromptsSettings } from "./settings/SystemPromptsSettings";
+
+type SettingsSection = "system-prompts";
+
+interface SettingsPageProps {
+  onClose: () => void;
+}
+
+export function SettingsPage({ onClose }: SettingsPageProps) {
+  const [activeSection, setActiveSection] =
+    useState<SettingsSection>("system-prompts");
+
+  return (
+    <div className="settings-overlay">
+      {/* Header — matches the main app header height/style */}
+      <div className="settings-header">
+        <div className="settings-header-left">
+          <span className="settings-title">\u2699 Settings</span>
+        </div>
+        <button
+          className="settings-close"
+          onClick={onClose}
+          title="Close settings"
+        >
+          \u00d7
+        </button>
+      </div>
+
+      <div className="settings-body">
+        {/* Side nav */}
+        <nav className="settings-nav">
+          <button
+            className={`settings-nav-item${
+              activeSection === "system-prompts" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("system-prompts")}
+          >
+            System Prompts
+          </button>
+          {/* Future sections added here */}
+        </nav>
+
+        {/* Content */}
+        <div className="settings-content">
+          {activeSection === "system-prompts" && <SystemPromptsSettings />}
+        </div>
+      </div>
+    </div>
+  );
+}