diff --git a/apps/web/src/ui/appearance-settings-panel.test.tsx b/apps/web/src/ui/appearance-settings-panel.test.tsx
new file mode 100644
index 0000000..481977b
--- /dev/null
+++ b/apps/web/src/ui/appearance-settings-panel.test.tsx
@@ -0,0 +1,334 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { render, screen, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe } from "vitest-axe"
+
+import { AppearanceSettingsPanel } from "./appearance-settings-panel"
+import { ThemeProvider } from "./theme-provider"
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value
+    },
+    clear: () => {
+      store = {}
+    },
+  }
+})()
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+})
+
+// Helper to render within ThemeProvider
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>)
+}
+
+describe("AppearanceSettingsPanel", () => {
+  beforeEach(() => {
+    localStorageMock.clear()
+    // Reset system preference
+    window.matchMedia = vi.fn().mockImplementation((query) => ({
+      matches: query === "(prefers-color-scheme: dark)" ? false : true,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }))
+  })
+
+  describe("Rendering", () => {
+    it("renders with default heading", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+      expect(screen.getByText("Appearance")).toBeInTheDocument()
+    })
+
+    it("renders with custom heading", () => {
+      renderWithTheme(<AppearanceSettingsPanel heading="Theme Settings" />)
+      expect(screen.getByText("Theme Settings")).toBeInTheDocument()
+    })
+
+    it("renders without heading when heading is null", () => {
+      renderWithTheme(<AppearanceSettingsPanel heading={null} />)
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument()
+    })
+
+    it("renders all three theme options", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+      expect(screen.getByLabelText(/Light/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/Dark/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/System/i)).toBeInTheDocument()
+    })
+
+    it("renders option descriptions", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+      expect(screen.getByText("Always use light theme")).toBeInTheDocument()
+      expect(screen.getByText("Always use dark theme")).toBeInTheDocument()
+      expect(screen.getByText("Sync with your device settings")).toBeInTheDocument()
+    })
+
+    it("renders preview cards by default", () => {
+      const { container } = renderWithTheme(<AppearanceSettingsPanel />)
+      // Previews are aria-hidden divs
+      const previews = container.querySelectorAll('[aria-hidden="true"]')
+      expect(previews.length).toBeGreaterThanOrEqual(3)
+    })
+
+    it("hides preview cards when showPreviews is false", () => {
+      const { container } = renderWithTheme(
+        <AppearanceSettingsPanel showPreviews={false} />
+      )
+      // Count should be less (no preview cards)
+      const previews = container.querySelectorAll('[aria-hidden="true"]')
+      expect(previews.length).toBe(0)
+    })
+  })
+
+  describe("Theme Selection", () => {
+    it("defaults to system theme", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+      const systemRadio = screen.getByLabelText(/System/i)
+      expect(systemRadio).toBeChecked()
+    })
+
+    it("allows selecting light theme", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightRadio = screen.getByLabelText(/Light/i)
+      await user.click(lightRadio)
+
+      expect(lightRadio).toBeChecked()
+    })
+
+    it("allows selecting dark theme", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const darkRadio = screen.getByLabelText(/Dark/i)
+      await user.click(darkRadio)
+
+      expect(darkRadio).toBeChecked()
+    })
+
+    it("can switch between themes", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightRadio = screen.getByLabelText(/Light/i)
+      const darkRadio = screen.getByLabelText(/Dark/i)
+      const systemRadio = screen.getByLabelText(/System/i)
+
+      // Start with system (default)
+      expect(systemRadio).toBeChecked()
+
+      // Switch to light
+      await user.click(lightRadio)
+      expect(lightRadio).toBeChecked()
+      expect(darkRadio).not.toBeChecked()
+
+      // Switch to dark
+      await user.click(darkRadio)
+      expect(darkRadio).toBeChecked()
+      expect(lightRadio).not.toBeChecked()
+
+      // Back to system
+      await user.click(systemRadio)
+      expect(systemRadio).toBeChecked()
+    })
+  })
+
+  describe("Persistence", () => {
+    it("persists selection to localStorage", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const darkRadio = screen.getByLabelText(/Dark/i)
+      await user.click(darkRadio)
+
+      expect(localStorageMock.getItem("so4-theme")).toBe("dark")
+    })
+
+    it("loads persisted selection on mount", () => {
+      localStorageMock.setItem("so4-theme", "light")
+
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightRadio = screen.getByLabelText(/Light/i)
+      expect(lightRadio).toBeChecked()
+    })
+
+    it("applies theme without page reload", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const darkRadio = screen.getByLabelText(/Dark/i)
+      await user.click(darkRadio)
+
+      // Theme should be applied immediately to document
+      expect(document.documentElement.classList.contains("dark")).toBe(true)
+      expect(document.documentElement.classList.contains("light")).toBe(false)
+    })
+  })
+
+  describe("System Theme Resolution", () => {
+    it("shows resolved theme when system is selected", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      // Default is system, and our mock says light
+      expect(
+        screen.getByText(/Currently following your system preference/i)
+      ).toBeInTheDocument()
+      expect(screen.getByText("Light", { exact: false })).toBeInTheDocument()
+    })
+
+    it("displays resolved theme next to system option label", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      // Find the system option label
+      const systemLabel = screen.getByText("System")
+      const parentElement = systemLabel.closest("div")
+
+      expect(parentElement).toHaveTextContent("(Light)")
+    })
+
+    it("updates resolved theme when system preference changes", () => {
+      // Start with light system preference
+      window.matchMedia = vi.fn().mockImplementation((query) => {
+        const listeners: Array<(e: MediaQueryListEvent) => void> = []
+        return {
+          matches: query === "(prefers-color-scheme: dark)" ? false : true,
+          media: query,
+          onchange: null,
+          addEventListener: (_: string, listener: (e: MediaQueryListEvent) => void) => {
+            listeners.push(listener)
+          },
+          removeEventListener: vi.fn(),
+          dispatchEvent: (event: MediaQueryListEvent) => {
+            listeners.forEach((listener) => listener(event))
+            return true
+          },
+        }
+      })
+
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      // Initially shows Light
+      expect(screen.getByText("Light", { exact: false })).toBeInTheDocument()
+
+      // Simulate system preference change to dark
+      const mql = window.matchMedia("(prefers-color-scheme: dark)")
+      const event = new Event("change") as MediaQueryListEvent
+      Object.defineProperty(event, "matches", { value: true })
+      mql.dispatchEvent(event)
+
+      // Should update to Dark
+      // Note: This is a simplified test; real implementation depends on ThemeProvider's listeners
+    })
+
+    it("hides system preference message when not on system theme", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      // Initially on system theme
+      expect(
+        screen.getByText(/Currently following your system preference/i)
+      ).toBeInTheDocument()
+
+      // Switch to light
+      const lightRadio = screen.getByLabelText(/Light/i)
+      await user.click(lightRadio)
+
+      // Message should be gone
+      expect(
+        screen.queryByText(/Currently following your system preference/i)
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Keyboard Accessibility", () => {
+    it("radio group is keyboard navigable", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightRadio = screen.getByLabelText(/Light/i)
+
+      // Tab to first radio
+      await user.tab()
+      expect(lightRadio).toHaveFocus()
+    })
+
+    it("has accessible radio group label", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const radioGroup = screen.getByRole("radiogroup", {
+        name: /Theme selection/i,
+      })
+      expect(radioGroup).toBeInTheDocument()
+    })
+
+    it("each radio has associated label", () => {
+      renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightRadio = screen.getByRole("radio", { name: /Light/i })
+      const darkRadio = screen.getByRole("radio", { name: /Dark/i })
+      const systemRadio = screen.getByRole("radio", { name: /System/i })
+
+      expect(lightRadio).toBeInTheDocument()
+      expect(darkRadio).toBeInTheDocument()
+      expect(systemRadio).toBeInTheDocument()
+    })
+  })
+
+  describe("Visual Styling", () => {
+    it("highlights selected option", async () => {
+      const user = userEvent.setup()
+      const { container } = renderWithTheme(<AppearanceSettingsPanel />)
+
+      const lightLabel = screen.getByLabelText(/Light/i).closest("label")
+      await user.click(screen.getByLabelText(/Light/i))
+
+      expect(lightLabel).toHaveClass("border-primary")
+    })
+
+    it("applies custom className", () => {
+      const { container } = renderWithTheme(
+        <AppearanceSettingsPanel className="custom-class" />
+      )
+
+      const panel = container.querySelector('[data-slot="appearance-settings-panel"]')
+      expect(panel).toHaveClass("custom-class")
+    })
+
+    it("forwards additional props", () => {
+      renderWithTheme(
+        <AppearanceSettingsPanel data-testid="appearance-panel" />
+      )
+
+      expect(screen.getByTestId("appearance-panel")).toBeInTheDocument()
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("passes axe accessibility tests", async () => {
+      const { container } = renderWithTheme(<AppearanceSettingsPanel />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it("preview cards are hidden from screen readers", () => {
+      const { container } = renderWithTheme(<AppearanceSettingsPanel />)
+      const previews = container.querySelectorAll('[aria-hidden="true"]')
+
+      previews.forEach((preview) => {
+        expect(preview).toHaveAttribute("aria-hidden", "true")
+      })
+    })
+  })
+})
diff --git a/apps/web/src/ui/appearance-settings-panel.tsx b/apps/web/src/ui/appearance-settings-panel.tsx
new file mode 100644
index 0000000..157a478
--- /dev/null
+++ b/apps/web/src/ui/appearance-settings-panel.tsx
@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import { RadioGroup, RadioGroupItem } from "@workspace/ui/components/radio-group"
+import { cn } from "@workspace/ui/lib/utils"
+import { useTheme, type Theme } from "./theme-provider"
+
+interface ThemeOption {
+  value: Theme
+  label: string
+  description: string
+}
+
+const THEME_OPTIONS: ThemeOption[] = [
+  {
+    value: "light",
+    label: "Light",
+    description: "Always use light theme",
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    description: "Always use dark theme",
+  },
+  {
+    value: "system",
+    label: "System",
+    description: "Sync with your device settings",
+  },
+]
+
+export interface AppearanceSettingsPanelProps
+  extends React.ComponentProps<"div"> {
+  /** Optional heading for the panel. Defaults to "Appearance". */
+  heading?: React.ReactNode
+  /** When true, shows preview cards for each theme option. Defaults to true. */
+  showPreviews?: boolean
+}
+
+/**
+ * AppearanceSettingsPanel — A settings interface for selecting theme preferences
+ * (Light, Dark, or System).
+ *
+ * ## Features
+ *
+ * - Displays current theme selection with radio group controls
+ * - Shows the resolved theme when "System" is selected
+ * - Updates in real-time when system preferences change
+ * - Persists selection using the existing theme provider storage
+ * - No page reload or flash when changing themes
+ * - Optional visual preview cards for each theme
+ * - Fully keyboard accessible
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <AppearanceSettingsPanel />
+ * ```
+ *
+ * With custom heading and without previews:
+ * ```tsx
+ * <AppearanceSettingsPanel
+ *   heading="Theme Preferences"
+ *   showPreviews={false}
+ * />
+ * ```
+ *
+ * ## Accessibility
+ *
+ * - Radio group is keyboard navigable with arrow keys
+ * - Each option has a clear label and description
+ * - System theme option shows the resolved theme for transparency
+ * - Preview cards use semantic design tokens and remain readable in both themes
+ */
+export function AppearanceSettingsPanel({
+  heading = "Appearance",
+  showPreviews = true,
+  className,
+  ...props
+}: AppearanceSettingsPanelProps) {
+  const { theme, setTheme, resolvedTheme } = useTheme()
+
+  const handleThemeChange = React.useCallback(
+    (value: string) => {
+      setTheme(value as Theme)
+    },
+    [setTheme]
+  )
+
+  return (
+    <div
+      data-slot="appearance-settings-panel"
+      className={cn("space-y-4", className)}
+      {...props}
+    >
+      {heading && (
+        <h3 className="text-15 font-semibold leading-snug">{heading}</h3>
+      )}
+
+      <RadioGroup
+        value={theme}
+        onValueChange={handleThemeChange}
+        aria-label="Theme selection"
+        className="gap-3"
+      >
+        {THEME_OPTIONS.map((option) => {
+          const isSelected = theme === option.value
+          const isSystemAndActive = option.value === "system" && isSelected
+
+          return (
+            <label
+              key={option.value}
+              htmlFor={`theme-${option.value}`}
+              className={cn(
+                "flex cursor-pointer items-start gap-3 rounded-lg border border-border bg-surface-raised p-4 transition-colors",
+                "hover:bg-surface-interactive focus-within:ring-2 focus-within:ring-ring/30",
+                isSelected && "border-primary bg-surface-interactive"
+              )}
+            >
+              <RadioGroupItem
+                id={`theme-${option.value}`}
+                value={option.value}
+                className="mt-0.5"
+              />
+
+              <div className="min-w-0 flex-1 space-y-1">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-13 font-medium">
+                    {option.label}
+                    {isSystemAndActive && (
+                      <span className="ml-2 text-11 font-normal text-muted-foreground">
+                        ({resolvedTheme === "dark" ? "Dark" : "Light"})
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <p className="text-11 text-muted-foreground">
+                  {option.description}
+                </p>
+
+                {showPreviews && (
+                  <div className="pt-2">
+                    <ThemePreview theme={option.value} />
+                  </div>
+                )}
+              </div>
+            </label>
+          )
+        })}
+      </RadioGroup>
+
+      {theme === "system" && (
+        <p className="text-11 text-muted-foreground">
+          Currently following your system preference:{" "}
+          <span className="font-medium text-foreground">
+            {resolvedTheme === "dark" ? "Dark" : "Light"}
+          </span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+/**
+ * ThemePreview — A small visual preview card showing how the theme looks.
+ * Uses semantic design tokens to remain readable in both themes.
+ */
+function ThemePreview({ theme }: { theme: Theme }) {
+  // Determine preview colors based on the theme option
+  const previewTheme = theme === "system" ? "mixed" : theme
+
+  return (
+    <div
+      className={cn(
+        "relative h-16 w-full overflow-hidden rounded-md border",
+        previewTheme === "light" && "border-border bg-background",
+        previewTheme === "dark" && "border-zinc-700 bg-zinc-900",
+        previewTheme === "mixed" &&
+          "border-border bg-gradient-to-r from-background via-muted to-zinc-900"
+      )}
+      aria-hidden="true"
+    >
+      <div className="flex h-full items-center gap-2 px-3">
+        {/* Preview elements using semantic tokens */}
+        {previewTheme === "light" && (
+          <>
+            <div className="size-4 rounded-sm bg-primary" />
+            <div className="h-2 flex-1 rounded-full bg-muted" />
+            <div className="h-2 w-12 rounded-full bg-muted-foreground/20" />
+          </>
+        )}
+
+        {previewTheme === "dark" && (
+          <>
+            <div className="size-4 rounded-sm bg-primary" />
+            <div className="h-2 flex-1 rounded-full bg-zinc-800" />
+            <div className="h-2 w-12 rounded-full bg-zinc-700" />
+          </>
+        )}
+
+        {previewTheme === "mixed" && (
+          <>
+            {/* Light side */}
+            <div className="flex flex-1 items-center gap-1.5">
+              <div className="size-3 rounded-sm bg-primary" />
+              <div className="h-1.5 flex-1 rounded-full bg-muted" />
+            </div>
+            {/* Separator */}
+            <div className="h-12 w-px bg-border" />
+            {/* Dark side */}
+            <div className="flex flex-1 items-center gap-1.5">
+              <div className="size-3 rounded-sm bg-primary" />
+              <div className="h-1.5 flex-1 rounded-full bg-zinc-800" />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}