Settings: db-viewer redesign, theme/accent wiring, macOS overlay titlebar (#6)

* feat: settings back button returns to origin view (push/pop nav)

* feat: redesign settings screen with db-viewer border styling

* fix: settings sidebar — icon+text tabs, back at top, top border (PR feedback)

* fix: tighten settings sidebar — back and tabs in one group

* fix: settings header shows active tab name instead of duplicated title

* fix: settings — accent back button, header shows active tab; fix App test

* fix: tags settings — no create label, no card chrome (bg/border/padding)

* feat: drag-and-drop tag reordering in settings tags tab

* fix: general settings — remove section card chrome (bg/border/padding)

* fix: merge Appearance and Interface into one settings section

* fix: remove row separators between settings items within sections

* fix: settings rows use gap spacing instead of per-row padding

* feat: strip section cards from all settings tabs; delete SettingsSection

* feat: apply theme and font size settings (appearance wiring)

* feat: honor default folder setting on startup

* feat: confirm_before_delete setting now skips delete confirmations

* feat: default_ports setting prefills new connection forms

* fix: light theme — text colors, native window chrome, ThemePicker preview

* fix: sync window background color with theme so title bar follows light mode

* fix: window-sync test uses microtask flush instead of vi.waitFor

* fix: app root carries canvas bg so home-screen parent matches theme

* fix: grant window set-theme/set-background-color permissions so title bar follows theme

* fix: overlay title bar — webview paints under traffic lights, flat canvas color in both themes

* fix: compact 28px overlay titlebar with visible bottom border

* fix: in-flow titlebar strip (draggable via allowed permission); screens fill remaining height, no bottom clipping

* fix: top border only on settings + db viewer pages, not the titlebar strip

* fix: db viewer sidebar h-screen -> h-full (28px overflow clipped bottom icons)

* fix: system theme resets window to OS before reading matchMedia (was polluted by forced window theme)

* fix: theme switcher labels moved below previews for readability

* feat: configurable accent color setting (circle palette in Appearance)

* docs: update AGENTS.md + README for settings redesign, wired settings, accent color

src/App.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import App from "./App";
+import type { Settings } from "./lib/types";
 import { useConnectionStore } from "./stores/connectionStore";
 import { useSettingsStore } from "./stores/settingsStore";
 import { useUiStore } from "./stores/uiStore";
@@ -15,7 +16,12 @@ vi.mock("./lib/commands", () => ({
     theme: "dark",
     font_size: "medium",
     default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null },
-  }),
+    tag_order: null,
+    table_refresh_rate: 30,
+    table_page_size: 50,
+    shortcuts: {},
+    accent_color: "#2563EB",
+  } satisfies Settings),
   testConnection: vi.fn().mockResolvedValue({ ok: true }),
 }));
 
@@ -29,6 +35,7 @@ beforeEach(() => {
   });
   useSettingsStore.setState({ settings: null, loading: false, error: null });
   useUiStore.setState({ activeView: "home" });
+  useUiStore.setState({ activeFolderId: null });
   vi.clearAllMocks();
 });
 
@@ -52,7 +59,8 @@ describe("App", () => {
   it("renders settings page when activeView is settings", async () => {
     useUiStore.setState({ activeView: "settings" });
     render(<App />);
-    expect(screen.getByText("Settings")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /general/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /back/i })).toBeInTheDocument();
   });
 
   it("renders new connection form when activeView is new-connection", async () => {
@@ -68,4 +76,45 @@ describe("App", () => {
     render(<App />);
     expect(await screen.findByText(/storage error/i)).toBeInTheDocument();
   });
+
+  it("sets the active folder from default_folder_id on startup", async () => {
+    const { getFolders, getSettings } = await import("./lib/commands");
+    vi.mocked(getFolders).mockResolvedValueOnce([
+      {
+        id: "folder-1",
+        name: "Projects",
+        parent_id: null,
+        tag_ids: [],
+        created_at: "",
+        updated_at: "",
+      },
+    ]);
+    // Resolve settings only after folders have loaded so the default-folder
+    // effect doesn't race HomeScreen's "reset missing folder" effect.
+    let resolveSettings!: (value: Settings) => void;
+    vi.mocked(getSettings).mockImplementationOnce(
+      () =>
+        new Promise<Settings>((resolve) => {
+          resolveSettings = resolve;
+        }),
+    );
+    useUiStore.setState({ activeFolderId: null });
+    render(<App />);
+    await screen.findByPlaceholderText(/search connections/i);
+    resolveSettings({
+      confirm_before_delete: true,
+      default_folder_id: "folder-1",
+      theme: "dark",
+      font_size: "medium",
+      default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null },
+      tag_order: null,
+      table_refresh_rate: 30,
+      table_page_size: 50,
+      shortcuts: {},
+      accent_color: "#2563EB",
+    });
+    await waitFor(() => {
+      expect(useUiStore.getState().activeFolderId).toBe("folder-1");
+    });
+  });
 });

src/App.tsx

@@ -9,6 +9,7 @@ import { NewConnectionScreen } from "./components/connections/NewConnectionScree
 import { ErrorBanner } from "./components/ui/ErrorBanner";
 import { ToastContainer } from "./components/ui/Toast";
 import { DbViewerScreen } from "./components/db-viewer/DbViewerScreen";
