diff --git a/apps/web/src/components/CustomThemeDialog.tsx b/apps/web/src/components/CustomThemeDialog.tsx
new file mode 100644
index 00000000..c64401a8
--- /dev/null
+++ b/apps/web/src/components/CustomThemeDialog.tsx
@@ -0,0 +1,279 @@
+import { LinkIcon, PaletteIcon, SparklesIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import {
+  type CustomThemeData,
+  getStoredCustomTheme,
+  isTweakcnURL,
+  parseThemeInput,
+  setStoredCustomTheme,
+} from "../lib/customTheme";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "./ui/dialog";
+
+// ---------------------------------------------------------------------------
+// Color Preview Swatch
+// ---------------------------------------------------------------------------
+
+function ColorSwatch({
+  label,
+  bg,
+  fg,
+}: {
+  label: string;
+  bg: string | undefined;
+  fg: string | undefined;
+}) {
+  if (!bg) return null;
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className="size-5 shrink-0 rounded-md border border-border/50"
+        style={{ background: bg }}
+      >
+        {fg ? (
+          <span
+            className="flex size-full items-center justify-center text-[8px] font-bold"
+            style={{ color: fg }}
+          >
+            A
+          </span>
+        ) : null}
+      </div>
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Preview Panel
+// ---------------------------------------------------------------------------
+
+function ThemePreview({ theme }: { theme: CustomThemeData | null }) {
+  if (!theme || Object.keys(theme.light).length === 0) return null;
+
+  const colors = [
+    { label: "Background", bg: theme.light.background, fg: theme.light.foreground },
+    { label: "Primary", bg: theme.light.primary, fg: theme.light["primary-foreground"] },
+    { label: "Secondary", bg: theme.light.secondary, fg: theme.light["secondary-foreground"] },
+    { label: "Accent", bg: theme.light.accent, fg: theme.light["accent-foreground"] },
+    { label: "Muted", bg: theme.light.muted, fg: theme.light["muted-foreground"] },
+    { label: "Card", bg: theme.light.card, fg: theme.light["card-foreground"] },
+    {
+      label: "Destructive",
+      bg: theme.light.destructive,
+      fg: theme.light["destructive-foreground"],
+    },
+    { label: "Border", bg: theme.light.border, fg: undefined },
+  ];
+
+  const radius = theme.light.radius;
+  const fontSans = theme.light["font-sans"];
+  const fontMono = theme.light["font-mono"];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 text-xs font-medium text-foreground">
+        <SparklesIcon className="size-3.5" />
+        Preview {theme.name ? `- ${theme.name}` : ""}
+      </div>
+
+      {/* Color swatches */}
+      <div className="grid grid-cols-4 gap-2">
+        {colors.map((c) => (
+          <ColorSwatch key={c.label} {...c} />
+        ))}
+      </div>
+
+      {/* Design tokens */}
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
+        {radius ? <span>Radius: {radius}</span> : null}
+        {fontSans ? (
+          <span className="max-w-40 truncate">Font: {fontSans.split(",")[0]?.trim()}</span>
+        ) : null}
+        {fontMono ? (
+          <span className="max-w-40 truncate">Mono: {fontMono.split(",")[0]?.trim()}</span>
+        ) : null}
+      </div>
+
+      {/* Variable count */}
+      <p className="text-[11px] text-muted-foreground">
+        {Object.keys(theme.light).length} light + {Object.keys(theme.dark).length} dark variables
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main Dialog
+// ---------------------------------------------------------------------------
+
+export function CustomThemeDialog({
+  open,
+  onOpenChange,
+  onApply,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApply: (theme: CustomThemeData) => void;
+}) {
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [preview, setPreview] = useState<CustomThemeData | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Pre-populate with existing custom theme
+  const handleOpen = useCallback(() => {
+    const existing = getStoredCustomTheme();
+    if (existing) {
+      setPreview(existing);
+    }
+    setError(null);
+    setInput("");
+  }, []);
+
+  // Parse input on change (debounced feel via paste handling)
+  const handleParse = useCallback(async () => {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      setPreview(null);
+      setError(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const theme = await parseThemeInput(trimmed);
+      setPreview(theme);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to parse theme");
+      setPreview(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [input]);
+
+  const handleApply = useCallback(() => {
+    if (!preview) return;
+    setStoredCustomTheme(preview);
+    onApply(preview);
+    onOpenChange(false);
+    setInput("");
+    setPreview(null);
+    setError(null);
+  }, [preview, onApply, onOpenChange]);
+
+  const isUrl = isTweakcnURL(input.trim());
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen) handleOpen();
+        onOpenChange(nextOpen);
+      }}
+    >
+      <DialogPopup className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <PaletteIcon className="size-4.5" />
+            Import Custom Theme
+          </DialogTitle>
+          <DialogDescription>
+            Paste CSS or a{" "}
+            <a
+              href="https://tweakcn.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-info-foreground underline"
+            >
+              tweakcn.com
+            </a>{" "}
+            theme URL below.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogPanel className="space-y-4">
+          {/* Input area */}
+          <div className="relative">
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => {
+                setInput(e.target.value);
+                setError(null);
+                setPreview(null);
+              }}
+              onPaste={() => {
+                // Auto-parse after paste with a small delay so the value is set
+                setTimeout(() => {
+                  handleParse();
+                }, 50);
+              }}
+              placeholder={`Paste theme CSS, JSON, or a tweakcn.com URL...\n\nExample:\nhttps://tweakcn.com/themes/catppuccin\n\nor\n\n:root {\n  --background: oklch(1 0 0);\n  --primary: oklch(0.58 0.2 277);\n  ...\n}`}
+              className="min-h-36 w-full resize-y rounded-lg border border-input bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground/50 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/24"
+              spellCheck={false}
+            />
+            {isUrl ? (
+              <div className="absolute top-2 right-2 flex items-center gap-1 rounded-md bg-accent/80 px-1.5 py-0.5 text-[10px] text-accent-foreground">
+                <LinkIcon className="size-2.5" />
+                URL
+              </div>
+            ) : null}
+          </div>
+
+          {/* Parse button */}
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              disabled={!input.trim() || loading}
+              onClick={handleParse}
+            >
+              {loading ? "Loading..." : "Parse Theme"}
+            </Button>
+            {error ? <p className="text-xs text-destructive">{error}</p> : null}
+          </div>
+
+          {/* Preview */}
+          {preview ? (
+            <div className="rounded-xl border border-border/70 bg-muted/30 p-3">
+              <ThemePreview theme={preview} />
+            </div>
+          ) : null}
+        </DialogPanel>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              onOpenChange(false);
+              setInput("");
+              setPreview(null);
+              setError(null);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button type="button" size="sm" disabled={!preview || loading} onClick={handleApply}>
+            Apply Theme
+          </Button>
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/hooks/useTheme.ts b/apps/web/src/hooks/useTheme.ts
index 79291476..916a58ef 100644
--- a/apps/web/src/hooks/useTheme.ts
+++ b/apps/web/src/hooks/useTheme.ts
@@ -1,4 +1,12 @@
 import { useCallback, useEffect, useSyncExternalStore } from "react";
+import {
+  applyCustomTheme,
+  applyFontOverride,
+  applyRadiusOverride,
+  getStoredCustomTheme,
+  initCustomTheme,
+  removeCustomTheme,
+} from "../lib/customTheme";
 
 type Theme = "light" | "dark" | "system";
 type ColorTheme =
@@ -27,6 +35,7 @@ export const COLOR_THEMES: { id: ColorTheme; label: string }[] = [
   { id: "carbon", label: "Carbon" },
   { id: "vapor", label: "Vapor" },
   { id: "cathedral-circuit", label: "Cathedral Circuit" },
+  { id: "custom", label: "Custom" },
 ];
 
 export const FONT_FAMILIES: { id: FontFamily; label: string }[] = [
@@ -142,6 +151,9 @@ function syncDesktopTheme(theme: Theme) {
   });
 }
 
+// Initialize custom theme + overrides on module load
+initCustomTheme();
+
 // Apply immediately on module load to prevent flash
 applyTheme(getStored());
 
@@ -238,3 +250,5 @@ export function useTheme() {
     setFontFamily,
   } as const;
 }
+
+export type { Theme, ColorTheme };
diff --git a/apps/web/src/lib/customTheme.ts b/apps/web/src/lib/customTheme.ts
new file mode 100644
index 00000000..e64b3b3f
--- /dev/null
+++ b/apps/web/src/lib/customTheme.ts
@@ -0,0 +1,569 @@
+/**
+ * Custom theme support — parse, apply, and persist themes from tweakcn.com
+ *
+ * Supports three input formats:
+ *   1. Raw CSS (from tweakcn "Copy CSS" or any shadcn-compatible CSS)
+ *   2. JSON (shadcn registry format from tweakcn API)
+ *   3. tweakcn.com URLs (fetched via their CORS-enabled API)
+ */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/** CSS variable names we map from imported themes into our theme system. */
+const SUPPORTED_COLOR_VARS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "info",
+  "info-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+] as const;
+
+const SUPPORTED_DESIGN_VARS = ["radius"] as const;
+
+const SUPPORTED_FONT_VARS = ["font-sans", "font-serif", "font-mono"] as const;
+
+const SUPPORTED_SHADOW_VARS = [
+  "shadow-2xs",
+  "shadow-xs",
+  "shadow-sm",
+  "shadow",
+  "shadow-md",
+  "shadow-lg",
+  "shadow-xl",
+  "shadow-2xl",
+] as const;
+
+const ALL_SUPPORTED_VARS = new Set<string>([
+  ...SUPPORTED_COLOR_VARS,
+  ...SUPPORTED_DESIGN_VARS,
+  ...SUPPORTED_FONT_VARS,
+  ...SUPPORTED_SHADOW_VARS,
+]);
+
+const CUSTOM_THEME_STORAGE_KEY = "okcode:custom-theme";
+const CUSTOM_THEME_STYLE_ID = "okcode-custom-theme-style";
+const CUSTOM_THEME_FONT_LINK_ID = "okcode-custom-theme-fonts";
+const RADIUS_OVERRIDE_KEY = "okcode:radius-override";
+const FONT_OVERRIDE_KEY = "okcode:font-override";
+
+/** System-bundled fonts that don't need to be loaded from Google Fonts. */
+const SYSTEM_FONTS = new Set([
+  "system-ui",
+  "-apple-system",
+  "blinkmacsystemfont",
+  "segoe ui",
+  "roboto",
+  "helvetica neue",
+  "arial",
+  "sans-serif",
+  "serif",
+  "monospace",
+  "sf mono",
+  "sfmono-regular",
+  "consolas",
+  "liberation mono",
+  "menlo",
+  "courier new",
+  "dm sans",
+  "georgia",
+  "times new roman",
+  "times",
+  "ui-monospace",
+  "ui-sans-serif",
+  "ui-serif",
+]);
+
+// ---------------------------------------------------------------------------
+// Environment Guard
+// ---------------------------------------------------------------------------
+
+/** Returns true when a full browser DOM is available (not a Node/test stub). */
+function hasDom(): boolean {
+  return (
+    typeof document !== "undefined" &&
+    typeof document.getElementById === "function" &&
+    typeof document.createElement === "function"
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CustomThemeData {
+  name?: string | undefined;
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
+// ---------------------------------------------------------------------------
+// CSS Parsing
+// ---------------------------------------------------------------------------
+
+/** Extract content between matched braces starting after an opening `{`. */
+function extractBraceContent(css: string, startAfterBrace: number): string {
+  let depth = 1;
+  let i = startAfterBrace;
+  while (i < css.length && depth > 0) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") depth--;
+    i++;
+  }
+  return css.substring(startAfterBrace, i - 1);
+}
+
+/** Pull all `--name: value;` declarations out of a CSS block. */
+function extractVariables(block: string): Record<string, string> {
+  const vars: Record<string, string> = {};
+  // Match CSS custom property declarations, handling values that can contain
+  // parentheses (like oklch(...), hsl(...), calc(...), rgba(...))
+  const regex = /--([\w-]+)\s*:\s*([^;]+);/g;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(block)) !== null) {
+    const name = match[1]?.trim();
+    const value = match[2]?.trim();
+    if (!name || !value) continue;
+    if (ALL_SUPPORTED_VARS.has(name)) {
+      vars[name] = value;
+    }
+  }
+  return vars;
+}
+
+/** Filter to only include variables we support. */
+function filterSupported(vars: Record<string, string>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(vars)) {
+    if (ALL_SUPPORTED_VARS.has(k)) {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+/**
+ * Parse CSS text that contains `:root` and `.dark` blocks.
+ * Handles both bare selectors and selectors nested inside `@layer base { }`.
+ */
+export function parseThemeCSS(css: string): CustomThemeData {
+  // Strip comments
+  const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+  const light: Record<string, string> = {};
+  const dark: Record<string, string> = {};
+
+  // Find :root blocks (may or may not be inside @layer base)
+  const rootRegex = /:root\s*\{/g;
+  let match: RegExpExecArray | null;
+  while ((match = rootRegex.exec(cleaned)) !== null) {
+    const start = match.index + match[0].length;
+    const content = extractBraceContent(cleaned, start);
+    Object.assign(light, extractVariables(content));
+  }
+
+  // Find .dark blocks
+  const darkRegex = /\.dark\s*\{/g;
+  while ((match = darkRegex.exec(cleaned)) !== null) {
+    const start = match.index + match[0].length;
+    const content = extractBraceContent(cleaned, start);
+    Object.assign(dark, extractVariables(content));
+  }
+
+  // Fallback: if no blocks found, try parsing the whole thing as a list of vars
+  // (user may have just pasted the variable declarations)
+  if (Object.keys(light).length === 0 && Object.keys(dark).length === 0) {
+    const vars = extractVariables(cleaned);
+    Object.assign(light, vars);
+    // Copy light vars to dark as a reasonable default
+    Object.assign(dark, vars);
+  }
+
+  return { light, dark };
+}
+
+// ---------------------------------------------------------------------------
+// tweakcn JSON Parsing
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse the JSON format returned by tweakcn's `/r/themes/[id]` API endpoint
+ * (shadcn registry format).
+ */
+export function parseTweakcnJSON(json: unknown): CustomThemeData {
+  if (!json || typeof json !== "object") {
+    throw new Error("Invalid theme JSON");
+  }
+
+  const obj = json as Record<string, unknown>;
+  const name = typeof obj.name === "string" ? obj.name : undefined;
+
+  const cssVars = obj.cssVars as Record<string, Record<string, string>> | undefined;
+  if (!cssVars || typeof cssVars !== "object") {
+    throw new Error('Theme JSON missing "cssVars" object');
+  }
+
+  const light = filterSupported({
+    ...(cssVars.theme ?? {}),
+    ...(cssVars.light ?? {}),
+  });
+
+  const dark = filterSupported({
+    ...(cssVars.theme ?? {}),
+    ...(cssVars.dark ?? {}),
+  });
+
+  if (Object.keys(light).length === 0 && Object.keys(dark).length === 0) {
+    throw new Error("No supported theme variables found in JSON");
+  }
+
+  return { name, light, dark };
+}
+
+// ---------------------------------------------------------------------------
+// URL Handling
+// ---------------------------------------------------------------------------
+
+const TWEAKCN_URL_PATTERNS = [
+  /^https?:\/\/(?:www\.)?tweakcn\.com\/r\/themes\/([^/?#]+)/,
+  /^https?:\/\/(?:www\.)?tweakcn\.com\/themes\/([^/?#]+)/,
+];
+
+/** Check if a string looks like a tweakcn.com URL. */
+export function isTweakcnURL(input: string): boolean {
+  const trimmed = input.trim();
+  return TWEAKCN_URL_PATTERNS.some((re) => re.test(trimmed));
+}
+
+/** Extract the theme ID from a tweakcn URL. */
+function extractTweakcnThemeId(url: string): string | null {
+  const trimmed = url.trim();
+  for (const re of TWEAKCN_URL_PATTERNS) {
+    const m = trimmed.match(re);
+    if (m?.[1]) return m[1];
+  }
+  return null;
+}
+
+/** Fetch a theme from tweakcn's API (has `Access-Control-Allow-Origin: *`). */
+export async function fetchTweakcnTheme(url: string): Promise<CustomThemeData> {
+  const themeId = extractTweakcnThemeId(url);
+  if (!themeId) {
+    throw new Error("Could not extract theme ID from URL");
+  }
+
+  const apiUrl = `https://tweakcn.com/r/themes/${encodeURIComponent(themeId)}`;
+  const res = await fetch(apiUrl);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch theme: ${res.status} ${res.statusText}`);
+  }
+
+  const json: unknown = await res.json();
+  return parseTweakcnJSON(json);
+}
+
+// ---------------------------------------------------------------------------
+// Smart Input Parser
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse any user input — CSS text, JSON, or a tweakcn URL — and return a
+ * `CustomThemeData` object.
+ */
+export async function parseThemeInput(input: string): Promise<CustomThemeData> {
+  const trimmed = input.trim();
+
+  // 1. tweakcn URL
+  if (isTweakcnURL(trimmed)) {
+    return fetchTweakcnTheme(trimmed);
+  }
+
+  // 2. JSON (starts with { or [)
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try {
+      const json: unknown = JSON.parse(trimmed);
+      return parseTweakcnJSON(json);
+    } catch {
+      // Fall through to CSS parsing
+    }
+  }
+
+  // 3. CSS
+  const parsed = parseThemeCSS(trimmed);
+  if (Object.keys(parsed.light).length === 0 && Object.keys(parsed.dark).length === 0) {
+    throw new Error("No theme variables found. Paste CSS from tweakcn.com or a tweakcn theme URL.");
+  }
+
+  return parsed;
+}
+
+// ---------------------------------------------------------------------------
+// Google Font Loading
+// ---------------------------------------------------------------------------
+
+/** Extract font family names that need to be loaded from Google Fonts. */
+function extractGoogleFonts(theme: CustomThemeData): string[] {
+  const fonts = new Set<string>();
+
+  for (const mode of [theme.light, theme.dark]) {
+    for (const key of SUPPORTED_FONT_VARS) {
+      const value = mode[key];
+      if (!value) continue;
+
+      // Parse font stack: "Plus Jakarta Sans, sans-serif" → ["Plus Jakarta Sans"]
+      const families = value.split(",").map((f) => f.trim().replace(/^["']|["']$/g, ""));
+      for (const family of families) {
+        if (family && !SYSTEM_FONTS.has(family.toLowerCase())) {
+          fonts.add(family);
+        }
+      }
+    }
+  }
+
+  return Array.from(fonts);
+}
+
+/** Inject a <link> tag to load Google Fonts for the custom theme. */
+function loadGoogleFonts(fonts: string[]): void {
+  if (!hasDom()) return;
+  // Remove existing link
+  document.getElementById(CUSTOM_THEME_FONT_LINK_ID)?.remove();
+
+  if (fonts.length === 0) return;
+
+  const families = fonts.map((f) => `family=${f.replace(/\s+/g, "+")}:wght@300..800`).join("&");
+  const url = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+
+  const link = document.createElement("link");
+  link.id = CUSTOM_THEME_FONT_LINK_ID;
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+/** Remove the Google Fonts <link> tag. */
+function unloadGoogleFonts(): void {
+  if (!hasDom()) return;
+  document.getElementById(CUSTOM_THEME_FONT_LINK_ID)?.remove();
+}
+
+// ---------------------------------------------------------------------------
+// Theme Application
+// ---------------------------------------------------------------------------
+
+/** Build the CSS text for the custom theme `<style>` tag. */
+function buildCustomThemeCSS(theme: CustomThemeData): string {
+  const lines: string[] = [];
+
+  // Light mode
+  lines.push(":root.theme-custom {");
+  lines.push("  color-scheme: light;");
+  for (const [key, value] of Object.entries(theme.light)) {
+    // Font variables also need to be applied to body/code elements, but the
+    // CSS variables themselves are set here so components can reference them.
+    lines.push(`  --${key}: ${value};`);
+  }
+  lines.push("}");
+  lines.push("");
+
+  // Dark mode
+  lines.push(":root.theme-custom.dark {");
+  lines.push("  color-scheme: dark;");
+  for (const [key, value] of Object.entries(theme.dark)) {
+    lines.push(`  --${key}: ${value};`);
+  }
+  lines.push("}");
+
+  // Font overrides (applied via higher-specificity selectors)
+  const lightSans = theme.light["font-sans"];
+  const lightMono = theme.light["font-mono"];
+  if (lightSans) {
+    lines.push("");
+    lines.push(`.theme-custom body { font-family: ${lightSans}; }`);
+  }
+  if (lightMono) {
+    lines.push(
+      `.theme-custom pre, .theme-custom code, .theme-custom textarea, .theme-custom input { font-family: ${lightMono}; }`,
+    );
+  }
+
+  return lines.join("\n");
+}
+
+/** Inject or update the custom theme `<style>` element. */
+export function applyCustomTheme(theme: CustomThemeData): void {
+  if (!hasDom()) return;
+  let styleEl = document.getElementById(CUSTOM_THEME_STYLE_ID) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = CUSTOM_THEME_STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = buildCustomThemeCSS(theme);
+
+  // Load any non-system fonts
+  const googleFonts = extractGoogleFonts(theme);
+  loadGoogleFonts(googleFonts);
+}
+
+/** Remove the custom theme style element and fonts. */
+export function removeCustomTheme(): void {
+  if (!hasDom()) return;
+  document.getElementById(CUSTOM_THEME_STYLE_ID)?.remove();
+  unloadGoogleFonts();
+}
+
+// ---------------------------------------------------------------------------
+// Persistence
+// ---------------------------------------------------------------------------
+
+export function getStoredCustomTheme(): CustomThemeData | null {
+  try {
+    const raw = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY);
+    if (!raw) return null;
+    const data = JSON.parse(raw) as CustomThemeData;
+    if (data && typeof data.light === "object" && typeof data.dark === "object") {
+      return data;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+export function setStoredCustomTheme(theme: CustomThemeData): void {
+  localStorage.setItem(CUSTOM_THEME_STORAGE_KEY, JSON.stringify(theme));
+}
+
+export function clearStoredCustomTheme(): void {
+  localStorage.removeItem(CUSTOM_THEME_STORAGE_KEY);
+}
+
+// ---------------------------------------------------------------------------
+// Radius Override
+// ---------------------------------------------------------------------------
+
+export function getStoredRadiusOverride(): number | null {
+  const raw = localStorage.getItem(RADIUS_OVERRIDE_KEY);
+  if (raw === null) return null;
+  const num = Number.parseFloat(raw);
+  return Number.isFinite(num) ? num : null;
+}
+
+export function setStoredRadiusOverride(rem: number): void {
+  localStorage.setItem(RADIUS_OVERRIDE_KEY, String(rem));
+  if (hasDom()) {
+    document.documentElement.style.setProperty("--radius", `${rem}rem`);
+  }
+}
+
+export function clearRadiusOverride(): void {
+  localStorage.removeItem(RADIUS_OVERRIDE_KEY);
+  if (hasDom()) {
+    document.documentElement.style.removeProperty("--radius");
+  }
+}
+
+export function applyRadiusOverride(): void {
+  if (!hasDom()) return;
+  const val = getStoredRadiusOverride();
+  if (val !== null) {
+    document.documentElement.style.setProperty("--radius", `${val}rem`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Font Override (applies on top of any theme)
+// ---------------------------------------------------------------------------
+
+export function getStoredFontOverride(): string | null {
+  return localStorage.getItem(FONT_OVERRIDE_KEY) || null;
+}
+
+export function setStoredFontOverride(fontFamily: string): void {
+  localStorage.setItem(FONT_OVERRIDE_KEY, fontFamily);
+  applyFontOverride();
+}
+
+export function clearFontOverride(): void {
+  localStorage.removeItem(FONT_OVERRIDE_KEY);
+  if (hasDom()) {
+    document.documentElement.style.removeProperty("--font-override");
+    document.getElementById("okcode-font-override-style")?.remove();
+  }
+}
+
+export function applyFontOverride(): void {
+  if (!hasDom()) return;
+  const font = getStoredFontOverride();
+  if (!font) return;
+
+  let styleEl = document.getElementById("okcode-font-override-style") as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = "okcode-font-override-style";
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = `body { font-family: ${font} !important; }`;
+
+  // Load from Google Fonts if it's not a system font
+  const families = font.split(",").map((f) => f.trim().replace(/^["']|["']$/g, ""));
+  const googleFonts = families.filter((f) => f && !SYSTEM_FONTS.has(f.toLowerCase()));
+  if (googleFonts.length > 0) {
+    let linkEl = document.getElementById("okcode-font-override-link") as HTMLLinkElement | null;
+    if (!linkEl) {
+      linkEl = document.createElement("link");
+      linkEl.id = "okcode-font-override-link";
+      linkEl.rel = "stylesheet";
+      document.head.appendChild(linkEl);
+    }
+    const familyParams = googleFonts
+      .map((f) => `family=${f.replace(/\s+/g, "+")}:wght@300..800`)
+      .join("&");
+    linkEl.href = `https://fonts.googleapis.com/css2?${familyParams}&display=swap`;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Initialization (called on module load)
+// ---------------------------------------------------------------------------
+
+/** Restore persisted custom theme + overrides on app boot. */
+export function initCustomTheme(): void {
+  if (!hasDom() || typeof localStorage === "undefined") return;
+  // If a custom theme is stored and selected, apply it
+  const colorTheme = localStorage.getItem("okcode:color-theme");
+  if (colorTheme === "custom") {
+    const theme = getStoredCustomTheme();
+    if (theme) {
+      applyCustomTheme(theme);
+    }
+  }
+
+  // Always apply radius override if set
+  applyRadiusOverride();
+
+  // Always apply font override if set
+  applyFontOverride();
+}
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index 657b556b..1f855c17 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -1,6 +1,13 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronDownIcon, PlusIcon, RotateCcwIcon, Undo2Icon, XIcon } from "lucide-react";
+import {
+  ChevronDownIcon,
+  ImportIcon,
+  PlusIcon,
+  RotateCcwIcon,
+  Undo2Icon,
+  XIcon,
+} from "lucide-react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import {
   type ProjectId,
@@ -235,6 +242,13 @@ function SettingsRouteView() {
     Partial<Record<ProviderKind, string | null>>
   >({});
   const [showAllCustomModels, setShowAllCustomModels] = useState(false);
+  const [customThemeDialogOpen, setCustomThemeDialogOpen] = useState(false);
+  const [radiusOverride, setRadiusOverrideState] = useState<number | null>(() =>
+    getStoredRadiusOverride(),
+  );
+  const [fontOverride, setFontOverrideState] = useState<string>(
+    () => getStoredFontOverride() ?? "",
+  );
   const globalEnvironmentVariablesQuery = useQuery(globalEnvironmentVariablesQueryOptions());
   const activeProjectId = selectedProjectId ?? projects[0]?.id ?? null;
   const selectedProject = projects.find((project) => project.id === activeProjectId) ?? null;
@@ -318,6 +332,8 @@ function SettingsRouteView() {
       ? ["Custom models"]
       : []),
     ...(isInstallSettingsDirty ? ["Provider installs"] : []),
+    ...(radiusOverride !== null ? ["Border radius"] : []),
+    ...(fontOverride ? ["Font family"] : []),
   ];
 
   const openKeybindingsFile = useCallback(() => {
@@ -458,6 +474,14 @@ function SettingsRouteView() {
       claudeAgent: "",
     });
     setCustomModelErrorByProvider({});
+
+    // Reset custom theme + overrides
+    clearStoredCustomTheme();
+    removeCustomTheme();
+    clearRadiusOverride();
+    setRadiusOverrideState(null);
+    clearFontOverride();
+    setFontOverrideState("");
   }
 
   return (
@@ -544,35 +568,146 @@ function SettingsRouteView() {
                   colorTheme !== "default" ? (
                     <SettingResetButton
                       label="color theme"
-                      onClick={() => setColorTheme("default")}
+                      onClick={() => {
+                        setColorTheme("default");
+                        clearStoredCustomTheme();
+                        removeCustomTheme();
+                      }}
                     />
                   ) : null
                 }
                 control={
-                  <Select
-                    value={colorTheme}
-                    onValueChange={(value) => {
-                      const match = COLOR_THEMES.find((t) => t.id === value);
-                      if (!match) return;
-                      setColorTheme(match.id);
+                  <div className="flex items-center gap-2">
+                    <Select
+                      value={colorTheme}
+                      onValueChange={(value) => {
+                        if (value === "custom") {
+                          // If no custom theme is stored, open the import dialog
+                          const existing = getStoredCustomTheme();
+                          if (!existing) {
+                            setCustomThemeDialogOpen(true);
+                            return;
+                          }
+                        }
+                        const match = COLOR_THEMES.find((t) => t.id === value);
+                        if (!match) return;
+                        setColorTheme(match.id);
+                      }}
+                    >
+                      <SelectTrigger className="w-full sm:w-40" aria-label="Color theme">
+                        <SelectValue>
+                          {COLOR_THEMES.find((t) => t.id === colorTheme)?.label ?? "Default"}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectPopup align="end" alignItemWithTrigger={false}>
+                        {COLOR_THEMES.filter(
+                          (t) => t.id !== "custom" || getStoredCustomTheme(),
+                        ).map((t) => (
+                          <SelectItem hideIndicator key={t.id} value={t.id}>
+                            {t.label}
+                          </SelectItem>
+                        ))}
+                      </SelectPopup>
+                    </Select>
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={
+                          <Button
+                            size="xs"
+                            variant="outline"
+                            onClick={() => setCustomThemeDialogOpen(true)}
+                            aria-label="Import custom theme"
+                          >
+                            <ImportIcon className="size-3.5" />
+                          </Button>
+                        }
+                      />
+                      <TooltipPopup side="top">Import from tweakcn.com</TooltipPopup>
+                    </Tooltip>
+                  </div>
+                }
+              />
+
+              <SettingsRow
+                title="Border radius"
+                description="Adjust the corner roundness of UI elements."
+                resetAction={
+                  radiusOverride !== null ? (
+                    <SettingResetButton
+                      label="border radius"
+                      onClick={() => {
+                        clearRadiusOverride();
+                        setRadiusOverrideState(null);
+                      }}
+                    />
+                  ) : null
+                }
+                control={
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="range"
+                      min={0}
+                      max={1.5}
+                      step={0.0625}
+                      value={radiusOverride ?? 0.625}
+                      onChange={(e) => {
+                        const value = Number.parseFloat(e.target.value);
+                        setRadiusOverrideState(value);
+                        setStoredRadiusOverride(value);
+                      }}
+                      className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                      aria-label="Border radius"
+                    />
+                    <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                      {(radiusOverride ?? 0.625).toFixed(2)}rem
+                    </span>
+                  </div>
+                }
+              />
+
+              <SettingsRow
+                title="Font family"
+                description="Override the UI font. Use any Google Font name."
+                resetAction={
+                  fontOverride ? (
+                    <SettingResetButton
+                      label="font family"
+                      onClick={() => {
+                        clearFontOverride();
+                        setFontOverrideState("");
+                      }}
+                    />
+                  ) : null
+                }
+                control={
+                  <Input
+                    className="w-full sm:w-48"
+                    value={fontOverride}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      setFontOverrideState(value);
+                      if (value.trim()) {
+                        setStoredFontOverride(value);
+                      } else {
+                        clearFontOverride();
+                      }
                     }}
-                  >
-                    <SelectTrigger className="w-full sm:w-40" aria-label="Color theme">
-                      <SelectValue>
-                        {COLOR_THEMES.find((t) => t.id === colorTheme)?.label ?? "Default"}
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectPopup align="end" alignItemWithTrigger={false}>
-                      {COLOR_THEMES.map((t) => (
-                        <SelectItem hideIndicator key={t.id} value={t.id}>
-                          {t.label}
-                        </SelectItem>
-                      ))}
-                    </SelectPopup>
-                  </Select>
+                    placeholder="e.g. Inter, sans-serif"
+                    spellCheck={false}
+                    aria-label="Font family override"
+                  />
                 }
               />
 
+              <CustomThemeDialog
+                open={customThemeDialogOpen}
+                onOpenChange={setCustomThemeDialogOpen}
+                onApply={(theme: CustomThemeData) => {
+                  applyCustomTheme(theme);
+                  setColorTheme("custom");
+                }}
+              />
+
               <SettingsRow
                 title="Font"
                 description="Choose the typeface for the interface."