+import { useAppearance } from "./hooks/useAppearance";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
 const VIEW_TITLES: Record<string, string> = {
@@ -21,8 +22,11 @@ const VIEW_TITLES: Record<string, string> = {
 export default function App() {
     const activeView = useUiStore((s) => s.activeView);
     const setActiveView = useUiStore((s) => s.setActiveView);
+    const settingsReturnView = useUiStore((s) => s.settingsReturnView);
+    const openSettings = useUiStore((s) => s.openSettings);
     const loadConnections = useConnectionStore((s) => s.loadAll);
     const loadSettings = useSettingsStore((s) => s.load);
+    const settings = useSettingsStore((s) => s.settings);
     const connectionError = useConnectionStore((s) => s.error);
     const activeFolderId = useUiStore((s) => s.activeFolderId);
     const folders = useConnectionStore((s) => s.folders);
@@ -30,6 +34,8 @@ export default function App() {
     const prefilledConnectionString = useUiStore((s) => s.prefilledConnectionString);
     const clearPrefilledConnectionString = useUiStore((s) => s.clearPrefilledConnectionString);
 
+    useAppearance(settings?.theme ?? "system", settings?.font_size ?? "medium", settings?.accent_color ?? "#2563EB");
+
     useEffect(() => {
         loadConnections();
         loadSettings();
@@ -37,6 +43,16 @@ export default function App() {
         useBackupStore.getState().initListener().catch(() => {});
     }, [loadConnections, loadSettings]);
 
+    // If the user hasn't navigated anywhere yet, start in the configured default folder
+    const setActiveFolderId = useUiStore((s) => s.setActiveFolderId);
+    const defaultFolderId = settings?.default_folder_id;
+
+    useEffect(() => {
+        if (defaultFolderId && useUiStore.getState().activeFolderId === null) {
+            setActiveFolderId(defaultFolderId);
+        }
+    }, [defaultFolderId, setActiveFolderId]);
+
     useEffect(() => {
         let title = VIEW_TITLES[activeView] ?? "Gridline";
         if (activeView === "db-viewer") {
@@ -55,41 +71,60 @@ export default function App() {
         }
     }, [activeView]);
 
+    const keepDbViewerMounted =
+        activeView === "db-viewer" ||
+        (activeView === "settings" && settingsReturnView === "db-viewer");
+    const dbViewerVisible = activeView === "db-viewer";
+
     return (
-        <div className="min-h-svh select-none">
-            {connectionError && (
-                <div className="px-6 pt-4">
-                    <ErrorBanner
-                        error={connectionError}
-                        onRetry={loadConnections}
+        <div className="h-svh bg-canvas select-none flex flex-col overflow-hidden">
+            {typeof window !== "undefined" &&
+                "__TAURI_INTERNALS__" in window && (
+                    // macOS "Overlay" title bar: in-flow strip the window can be
+                    // dragged by; traffic lights float over it. Only in Tauri.
+                    <div
+                        data-tauri-drag-region
+                        aria-hidden
+                        className="h-7 shrink-0 bg-canvas select-none"
                     />
-                </div>
-            )}
-            {activeView === "settings" && <SettingsPage />}
-            {activeView === "new-connection" && (
-                <NewConnectionScreen
-                    defaultFolderId={activeFolderId}
-                    prefilledConnectionString={prefilledConnectionString ?? ""}
-                    folders={folders}
-                    tags={tags}
-                    onSaved={() => {
-                        clearPrefilledConnectionString();
-                        setActiveView("home");
-                    }}
-                    onCancel={() => {
-                        clearPrefilledConnectionString();
-                        setActiveView("home");
-                    }}
-                />
-            )}
-            {activeView === "home" && <HomeScreen />}
-            {activeView === "db-viewer" && (
-                <DbViewerScreen
-                    connectionId={useUiStore.getState().activeConnectionId ?? ""}
-                    onHome={() => setActiveView("home")}
-                    onSettings={() => setActiveView("settings")}
-                />
-            )}
+                )}
+            <div className="flex-1 min-h-0">
+                {connectionError && (
+                    <div className="px-6 pt-4">
+                        <ErrorBanner
+                            error={connectionError}
+                            onRetry={loadConnections}
+                        />
+                    </div>
+                )}
+                {activeView === "settings" && <SettingsPage />}
+                {activeView === "new-connection" && (
+                    <NewConnectionScreen
+                        defaultFolderId={activeFolderId}
+                        prefilledConnectionString={prefilledConnectionString ?? ""}
+                        folders={folders}
+                        tags={tags}
+                        onSaved={() => {
+                            clearPrefilledConnectionString();
+                            setActiveView("home");
+                        }}
+                        onCancel={() => {
+                            clearPrefilledConnectionString();
+                            setActiveView("home");
+                        }}
+                    />
+                )}
+                {activeView === "home" && <HomeScreen />}
+                {keepDbViewerMounted && (
+                    <div className={dbViewerVisible ? "contents" : "hidden"}>
+                        <DbViewerScreen
+                            connectionId={useUiStore.getState().activeConnectionId ?? ""}
+                            onHome={() => setActiveView("home")}
+                            onSettings={openSettings}
+                        />
+                    </div>
+                )}
+            </div>
             <ToastContainer />
         </div>
     );

src/components/connections/ConnectionFormShell.tsx

@@ -25,7 +25,7 @@ export function ConnectionFormShell({
     children,
 }: ConnectionFormShellProps) {
     return (
-        <div className="min-h-screen bg-canvas">
+        <div className="min-h-full bg-canvas">
             <div className="max-w-lg mx-auto p-8">
                 <Button
                     variant="ghost"

src/components/connections/NewConnectionScreen.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NewConnectionScreen } from "./NewConnectionScreen";
+import { useSettingsStore } from "../../stores/settingsStore";
 
 const { createConnection, notify, testConnection } = vi.hoisted(() => ({
   createConnection: vi.fn().mockResolvedValue({}),
@@ -28,6 +29,39 @@ vi.mock("../../lib/commands", () => ({
 describe("NewConnectionScreen", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    useSettingsStore.setState({ settings: null, loading: false, error: null });
+  });
+
+  it("prefills the port from the default_ports setting", async () => {
+    const user = userEvent.setup();
+    useSettingsStore.setState({
+      settings: {
+        confirm_before_delete: true,
+        default_folder_id: null,
+        theme: "dark",
+        font_size: "medium",
+        default_ports: { postgresql: 6543, mysql: 3306, sqlite: null, redis: 6379 },
+        tag_order: null,
+        table_refresh_rate: 30,
+        table_page_size: 50,
+        shortcuts: {},
+        accent_color: "#2563EB",
+      },
+    });
+    render(<NewConnectionScreen folders={[]} tags={[]} />);
+
+    await user.click(screen.getByText(/configure manually instead/i));
+
+    expect(screen.getByLabelText("Port")).toHaveValue(6543);
+  });
+
+  it("falls back to 5432 when no default port is configured", async () => {
+    const user = userEvent.setup();
+    render(<NewConnectionScreen folders={[]} tags={[]} />);
+
+    await user.click(screen.getByText(/configure manually instead/i));
+
+    expect(screen.getByLabelText("Port")).toHaveValue(5432);
   });
 
   it("switches to detailed mode and back", async () => {

src/components/connections/NewConnectionScreen.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { useNotificationStore } from "../../stores/notificationStore";
+import { useSettingsStore } from "../../stores/settingsStore";
 import { ConnectionFormShell } from "./ConnectionFormShell";
 import { SimpleConnectionForm } from "./SimpleConnectionForm";
 import { DetailedConnectionForm } from "./DetailedConnectionForm";
@@ -26,6 +27,7 @@ interface NewConnectionScreenProps {
 
 function createEmptyForm(
     defaultFolderId: string | null = null,
+    defaultPorts?: Record<string, number | null>,
 ): ConnectionFormData {
     return {
         name: "",
@@ -35,7 +37,7 @@ function createEmptyForm(
         connection_string: "",
         db_type: "postgresql",
         host: "",
-        port: 5432,
+        port: defaultPorts?.postgresql ?? 5432,
         username: null,
         password: null,
         database: null,
@@ -43,6 +45,12 @@ function createEmptyForm(
     };
 }
 
+function getDefaultPort(dbType: string): number {
+    return (
+        useSettingsStore.getState().settings?.default_ports?.[dbType] ?? 5432
+    );
+}
+
 export function NewConnectionScreen({
     defaultFolderId = null,
     prefilledConnectionString = "",
@@ -53,7 +61,10 @@ export function NewConnectionScreen({
 }: NewConnectionScreenProps) {
     const [mode, setMode] = useState<NewConnectionMode>("simple");
     const [form, setForm] = useState<ConnectionFormData>(() =>
-        createEmptyForm(defaultFolderId),
+        createEmptyForm(
+            defaultFolderId,
+            useSettingsStore.getState().settings?.default_ports,
+        ),
     );
     const [testLoading, setTestLoading] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
@@ -69,7 +80,7 @@ export function NewConnectionScreen({
                 connection_string: value,
                 db_type: parsed.db_type,
                 host: parsed.host,
-                port: parsed.port,
+                port: parsed.port ?? getDefaultPort(parsed.db_type),
                 username: parsed.username,
                 password: parsed.password,
                 database: parsed.database,

src/components/db-viewer/DbViewerScreen.tsx

@@ -981,7 +981,7 @@ const onQueriesPanelResizeStart = useCallback(
 
     return (
         <TooltipProvider>
-            <div className="h-screen bg-canvas flex border-t border-border">
+            <div className="h-full bg-canvas flex border-t border-border">
                 <DbViewerSidebar
                     currentView={currentView}
                     onNavigate={handleNavigate}

src/components/db-viewer/DbViewerSidebar.tsx

@@ -71,7 +71,7 @@ export function DbViewerSidebar({
     }
 
     return (
-        <div className="w-14 h-screen bg-canvas border-r border-border flex flex-col items-center py-3 gap-2 shrink-0">
+        <div className="w-14 h-full bg-canvas border-r border-border flex flex-col items-center py-3 gap-2 shrink-0">
             <div className="flex flex-col gap-2 flex-1">
                 {topItems.map(renderItem)}
             </div>

src/components/folders/FolderTree.tsx

@@ -27,7 +27,7 @@ export function FolderTree({ folders, activeFolderId, onSelect }: FolderTreeProp
           ref={setDropRef}
           onClick={() => onSelect(folder.id)}
           className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${
-            isActive ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"
+            isActive ? "bg-accent/20 text-text" : "text-text-muted hover:text-text"
           } ${isOver ? "ring-1 ring-accent bg-accent/10" : ""}`}
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
         >
@@ -46,7 +46,7 @@ export function FolderTree({ folders, activeFolderId, onSelect }: FolderTreeProp
         ref={setRootRef}
         onClick={() => onSelect(null)}
         className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${
-          activeFolderId === null ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"
+          activeFolderId === null ? "bg-accent/20 text-text" : "text-text-muted hover:text-text"
         } ${isRootOver ? "ring-1 ring-accent bg-accent/10" : ""}`}
       >
         <ChevronRight size={14} /> All Connections

src/components/layout/ActionRow.tsx

@@ -17,6 +17,7 @@ interface ActionRowProps {
 
 export function ActionRow({ onImport, onExport, onNewFolder, onFilters: _onFilters, onDeleteSelected, visibleItemIds = [] }: ActionRowProps) {
   const setActiveView = useUiStore((s) => s.setActiveView);
+  const openSettings = useUiStore((s) => s.openSettings);
   const selectedItemIds = useUiStore((s) => s.selectedItemIds);
   const selectAllItems = useUiStore((s) => s.selectAllItems);
   const clearSelection = useUiStore((s) => s.clearSelection);
@@ -84,7 +85,7 @@ export function ActionRow({ onImport, onExport, onNewFolder, onFilters: _onFilte
       </div>
       <div className="flex items-center gap-2 ml-auto">
         <ImportExportMenu onImport={onImport ?? (() => {})} onExport={onExport ?? (() => {})} />
-        <Button variant="ghost" className="text-xs" onClick={() => setActiveView("settings")}>
+        <Button variant="ghost" className="text-xs" onClick={openSettings}>
           <SettingsIcon size={14} /> Settings
         </Button>
       </div>

src/components/layout/HomeScreen.test.tsx

@@ -4,12 +4,17 @@ import userEvent from "@testing-library/user-event";
 import { HomeScreen } from "./HomeScreen";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { useUiStore } from "../../stores/uiStore";
+import { useSettingsStore } from "../../stores/settingsStore";
+import type { Connection, Folder } from "../../lib/types";
 
 vi.mock("../../lib/commands", () => ({
   getConnections: vi.fn().mockResolvedValue([]),
   getFolders: vi.fn().mockResolvedValue([]),
   getTags: vi.fn().mockResolvedValue([]),
   getSettings: vi.fn().mockResolvedValue({}),
+  deleteConnection: vi.fn().mockResolvedValue(undefined),
+  deleteConnectionPassword: vi.fn().mockResolvedValue(undefined),
+  deleteFolder: vi.fn().mockResolvedValue(undefined),
 }));
 
 vi.mock("@tauri-apps/plugin-dialog", () => ({ open: vi.fn(), save: vi.fn() }));
@@ -21,7 +26,11 @@ vi.mock("@tauri-apps/plugin-fs", () => ({
 describe("HomeScreen", () => {
   beforeEach(() => {
     useConnectionStore.setState({ connections: [], folders: [], tags: [], loading: false, error: null });
-    useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeView: "home" });
+    useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeView: "home", selectedItemIds: [] });
+    useSettingsStore.setState({ settings: null, loading: false, error: null });
+    // SearchBar stores its debounce timer on window.__sb; clear any timer leaked
+    // by a previous test (e.g. typing a URL) so it can't fire mid-test.
+    window.clearTimeout((window as unknown as { __sb?: number }).__sb);
   });
 
   it("renders SearchBar and ActionRow", () => {
@@ -45,4 +54,117 @@ describe("HomeScreen", () => {
     expect(useUiStore.getState().prefilledConnectionString).toBe("postgresql://user:pass@localhost:5432/mydb");
     expect(useUiStore.getState().searchQuery).toBe("");
   });
-});
+
+  it("shows the confirmation dialog before bulk delete by default", async () => {
+    const user = userEvent.setup();
+    const conn = makeConnection("conn-1");
+    useConnectionStore.setState({ connections: [conn] });
+    useUiStore.setState({ selectedItemIds: ["conn-1"] });
+    render(<HomeScreen />);
+
+    await user.click(screen.getByRole("button", { name: /1 selected/i }));
+    await user.click(screen.getByRole("button", { name: /delete \(1\)/i }));
+
+    const { deleteConnection } = await import("../../lib/commands");
+    expect(
+      await screen.findByText(/are you sure you want to delete 1 item/i),
+    ).toBeInTheDocument();
+    expect(deleteConnection).not.toHaveBeenCalled();
+  });
+
+  it("skips the confirmation and deletes selected connections when confirm_before_delete is false", async () => {
+    const user = userEvent.setup();
+    useSettingsStore.setState({
+      settings: {
+        ...baseSettings(),
+        confirm_before_delete: false,
+      },
+    });
+    useConnectionStore.setState({ connections: [makeConnection("conn-1")] });
+    useUiStore.setState({ selectedItemIds: ["conn-1"] });
+    render(<HomeScreen />);
+
+    await user.click(screen.getByRole("button", { name: /1 selected/i }));
+    await user.click(screen.getByRole("button", { name: /delete \(1\)/i }));
+
+    const { deleteConnection } = await import("../../lib/commands");
+    expect(deleteConnection).toHaveBeenCalledWith("conn-1");
+    expect(screen.queryByText(/are you sure you want to delete/i)).not.toBeInTheDocument();
+    expect(screen.queryByTestId("animated-backdrop")).not.toBeInTheDocument();
+  });
+
+  it("shows the confirmation dialog before deleting a folder by default", async () => {
+    const user = userEvent.setup();
+    useConnectionStore.setState({ folders: [makeFolder("folder-1")] });
+    useUiStore.setState({ activeFolderId: "folder-1" });
+    render(<HomeScreen />);
+
+    await user.click(screen.getByRole("button", { name: /^delete$/i }));
+
+    expect(
+      await screen.findByText(/are you sure you want to delete \"projects\"/i),
+    ).toBeInTheDocument();
+  });
+
+  it("skips the confirmation and deletes the folder when confirm_before_delete is false", async () => {
+    const user = userEvent.setup();
+    useSettingsStore.setState({
+      settings: {
+        ...baseSettings(),
+        confirm_before_delete: false,
+      },
+    });
+    useConnectionStore.setState({ folders: [makeFolder("folder-1")] });
+    useUiStore.setState({ activeFolderId: "folder-1" });
+    render(<HomeScreen />);
+
+    await user.click(screen.getByRole("button", { name: /^delete$/i }));
+
+    const { deleteFolder } = await import("../../lib/commands");
+    expect(deleteFolder).toHaveBeenCalledWith("folder-1");
+    expect(screen.queryByText(/are you sure you want to delete/i)).not.toBeInTheDocument();
+    expect(screen.queryByTestId("animated-backdrop")).not.toBeInTheDocument();
+  });
+});
+
+function makeConnection(id: string): Connection {
+  return {
+    id,
+    name: "Local DB",
+    db_type: "postgresql",
+    host: "localhost",
+    port: 5432,
+    username: null,
+    folder_id: null,
+    keychain_ref: null,
+    tag_ids: [],
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+function makeFolder(id: string): Folder {
+  return {
+    id,
+    name: "Projects",
+    parent_id: null,
+    tag_ids: [],
+    created_at: "",
+    updated_at: "",
+  };
+}
+
+function baseSettings() {
+  return {
+    confirm_before_delete: true,
+    default_folder_id: null,
+    theme: "dark" as const,
+    font_size: "medium" as const,
+    default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null },
+    tag_order: null,
+    table_refresh_rate: 30,
+    table_page_size: 50,
+    shortcuts: {},
+    accent_color: "#2563EB",
+  };
+}

src/components/layout/HomeScreen.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DndContext, DragOverlay, closestCenter, type DragEndEvent } from "@dnd-kit/core";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { useUiStore } from "../../stores/uiStore";
+import { useSettingsStore } from "../../stores/settingsStore";
 import { useFilteredConnections } from "../../hooks/useConnections";
 import { useSortedTags } from "../../hooks/useSortedTags";
 import { SearchBar } from "../search/SearchBar";
@@ -32,6 +33,8 @@ export function HomeScreen() {
     const loadAll = useConnectionStore((s) => s.loadAll);
     const selectedItemIds = useUiStore((s) => s.selectedItemIds);
     const clearSelection = useUiStore((s) => s.clearSelection);
+    const confirmBeforeDelete =
+        useSettingsStore((s) => s.settings?.confirm_before_delete ?? true);
     const [folderDialogOpen, setFolderDialogOpen] = useState(false);
     const [editFolder, setEditFolder] = useState<Folder | null>(null);
     const [confirmDelete, setConfirmDelete] = useState<{
@@ -146,7 +149,7 @@ export function HomeScreen() {
     };
 
     return (
-        <main className="min-h-screen p-6 bg-canvas select-none max-w-7xl mx-auto">
+        <main className="min-h-full p-6 bg-canvas select-none max-w-7xl mx-auto">
             <div className="mb-6">
                 <SearchBar ref={searchRef} onDetectUrl={handleSearchUrl} />
             </div>
@@ -161,7 +164,9 @@ export function HomeScreen() {
                         await handleExport();
                     }}
                     onDeleteSelected={() =>
-                        setConfirmDelete({ type: "selected" })
+                        confirmBeforeDelete
+                            ? setConfirmDelete({ type: "selected" })
+                            : executeDeleteSelected()
                     }
                     visibleItemIds={visibleItemIds}
                 />
@@ -185,7 +190,9 @@ export function HomeScreen() {
                     onOpenDbViewer={handleOpenDbViewer}
                     onEditFolder={(f) => setEditFolder(f)}
                     onDeleteFolder={(f) =>
-                        setConfirmDelete({ type: "folder", folder: f })
+                        confirmBeforeDelete
+                            ? setConfirmDelete({ type: "folder", folder: f })
+                            : executeDeleteFolder(f)
                     }
                 />
                 <DragOverlay dropAnimation={null}>

src/components/settings/AdvancedSettingsTab.tsx

@@ -2,7 +2,6 @@ import { useSettingsStore } from "../../stores/settingsStore";
 import { Input } from "../ui/Input";
 import { Toggle } from "../ui/Toggle";
 import { SettingsRow } from "../ui/SettingsRow";
-import { SettingsSection } from "../ui/SettingsSection";
 import type { DbType } from "../../lib/types";
 
 const DB_TYPES: { id: DbType; label: string }[] = [
@@ -31,39 +30,45 @@ export function AdvancedSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Safety">
-        <SettingsRow
-          title="Confirm before delete"
-          description="Show a confirmation dialog before deleting connections or folders."
-        >
-          <Toggle
-            checked={settings.confirm_before_delete}
-            onChange={(checked) =>
-              updateSetting("confirm_before_delete", checked ? "true" : "false")
-            }
-            label="Confirm before delete"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Default ports">
-        {DB_TYPES.map((db) => (
+    <div className="space-y-6">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Safety</h2>
+        <div className="flex flex-col gap-4">
           <SettingsRow
-            key={db.id}
-            title={db.label}
-            description={`Default port for new ${db.label} connections.`}
+            title="Confirm before delete"
+            description="Show a confirmation dialog before deleting connections or folders."
           >
-            <Input
-              type="number"
-              value={defaultPorts[db.id]?.toString() ?? ""}
-              onChange={(value) => updatePort(db.id, value)}
-              className="w-24"
-              aria-label={`Default port for ${db.label}`}
+            <Toggle
+              checked={settings.confirm_before_delete}
+              onChange={(checked) =>
+                updateSetting("confirm_before_delete", checked ? "true" : "false")
+              }
+              label="Confirm before delete"
             />
           </SettingsRow>
-        ))}
-      </SettingsSection>
-    </>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Default ports</h2>
+        <div className="flex flex-col gap-4">
+          {DB_TYPES.map((db) => (
+            <SettingsRow
+              key={db.id}
+              title={db.label}
+              description={`Default port for new ${db.label} connections.`}
+            >
+              <Input
+                type="number"
+                value={defaultPorts[db.id]?.toString() ?? ""}
+                onChange={(value) => updatePort(db.id, value)}
+                className="w-24"
+                aria-label={`Default port for ${db.label}`}
+              />
+            </SettingsRow>
+          ))}
+        </div>
+      </section>
+    </div>
   );
 }

src/components/settings/GeneralSettingsTab.tsx

@@ -2,8 +2,8 @@ import { useSettingsStore } from "../../stores/settingsStore";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { Select } from "../ui/Select";
 import { ThemePicker } from "../ui/ThemePicker";
+import { AccentPicker } from "../ui/AccentPicker";
 import { SettingsRow } from "../ui/SettingsRow";
-import { SettingsSection } from "../ui/SettingsSection";
 import * as cmd from "../../lib/commands";
 import type { FontSize } from "../../lib/types";
 
@@ -50,80 +50,98 @@ export function GeneralSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Appearance">
-        <SettingsRow title="Theme" description="Choose your preferred appearance.">
-          <ThemePicker
-            value={settings.theme}
-            onChange={(theme) => updateSetting("theme", theme)}
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Interface">
-        <SettingsRow title="Font size" description="Adjust the application font size.">
-          <Select
-            value={settings.font_size}
-            onChange={(value) => updateSetting("font_size", value)}
-            options={FONT_SIZE_OPTIONS}
-            label="Font size"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Workspace">
-        <SettingsRow
-          title="Default folder"
-          description="Select the folder to show on startup."
-        >
-          <Select
-            value={settings.default_folder_id ?? ""}
-            onChange={(value) => updateSetting("default_folder_id", value)}
-            options={folderOptions}
-            label="Default folder"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Table defaults">
-        <SettingsRow
-          title="Auto-refresh rate"
-          description="How often tables auto-refresh by default."
-        >
-          <Select
-            value={String(settings.table_refresh_rate ?? 0)}
-            onChange={(value) => updateSetting("table_refresh_rate", value)}
-            options={REFRESH_RATE_OPTIONS}
-            label="Auto-refresh rate"
-          />
-        </SettingsRow>
-        <SettingsRow
-          title="Rows per page"
-          description="Default number of rows shown per page."
-        >
-          <Select
-            value={String(settings.table_page_size ?? 50)}
-            onChange={(value) => updateSetting("table_page_size", value)}
-            options={PAGE_SIZE_OPTIONS}
-            label="Rows per page"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Demo">
-        <SettingsRow
-          title="Re-add demo database"
-          description="Re-create the demo SQLite connection if it was deleted."
-        >
-          <button
-            type="button"
-            onClick={handleReAddDemo}
-            className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
+    <div className="space-y-6">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Appearance</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow title="Theme" description="Choose your preferred appearance.">
+            <ThemePicker
+              value={settings.theme}
+              onChange={(theme) => updateSetting("theme", theme)}
+            />
+          </SettingsRow>
+          <SettingsRow title="Font size" description="Adjust the application font size.">
+            <Select
+              value={settings.font_size}
+              onChange={(value) => updateSetting("font_size", value)}
+              options={FONT_SIZE_OPTIONS}
+              label="Font size"
+            />
+          </SettingsRow>
+          <SettingsRow
+            title="Accent color"
+            description="Used for buttons, active states, and highlights."
           >
-            Re-add demo
-          </button>
-        </SettingsRow>
-      </SettingsSection>
-    </>
+            <AccentPicker
+              value={settings.accent_color}
+              onChange={(color) => updateSetting("accent_color", color)}
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Workspace</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Default folder"
+            description="Select the folder to show on startup."
+          >
+            <Select
+              value={settings.default_folder_id ?? ""}
+              onChange={(value) => updateSetting("default_folder_id", value)}
+              options={folderOptions}
+              label="Default folder"
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Table defaults</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Auto-refresh rate"
+            description="How often tables auto-refresh by default."
+          >
+            <Select
+              value={String(settings.table_refresh_rate ?? 0)}
+              onChange={(value) => updateSetting("table_refresh_rate", value)}
+              options={REFRESH_RATE_OPTIONS}
+              label="Auto-refresh rate"
+            />
+          </SettingsRow>
+          <SettingsRow
+            title="Rows per page"
+            description="Default number of rows shown per page."
+          >
+            <Select
+              value={String(settings.table_page_size ?? 50)}
+              onChange={(value) => updateSetting("table_page_size", value)}
+              options={PAGE_SIZE_OPTIONS}
+              label="Rows per page"
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Demo</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Re-add demo database"
+            description="Re-create the demo SQLite connection if it was deleted."
+          >
+            <button
+              type="button"
+              onClick={handleReAddDemo}
+              className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
+            >
+              Re-add demo
+            </button>
+          </SettingsRow>
+        </div>
+      </section>
+    </div>
   );
 }

src/components/settings/SettingsPage.test.tsx

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { SettingsPage } from "./SettingsPage";
 import { GeneralSettingsTab } from "./GeneralSettingsTab";
-import { TagsSettingsTab } from "./TagsSettingsTab";
+import { TagsSettingsTab, reorderTagIds } from "./TagsSettingsTab";
 import { AdvancedSettingsTab } from "./AdvancedSettingsTab";
 import { useSettingsStore } from "../../stores/settingsStore";
 import { useConnectionStore } from "../../stores/connectionStore";
@@ -29,6 +29,10 @@ vi.mock("../../lib/commands", () => ({
     confirm_before_delete: true,
     default_ports: { postgresql: 5432, mysql: 3306, sqlite: null, redis: 6379 },
     tag_order: null,
+    table_refresh_rate: 0,
+    table_page_size: 50,
+    shortcuts: {},
+    accent_color: "#2563EB",
   }),
   updateSetting: vi.fn().mockResolvedValue(undefined),
   getConnections: vi.fn().mockResolvedValue([]),
@@ -63,6 +67,7 @@ const baseSettings = {
   table_refresh_rate: 0,
   table_page_size: 50,
   shortcuts: {} as Record<string, string>,
+  accent_color: "#2563EB",
 };
 
 describe("SettingsPage", () => {
@@ -83,12 +88,12 @@ describe("SettingsPage", () => {
     });
   });
 
-  it("renders settings header with back button and title", async () => {
+  it("renders settings header with back button and active tab title", async () => {
     render(<SettingsPage />);
     await waitFor(() => {
-      expect(screen.getByRole("heading", { name: /settings/i })).toBeInTheDocument();
+      expect(screen.getByRole("heading", { name: /general/i })).toBeInTheDocument();
     });
-    expect(screen.getByText(/back/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /back/i })).toBeInTheDocument();
   });
 
   it("renders all five sidebar tabs with proper ARIA roles", async () => {
@@ -131,7 +136,6 @@ describe("SettingsPage", () => {
       expect(screen.getByRole("tab", { name: /tags/i })).toBeInTheDocument();
     });
     await user.click(screen.getByRole("tab", { name: /tags/i }));
-    expect(screen.getByText(/create tag/i)).toBeInTheDocument();
     expect(screen.getByText(/manage tags/i)).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: /tags/i })).toHaveAttribute("aria-selected", "true");
     expect(screen.getByRole("tabpanel")).toHaveAttribute("aria-labelledby", "settings-tab-tags");
@@ -196,6 +200,17 @@ describe("GeneralSettingsTab", () => {
     expect(screen.getByLabelText(/font size/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/default folder/i)).toBeInTheDocument();
   });
+
+  it("renders the accent color picker and persists a selection", async () => {
+    const user = userEvent.setup();
+    render(<GeneralSettingsTab />);
+    const accentGroup = screen.getByRole("radiogroup", { name: /accent color/i });
+    expect(accentGroup).toBeInTheDocument();
+    await user.click(screen.getByRole("radio", { name: /accent #22c55e/i }));
+    await waitFor(() => {
+      expect(commands.updateSetting).toHaveBeenCalledWith("accent_color", "#22C55E");
+    });
+  });
 });
 
 describe("TagsSettingsTab", () => {
@@ -224,6 +239,22 @@ describe("TagsSettingsTab", () => {
     const moveDownButtons = screen.getAllByRole("button", { name: /move tag down/i });
     expect(moveDownButtons.length).toBeGreaterThanOrEqual(2);
   });
+
+  it("renders a drag handle for each tag", () => {
+    render(<TagsSettingsTab />);
+    expect(screen.getAllByRole("button", { name: /drag to reorder/i })).toHaveLength(2);
+  });
+
+  it("reorderTagIds moves the active id to the over id position", () => {
+    expect(reorderTagIds(["a", "b", "c"], "a", "c")).toEqual(["b", "c", "a"]);
+    expect(reorderTagIds(["a", "b", "c"], "b", "a")).toEqual(["b", "a", "c"]);
+  });
+
+  it("reorderTagIds leaves the order unchanged for same or unknown ids", () => {
+    expect(reorderTagIds(["a", "b", "c"], "a", "a")).toEqual(["a", "b", "c"]);
+    expect(reorderTagIds(["a", "b", "c"], "a", "zzz")).toEqual(["a", "b", "c"]);
+    expect(reorderTagIds(["a", "b", "c"], "zzz", "c")).toEqual(["a", "b", "c"]);
+  });
 });
 
 describe("AdvancedSettingsTab", () => {

src/components/settings/SettingsPage.tsx

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { useSettingsStore } from "../../stores/settingsStore";
 import { useUiStore } from "../../stores/uiStore";
-import { Button } from "../ui/Button";
-import { SettingsSection } from "../ui/SettingsSection";
 import { GeneralSettingsTab } from "./GeneralSettingsTab";
 import { TagsSettingsTab } from "./TagsSettingsTab";
 import { ShortcutsSettingsTab } from "./ShortcutsSettingsTab";
@@ -35,7 +33,7 @@ const TABS: TabDefinition[] = [
 ];
 
 export function SettingsPage() {
-    const setActiveView = useUiStore((s) => s.setActiveView);
+    const closeSettings = useUiStore((s) => s.closeSettings);
     const { load } = useSettingsStore();
 
     const [activeTab, setActiveTab] = useState<SettingsTab>("general");
@@ -45,11 +43,12 @@ export function SettingsPage() {
     }, [load]);
 
     const renderEditor = () => (
-        <SettingsSection title="Editor">
+        <section>
+            <h2 className="text-sm font-medium text-text mb-3">Editor</h2>
             <div className="py-8 text-center text-sm text-text-muted">
                 Editor settings are coming soon.
             </div>
-        </SettingsSection>
+        </section>
     );
 
     const renderTabContent = () => {
@@ -68,70 +67,75 @@ export function SettingsPage() {
     };
 
     return (
-        <div className="min-h-screen bg-canvas">
-            <div className="flex gap-6 px-6 py-6">
-                {/* Sidebar */}
-                <aside className="w-48 shrink-0 space-y-1">
-                    <Button
-                        variant="ghost"
-                        onClick={() => setActiveView("home")}
-                        className="w-full justify-start gap-1 px-3 py-2 mb-4"
+        <div className="h-full bg-canvas flex border-t border-border overflow-hidden">
+            {/* Left sidebar — icon + text, Back at top */}
+            <div className="w-48 h-full bg-canvas border-r border-border flex flex-col py-3 shrink-0">
+                <div className="flex flex-col gap-1 px-2 flex-1">
+                    <button
+                        type="button"
+                        aria-label="Back"
+                        onClick={closeSettings}
+                        className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer bg-accent text-white hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-accent/50"
                     >
                         <ChevronLeft size={16} /> Back
-                    </Button>
-
+                    </button>
                     <nav
-                        className="space-y-1"
                         role="tablist"
                         aria-label="Settings sections"
+                        className="flex flex-col gap-1"
                     >
-                        {TABS.map((tab) => {
-                            const Icon = tab.icon;
-                            const isActive = activeTab === tab.id;
-                            return (
-                                <button
-                                    key={tab.id}
-                                    id={`settings-tab-${tab.id}`}
-                                    type="button"
-                                    role="tab"
-                                    aria-selected={isActive}
-                                    aria-controls="settings-tabpanel"
-                                    onClick={() => setActiveTab(tab.id)}
-                                    className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer ${
-                                        isActive
-                                            ? "bg-surface-raised text-text"
-                                            : "text-text-muted hover:text-text hover:bg-surface-raised"
-                                    }`}
-                                >
-                                    <Icon size={16} />
-                                    {tab.label}
-                                </button>
-                            );
-                        })}
-                    </nav>
-                </aside>
-
-                {/* Main content */}
-                <main className="flex-1 min-w-0 pt-1">
-                    <h1 className="font-heading text-xl text-text mb-6">
-                        Settings
-                    </h1>
-                    <AnimatePresence mode="wait">
-                        <motion.div
-                            key={activeTab}
-                            id="settings-tabpanel"
-                            role="tabpanel"
-                            aria-labelledby={`settings-tab-${activeTab}`}
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ duration: 0.15 }}
-                        >
-                            {renderTabContent()}
-                        </motion.div>
-                    </AnimatePresence>
-                </main>
+                    {TABS.map((tab) => {
+                        const Icon = tab.icon;
+                        const isActive = activeTab === tab.id;
+                        return (
+                            <button
+                                key={tab.id}
+                                id={`settings-tab-${tab.id}`}
+                                type="button"
+                                role="tab"
+                                aria-selected={isActive}
+                                aria-controls="settings-tabpanel"
+                                aria-label={tab.label}
+                                onClick={() => setActiveTab(tab.id)}
+                                className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/50 ${
+                                    isActive
+                                        ? "text-accent"
+                                        : "text-text-muted hover:text-text hover:bg-surface-raised"
+                                }`}
+                            >
+                                <Icon size={16} />
+                                {tab.label}
+                            </button>
+                        );
+                    })}
+                </nav>
             </div>
         </div>
+
+                {/* Content */}
+                <div className="flex-1 flex flex-col min-h-0">
+                    <header className="px-3 pt-3 pb-3 border-b border-border shrink-0 flex items-center gap-3">
+                        <h1 className="font-heading text-lg text-text">
+                            {TABS.find((t) => t.id === activeTab)?.label}
+                        </h1>
+                    </header>
+                    <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4">
+                        <AnimatePresence mode="wait">
+                            <motion.div
+                                key={activeTab}
+                                id="settings-tabpanel"
+                                role="tabpanel"
+                                aria-labelledby={`settings-tab-${activeTab}`}
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                transition={{ duration: 0.15 }}
+                            >
+                                {renderTabContent()}
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+                </div>
+            </div>
     );
-}
+}

src/components/settings/ShortcutsSettingsTab.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 import { Pencil } from "lucide-react";
-import { SettingsSection } from "../ui/SettingsSection";
 import { useSettingsStore } from "../../stores/settingsStore";
 
 type ShortcutDef = {
@@ -100,12 +99,15 @@ export function ShortcutsSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Customizable Shortcuts">
+    <div className="space-y-6">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">
+          Customizable Shortcuts
+        </h2>
         <p className="text-xs text-text-muted mb-3">
           Click the pencil icon to record a new key combination. Click the shortcut to reset to default.
         </p>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           {SHORTCUTS.map((s) => {
             const custom = customShortcuts[s.id];
             const isRecording = recording === s.id;
@@ -148,13 +150,14 @@ export function ShortcutsSettingsTab() {
             );
           })}
         </div>
-      </SettingsSection>
+      </section>
 
-      <SettingsSection title="System Shortcuts">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">System Shortcuts</h2>
         <p className="text-xs text-text-muted mb-3">
           These shortcuts are standard across all applications and cannot be changed.
         </p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           {STATIC_SHORTCUTS.map((s) => (
             <div key={s.description} className="flex items-center justify-between py-1">
               <span className="text-sm text-text">{s.description}</span>
@@ -166,7 +169,7 @@ export function ShortcutsSettingsTab() {
             </div>
           ))}
         </div>
-      </SettingsSection>
-    </>
+      </section>
+    </div>
   );
 }

src/components/settings/TagsSettingsTab.tsx

@@ -1,11 +1,35 @@
 import { useState } from "react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { useNotificationStore } from "../../stores/notificationStore";
 import { useSortedTags } from "../../hooks/useSortedTags";
 import { Button } from "../ui/Button";
 import { Input } from "../ui/Input";
-import { SettingsSection } from "../ui/SettingsSection";
-import { Plus, Trash2, Check, X, ChevronUp, ChevronDown } from "lucide-react";
+import {
+  Plus,
+  Trash2,
+  Check,
+  X,
+  ChevronUp,
+  ChevronDown,
+  GripVertical,
+} from "lucide-react";
 import type { Tag } from "../../lib/types";
 
 const TAG_COLORS = [
@@ -21,6 +45,155 @@ const TAG_COLORS = [
   "#78716c",
 ];
 
+/** Move `activeId` to `overId`'s position. Returns `order` unchanged if the
+ * ids are equal, or either id is missing. */
+export function reorderTagIds(order: string[], activeId: string, overId: string): string[] {
+  const from = order.indexOf(activeId);
+  const to = order.indexOf(overId);
+  if (activeId === overId || from === -1 || to === -1) return order;
+  return arrayMove(order, from, to);
+}
+
+interface SortableTagRowProps {
+  tag: Tag;
+  index: number;
+  count: number;
+  editingId: string | null;
+  editName: string;
+  editColor: string;
+  onEditNameChange: (value: string) => void;
+  onEditColorChange: (color: string) => void;
+  onStartEdit: (tag: Tag) => void;
+  onCancelEdit: () => void;
+  onUpdateTag: (id: string) => void;
+  onDeleteTag: (id: string, name: string) => void;
+  onMoveTag: (index: number, direction: "up" | "down") => void;
+}
+
+function SortableTagRow({
+  tag,
+  index,
+  count,
+  editingId,
+  editName,
+  editColor,
+  onEditNameChange,
+  onEditColorChange,
+  onStartEdit,
+  onCancelEdit,
+  onUpdateTag,
+  onDeleteTag,
+  onMoveTag,
+}: SortableTagRowProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: tag.id });
+
+  const isEditing = editingId === tag.id;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={`bg-surface-raised border border-border rounded-xl p-3 flex items-center gap-3 relative ${
+        isDragging ? "opacity-50 z-10 ring-1 ring-accent" : ""
+      }`}
+    >
+      <button
+        ref={setActivatorNodeRef}
+        {...attributes}
+        {...listeners}
+        type="button"
+        aria-label={`Drag to reorder ${tag.name}`}
+        className="cursor-grab active:cursor-grabbing touch-none text-text-muted hover:text-text transition-colors shrink-0"
+      >
+        <GripVertical size={14} />
+      </button>
+
+      <div className="flex flex-col gap-0.5 shrink-0">
+        <button
+          type="button"
+          onClick={() => onMoveTag(index, "up")}
+          disabled={index === 0}
+          className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
+          aria-label="Move tag up"
+        >
+          <ChevronUp size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => onMoveTag(index, "down")}
+          disabled={index === count - 1}
+          className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
+          aria-label="Move tag down"
+        >
+          <ChevronDown size={14} />
+        </button>
+      </div>
+
+      {isEditing ? (
+        <>
+          <Input
+            value={editName}
+            onChange={onEditNameChange}
+            className="flex-1"
+            aria-label="Edit tag name"
+          />
+          <div className="flex items-center gap-1">
+            {TAG_COLORS.map((color) => (
+              <button
+                key={color}
+                type="button"
+                onClick={() => onEditColorChange(color)}
+                className={`w-5 h-5 rounded-full border-2 transition-all cursor-pointer ${
+                  editColor === color ? "border-text scale-110" : "border-transparent"
+                }`}
+                style={{ backgroundColor: color }}
+                aria-label={`Select color ${color}`}
+              />
+            ))}
+          </div>
+          <Button onClick={() => onUpdateTag(tag.id)}>
+            <Check size={14} />
+          </Button>
+          <Button variant="ghost" onClick={onCancelEdit}>
+            <X size={14} />
+          </Button>
+        </>
+      ) : (
+        <>
+          <div
+            className="w-4 h-4 rounded-full shrink-0"
+            style={{ backgroundColor: tag.color }}
+          />
+          <span className="text-sm text-text flex-1">{tag.name}</span>
+          <Button
+            variant="ghost"
+            className="text-xs"
+            onClick={() => onStartEdit(tag)}
+          >
+            Edit
+          </Button>
+          <button
+            type="button"
+            onClick={() => onDeleteTag(tag.id, tag.name)}
+            className="text-text-muted hover:text-red-400 transition-colors cursor-pointer"
+            aria-label={`Delete tag ${tag.name}`}
+          >
+            <Trash2 size={14} />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
 export function TagsSettingsTab() {
   const tags = useSortedTags();
   const tagOrder = useConnectionStore((s) => s.tagOrder);
@@ -36,6 +209,11 @@ export function TagsSettingsTab() {
   const [editName, setEditName] = useState("");
   const [editColor, setEditColor] = useState("");
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
   const handleCreateTag = async () => {
     const trimmed = newName.trim();
     if (!trimmed) {
@@ -87,6 +265,14 @@ export function TagsSettingsTab() {
     }
   };
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const currentOrder = tagOrder.length === tags.length ? tagOrder : tags.map((t) => t.id);
+    const newOrder = reorderTagIds(currentOrder, String(active.id), String(over.id));
+    setTagOrder(newOrder).catch((e) => notify(`Failed to reorder tags: ${e}`, "error"));
+  };
+
   const startEdit = (tag: Tag) => {
     setEditingId(tag.id);
     setEditName(tag.name);
@@ -94,130 +280,76 @@ export function TagsSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Create tag">
-        <div className="py-4 flex items-center gap-3">
-          <Input
-            placeholder="Tag name"
-            value={newName}
-            onChange={setNewName}
-            className="flex-1"
-            aria-label="New tag name"
-          />
-          <div className="flex items-center gap-1">
-            {TAG_COLORS.map((color) => (
-              <button
-                key={color}
-                type="button"
-                onClick={() => setNewColor(color)}
-                className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
-                  newColor === color ? "border-text scale-110" : "border-transparent"
-                }`}
-                style={{ backgroundColor: color }}
-                aria-label={`Select color ${color}`}
-              />
-            ))}
-          </div>
-          <Button onClick={handleCreateTag}>
-            <Plus size={14} /> Add
-          </Button>
+    <div className="space-y-6">
+      {/* Create — no section label */}
+      <div className="flex items-center gap-3">
+        <Input
+          placeholder="Tag name"
+          value={newName}
+          onChange={setNewName}
+          className="flex-1"
+          aria-label="New tag name"
+        />
+        <div className="flex items-center gap-1">
+          {TAG_COLORS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              onClick={() => setNewColor(color)}
+              className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
+                newColor === color ? "border-text scale-110" : "border-transparent"
+              }`}
+              style={{ backgroundColor: color }}
+              aria-label={`Select color ${color}`}
+            />
+          ))}
         </div>
-      </SettingsSection>
+        <Button onClick={handleCreateTag}>
+          <Plus size={14} /> Add
+        </Button>
+      </div>
 
-      <SettingsSection title="Manage tags">
+      {/* Manage tags — plain section, no card */}
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Manage tags</h2>
         {tags.length === 0 ? (
           <div className="text-center py-12 text-text-muted text-sm">
             No tags yet. Create one above.
           </div>
         ) : (
-          <div className="space-y-2 py-2">
-            {tags.map((tag, index) => {
-              const isEditing = editingId === tag.id;
-              return (
-                <div
-                  key={tag.id}
-                  className="bg-surface-raised border border-border rounded-xl p-3 flex items-center gap-3"
-                >
-                  <div className="flex flex-col gap-0.5 shrink-0">
-                    <button
-                      type="button"
-                      onClick={() => handleMoveTag(index, "up")}
-                      disabled={index === 0}
-                      className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
-                      aria-label="Move tag up"
-                    >
-                      <ChevronUp size={14} />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => handleMoveTag(index, "down")}
-                      disabled={index === tags.length - 1}
-                      className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
-                      aria-label="Move tag down"
-                    >
-                      <ChevronDown size={14} />
-                    </button>
-                  </div>
-
-                  {isEditing ? (
-                    <>
-                      <Input
-                        value={editName}
-                        onChange={setEditName}
-                        className="flex-1"
-                        aria-label="Edit tag name"
-                      />
-                      <div className="flex items-center gap-1">
-                        {TAG_COLORS.map((color) => (
-                          <button
-                            key={color}
-                            type="button"
-                            onClick={() => setEditColor(color)}
-                            className={`w-5 h-5 rounded-full border-2 transition-all cursor-pointer ${
-                              editColor === color ? "border-text scale-110" : "border-transparent"
-                            }`}
-                            style={{ backgroundColor: color }}
-                            aria-label={`Select color ${color}`}
-                          />
-                        ))}
-                      </div>
-                      <Button onClick={() => handleUpdateTag(tag.id)}>
-                        <Check size={14} />
-                      </Button>
-                      <Button variant="ghost" onClick={() => setEditingId(null)}>
-                        <X size={14} />
-                      </Button>
-                    </>
-                  ) : (
-                    <>
-                      <div
-                        className="w-4 h-4 rounded-full shrink-0"
-                        style={{ backgroundColor: tag.color }}
-                      />
-                      <span className="text-sm text-text flex-1">{tag.name}</span>
-                      <Button
-                        variant="ghost"
-                        className="text-xs"
-                        onClick={() => startEdit(tag)}
-                      >
-                        Edit
-                      </Button>
-                      <button
-                        type="button"
-                        onClick={() => handleDeleteTag(tag.id, tag.name)}
-                        className="text-text-muted hover:text-red-400 transition-colors cursor-pointer"
-                        aria-label={`Delete tag ${tag.name}`}
-                      >
-                        <Trash2 size={14} />
-                      </button>
-                    </>
-                  )}
-                </div>
-              );
-            })}
-          </div>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={tags.map((t) => t.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-2">
+                {tags.map((tag, index) => (
+                  <SortableTagRow
+                    key={tag.id}
+                    tag={tag}
+                    index={index}
+                    count={tags.length}
+                    editingId={editingId}
+                    editName={editName}
+                    editColor={editColor}
+                    onEditNameChange={setEditName}
+                    onEditColorChange={setEditColor}
+                    onStartEdit={startEdit}
+                    onCancelEdit={() => setEditingId(null)}
+                    onUpdateTag={handleUpdateTag}
+                    onDeleteTag={handleDeleteTag}
+                    onMoveTag={handleMoveTag}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
         )}
-      </SettingsSection>
-    </>
+      </section>
+    </div>
   );
 }

src/components/tags/TagFilterDropdown.tsx

@@ -9,7 +9,7 @@ export function TagFilterDropdown() {
   const tags = useSortedTags();
   const activeTagIds = useUiStore((s) => s.activeTagIds);
   const toggleTag = useUiStore((s) => s.toggleTag);
-  const setActiveView = useUiStore((s) => s.setActiveView);
+  const openSettings = useUiStore((s) => s.openSettings);
 
   const activeCount = activeTagIds.length;
   const hasActiveFilters = activeCount > 0;
@@ -26,7 +26,7 @@ export function TagFilterDropdown() {
   }, [open]);
 
   const handleManageTags = () => {
-    setActiveView("settings");
+    openSettings();
     setOpen(false);
   };
 

src/components/ui/AccentPicker.tsx

@@ -0,0 +1,40 @@
+const ACCENT_PRESETS = [
+  "#2563EB",
+  "#3B82F6",
+  "#06B6D4",
+  "#22C55E",
+  "#F59E0B",
+  "#EF4444",
+  "#EC4899",
+  "#D946EF",
+  "#8B5CF6",
+  "#64748B",
+];
+
+interface AccentPickerProps {
+  value: string;
+  onChange: (color: string) => void;
+}
+
+export function AccentPicker({ value, onChange }: AccentPickerProps) {
+  return (
+    <div className="flex items-center gap-1.5" role="radiogroup" aria-label="Accent color">
+      {ACCENT_PRESETS.map((color) => (
+        <button
+          key={color}
+          type="button"
+          role="radio"
+          aria-checked={value.toLowerCase() === color.toLowerCase()}
+          aria-label={`Accent ${color}`}
+          onClick={() => onChange(color)}
+          className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
+            value.toLowerCase() === color.toLowerCase()
+              ? "border-text scale-110"
+              : "border-transparent hover:border-border-hover"
+          }`}
+          style={{ backgroundColor: color }}
+        />
+      ))}
+    </div>
+  );
+}

src/components/ui/SettingsRow.test.tsx

@@ -13,30 +13,4 @@ describe("SettingsRow", () => {
     expect(screen.getByText("Adjust text size.")).toBeInTheDocument();
     expect(screen.getByText("Control")).toBeInTheDocument();
   });
-
-  it("has a bottom border by default", () => {
-    const { container } = render(
-      <SettingsRow title="Item">
-        <span />
-      </SettingsRow>
-    );
-    expect(container.firstChild).toHaveClass("border-b");
-  });
-
-  it("removes the bottom border on the last row", () => {
-    const { container } = render(
-      <>
-        <SettingsRow title="First">
-          <span />
-        </SettingsRow>
-        <SettingsRow title="Last">
-          <span />
-        </SettingsRow>
-      </>
-    );
-    const rows = container.querySelectorAll(".border-b");
-    expect(rows).toHaveLength(2);
-    const lastRow = rows[rows.length - 1];
-    expect(lastRow).toHaveClass("last:border-b-0");
-  });
 });

src/components/ui/SettingsRow.tsx

@@ -8,7 +8,7 @@ interface SettingsRowProps {
 
 export function SettingsRow({ title, description, children }: SettingsRowProps) {
   return (
-    <div className="flex items-center justify-between gap-6 py-4 border-b border-border last:border-b-0">
+    <div className="flex items-center justify-between gap-6">
       <div className="min-w-0 overflow-hidden">
         <div className="text-sm font-medium text-text truncate">{title}</div>
         {description && (

src/components/ui/SettingsSection.test.tsx

@@ -1,25 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { SettingsSection } from "./SettingsSection";
-
-describe("SettingsSection", () => {
-  it("renders the title and children", () => {
-    render(
-      <SettingsSection title="Appearance">
-        <div>Content</div>
-      </SettingsSection>
-    );
-    expect(screen.getByText("Appearance")).toBeInTheDocument();
-    expect(screen.getByText("Content")).toBeInTheDocument();
-  });
-
-  it("uses the surface background on the inner card", () => {
-    const { container } = render(
-      <SettingsSection title="Appearance">
-        <div />
-      </SettingsSection>
-    );
-    const card = container.querySelector(".bg-surface");
-    expect(card).toBeInTheDocument();
-  });
-});

src/components/ui/SettingsSection.tsx

@@ -1,17 +0,0 @@
-import type { ReactNode } from "react";
-
-interface SettingsSectionProps {
-  title: string;
-  children: ReactNode;
-}
-
-export function SettingsSection({ title, children }: SettingsSectionProps) {
-  return (
-    <section className="mb-8">
-      <h2 className="text-sm font-medium text-text mb-1">{title}</h2>
-      <div className="bg-surface border border-border rounded-xl px-4 overflow-hidden">
-        {children}
-      </div>
-    </section>
-  );
-}

src/components/ui/ThemePicker.tsx

@@ -5,37 +5,124 @@ interface ThemePickerProps {
   onChange: (theme: Theme) => void;
 }
 
-const THEMES: { value: Theme; label: string; previewClass: string }[] = [
-  { value: "light", label: "Light", previewClass: "bg-zinc-100" },
-  { value: "dark", label: "Dark", previewClass: "bg-surface" },
-  { value: "system", label: "System", previewClass: "bg-gradient-to-br from-zinc-100 to-surface" },
+interface PreviewPalette {
+  canvas: string;
+  surface: string;
+  sidebar: string;
+  text: string;
+  textMuted: string;
+  accent: string;
+}
+
+// Miniature app-window mock per theme, using the real theme palette hexes.
+const PREVIEWS: Record<Theme, PreviewPalette> = {
+  light: {
+    canvas: "#FAFAFA",
+    surface: "#FFFFFF",
+    sidebar: "#E4E4E7",
+    text: "#18181B",
+    textMuted: "#71717A",
+    accent: "#2563EB",
+  },
+  dark: {
+    canvas: "#0A0A0B",
+    surface: "#18181B",
+    sidebar: "#27272A",
+    text: "#FAFAFA",
+    textMuted: "#A1A1AA",
+    accent: "#2563EB",
+  },
+  // "system" renders the dark palette with a light right half to signal it follows the OS.
+  system: {
+    canvas: "#0A0A0B",
+    surface: "#18181B",
+    sidebar: "#27272A",
+    text: "#FAFAFA",
+    textMuted: "#A1A1AA",
+    accent: "#2563EB",
+  },
+};
+
+const THEMES: { value: Theme; label: string }[] = [
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "system", label: "System" },
 ];
 
+function WindowMock({ preview }: { preview: PreviewPalette }) {
+  return (
+    <div aria-hidden="true" className="absolute inset-0" style={{ background: preview.canvas }}>
+      {/* Top bar strip with traffic-light dots */}
+      <div
+        className="h-3 flex items-center px-1 gap-0.5"
+        style={{
+          background: preview.surface,
+          borderBottom: "1px solid color-mix(in srgb, currentColor 10%, transparent)",
+        }}
+      >
+        <span className="w-1 h-1 rounded-full" style={{ background: preview.accent }} />
+        <span className="w-1 h-1 rounded-full" style={{ background: preview.textMuted }} />
+        <span className="w-1 h-1 rounded-full" style={{ background: preview.textMuted }} />
+      </div>
+      {/* Left sidebar strip */}
+      <div className="absolute left-0 top-3 bottom-0 w-2.5" style={{ background: preview.sidebar }} />
+      {/* Content lines */}
+      <div className="absolute left-4 right-1 top-4 space-y-0.5">
+        <div className="h-0.5 rounded" style={{ background: preview.text }} />
+        <div className="h-0.5 rounded w-2/3" style={{ background: preview.textMuted }} />
+        <div className="h-0.5 rounded w-1/2" style={{ background: preview.textMuted }} />
+      </div>
+    </div>
+  );
+}
+
 export function ThemePicker({ value, onChange }: ThemePickerProps) {
   return (
-    <div className="flex gap-3" role="radiogroup" aria-label="Theme">
-      {THEMES.map((theme) => (
-        <button
-          key={theme.value}
-          type="button"
-          role="radio"
-          aria-checked={value === theme.value}
-          aria-label={theme.label}
-          onClick={() => onChange(theme.value)}
-          className={`group relative w-20 h-14 rounded-lg border-2 overflow-hidden transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
-            value === theme.value
-              ? "border-accent"
-              : "border-border hover:border-border-hover"
-          }`}
-        >
-          <div className={`absolute inset-0 ${theme.previewClass}`} />
-          <div className="absolute top-1 left-1 right-1 h-2 rounded bg-black/10" />
-          <div className="absolute bottom-1 left-1 right-2 h-1 rounded bg-black/5" />
-          <span className="absolute bottom-1 right-1 text-[9px] font-medium text-text-muted opacity-70 group-hover:opacity-100">
-            {theme.label}
-          </span>
-        </button>
-      ))}
+    <div className="flex gap-4" role="radiogroup" aria-label="Theme">
+      {THEMES.map((theme) => {
+        const preview = PREVIEWS[theme.value];
+        return (
+          <div key={theme.value} className="flex flex-col items-center gap-1.5">
+            <button
+              type="button"
+              role="radio"
+              aria-checked={value === theme.value}
+              aria-label={theme.label}
+              onClick={() => onChange(theme.value)}
+              className={`relative w-[76px] h-[52px] rounded-md border-2 overflow-hidden transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
+                value === theme.value
+                  ? "border-accent"
+                  : "border-border hover:border-border-hover"
+              }`}
+            >
+              <WindowMock preview={preview} />
+              {/* System: overlay a light right half so the preview reads "follows the OS" */}
+              {theme.value === "system" && (
+                <div
+                  aria-hidden="true"
+                  className="absolute right-0 top-0 bottom-0 w-1/2 border-l"
+                  style={{ background: PREVIEWS.light.canvas, borderColor: PREVIEWS.dark.sidebar }}
+                >
+                  <div
+                    className="h-3 flex items-center px-1 gap-0.5"
+                    style={{
+                      background: PREVIEWS.light.surface,
+                      borderBottom: "1px solid color-mix(in srgb, currentColor 10%, transparent)",
+                    }}
+                  >
+                    <span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.accent }} />
+                    <span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.textMuted }} />
+                    <span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.textMuted }} />
+                  </div>
+                </div>
+              )}
+            </button>
+            <span className="text-xs font-medium text-text-muted">
+              {theme.label}
+            </span>
+          </div>
+        );
+      })}
     </div>
   );
 }

src/hooks/useAppearance.test.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { applyTheme, applyFontSize, applyAccentColor, resolveTheme } from "./useAppearance";
+
+const windowMocks = vi.hoisted(() => ({
+    setTheme: vi.fn().mockResolvedValue(undefined),
+    setBackgroundColor: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("@tauri-apps/api/window", () => ({
+    getCurrentWindow: () => ({
+        setTheme: windowMocks.setTheme,
+        setBackgroundColor: windowMocks.setBackgroundColor,
+    }),
+}));
+
+describe("useAppearance helpers", () => {
+    const getRoot = () => document.documentElement;
+
+    const stubMatchMedia = (
+        matches: boolean,
+        addEventListener: ReturnType<typeof vi.fn>,
+        removeEventListener: ReturnType<typeof vi.fn>,
+    ) => {
+        Object.defineProperty(window, "matchMedia", {
+            configurable: true,
+            writable: true,
+            value: vi.fn().mockReturnValue({
+                matches,
+                addEventListener,
+                removeEventListener,
+            }),
+        });
+    };
+
+    beforeEach(() => {
+        getRoot().classList.remove("light");
+        delete getRoot().dataset.fontSize;
+        getRoot().style.removeProperty("--color-accent");
+        windowMocks.setTheme.mockClear();
+        windowMocks.setBackgroundColor.mockClear();
+    });
+
+    afterEach(() => {
+        getRoot().classList.remove("light");
+        delete getRoot().dataset.fontSize;
+        getRoot().style.removeProperty("--color-accent");
+        delete (window as unknown as { matchMedia?: unknown }).matchMedia;
+    });
+
+    it('applyTheme("dark") removes the light class', () => {
+        getRoot().classList.add("light");
+        applyTheme("dark");
+        expect(getRoot().classList.contains("light")).toBe(false);
+    });
+
+    it('applyTheme("light") adds the light class', () => {
+        applyTheme("light");
+        expect(getRoot().classList.contains("light")).toBe(true);
+    });
+
+    it('applyTheme("system") keeps dark when the OS does not prefer light', () => {
+        const addEventListener = vi.fn();
+        const removeEventListener = vi.fn();
+        stubMatchMedia(false, addEventListener, removeEventListener);
+        const cleanup = applyTheme("system");
+        expect(getRoot().classList.contains("light")).toBe(false);
+        expect(addEventListener).toHaveBeenCalled();
+        cleanup();
+        expect(removeEventListener).toHaveBeenCalled();
+    });
+
+    it('applyTheme("system") adds the light class when the OS prefers light', () => {
+        stubMatchMedia(true, vi.fn(), vi.fn());
+        applyTheme("system");
+        expect(getRoot().classList.contains("light")).toBe(true);
+    });
+
+    describe("resolveTheme", () => {
+        it('resolveTheme("light") is "light"', () => {
+            expect(resolveTheme("light")).toBe("light");
+        });
+
+        it('resolveTheme("dark") is "dark"', () => {
+            expect(resolveTheme("dark")).toBe("dark");
+        });
+
+        it('resolveTheme("system") is "dark" when the OS does not prefer light', () => {
+            stubMatchMedia(false, vi.fn(), vi.fn());
+            expect(resolveTheme("system")).toBe("dark");
+        });
+
+        it('resolveTheme("system") is "light" when the OS prefers light', () => {
+            stubMatchMedia(true, vi.fn(), vi.fn());
+            expect(resolveTheme("system")).toBe("light");
+        });
+
+        it('resolveTheme("system") falls back to "dark" without matchMedia', () => {
+            delete (window as unknown as { matchMedia?: unknown }).matchMedia;
+            expect(resolveTheme("system")).toBe("dark");
+        });
+    });
+
+    it('applyFontSize("small") sets the data attribute', () => {
+        applyFontSize("small");
+        expect(getRoot().dataset.fontSize).toBe("small");
+    });
+
+    it('applyFontSize("large") sets the data attribute', () => {
+        applyFontSize("large");
+        expect(getRoot().dataset.fontSize).toBe("large");
+    });
+
+    it('applyFontSize("medium") removes the data attribute', () => {
+        getRoot().dataset.fontSize = "large";
+        applyFontSize("medium");
+        expect(getRoot().dataset.fontSize).toBeUndefined();
+    });
+
+    it('applyAccentColor sets the custom property for a valid hex', () => {
+        applyAccentColor("#22C55E");
+        expect(
+            getRoot().style.getPropertyValue("--color-accent").toLowerCase()
+        ).toBe("#22c55e");
+    });
+
+    it('applyAccentColor accepts lowercase hex', () => {
+        applyAccentColor("#2563eb");
+        expect(
+            getRoot().style.getPropertyValue("--color-accent").toLowerCase()
+        ).toBe("#2563eb");
+    });
+
+    it('applyAccentColor removes the custom property for an invalid value', () => {
+        getRoot().style.setProperty("--color-accent", "#22C55E");
+        applyAccentColor("blue");
+        expect(getRoot().style.getPropertyValue("--color-accent")).toBe("");
+    });
+
+    it('applyAccentColor rejects malformed hex', () => {
+        applyAccentColor("#22C5");
+        expect(getRoot().style.getPropertyValue("--color-accent")).toBe("");
+    });
+
+    it("syncs the native window (theme + background) for light", async () => {
+        applyTheme("light");
+        // Allow the fire-and-forget dynamic import + invoke to settle.
+        await new Promise((r) => setTimeout(r, 0));
+        expect(windowMocks.setTheme).toHaveBeenCalledWith("light");
+        expect(windowMocks.setBackgroundColor).toHaveBeenCalledWith("#FAFAFA");
+    });
+
+    it("syncs the native window (theme + background) for dark", async () => {
+        applyTheme("dark");
+        await new Promise((r) => setTimeout(r, 0));
+        expect(windowMocks.setTheme).toHaveBeenCalledWith("dark");
+        expect(windowMocks.setBackgroundColor).toHaveBeenCalledWith("#0A0A0B");
+    });
+
+    it("resets the window to follow the OS when switching to system", async () => {
+        stubMatchMedia(false, vi.fn(), vi.fn());
+        applyTheme("system");
+        await new Promise((r) => setTimeout(r, 0));
+        expect(windowMocks.setTheme).toHaveBeenCalledWith(null);
+    });
+});

src/hooks/useAppearance.ts

@@ -0,0 +1,116 @@
+import { useEffect } from "react";
+import type { Theme, FontSize } from "../lib/types";
+
+const LIGHT_COLOR_SCHEME_QUERY = "(prefers-color-scheme: light)";
+
+/**
+ * Resolves a Theme setting to the concrete color scheme it maps to (pure).
+ * For "system" this reads the webview's prefers-color-scheme, which correctly
+ * mirrors the OS only while the native window is NOT forced to a specific
+ * theme (see applyTheme's system handling).
+ */
+export function resolveTheme(theme: Theme): "light" | "dark" {
+    if (theme === "dark") return "dark";
+    if (theme === "light") return "light";
+    // "system" — follow the OS preference. Guard for environments without matchMedia.
+    if (typeof window.matchMedia !== "function") return "dark";
+    return window.matchMedia(LIGHT_COLOR_SCHEME_QUERY).matches ? "light" : "dark";
+}
+
+/**
+ * Syncs the native window chrome. Pass null to reset the window to follow the
+ * OS theme — required for the "system" setting, because forcing the window
+ * theme changes the webview's prefers-color-scheme (WKWebView follows the
+ * window appearance), which would otherwise pollute matchMedia.
+ */
+async function syncWindowTheme(effective: "light" | "dark" | null): Promise<void> {
+    try {
+        // Dynamic import keeps the Tauri API out of the hot path for
+        // non-Tauri bundles and non-Tauri test environments.
+        const { getCurrentWindow } = await import("@tauri-apps/api/window");
+        const win = getCurrentWindow();
+        if (effective === null) {
+            await win.setTheme(null);
+            return;
+        }
+        await win.setTheme(effective);
+        // macOS "Overlay" title bar paints the WINDOW background color in the
+        // title bar strip; keep it in sync with the theme.
+        await win.setBackgroundColor(effective === "light" ? "#FAFAFA" : "#0A0A0B");
+    } catch {
+        // Outside Tauri — nothing to sync.
+    }
+}
+
+/**
+ * Applies the theme to the document root and returns a cleanup that
+ * stops tracking the system preference while the theme is "system".
+ * Also syncs the native window chrome (fire-and-forget; noop outside Tauri).
+ */
+export function applyTheme(theme: Theme): () => void {
+    const root = document.documentElement;
+
+    if (theme === "dark") {
+        root.classList.remove("light");
+        void syncWindowTheme("dark");
+        return () => {};
+    }
+    if (theme === "light") {
+        root.classList.add("light");
+        void syncWindowTheme("light");
+        return () => {};
+    }
+
+    // "system" — follow the OS preference and keep it in sync.
+    // Guard for environments without matchMedia (e.g. jsdom).
+    if (typeof window.matchMedia !== "function") {
+        root.classList.remove("light");
+        void syncWindowTheme(null);
+        return () => {};
+    }
+    const mq = window.matchMedia(LIGHT_COLOR_SCHEME_QUERY);
+    const applySystem = () => {
+        root.classList.toggle("light", mq.matches);
+        void syncWindowTheme(null);
+    };
+    applySystem();
+    // Reset the native window to follow the OS first, then re-read matchMedia
+    // once it actually mirrors the OS — the immediate applySystem above may be
+    // stale if the window was previously forced to the other theme.
+    void syncWindowTheme(null).then(applySystem);
+    mq.addEventListener("change", applySystem);
+    return () => mq.removeEventListener("change", applySystem);
+}
+
+/** Applies the font-size scale by toggling a data attribute on the root. */
+export function applyFontSize(fontSize: FontSize): void {
+    const root = document.documentElement;
+    if (fontSize === "medium") {
+        delete root.dataset.fontSize;
+    } else {
+        root.dataset.fontSize = fontSize;
+    }
+}
+
+/**
+ * Applies the accent color as a CSS custom property on the root. Invalid or
+ * non-hex values fall back to the theme default (via removal).
+ */
+export function applyAccentColor(accent: string): void {
+    const root = document.documentElement;
+    if (/^#[0-9a-fA-F]{6}$/.test(accent)) {
+        root.style.setProperty("--color-accent", accent);
+    } else {
+        root.style.removeProperty("--color-accent");
+    }
+}
+
+/** Keeps the document appearance in sync with the theme/font-size settings. */
+export function useAppearance(theme: Theme, fontSize: FontSize, accentColor: string): void {
+    useEffect(() => {
+        const cleanupTheme = applyTheme(theme);
+        applyFontSize(fontSize);
+        applyAccentColor(accentColor);
+        return cleanupTheme;
+    }, [theme, fontSize, accentColor]);
+}

src/index.css

@@ -28,11 +28,30 @@
 
 :root {
   color-scheme: dark;
+  /* Derive hover/muted from the runtime accent so a custom accent flows through */
+  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, black);
+  --color-accent-muted: color-mix(in srgb, var(--color-accent) 70%, white);
 }
 
+/* Light theme overrides — the app is dark-first; `.light` is toggled on the root */
+:root.light {
+  --color-canvas: #FAFAFA;
+  --color-surface: #FFFFFF;
+  --color-surface-raised: #F4F4F5;
+  --color-border: #E4E4E7;
+  --color-border-hover: #D4D4D8;
+  --color-text: #18181B;
+  --color-text-muted: #71717A;
+  color-scheme: light;
+}
+
+/* Font size scale — rem-based text sizes scale with html font-size */
+:root[data-font-size="small"] { font-size: 15px; }
+:root[data-font-size="large"] { font-size: 17px; }
+
 html, body {
   background-color: var(--color-canvas);
-  color: white;
+  color: var(--color-text);
   font-family: var(--font-family-sans);
   -webkit-font-smoothing: antialiased;
   overscroll-behavior: none;

src/lib/types.ts

@@ -97,6 +97,7 @@ export interface Settings {
   table_refresh_rate: number;
   table_page_size: number;
   shortcuts: Record<string, string>;
+  accent_color: string;
 }
 
 export type ActiveView = "home" | "settings" | "new-connection" | "db-viewer";

src/stores/settingsStore.test.ts

@@ -9,7 +9,7 @@ beforeEach(() => {
 
 describe("settingsStore", () => {
   it("load fetches settings", async () => {
-    const settings = { confirm_before_delete: true, default_folder_id: null, theme: "dark" as const, font_size: "medium" as const, default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null }, tag_order: null, table_refresh_rate: 0, table_page_size: 50, shortcuts: {} };
+    const settings = { confirm_before_delete: true, default_folder_id: null, theme: "dark" as const, font_size: "medium" as const, default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null }, tag_order: null, table_refresh_rate: 0, table_page_size: 50, shortcuts: {}, accent_color: "#2563EB" };
     vi.spyOn(commands, "getSettings").mockResolvedValue(settings);
     await useSettingsStore.getState().load();
     expect(useSettingsStore.getState().settings).toEqual(settings);
@@ -17,7 +17,7 @@ describe("settingsStore", () => {
 
   it("updateSetting persists then reloads", async () => {
     vi.spyOn(commands, "updateSetting").mockResolvedValue(undefined);
-    const settings = { confirm_before_delete: true, default_folder_id: null, theme: "light" as const, font_size: "medium" as const, default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null }, tag_order: null, table_refresh_rate: 0, table_page_size: 50, shortcuts: {} };
+    const settings = { confirm_before_delete: true, default_folder_id: null, theme: "light" as const, font_size: "medium" as const, default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null }, tag_order: null, table_refresh_rate: 0, table_page_size: 50, shortcuts: {}, accent_color: "#2563EB" };
     vi.spyOn(commands, "getSettings").mockResolvedValue(settings);
     await useSettingsStore.getState().updateSetting("theme", "light");
     expect(commands.updateSetting).toHaveBeenCalledWith("theme", "light");

src/stores/uiStore.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { useUiStore } from "./uiStore";
 
-beforeEach(() => useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeEnvironment: null, activeView: "home", prefilledConnectionString: null, activeConnectionId: null }));
+beforeEach(() => useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeEnvironment: null, activeView: "home", prefilledConnectionString: null, activeConnectionId: null, settingsReturnView: null }));
 
 describe("uiStore", () => {
   it("starts on home view", () => expect(useUiStore.getState().activeView).toBe("home"));
@@ -58,4 +58,40 @@ describe("uiStore", () => {
     useUiStore.getState().setActiveConnectionId(null);
     expect(useUiStore.getState().activeConnectionId).toBeNull();
   });
-});
+
+  it("openSettings from home records home and closeSettings returns to home", () => {
+    useUiStore.getState().openSettings();
+    expect(useUiStore.getState().settingsReturnView).toBe("home");
+    expect(useUiStore.getState().activeView).toBe("settings");
+    useUiStore.getState().closeSettings();
+    expect(useUiStore.getState().activeView).toBe("home");
+    expect(useUiStore.getState().settingsReturnView).toBeNull();
+  });
+
+  it("openSettings from db-viewer records db-viewer and closeSettings returns to it", () => {
+    useUiStore.getState().setActiveView("db-viewer");
+    useUiStore.getState().openSettings();
+    expect(useUiStore.getState().settingsReturnView).toBe("db-viewer");
+    expect(useUiStore.getState().activeView).toBe("settings");
+    useUiStore.getState().closeSettings();
+    expect(useUiStore.getState().activeView).toBe("db-viewer");
+    expect(useUiStore.getState().settingsReturnView).toBeNull();
+  });
+
+  it("double openSettings keeps the original return view", () => {
+    useUiStore.getState().setActiveView("db-viewer");
+    useUiStore.getState().openSettings();
+    useUiStore.getState().openSettings();
+    expect(useUiStore.getState().settingsReturnView).toBe("db-viewer");
+    expect(useUiStore.getState().activeView).toBe("settings");
+    useUiStore.getState().closeSettings();
+    expect(useUiStore.getState().activeView).toBe("db-viewer");
+  });
+
+  it("closeSettings falls back to home when no return view is recorded", () => {
+    useUiStore.getState().setActiveView("settings");
+    useUiStore.getState().closeSettings();
+    expect(useUiStore.getState().activeView).toBe("home");
+    expect(useUiStore.getState().settingsReturnView).toBeNull();
+  });
+});

src/stores/uiStore.ts

@@ -11,7 +11,10 @@ interface UiState {
   selectedItemIds: string[];
   prefilledConnectionString: string | null;
   activeConnectionId: string | null;
+  settingsReturnView: Exclude<ActiveView, "settings"> | null;
   setActiveView: (view: ActiveView) => void;
+  openSettings: () => void;
+  closeSettings: () => void;
   setSearchQuery: (q: string) => void;
   setActiveFolderId: (id: string | null) => void;
   toggleTag: (id: string) => void;
@@ -27,8 +30,21 @@ interface UiState {
 }
 
 export const useUiStore = create<UiState>((set) => ({
-  searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeEnvironment: null, activeView: "home", selectedItemIds: [], prefilledConnectionString: null, activeConnectionId: null,
+  searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeEnvironment: null, activeView: "home", selectedItemIds: [], prefilledConnectionString: null, activeConnectionId: null, settingsReturnView: null,
   setActiveView: (view) => set({ activeView: view }),
+  openSettings: () => set((s) => ({
+    settingsReturnView:
+      s.activeView === "settings"
+        ? s.settingsReturnView
+        : s.activeView === "home" || s.activeView === "db-viewer" || s.activeView === "new-connection"
+          ? s.activeView
+          : null,
+    activeView: "settings",
+  })),
+  closeSettings: () => set((s) => ({
+    activeView: s.settingsReturnView ?? "home",
+    settingsReturnView: null,
+  })),
   setSearchQuery: (q) => set({ searchQuery: q }),
   setActiveFolderId: (id) => set({ activeFolderId: id, selectedItemIds: [] }),
   toggleTag: (id) => set((s) => ({ activeTagIds: s.activeTagIds.includes(id) ? s.activeTagIds.filter((t) => t !== id) : [...s.activeTagIds, id] })),