diff --git a/index.html b/index.html
index e1abf7f..ca8eb9d 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Motion Studio</title>
     <script>
-      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      const savedTheme = window.localStorage.getItem("motion-studio-theme");
+      if (savedTheme === "dark" || (savedTheme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
         document.documentElement.classList.add("dark");
       }
     </script>
diff --git a/main-window.html b/main-window.html
index 288dad2..5920962 100644
--- a/main-window.html
+++ b/main-window.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>App</title>
     <script>
       if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..a6f53d9
Binary files /dev/null and b/public/favicon.png differ
diff --git a/renderer/components/appearance-toggle.tsx b/renderer/components/appearance-toggle.tsx
index b65dede..091477e 100644
--- a/renderer/components/appearance-toggle.tsx
+++ b/renderer/components/appearance-toggle.tsx
@@ -1,44 +1,42 @@
 import * as React from "react";
-import { Button } from "@glaze/core/components";
-import { Sun, Moon } from "lucide-react";
+import { Laptop, Moon, Sun } from "lucide-react";
+
+type ThemeSource = "system" | "dark" | "light";
+
+const THEME_ORDER: ThemeSource[] = ["system", "dark", "light"];
 
-// Quick light/dark switch for the main window. The full Auto/Light/Dark control
-// still lives in Settings; this just flips the effective appearance in place.
 export function AppearanceToggle() {
-  const [isDark, setIsDark] = React.useState<boolean | null>(null);
+  const [themeSource, setThemeSource] = React.useState<ThemeSource>("system");
 
   React.useEffect(() => {
     let active = true;
-    window.glazeAPI.nativeTheme.getShouldUseDarkColors().then((dark) => {
-      if (active) setIsDark(dark);
+    window.glazeAPI.nativeTheme.getThemeSource().then((source) => {
+      if (active) setThemeSource(source);
     });
 
-    // Keep the icon in sync when the OS appearance changes while on "system".
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = (e: MediaQueryListEvent) => setIsDark(e.matches);
-    media.addEventListener("change", onChange);
     return () => {
       active = false;
-      media.removeEventListener("change", onChange);
     };
   }, []);
 
   const toggle = async () => {
-    const next = !isDark;
-    setIsDark(next);
-    await window.glazeAPI.nativeTheme.setThemeSource(next ? "dark" : "light");
+    const next = THEME_ORDER[(THEME_ORDER.indexOf(themeSource) + 1) % THEME_ORDER.length];
+    setThemeSource(next);
+    await window.glazeAPI.nativeTheme.setThemeSource(next);
   };
 
+  const label =
+    themeSource === "system" ? "Use dark mode" : themeSource === "dark" ? "Use light mode" : "Use system theme";
+
   return (
-    <Button
-      iconOnly
-      variant="glass"
-      size="large"
+    <button
+      type="button"
+      className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-black/55 transition-colors hover:bg-black/[0.07] hover:text-foreground dark:text-white/50 dark:hover:bg-white/[0.07] dark:hover:text-white"
       onClick={toggle}
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      aria-label={label}
+      title={label}
     >
-      {isDark ? <Sun /> : <Moon />}
-    </Button>
+      {themeSource === "system" ? <Laptop size={16} /> : themeSource === "dark" ? <Moon size={16} /> : <Sun size={16} />}
+    </button>
   );
 }
diff --git a/renderer/components/control-panel.tsx b/renderer/components/control-panel.tsx
index 1159a65..fa90dc3 100644
--- a/renderer/components/control-panel.tsx
+++ b/renderer/components/control-panel.tsx
@@ -1,40 +1,42 @@
-import { Button, Separator } from "@glaze/core/components";
-import { RotateCcw } from "lucide-react";
-import { ControlRow } from "./control-row";
+import { Separator } from "@glaze/core/components";
+import * as React from "react";
+import { ColorPresetGrid, ControlRow } from "./control-row";
 import type { Effect, EffectParams, ParamValue } from "./effects/types";
 
 interface ControlPanelProps {
   effect: Effect;
   params: EffectParams;
   onChange: (id: string, value: ParamValue) => void;
-  onReset: () => void;
 }
 
-export function ControlPanel({ effect, params, onChange, onReset }: ControlPanelProps) {
+export function ControlPanel({ effect, params, onChange }: ControlPanelProps) {
+  let colorPresetsShown = false;
+
   return (
     <div className="h-full flex flex-col">
-      <div className="px-4 pt-13 pb-3 flex items-start justify-between gap-3">
+      <div className="titlebar-drag px-4 py-3 flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h2 className="text-strong">{effect.name}</h2>
           <p className="text-small text-secondary mt-0.5">{effect.description}</p>
         </div>
-        <Button
-          variant="transparent"
-          size="small"
-          iconOnly
-          className="shrink-0 text-secondary"
-          title="Reset to defaults"
-          aria-label="Reset to defaults"
-          onClick={onReset}
-        >
-          <RotateCcw size={15} />
-        </Button>
       </div>
       <Separator />
-      <div className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4">
-        {effect.controls.map((control) => (
-          <ControlRow key={control.id} control={control} params={params} onChange={onChange} />
-        ))}
+      <div className="flex-1 overflow-y-auto px-4 pt-3 pb-4 flex flex-col gap-4">
+        {effect.controls.map((control) => {
+          const showColorPresets =
+            !colorPresetsShown &&
+            control.type === "color" &&
+            (!control.visibleWhen || control.visibleWhen(params));
+          if (showColorPresets) colorPresetsShown = true;
+          return (
+            <React.Fragment key={control.id}>
+              {showColorPresets && (
+                <ColorPresetGrid controls={effect.controls} params={params} onChange={onChange} />
+              )}
+              <ControlRow control={control} params={params} onChange={onChange} />
+            </React.Fragment>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/renderer/components/control-row.tsx b/renderer/components/control-row.tsx
index 8ccc00f..717a784 100644
--- a/renderer/components/control-row.tsx
+++ b/renderer/components/control-row.tsx
@@ -1,4 +1,6 @@
+import * as React from "react";
 import {
+  Button,
   Slider,
   Switch,
   SegmentedControl,
@@ -9,9 +11,242 @@ import {
   SelectContent,
   SelectItem,
 } from "@glaze/core/components";
+import { Shuffle } from "lucide-react";
 import { CurveEditor } from "./curve-editor";
 import type { ControlDef, EffectParams, ParamValue } from "./effects/types";
 
+function decimalsFor(step: number) {
+  const [, decimals = ""] = String(step).split(".");
+  return decimals.length;
+}
+
+function snapToStep(value: number, min: number, max: number, step: number) {
+  const clamped = Math.min(max, Math.max(min, value));
+  const snapped = Math.round((clamped - min) / step) * step + min;
+  return Number(snapped.toFixed(decimalsFor(step)));
+}
+
+const COLOR_PALETTES = [
+  ["#ef4444", "#f97316", "#facc15", "#38bdf8", "#f8fafc"],
+  ["#22d3ee", "#ec4899", "#f97316", "#7c3aed", "#111827"],
+  ["#2563eb", "#8b5cf6", "#d946ef", "#fb7185", "#f8fafc"],
+  ["#84cc16", "#22c55e", "#0f766e", "#ecfccb", "#111827"],
+  ["#0f4c81", "#2f8ac4", "#bae6fd", "#e0f2fe", "#0f172a"],
+  ["#ff3b30", "#ff8a5b", "#ffd166", "#4c1d95", "#ffffff"],
+  ["#ffffff", "#a1a1aa", "#3f3f46", "#18181b", "#09090b"],
+  ["#fb923c", "#e5e7eb", "#111827", "#fdba74", "#fff7ed"],
+];
+
+const HARMONY_OFFSETS = [
+  [0, 24, -24, 48, -48],
+  [0, 180, 30, 210, 150],
+  [0, 150, 210, 30, 330],
+  [0, 120, 240, 60, 300],
+  [0, 90, 180, 270, 45],
+];
+
+function randomBetween(min: number, max: number) {
+  return min + Math.random() * (max - min);
+}
+
+function wrapHue(hue: number) {
+  return ((hue % 360) + 360) % 360;
+}
+
+function hslToHex(hue: number, saturation: number, lightness: number) {
+  const s = saturation / 100;
+  const l = lightness / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+  const [r, g, b] =
+    hue < 60 ? [c, x, 0] :
+    hue < 120 ? [x, c, 0] :
+    hue < 180 ? [0, c, x] :
+    hue < 240 ? [0, x, c] :
+    hue < 300 ? [x, 0, c] :
+    [c, 0, x];
+  return [r, g, b]
+    .map((channel) => Math.round((channel + m) * 255).toString(16).padStart(2, "0"))
+    .join("")
+    .toUpperCase()
+    .padStart(6, "0")
+    .replace(/^/, "#");
+}
+
+function randomHarmonyPalette(count: number) {
+  const baseHue = Math.floor(Math.random() * 360);
+  const offsets = HARMONY_OFFSETS[Math.floor(Math.random() * HARMONY_OFFSETS.length)];
+  const saturation = randomBetween(64, 88);
+  const lightness = randomBetween(48, 66);
+
+  return Array.from({ length: count }, (_, index) => {
+    const hue = wrapHue(baseHue + offsets[index % offsets.length] + randomBetween(-5, 5));
+    const sat = Math.min(92, Math.max(54, saturation + randomBetween(-8, 8)));
+    const light = Math.min(74, Math.max(38, lightness + randomBetween(-8, 8)));
+    return hslToHex(hue, sat, light);
+  });
+}
+
+export function ColorPresetGrid({
+  controls,
+  params,
+  onChange,
+}: {
+  controls: ControlDef[];
+  params: EffectParams;
+  onChange: (id: string, value: ParamValue) => void;
+}) {
+  const colorControls = controls.filter(
+    (control) => control.type === "color" && (!control.visibleWhen || control.visibleWhen(params)),
+  );
+
+  if (colorControls.length === 0) return null;
+
+  const currentColors = colorControls.map((control) => String(params[control.id]).toLowerCase());
+  const colorCount = colorControls.length;
+  const previewPalettes = COLOR_PALETTES.map((palette) => palette.slice(0, colorCount));
+  const colorsChanged = colorControls.some(
+    (control) => control.type === "color" && String(params[control.id]).toLowerCase() !== control.default.toLowerCase(),
+  );
+  const applyPalette = (palette: string[]) => {
+    colorControls.forEach((control, index) => {
+      onChange(control.id, palette[index % palette.length]);
+    });
+  };
+  const resetColors = () => {
+    colorControls.forEach((control) => {
+      if (control.type === "color") onChange(control.id, control.default);
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-small text-secondary">Presets</span>
+        <div className="flex items-center gap-1">
+          {colorsChanged && (
+            <button
+              type="button"
+              className="h-6 px-1 text-small font-medium text-secondary hover:text-foreground"
+              onClick={resetColors}
+            >
+              Reset
+            </button>
+          )}
+          <Button
+            variant="default"
+            size="small"
+            iconOnly
+            aria-label="Randomize colors"
+            title="Randomize colors"
+            onClick={() => applyPalette(randomHarmonyPalette(colorCount))}
+          >
+            <Shuffle size={14} />
+          </Button>
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-2">
+        {previewPalettes.map((palette) => {
+          const selected = currentColors.every(
+            (color, index) => color === palette[index % palette.length].toLowerCase(),
+          );
+          return (
+            <button
+              key={palette.join("-")}
+              type="button"
+              className={`flex h-7 overflow-hidden rounded-md border transition ${
+                selected ? "border-blue-500 ring-2 ring-blue-500/40" : "border-separator"
+              }`}
+              aria-label="Apply color preset"
+              onClick={() => applyPalette(palette)}
+            >
+              {palette.map((color) => (
+                <span key={color} className="flex-1" style={{ background: color }} />
+              ))}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function LabeledSlider({
+  label,
+  value,
+  unit = "",
+  min,
+  max,
+  step,
+  onValueChange,
+}: {
+  label: string;
+  value: number;
+  unit?: string;
+  min: number;
+  max: number;
+  step: number;
+  onValueChange: (value: number) => void;
+}) {
+  const [draft, setDraft] = React.useState(String(value));
+
+  React.useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+
+  const commitDraft = () => {
+    const parsed = Number(draft);
+    if (!Number.isFinite(parsed)) {
+      setDraft(String(value));
+      return;
+    }
+    const nextValue = snapToStep(parsed, min, max, step);
+    setDraft(String(nextValue));
+    onValueChange(nextValue);
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative min-w-0 flex-1">
+        <Slider
+          aria-label={label}
+          className="inspector-slider"
+          min={min}
+          max={max}
+          step={step}
+          value={[value]}
+          onValueChange={([nextValue]) => onValueChange(nextValue)}
+        />
+        <span className="pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center text-small font-medium text-secondary">
+          {label}
+        </span>
+      </div>
+      <label className="flex h-9 min-w-16 shrink-0 items-center justify-end gap-0.5 rounded-md border border-separator bg-black/5 px-2 text-small text-secondary tabular-nums focus-within:ring-2 focus-within:ring-blue-500 dark:bg-white/5">
+        <input
+          type="number"
+          value={draft}
+          min={min}
+          max={max}
+          step={step}
+          aria-label={`${label} value`}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={commitDraft}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") event.currentTarget.blur();
+            if (event.key === "Escape") {
+              setDraft(String(value));
+              event.currentTarget.blur();
+            }
+          }}
+          className="w-10 bg-transparent text-right text-inherit outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        />
+        {unit && <span className="shrink-0">{unit}</span>}
+      </label>
+    </div>
+  );
+}
+
 function ColorInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
   return (
     <label className="relative inline-flex items-center gap-2 cursor-pointer">
@@ -47,30 +282,21 @@ export function ControlRow({
     case "slider": {
       const value = Number(params[control.id]);
       return (
-        <div className="flex flex-col gap-1.5">
-          <div className="flex items-center justify-between">
-            <span className="text-small text-secondary">{control.label}</span>
-            <span className="text-small text-secondary tabular-nums">
-              {value}
-              {control.unit ?? ""}
-            </span>
-          </div>
-          <Slider
-            variant="filled"
-            size="small"
-            min={control.min}
-            max={control.max}
-            step={control.step}
-            value={[value]}
-            onValueChange={([v]) => onChange(control.id, v)}
-          />
-        </div>
+        <LabeledSlider
+          label={control.label}
+          value={value}
+          unit={control.unit}
+          min={control.min}
+          max={control.max}
+          step={control.step}
+          onValueChange={(nextValue) => onChange(control.id, nextValue)}
+        />
       );
     }
     case "switch":
       return (
-        <div className="flex items-center justify-between">
-          <span className="text-small text-secondary">{control.label}</span>
+        <div className="flex h-9 items-center justify-between rounded-md border border-separator bg-black/5 px-3 dark:bg-white/5">
+          <span className="text-small font-medium text-secondary">{control.label}</span>
           <Switch
             checked={params[control.id] === true}
             onCheckedChange={(checked) => onChange(control.id, checked)}
@@ -88,6 +314,40 @@ export function ControlRow({
         </div>
       );
     case "select":
+      if (control.options.length <= 4) {
+        const value = String(params[control.id]);
+        const gridClass =
+          control.options.length === 4
+            ? "grid-cols-2"
+            : control.options.length === 3
+              ? "grid-cols-3"
+              : "grid-cols-2";
+        return (
+          <div className="flex flex-col gap-1.5">
+            <span className="text-small text-secondary">{control.label}</span>
+            <div className={`grid gap-2 ${gridClass}`}>
+              {control.options.map((opt) => {
+                const selected = opt.value === value;
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    aria-pressed={selected}
+                    className={`h-9 rounded-md border px-3 text-small font-medium transition-colors ${
+                      selected
+                        ? "border-blue-500 bg-blue-500/14 text-blue-700 dark:text-blue-300"
+                        : "border-separator bg-black/5 text-secondary hover:bg-black/8 dark:bg-white/5 dark:hover:bg-white/8"
+                    }`}
+                    onClick={() => onChange(control.id, opt.value)}
+                  >
+                    {opt.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      }
       return (
         <div className="flex flex-col gap-1.5">
           <span className="text-small text-secondary">{control.label}</span>
diff --git a/renderer/components/effect-sidebar.tsx b/renderer/components/effect-sidebar.tsx
index aefe930..fc19e57 100644
--- a/renderer/components/effect-sidebar.tsx
+++ b/renderer/components/effect-sidebar.tsx
@@ -1,4 +1,7 @@
+import * as React from "react";
+import { Maximize2, Minimize2 } from "lucide-react";
 import { Sidebar, SidebarList, SidebarListGroup, SidebarListItem } from "@glaze/core/components";
+import { AppearanceToggle } from "./appearance-toggle";
 import { libraryGroups } from "../lib/library";
 
 interface EffectSidebarProps {
@@ -7,12 +10,61 @@ interface EffectSidebarProps {
 }
 
 export function EffectSidebar({ selectedId, onSelect }: EffectSidebarProps) {
-  const groups = libraryGroups();
+  const groups = React.useMemo(() => libraryGroups(), []);
+  const [collapsedGroups, setCollapsedGroups] = React.useState<Record<string, boolean>>({});
+  const previousSelectedId = React.useRef(selectedId);
+
+  React.useEffect(() => {
+    if (previousSelectedId.current === selectedId) return;
+    previousSelectedId.current = selectedId;
+
+    const activeGroup = groups.find((group) => group.items.some((item) => item.id === selectedId));
+    if (!activeGroup || !collapsedGroups[activeGroup.title]) return;
+    setCollapsedGroups((prev) => ({ ...prev, [activeGroup.title]: false }));
+  }, [selectedId, groups, collapsedGroups]);
+
+  const toggleGroup = (title: string) => {
+    setCollapsedGroups((prev) => ({ ...prev, [title]: !prev[title] }));
+  };
+
+  const anyGroupExpanded = groups.some((group) => collapsedGroups[group.title] !== true);
+
+  const toggleAllGroups = () => {
+    if (anyGroupExpanded) {
+      setCollapsedGroups(Object.fromEntries(groups.map((group) => [group.title, true])));
+      return;
+    }
+    setCollapsedGroups({});
+  };
+
+  const groupsToggleLabel = anyGroupExpanded ? "Collapse all groups" : "Expand all groups";
+
   return (
-    <Sidebar>
+    <Sidebar className="group/sidebar">
+      <div className="titlebar-drag flex h-10 shrink-0 items-center gap-2 border-b border-black/[0.08] px-3 dark:border-white/8">
+        <img src="/favicon.png" alt="" className="size-5 rounded-md" />
+        <span className="min-w-0 flex-1 truncate text-sm font-semibold tracking-tight text-foreground">Motion Studio</span>
+        <div className="flex shrink-0 items-center">
+          <button
+            type="button"
+            className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-black/55 opacity-0 pointer-events-none transition-all hover:bg-black/[0.07] hover:text-foreground group-hover/sidebar:opacity-100 group-hover/sidebar:pointer-events-auto dark:text-white/50 dark:hover:bg-white/[0.07] dark:hover:text-white"
+            onClick={toggleAllGroups}
+            aria-label={groupsToggleLabel}
+            title={groupsToggleLabel}
+          >
+            {anyGroupExpanded ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
+          </button>
+          <AppearanceToggle />
+        </div>
+      </div>
       <SidebarList>
         {groups.map((group) => (
-          <SidebarListGroup key={group.title} title={group.title}>
+          <SidebarListGroup
+            key={group.title}
+            title={group.title}
+            collapsed={collapsedGroups[group.title] === true}
+            onToggle={() => toggleGroup(group.title)}
+          >
             {group.items.map((item) => (
               <SidebarListItem
                 key={item.id}
diff --git a/renderer/components/export-dialog.tsx b/renderer/components/export-dialog.tsx
index 7bbce31..177544a 100644
--- a/renderer/components/export-dialog.tsx
+++ b/renderer/components/export-dialog.tsx
@@ -11,7 +11,7 @@ import {
   Tabs,
   TabsTrigger,
 } from "@glaze/core/components";
-import { Copy, Check, Download } from "lucide-react";
+import { Copy, Check, Download, WrapText } from "lucide-react";
 import type { Effect, EffectParams } from "./effects/types";
 import { copyToClipboard, downloadText } from "../lib/export-utils";
 
@@ -36,6 +36,10 @@ export function ExportDialog({ effect, params, open, onOpenChange }: ExportDialo
   const hasCss = typeof effect.exports.css === "function";
   const [format, setFormat] = React.useState<Format>("react");
   const [copied, setCopied] = React.useState(false);
+  const [wrapText, setWrapText] = React.useState(false);
+  const [canWrap, setCanWrap] = React.useState(false);
+  const preRef = React.useRef<HTMLPreElement>(null);
+  const measureRef = React.useRef<HTMLPreElement>(null);
 
   // Fall back to React when switching to an effect that lacks the active format.
   React.useEffect(() => {
@@ -56,6 +60,30 @@ export function ExportDialog({ effect, params, open, onOpenChange }: ExportDialo
     return effect.exports.react(params);
   }, [effect, params, format]);
 
+  React.useLayoutEffect(() => {
+    const updateWrapAvailability = () => {
+      const pre = preRef.current;
+      const measure = measureRef.current;
+      if (!pre || !measure) return;
+
+      const nextCanWrap = measure.scrollWidth > pre.clientWidth + 1;
+      setCanWrap(nextCanWrap);
+      if (!nextCanWrap) setWrapText(false);
+    };
+
+    updateWrapAvailability();
+
+    const observer = new ResizeObserver(updateWrapAvailability);
+    if (preRef.current) observer.observe(preRef.current);
+    if (measureRef.current) observer.observe(measureRef.current);
+    window.addEventListener("resize", updateWrapAvailability);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", updateWrapAvailability);
+    };
+  }, [content]);
+
   const handleCopy = async () => {
     const ok = await copyToClipboard(content);
     if (ok) {
@@ -84,12 +112,40 @@ export function ExportDialog({ effect, params, open, onOpenChange }: ExportDialo
               {hasCss && <TabsTrigger value="css">{FORMAT_META.css.label}</TabsTrigger>}
             </Tabs>
           </TabsRoot>
-          <pre className="mt-3 max-h-[46vh] overflow-auto rounded-card bg-control border border-separator p-4 font-mono text-small leading-relaxed whitespace-pre">
-            <code>{content}</code>
-          </pre>
+          <div className="relative mt-3">
+            {canWrap && (
+              <Button
+                variant="default"
+                size="small"
+                iconOnly
+                className="absolute top-3 right-7 z-10 backdrop-blur-sm"
+                aria-label={wrapText ? "Disable text wrapping" : "Wrap text"}
+                aria-pressed={wrapText}
+                title={wrapText ? "Disable text wrapping" : "Wrap text"}
+                onClick={() => setWrapText((current) => !current)}
+              >
+                <WrapText size={14} />
+              </Button>
+            )}
+            <pre
+              ref={preRef}
+              className={`h-[46vh] overflow-auto rounded-md bg-control border border-separator p-4 pr-16 font-mono text-small leading-relaxed ${
+                wrapText ? "whitespace-pre-wrap break-words" : "whitespace-pre"
+              }`}
+            >
+              <code>{content}</code>
+            </pre>
+            <pre
+              ref={measureRef}
+              aria-hidden
+              className="pointer-events-none invisible absolute inset-x-0 top-0 h-0 overflow-hidden rounded-md border border-transparent p-4 pr-16 font-mono text-small leading-relaxed whitespace-pre"
+            >
+              <code>{content}</code>
+            </pre>
+          </div>
         </DialogBody>
         <DialogFooter>
-          <Button variant="secondary" onClick={handleDownload}>
+          <Button variant="default" onClick={handleDownload}>
             <Download size={15} />
             Download .{FORMAT_META[format].ext}
           </Button>
diff --git a/renderer/components/preview-stage.tsx b/renderer/components/preview-stage.tsx
index 4a71f43..6dd26ea 100644
--- a/renderer/components/preview-stage.tsx
+++ b/renderer/components/preview-stage.tsx
@@ -1,12 +1,24 @@
-import { Toolbar, ToolbarRow, ToolbarTitle, ToolbarActions, Button } from "@glaze/core/components";
-import { RotateCcw, Share } from "lucide-react";
+import { Button } from "@glaze/core/components";
+import { ChevronLeft, ChevronRight, RefreshCcw, RotateCcw, Share } from "lucide-react";
 import type { Effect, EffectParams } from "./effects/types";
-import { AppearanceToggle } from "./appearance-toggle";
+import { StageCanvasControls, type StageBackgroundMode, type StageCanvasTone } from "./stage-canvas-controls";
 
 interface PreviewStageProps {
   effect: Effect;
   params: EffectParams;
   replayToken: number;
+  previousLabel: string;
+  nextLabel: string;
+  backgroundMode: StageBackgroundMode;
+  canvasTone: StageCanvasTone;
+  zoom: number;
+  onBackgroundModeChange: (mode: StageBackgroundMode) => void;
+  onCanvasToneChange: (tone: StageCanvasTone) => void;
+  onZoomChange: (zoom: number) => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  canReset: boolean;
+  onReset: () => void;
   onReplay: () => void;
   onExport: () => void;
 }
@@ -26,24 +38,68 @@ function timingSignature(effect: Effect, params: EffectParams): string {
     .join("&");
 }
 
-export function PreviewStage({ effect, params, replayToken, onReplay, onExport }: PreviewStageProps) {
+export function PreviewStage({
+  effect,
+  params,
+  replayToken,
+  previousLabel,
+  nextLabel,
+  backgroundMode,
+  canvasTone,
+  zoom,
+  onBackgroundModeChange,
+  onCanvasToneChange,
+  onZoomChange,
+  onPrevious,
+  onNext,
+  canReset,
+  onReset,
+  onReplay,
+  onExport,
+}: PreviewStageProps) {
   const Preview = effect.Preview;
   return (
-    <div className="h-full flex flex-col">
-      <Toolbar position="top">
-        <ToolbarRow>
-          <ToolbarTitle>{effect.name}</ToolbarTitle>
-        </ToolbarRow>
-        <ToolbarActions>
-          <AppearanceToggle />
-        </ToolbarActions>
-      </Toolbar>
-      <div className="motion-stage relative flex-1 flex items-center justify-center overflow-auto p-10">
+    <div className="flex h-full min-h-0 flex-col">
+      <div
+        className="titlebar-drag motion-stage relative min-h-0 flex-1 flex items-center justify-center overflow-x-hidden overflow-y-auto p-10"
+        data-bg-mode={backgroundMode}
+        data-canvas-tone={canvasTone}
+      >
+        <div className="pointer-events-none absolute inset-x-0 top-3 z-20 flex items-center justify-center">
+          <div className="pointer-events-auto flex max-w-[min(70%,28rem)] items-center gap-1 rounded-full border border-separator bg-background/85 p-1 shadow-sm backdrop-blur">
+            <Button
+              variant="default"
+              size="small"
+              iconOnly
+              className="rounded-full"
+              aria-label={`Previous effect: ${previousLabel}`}
+              title={previousLabel}
+              onClick={onPrevious}
+            >
+              <ChevronLeft size={15} />
+            </Button>
+            <span className="min-w-0 truncate px-2 text-center text-sm font-medium">{effect.name}</span>
+            <Button
+              variant="default"
+              size="small"
+              iconOnly
+              className="rounded-full"
+              aria-label={`Next effect: ${nextLabel}`}
+              title={nextLabel}
+              onClick={onNext}
+            >
+              <ChevronRight size={15} />
+            </Button>
+          </div>
+        </div>
         {/* Give the preview a definite, centered width so panel-style effects
             using `w-full max-w-*` (overlays, dialogs, transitions) expand to
             their intended size instead of collapsing to ~0 in a shrink-to-fit
             wrapper. Intrinsic-size effects stay centered at their natural size. */}
-        <div className="relative flex w-full max-w-2xl items-center justify-center">
+        <div
+          className="relative flex w-full max-w-2xl items-center justify-center transition-transform"
+          style={{ transform: `scale(${zoom})` }}
+        >
           <Preview
             key={`${replayToken}:${timingSignature(effect, params)}`}
             params={params}
@@ -52,6 +108,12 @@ export function PreviewStage({ effect, params, replayToken, onReplay, onExport }
         </div>
         <div className="pointer-events-none absolute inset-x-0 bottom-5 flex items-center justify-center gap-2">
           <div className="pointer-events-auto flex items-center gap-2">
+            {canReset && (
+              <Button variant="glass" size="small" onClick={onReset}>
+                <RefreshCcw size={15} />
+                Reset
+              </Button>
+            )}
             <Button variant="glass" size="small" onClick={onReplay}>
               <RotateCcw size={15} />
               Replay
@@ -62,6 +124,16 @@ export function PreviewStage({ effect, params, replayToken, onReplay, onExport }
             </Button>
           </div>
         </div>
+        <div className="pointer-events-none absolute bottom-5 right-3 z-20">
+          <StageCanvasControls
+            backgroundMode={backgroundMode}
+            canvasTone={canvasTone}
+            zoom={zoom}
+            onBackgroundModeChange={onBackgroundModeChange}
+            onCanvasToneChange={onCanvasToneChange}
+            onZoomChange={onZoomChange}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/renderer/components/stage-canvas-controls.tsx b/renderer/components/stage-canvas-controls.tsx
new file mode 100644
index 0000000..9f786eb
--- /dev/null
+++ b/renderer/components/stage-canvas-controls.tsx
@@ -0,0 +1,122 @@
+import { Button } from "@glaze/core/components";
+import { CircleDot, Grid2X2, Minus, Plus, Square } from "lucide-react";
+
+export type StageBackgroundMode = "dots" | "grid" | "solid";
+export type StageCanvasTone = "system" | "light" | "dark";
+
+interface StageCanvasControlsProps {
+  backgroundMode: StageBackgroundMode;
+  canvasTone: StageCanvasTone;
+  zoom: number;
+  onBackgroundModeChange: (mode: StageBackgroundMode) => void;
+  onCanvasToneChange: (tone: StageCanvasTone) => void;
+  onZoomChange: (zoom: number) => void;
+}
+
+function canvasControlToneClasses(canvasTone: StageCanvasTone) {
+  if (canvasTone === "light") {
+    return {
+      pill: "border-black/12 bg-white/90",
+      divider: "bg-black/12",
+      button: "rounded-full bg-black/5 hover:bg-black/10 border-black/10 text-neutral-900",
+      zoom: "text-neutral-600 hover:text-neutral-900",
+    };
+  }
+  if (canvasTone === "dark") {
+    return {
+      pill: "border-white/20 bg-neutral-950/90",
+      divider: "bg-white/12",
+      button: "rounded-full bg-white/5 hover:bg-white/10 border-white/10 text-white",
+      zoom: "text-neutral-400 hover:text-white",
+    };
+  }
+  return {
+    pill: "border-separator bg-background/85",
+    divider: "bg-black/12 dark:bg-white/12",
+    button: "rounded-full",
+    zoom: "text-secondary hover:text-foreground",
+  };
+}
+
+const CANVAS_PRESETS: Array<{ mode: StageBackgroundMode; tone: StageCanvasTone }> = [
+  { mode: "dots", tone: "system" },
+  { mode: "grid", tone: "system" },
+  { mode: "solid", tone: "system" },
+  { mode: "dots", tone: "dark" },
+  { mode: "grid", tone: "dark" },
+  { mode: "solid", tone: "dark" },
+  { mode: "dots", tone: "light" },
+  { mode: "grid", tone: "light" },
+  { mode: "solid", tone: "light" },
+];
+
+export function StageCanvasControls({
+  backgroundMode,
+  canvasTone,
+  zoom,
+  onBackgroundModeChange,
+  onCanvasToneChange,
+  onZoomChange,
+}: StageCanvasControlsProps) {
+  const currentPresetIndex = CANVAS_PRESETS.findIndex(
+    (preset) => preset.mode === backgroundMode && preset.tone === canvasTone,
+  );
+  const nextPreset = CANVAS_PRESETS[(Math.max(0, currentPresetIndex) + 1) % CANVAS_PRESETS.length];
+  const zoomOut = () => onZoomChange(Math.max(0.5, Number((zoom - 0.1).toFixed(2))));
+  const zoomIn = () => onZoomChange(Math.min(2, Number((zoom + 0.1).toFixed(2))));
+  const PatternIcon = backgroundMode === "dots" ? CircleDot : backgroundMode === "grid" ? Grid2X2 : Square;
+  const switchCanvasPreset = () => {
+    onBackgroundModeChange(nextPreset.mode);
+    onCanvasToneChange(nextPreset.tone);
+  };
+  const toneClasses = canvasControlToneClasses(canvasTone);
+
+  return (
+    <div
+      className={`pointer-events-auto flex items-center gap-1 rounded-full border p-1 shadow-sm backdrop-blur ${toneClasses.pill}`}
+      data-canvas-tone={canvasTone}
+    >
+      <Button
+        variant="default"
+        size="small"
+        iconOnly
+        className={toneClasses.button}
+        aria-label={`Switch canvas background to ${nextPreset.mode}`}
+        title={`Canvas: ${backgroundMode}, ${canvasTone}`}
+        onClick={switchCanvasPreset}
+      >
+        <PatternIcon size={15} />
+      </Button>
+      <div className={`mx-1 h-4 w-px ${toneClasses.divider}`} />
+      <Button
+        variant="default"
+        size="small"
+        iconOnly
+        className={toneClasses.button}
+        aria-label="Zoom out"
+        onClick={zoomOut}
+      >
+        <Minus size={15} />
+      </Button>
+      <button
+        type="button"
+        className={`h-6 min-w-12 rounded-full px-2 text-small font-medium tabular-nums ${toneClasses.zoom}`}
+        aria-label="Reset canvas zoom"
+        title="Reset zoom"
+        onClick={() => onZoomChange(1)}
+      >
+        {Math.round(zoom * 100)}%
+      </button>
+      <Button
+        variant="default"
+        size="small"
+        iconOnly
+        className={toneClasses.button}
+        aria-label="Zoom in"
+        onClick={zoomIn}
+      >
+        <Plus size={15} />
+      </Button>
+    </div>
+  );
+}
diff --git a/renderer/components/treatment-panel.tsx b/renderer/components/treatment-panel.tsx
index 2abd858..b6be65e 100644
--- a/renderer/components/treatment-panel.tsx
+++ b/renderer/components/treatment-panel.tsx
@@ -3,24 +3,33 @@ import {
   Button,
   Separator,
   Switch,
-  Slider,
   SegmentedControl,
   SegmentedControlItem,
 } from "@glaze/core/components";
-import { RotateCcw, ImageUp, Check } from "lucide-react";
+import { Dice5, ImageUp, Check } from "lucide-react";
 import { cn } from "@glaze/core/utils";
-import { ControlRow } from "./control-row";
+import { ColorPresetGrid, ControlRow, LabeledSlider } from "./control-row";
 import { CurveEditor } from "./curve-editor";
 import type { Treatment } from "./treatments/types";
 import type { EffectParams, ParamValue } from "./effects/types";
 import type { AnimationSettings } from "../lib/anim";
 import { SAMPLE_IMAGES, type SampleImage } from "../lib/source-image";
 
+const EASING_PRESETS = [
+  "0.25,0.1,0.25,1",
+  "0.32,0.72,0,1",
+  "0.45,0,0.55,1",
+  "0.2,0.8,0.2,1",
+  "0.16,1,0.3,1",
+  "0.7,0,0.84,0",
+  "0.34,1.56,0.64,1",
+  "0.87,0,0.13,1",
+];
+
 interface TreatmentPanelProps {
   treatment: Treatment;
   params: EffectParams;
   onChange: (id: string, value: ParamValue) => void;
-  onReset: () => void;
   sourceId: string;
   onPickSample: (sample: SampleImage) => void;
   onPickFile: (file: File) => void;
@@ -66,21 +75,15 @@ function AnimationControls({
               </span>
             )}
           </div>
-          <div className="flex flex-col gap-1.5">
-            <div className="flex items-center justify-between">
-              <span className="text-small text-secondary">Duration</span>
-              <span className="text-small text-secondary tabular-nums">{anim.duration}s</span>
-            </div>
-            <Slider
-              variant="filled"
-              size="small"
-              min={0.5}
-              max={6}
-              step={0.5}
-              value={[anim.duration]}
-              onValueChange={([v]) => onAnimChange({ duration: v })}
-            />
-          </div>
+          <LabeledSlider
+            label="Duration"
+            value={anim.duration}
+            unit="s"
+            min={0.5}
+            max={6}
+            step={0.5}
+            onValueChange={(duration) => onAnimChange({ duration })}
+          />
           <div className="flex items-center justify-between">
             <span className="text-small text-secondary">Loop</span>
             <Switch
@@ -89,7 +92,19 @@ function AnimationControls({
             />
           </div>
           <div className="flex flex-col gap-1.5">
-            <span className="text-small text-secondary">Easing</span>
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-small text-secondary">Easing</span>
+              <Button
+                variant="default"
+                size="small"
+                iconOnly
+                aria-label="Randomize easing curve"
+                title="Randomize easing curve"
+                onClick={() => onAnimChange({ easing: EASING_PRESETS[Math.floor(Math.random() * EASING_PRESETS.length)] })}
+              >
+                <Dice5 size={14} />
+              </Button>
+            </div>
             <CurveEditor value={anim.easing} onChange={(v) => onAnimChange({ easing: v })} animate />
           </div>
         </>
@@ -163,7 +178,6 @@ export function TreatmentPanel({
   treatment,
   params,
   onChange,
-  onReset,
   sourceId,
   onPickSample,
   onPickFile,
@@ -171,36 +185,38 @@ export function TreatmentPanel({
   onAnimChange,
 }: TreatmentPanelProps) {
   const supportsMotion = Boolean(treatment.animate || treatment.animated);
+  let colorPresetsShown = false;
   return (
     <div className="h-full flex flex-col">
-      <div className="px-4 pt-13 pb-3 flex items-start justify-between gap-3">
+      <div className="titlebar-drag px-4 py-3 flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h2 className="text-strong">{treatment.name}</h2>
           <p className="text-small text-secondary mt-0.5">{treatment.description}</p>
         </div>
-        <Button
-          variant="transparent"
-          size="small"
-          iconOnly
-          className="shrink-0 text-secondary"
-          title="Reset to defaults"
-          aria-label="Reset to defaults"
-          onClick={onReset}
-        >
-          <RotateCcw size={15} />
-        </Button>
       </div>
       <Separator />
-      <div className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4">
+      <div className="flex-1 overflow-y-auto px-4 pt-3 pb-4 flex flex-col gap-4">
         {treatment.needsSource && (
           <>
             <SourcePicker sourceId={sourceId} onPickSample={onPickSample} onPickFile={onPickFile} />
             <Separator />
           </>
         )}
-        {treatment.controls.map((control) => (
-          <ControlRow key={control.id} control={control} params={params} onChange={onChange} />
-        ))}
+        {treatment.controls.map((control) => {
+          const showColorPresets =
+            !colorPresetsShown &&
+            control.type === "color" &&
+            (!control.visibleWhen || control.visibleWhen(params));
+          if (showColorPresets) colorPresetsShown = true;
+          return (
+            <React.Fragment key={control.id}>
+              {showColorPresets && (
+                <ColorPresetGrid controls={treatment.controls} params={params} onChange={onChange} />
+              )}
+              <ControlRow control={control} params={params} onChange={onChange} />
+            </React.Fragment>
+          );
+        })}
         {supportsMotion && (
           <>
             <Separator />
diff --git a/renderer/components/treatment-stage.tsx b/renderer/components/treatment-stage.tsx
index 48fdce8..b3fa80b 100644
--- a/renderer/components/treatment-stage.tsx
+++ b/renderer/components/treatment-stage.tsx
@@ -1,9 +1,5 @@
 import * as React from "react";
 import {
-  Toolbar,
-  ToolbarRow,
-  ToolbarTitle,
-  ToolbarActions,
   Button,
   SegmentedControl,
   SegmentedControlItem,
@@ -11,10 +7,10 @@ import {
   EmptyStateTitle,
   EmptyStateDescription,
 } from "@glaze/core/components";
-import { RotateCcw, Download, Check, ImageUp, Loader2 } from "lucide-react";
+import { ChevronLeft, ChevronRight, RefreshCcw, RotateCcw, Download, Check, ImageUp, Loader2 } from "lucide-react";
 import type { Treatment } from "./treatments/types";
 import type { EffectParams } from "./effects/types";
-import { AppearanceToggle } from "./appearance-toggle";
+import { StageCanvasControls, type StageBackgroundMode, type StageCanvasTone } from "./stage-canvas-controls";
 import { downloadCanvasPng } from "../lib/image-export";
 import {
   applyAnimation,
@@ -36,6 +32,18 @@ interface TreatmentStageProps {
   source: HTMLImageElement | null;
   anim: AnimationSettings;
   replayToken: number;
+  previousLabel: string;
+  nextLabel: string;
+  backgroundMode: StageBackgroundMode;
+  canvasTone: StageCanvasTone;
+  zoom: number;
+  onBackgroundModeChange: (mode: StageBackgroundMode) => void;
+  onCanvasToneChange: (tone: StageCanvasTone) => void;
+  onZoomChange: (zoom: number) => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  canReset: boolean;
+  onReset: () => void;
   onReplay: () => void;
   onDropFile: (file: File) => void;
 }
@@ -63,6 +71,18 @@ export function TreatmentStage({
   source,
   anim,
   replayToken,
+  previousLabel,
+  nextLabel,
+  backgroundMode,
+  canvasTone,
+  zoom,
+  onBackgroundModeChange,
+  onCanvasToneChange,
+  onZoomChange,
+  onPrevious,
+  onNext,
+  canReset,
+  onReset,
   onReplay,
   onDropFile,
 }: TreatmentStageProps) {
@@ -178,17 +198,11 @@ export function TreatmentStage({
   };
 
   return (
-    <div className="h-full flex flex-col">
-      <Toolbar position="top">
-        <ToolbarRow>
-          <ToolbarTitle>{treatment.name}</ToolbarTitle>
-        </ToolbarRow>
-        <ToolbarActions>
-          <AppearanceToggle />
-        </ToolbarActions>
-      </Toolbar>
+    <div className="flex h-full min-h-0 flex-col">
       <div
-        className="motion-stage relative flex-1 flex items-center justify-center overflow-auto p-10"
+        className="titlebar-drag motion-stage relative min-h-0 flex-1 flex items-center justify-center overflow-x-hidden overflow-y-auto p-10"
+        data-bg-mode={backgroundMode}
+        data-canvas-tone={canvasTone}
         onDragOver={(e) => {
           if (treatment.needsSource) {
             e.preventDefault();
@@ -198,17 +212,47 @@ export function TreatmentStage({
         onDragLeave={() => setDragOver(false)}
         onDrop={treatment.needsSource ? handleDrop : undefined}
       >
+        <div className="pointer-events-none absolute inset-x-0 top-3 z-20 flex items-center justify-center">
+          <div className="pointer-events-auto flex max-w-[min(70%,28rem)] items-center gap-1 rounded-full border border-separator bg-background/85 p-1 shadow-sm backdrop-blur">
+            <Button
+              variant="default"
+              size="small"
+              iconOnly
+              className="rounded-full"
+              aria-label={`Previous effect: ${previousLabel}`}
+              title={previousLabel}
+              onClick={onPrevious}
+            >
+              <ChevronLeft size={15} />
+            </Button>
+            <span className="min-w-0 truncate px-2 text-center text-sm font-medium">{treatment.name}</span>
+            <Button
+              variant="default"
+              size="small"
+              iconOnly
+              className="rounded-full"
+              aria-label={`Next effect: ${nextLabel}`}
+              title={nextLabel}
+              onClick={onNext}
+            >
+              <ChevronRight size={15} />
+            </Button>
+          </div>
+        </div>
         {missingSource ? (
-          <EmptyState>
-            <EmptyStateTitle>No image yet</EmptyStateTitle>
-            <EmptyStateDescription>
-              Pick a sample or drop an image to start treating it.
-            </EmptyStateDescription>
-          </EmptyState>
+          <div className="transition-transform" style={{ transform: `scale(${zoom})` }}>
+            <EmptyState>
+              <EmptyStateTitle>No image yet</EmptyStateTitle>
+              <EmptyStateDescription>
+                Pick a sample or drop an image to start treating it.
+              </EmptyStateDescription>
+            </EmptyState>
+          </div>
         ) : (
           <canvas
             ref={canvasRef}
-            className="max-w-full max-h-full object-contain rounded-card shadow-lg"
+            className="max-w-full max-h-full object-contain rounded-card shadow-lg transition-transform"
+            style={{ transform: `scale(${zoom})` }}
           />
         )}
 
@@ -223,6 +267,12 @@ export function TreatmentStage({
 
         <div className="pointer-events-none absolute inset-x-0 bottom-5 flex items-center justify-center gap-2">
           <div className="pointer-events-auto flex items-center gap-2">
+            {canReset && (
+              <Button variant="glass" size="small" onClick={onReset} disabled={!!busy}>
+                <RefreshCcw size={15} />
+                Reset
+              </Button>
+            )}
             {(treatment.animated || anim.enabled) && (
               <Button variant="glass" size="small" onClick={onReplay} disabled={!!busy}>
                 <RotateCcw size={15} />
@@ -255,6 +305,16 @@ export function TreatmentStage({
             </Button>
           </div>
         </div>
+        <div className="pointer-events-none absolute bottom-5 right-3 z-20">
+          <StageCanvasControls
+            backgroundMode={backgroundMode}
+            canvasTone={canvasTone}
+            zoom={zoom}
+            onBackgroundModeChange={onBackgroundModeChange}
+            onCanvasToneChange={onCanvasToneChange}
+            onZoomChange={onZoomChange}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/renderer/main/home-view.tsx b/renderer/main/home-view.tsx
index f06708e..3434ad7 100644
--- a/renderer/main/home-view.tsx
+++ b/renderer/main/home-view.tsx
@@ -3,13 +3,14 @@ import { SplitView } from "@glaze/core/components";
 import { effects } from "../components/effects/registry";
 import { treatments } from "../components/treatments/registry";
 import { defaultParams, type EffectParams, type ParamValue } from "../components/effects/types";
-import { resolveItem, defaultItemId } from "../lib/library";
+import { resolveItem, defaultItemId, libraryGroups } from "../lib/library";
 import { EffectSidebar } from "../components/effect-sidebar";
 import { ControlPanel } from "../components/control-panel";
 import { PreviewStage } from "../components/preview-stage";
 import { ExportDialog } from "../components/export-dialog";
 import { TreatmentPanel } from "../components/treatment-panel";
 import { TreatmentStage } from "../components/treatment-stage";
+import type { StageBackgroundMode, StageCanvasTone } from "../components/stage-canvas-controls";
 import { SAMPLE_IMAGES, loadSample, loadFile, type SampleImage } from "../lib/source-image";
 import { defaultAnimation, type AnimationSettings } from "../lib/anim";
 
@@ -25,6 +26,9 @@ export function HomeView() {
   const [paramsMap, setParamsMap] = React.useState<Record<string, EffectParams>>(buildInitialParams);
   const [replayToken, setReplayToken] = React.useState(0);
   const [exportOpen, setExportOpen] = React.useState(false);
+  const [stageBackgroundMode, setStageBackgroundMode] = React.useState<StageBackgroundMode>("dots");
+  const [stageCanvasTone, setStageCanvasTone] = React.useState<StageCanvasTone>("system");
+  const [stageZoom, setStageZoom] = React.useState(1);
 
   // Shared source image for the treatment lab.
   const [sourceId, setSourceId] = React.useState(SAMPLE_IMAGES[0].id);
@@ -32,8 +36,10 @@ export function HomeView() {
 
   // Shared easing-driven animation settings for image treatments.
   const [anim, setAnim] = React.useState<AnimationSettings>(defaultAnimation);
-  const handleAnimChange = (patch: Partial<AnimationSettings>) =>
+  const handleAnimChange = (patch: Partial<AnimationSettings>) => {
     setAnim((prev) => ({ ...prev, ...patch }));
+    setReplayToken((token) => token + 1);
+  };
 
   React.useEffect(() => {
     let alive = true;
@@ -47,14 +53,50 @@ export function HomeView() {
 
   const item = resolveItem(selectedId) ?? { kind: "effect" as const, effect: effects[0] };
   const activeId = item.kind === "effect" ? item.effect.id : item.treatment.id;
-  const controls = item.kind === "effect" ? item.effect.controls : item.treatment.controls;
+  const libraryItems = React.useMemo(() => libraryGroups().flatMap((group) => group.items), []);
+  const activeIndex = libraryItems.findIndex((entry) => entry.id === activeId);
+  const previousItem = libraryItems[(activeIndex - 1 + libraryItems.length) % libraryItems.length];
+  const nextItem = libraryItems[(activeIndex + 1) % libraryItems.length];
   const params = paramsMap[activeId];
+  const activeControls = item.kind === "effect" ? item.effect.controls : item.treatment.controls;
+  const activeDefaults = React.useMemo(() => defaultParams(activeControls), [activeControls]);
+  const canReset = activeControls.some(
+    (control) => JSON.stringify(params[control.id]) !== JSON.stringify(activeDefaults[control.id]),
+  );
 
   const handleSelect = (id: string) => {
     setSelectedId(id);
     setReplayToken(0);
   };
 
+  const handleNavigate = (id: string) => {
+    handleSelect(id);
+  };
+
+  React.useEffect(() => {
+    if (exportOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      if (
+        target?.closest(
+          'input, textarea, select, [contenteditable="true"], [role="slider"], [role="spinbutton"]',
+        )
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      handleNavigate(event.key === "ArrowLeft" ? previousItem.id : nextItem.id);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [exportOpen, previousItem.id, nextItem.id]);
+
   const handleChange = (id: string, value: ParamValue) => {
     setParamsMap((prev) => ({
       ...prev,
@@ -63,7 +105,11 @@ export function HomeView() {
   };
 
   const handleReset = () => {
-    setParamsMap((prev) => ({ ...prev, [activeId]: defaultParams(controls) }));
+    setParamsMap((prev) => ({
+      ...prev,
+      [activeId]: activeDefaults,
+    }));
+    setReplayToken((token) => token + 1);
   };
 
   const handlePickSample = (sample: SampleImage) => {
@@ -88,21 +134,19 @@ export function HomeView() {
         storageKey="motion-studio"
         className="h-full"
         sidebar={<EffectSidebar selectedId={selectedId} onSelect={handleSelect} />}
-        sidebarSize={{ default: 220, min: 180, max: 300 }}
+        sidebarSize={{ default: 240, min: 180, max: 350 }}
         inspector={
           item.kind === "effect" ? (
             <ControlPanel
               effect={item.effect}
               params={params}
               onChange={handleChange}
-              onReset={handleReset}
             />
           ) : (
             <TreatmentPanel
               treatment={item.treatment}
               params={params}
               onChange={handleChange}
-              onReset={handleReset}
               sourceId={sourceId}
               onPickSample={handlePickSample}
               onPickFile={handlePickFile}
@@ -118,6 +162,18 @@ export function HomeView() {
             effect={item.effect}
             params={params}
             replayToken={replayToken}
+            previousLabel={previousItem.name}
+            nextLabel={nextItem.name}
+            backgroundMode={stageBackgroundMode}
+            canvasTone={stageCanvasTone}
+            zoom={stageZoom}
+            onBackgroundModeChange={setStageBackgroundMode}
+            onCanvasToneChange={setStageCanvasTone}
+            onZoomChange={setStageZoom}
+            onPrevious={() => handleNavigate(previousItem.id)}
+            onNext={() => handleNavigate(nextItem.id)}
+            canReset={canReset}
+            onReset={handleReset}
             onReplay={() => setReplayToken((t) => t + 1)}
             onExport={() => setExportOpen(true)}
           />
@@ -128,6 +184,18 @@ export function HomeView() {
             source={source}
             anim={anim}
             replayToken={replayToken}
+            previousLabel={previousItem.name}
+            nextLabel={nextItem.name}
+            backgroundMode={stageBackgroundMode}
+            canvasTone={stageCanvasTone}
+            zoom={stageZoom}
+            onBackgroundModeChange={setStageBackgroundMode}
+            onCanvasToneChange={setStageCanvasTone}
+            onZoomChange={setStageZoom}
+            onPrevious={() => handleNavigate(previousItem.id)}
+            onNext={() => handleNavigate(nextItem.id)}
+            canReset={canReset}
+            onReset={handleReset}
             onReplay={() => setReplayToken((t) => t + 1)}
             onDropFile={handlePickFile}
           />
diff --git a/renderer/main/index.tsx b/renderer/main/index.tsx
index bf96f09..064a9a5 100644
--- a/renderer/main/index.tsx
+++ b/renderer/main/index.tsx
@@ -32,7 +32,10 @@ root.render(
   </React.StrictMode>,
 );
 
-// Hot Module Replacement (HMR) support
+// HMR re-runs this module; unmount so we don't stack duplicate app roots in #root.
 if (import.meta.hot) {
   import.meta.hot.accept();
+  import.meta.hot.dispose(() => {
+    root.unmount();
+  });
 }
diff --git a/renderer/settings/index.tsx b/renderer/settings/index.tsx
index b6f8158..4f9ae71 100644
--- a/renderer/settings/index.tsx
+++ b/renderer/settings/index.tsx
@@ -36,4 +36,7 @@ root.render(
 
 if (import.meta.hot) {
   import.meta.hot.accept();
+  import.meta.hot.dispose(() => {
+    root.unmount();
+  });
 }
diff --git a/renderer/shims/browser-glazeapi.ts b/renderer/shims/browser-glazeapi.ts
index 8c6f5a1..2b9e16a 100644
--- a/renderer/shims/browser-glazeapi.ts
+++ b/renderer/shims/browser-glazeapi.ts
@@ -3,7 +3,29 @@
  * checks `window.glazeAPI?.glaze?.ipc?.disconnect()` doesn't throw.
  */
 
+type ThemeSource = "system" | "light" | "dark";
+
+const THEME_STORAGE_KEY = "motion-studio-theme";
+
+function storedThemeSource(): ThemeSource {
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+
+function shouldUseDarkColors(source: ThemeSource): boolean {
+  return source === "dark" || (source === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+}
+
+function applyThemeSource(source: ThemeSource) {
+  document.documentElement.classList.toggle("dark", shouldUseDarkColors(source));
+  if (source === "system") window.localStorage.removeItem(THEME_STORAGE_KEY);
+  else window.localStorage.setItem(THEME_STORAGE_KEY, source);
+}
+
 if (typeof window !== "undefined" && !("glazeAPI" in window)) {
+  let themeSource = storedThemeSource();
+  applyThemeSource(themeSource);
+
   (window as Record<string, unknown>).glazeAPI = {
     glaze: {
       ipc: {
@@ -27,13 +49,16 @@ if (typeof window !== "undefined" && !("glazeAPI" in window)) {
     nativeTheme: {
       getInfo: () =>
         Promise.resolve({
-          shouldUseDarkColors: window.matchMedia("(prefers-color-scheme: dark)").matches,
-          themeSource: "system" as const,
+          shouldUseDarkColors: shouldUseDarkColors(themeSource),
+          themeSource,
         }),
-      setThemeSource: () => Promise.resolve(true),
-      getShouldUseDarkColors: () =>
-        Promise.resolve(window.matchMedia("(prefers-color-scheme: dark)").matches),
-      getThemeSource: () => Promise.resolve("system" as const),
+      setThemeSource: (source: ThemeSource) => {
+        themeSource = source;
+        applyThemeSource(source);
+        return Promise.resolve(true);
+      },
+      getShouldUseDarkColors: () => Promise.resolve(shouldUseDarkColors(themeSource)),
+      getThemeSource: () => Promise.resolve(themeSource),
     },
     shell: { beep: () => {}, beepAsync: () => Promise.resolve() },
     systemPreferences: {
diff --git a/renderer/shims/components.tsx b/renderer/shims/components.tsx
index c75215a..cb5a703 100644
--- a/renderer/shims/components.tsx
+++ b/renderer/shims/components.tsx
@@ -4,6 +4,7 @@
  */
 import * as React from "react";
 import { Tooltip, Select as RadixSelect, Slider as RadixSlider, Switch as RadixSwitch } from "radix-ui";
+import { ChevronDown } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -56,13 +57,14 @@ export function Status({ variant = "info", children, className }: StatusProps) {
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "glass" | "accent" | "muted" | "filled" | "default";
   size?: "small" | "medium" | "large";
+  iconOnly?: boolean;
   children?: React.ReactNode;
 }
 
-export function Button({ variant = "default", size = "medium", className, children, ...props }: ButtonProps) {
+export function Button({ variant = "default", size = "medium", iconOnly = false, className, children, ...props }: ButtonProps) {
   const variantClasses = {
     glass:
-      "bg-white/10 hover:bg-white/20 dark:bg-white/5 dark:hover:bg-white/10 border border-white/20 text-foreground backdrop-blur-sm",
+      "bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 border border-black/[0.12] dark:border-white/20 text-foreground backdrop-blur-sm",
     accent: "bg-blue-500 hover:bg-blue-600 text-white border-transparent",
     muted:
       "bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 text-foreground",
@@ -82,6 +84,7 @@ export function Button({ variant = "default", size = "medium", className, childr
         "disabled:pointer-events-none disabled:opacity-50 cursor-default",
         variantClasses[variant],
         sizeClasses[size],
+        iconOnly && (size === "small" ? "w-6 px-0" : size === "medium" ? "w-8 px-0" : "w-10 px-0"),
         className,
       )}
       {...props}
@@ -114,13 +117,14 @@ export function Separator({ className, orientation = "horizontal" }: SeparatorPr
 // ---------------------------------------------------------------------------
 // Sidebar
 // ---------------------------------------------------------------------------
-export function Sidebar({ children, className }: { children?: React.ReactNode; className?: string }) {
+export function Sidebar({ children, className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "h-full flex flex-col overflow-hidden bg-black/3 dark:bg-white/3 border-r border-black/8 dark:border-white/8",
+        "h-full flex flex-col overflow-hidden bg-black/[0.045] dark:bg-white/3 border-r border-black/[0.12] dark:border-white/8",
         className,
       )}
+      {...props}
     >
       {children}
     </div>
@@ -128,9 +132,45 @@ export function Sidebar({ children, className }: { children?: React.ReactNode; c
 }
 
 export function SidebarList({ children, className }: { children?: React.ReactNode; className?: string }) {
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const [showTopFade, setShowTopFade] = React.useState(false);
+  const [showBottomFade, setShowBottomFade] = React.useState(false);
+
+  const updateScrollFades = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const canScroll = el.scrollHeight > el.clientHeight + 1;
+    setShowTopFade(canScroll && el.scrollTop > 0);
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 2;
+    setShowBottomFade(canScroll && !atBottom);
+  }, []);
+
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollFades();
+    const observer = new ResizeObserver(updateScrollFades);
+    observer.observe(el);
+    el.addEventListener("scroll", updateScrollFades, { passive: true });
+    return () => {
+      observer.disconnect();
+      el.removeEventListener("scroll", updateScrollFades);
+    };
+  }, [updateScrollFades, children]);
+
   return (
-    <div className={cn("flex-1 overflow-y-auto py-2", className)}>
-      {children}
+    <div className={cn("relative flex-1 min-h-0", className)}>
+      <div ref={scrollRef} className="sidebar-scroll h-full overflow-y-auto overflow-x-hidden py-2">
+        {children}
+      </div>
+      <div
+        aria-hidden
+        className={cn("sidebar-fade sidebar-fade-top", showTopFade && "is-visible")}
+      />
+      <div
+        aria-hidden
+        className={cn("sidebar-fade sidebar-fade-bottom", showBottomFade && "is-visible")}
+      />
     </div>
   );
 }
@@ -139,15 +179,31 @@ interface SidebarListGroupProps {
   title: string;
   children?: React.ReactNode;
   className?: string;
+  collapsed?: boolean;
+  onToggle?: () => void;
 }
 
-export function SidebarListGroup({ title, children, className }: SidebarListGroupProps) {
+export function SidebarListGroup({ title, children, className, collapsed = false, onToggle }: SidebarListGroupProps) {
   return (
-    <div className={cn("mb-1", className)}>
-      <div className="px-3 py-1.5 text-xs font-semibold text-black/40 dark:text-white/40 uppercase tracking-wider">
-        {title}
-      </div>
-      <div>{children}</div>
+    <div className={cn("mt-4 mb-1 first:mt-0", className)}>
+      <button
+        type="button"
+        className="group flex w-full items-center gap-1 py-1.5 pl-3 pr-3 text-left text-xs font-semibold uppercase tracking-wider text-black/55 transition-colors hover:text-foreground dark:text-white/40"
+        aria-expanded={!collapsed}
+        onClick={onToggle}
+      >
+        <span className="min-w-0 truncate">{title}</span>
+        <ChevronDown
+          size={14}
+          strokeWidth={2}
+          className={cn(
+            "shrink-0 text-black/60 transition-transform group-hover:text-foreground dark:text-white/50",
+            collapsed ? "-rotate-90" : "rotate-0",
+          )}
+          aria-hidden
+        />
+      </button>
+      {!collapsed && <div>{children}</div>}
     </div>
   );
 }
@@ -165,10 +221,10 @@ export function SidebarListItem({ title, icon, selected, onClick, className }: S
     <button
       onClick={onClick}
       className={cn(
-        "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left cursor-default transition-colors rounded-md mx-1",
+        "mx-1 flex w-[calc(100%-0.5rem)] items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm cursor-default transition-colors",
         selected
-          ? "bg-blue-500/15 text-blue-600 dark:text-blue-400 font-medium"
-          : "text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 hover:text-foreground",
+          ? "bg-blue-500/14 text-blue-700 dark:text-blue-400 font-medium"
+          : "text-black/[0.78] dark:text-white/70 hover:bg-black/[0.07] dark:hover:bg-white/5 hover:text-foreground",
         className,
       )}
     >
@@ -204,22 +260,66 @@ export function SplitView({
   inspectorSize = { default: 300 },
   children,
   className,
+  storageKey,
 }: SplitViewProps) {
+  const sidebarStorageKey = storageKey ? `${storageKey}:sidebar-width` : null;
+  const [sidebarWidth, setSidebarWidth] = React.useState(() => {
+    if (!sidebarStorageKey) return sidebarSize.default;
+    const stored = window.localStorage.getItem(sidebarStorageKey);
+    const parsed = stored ? Number(stored) : NaN;
+    return Number.isFinite(parsed) ? parsed : sidebarSize.default;
+  });
+  const sidebarMin = sidebarSize.min ?? 160;
+  const sidebarMax = sidebarSize.max ?? 350;
+  const setPersistedSidebarWidth = (width: number) => {
+    setSidebarWidth(width);
+    if (sidebarStorageKey) window.localStorage.setItem(sidebarStorageKey, String(Math.round(width)));
+  };
+
+  const startSidebarResize = (event: React.PointerEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (event.detail > 1) return;
+    const startX = event.clientX;
+    const startWidth = sidebarWidth;
+
+    const onMove = (moveEvent: PointerEvent) => {
+      const nextWidth = Math.min(sidebarMax, Math.max(sidebarMin, startWidth + moveEvent.clientX - startX));
+      setPersistedSidebarWidth(nextWidth);
+    };
+
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const resetSidebarWidth = () => setPersistedSidebarWidth(sidebarSize.default);
+
   return (
     <div className={cn("flex h-full overflow-hidden", className)}>
       {sidebar && (
         <div
-          style={{ width: sidebarSize.default, minWidth: sidebarSize.min, maxWidth: sidebarSize.max }}
-          className="shrink-0 h-full overflow-hidden"
+          style={{ width: sidebarWidth, minWidth: sidebarMin, maxWidth: sidebarMax }}
+          className="relative shrink-0 h-full overflow-hidden"
         >
           {sidebar}
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize sidebar"
+            className="absolute inset-y-0 right-0 z-20 w-1 cursor-col-resize bg-transparent hover:bg-blue-500/40"
+            onDoubleClick={resetSidebarWidth}
+            onPointerDown={startSidebarResize}
+          />
         </div>
       )}
       <div className="flex-1 min-w-0 h-full overflow-hidden">{children}</div>
       {inspector && (
         <div
           style={{ width: inspectorSize.default, minWidth: inspectorSize.min, maxWidth: inspectorSize.max }}
-          className="shrink-0 h-full overflow-hidden border-l border-black/8 dark:border-white/8"
+          className="shrink-0 h-full overflow-hidden border-l border-black/[0.12] dark:border-white/8"
         >
           {inspector}
         </div>
@@ -242,7 +342,7 @@ export function Toolbar({ position = "top", children, className }: ToolbarProps)
     <div
       data-toolbar
       className={cn(
-        "flex flex-col shrink-0 border-black/8 dark:border-white/8 bg-black/2 dark:bg-white/2",
+        "flex flex-col shrink-0 border-black/[0.12] dark:border-white/8 bg-black/[0.035] dark:bg-white/2",
         position === "top" ? "border-b" : "border-t",
         className,
       )}
@@ -322,6 +422,7 @@ export class ErrorBoundaryView extends React.Component<ErrorBoundaryViewProps, E
 // Slider — wraps Radix Slider
 // ---------------------------------------------------------------------------
 interface SliderProps {
+  "aria-label"?: string;
   min?: number;
   max?: number;
   step?: number;
@@ -332,7 +433,7 @@ interface SliderProps {
   className?: string;
 }
 
-export function Slider({ min, max, step, value, onValueChange, className }: SliderProps) {
+export function Slider({ "aria-label": ariaLabel, min, max, step, value, onValueChange, className }: SliderProps) {
   return (
     <RadixSlider.Root
       min={min}
@@ -345,7 +446,10 @@ export function Slider({ min, max, step, value, onValueChange, className }: Slid
       <RadixSlider.Track className="bg-black/10 dark:bg-white/10 relative grow rounded-full h-1.5">
         <RadixSlider.Range className="absolute bg-blue-500 rounded-full h-full" />
       </RadixSlider.Track>
-      <RadixSlider.Thumb className="block w-4 h-4 bg-white dark:bg-neutral-200 shadow-md rounded-full border border-black/10 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <RadixSlider.Thumb
+        aria-label={ariaLabel}
+        className="block w-4 h-4 bg-white dark:bg-neutral-200 shadow-md rounded-full border border-black/10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
     </RadixSlider.Root>
   );
 }
@@ -365,16 +469,16 @@ export function Switch({ checked, onCheckedChange, className }: SwitchProps) {
       checked={checked}
       onCheckedChange={onCheckedChange}
       className={cn(
-        "inline-flex h-5 w-9 shrink-0 cursor-default rounded-full border-2 border-transparent",
+        "inline-flex h-6 w-11 shrink-0 cursor-default items-center rounded-md border border-separator p-0.5",
         "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-        checked ? "bg-blue-500" : "bg-black/15 dark:bg-white/15",
+        checked ? "bg-blue-500" : "bg-black/5 dark:bg-white/10",
         className,
       )}
     >
       <RadixSwitch.Thumb
         className={cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md ring-0 transition-transform",
-          checked ? "translate-x-4" : "translate-x-0",
+          "pointer-events-none block h-4 w-4 rounded-sm bg-white shadow-sm ring-0 transition-transform",
+          checked ? "translate-x-5" : "translate-x-0",
         )}
       />
     </RadixSwitch.Root>
@@ -550,7 +654,7 @@ export function Dialog({ open, onOpenChange, children }: DialogProps) {
   return (
     <DialogContext.Provider value={{ onClose }}>
       <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+        <div className="absolute inset-0 bg-black/[0.38] dark:bg-black/50 backdrop-blur-sm" onClick={onClose} />
         <div className="relative z-10">{children}</div>
       </div>
     </DialogContext.Provider>
@@ -561,7 +665,7 @@ export function DialogContent({ children, className }: { children?: React.ReactN
   return (
     <div
       className={cn(
-        "bg-white dark:bg-neutral-900 rounded-xl shadow-2xl border border-black/10 dark:border-white/10",
+        "bg-white dark:bg-neutral-900 rounded-xl shadow-2xl border border-black/[0.14] dark:border-white/10",
         "w-[90vw] max-w-lg max-h-[85vh] flex flex-col overflow-hidden",
         className,
       )}
@@ -573,7 +677,7 @@ export function DialogContent({ children, className }: { children?: React.ReactN
 
 export function DialogHeader({ children, className }: { children?: React.ReactNode; className?: string }) {
   return (
-    <div className={cn("flex items-center px-5 py-4 border-b border-black/8 dark:border-white/8 shrink-0", className)}>
+    <div className={cn("flex items-center px-5 py-4 border-b border-black/[0.12] dark:border-white/8 shrink-0", className)}>
       {children}
     </div>
   );
@@ -589,7 +693,7 @@ export function DialogBody({ children, className }: { children?: React.ReactNode
 
 export function DialogFooter({ children, className }: { children?: React.ReactNode; className?: string }) {
   return (
-    <div className={cn("flex items-center justify-end gap-2 px-5 py-3 border-t border-black/8 dark:border-white/8 shrink-0", className)}>
+    <div className={cn("flex items-center justify-end gap-2 px-5 py-3 border-t border-black/[0.12] dark:border-white/8 shrink-0", className)}>
       {children}
     </div>
   );
diff --git a/renderer/shims/hooks.ts b/renderer/shims/hooks.ts
index 22485cc..a255b4e 100644
--- a/renderer/shims/hooks.ts
+++ b/renderer/shims/hooks.ts
@@ -6,11 +6,12 @@ import * as React from "react";
 export function useTheme() {
   React.useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const apply = (dark: boolean) => {
-      document.documentElement.classList.toggle("dark", dark);
+    const applySystemTheme = async () => {
+      const source = await window.glazeAPI.nativeTheme.getThemeSource();
+      if (source === "system") document.documentElement.classList.toggle("dark", mq.matches);
     };
-    apply(mq.matches);
-    const handler = (e: MediaQueryListEvent) => apply(e.matches);
+    void applySystemTheme();
+    const handler = () => void applySystemTheme();
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
diff --git a/renderer/web-styles.css b/renderer/web-styles.css
index a719153..8edb381 100644
--- a/renderer/web-styles.css
+++ b/renderer/web-styles.css
@@ -1,6 +1,8 @@
 /* Web build: explicitly import Tailwind (Glaze normally injects this) */
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Source Tailwind from all renderer files */
 @source "./main/**/*.{ts,tsx}";
 @source "./settings/**/*.{ts,tsx}";
@@ -19,12 +21,16 @@
 
   /* Separator */
   --color-separator: rgba(0, 0, 0, 0.12);
+  --color-control: rgba(0, 0, 0, 0.055);
+  --color-elevated: rgba(0, 0, 0, 0.08);
 }
 
 .dark {
   --color-foreground: oklch(0.985 0 0);
   --color-background: oklch(0.145 0 0);
   --color-separator: rgba(255, 255, 255, 0.12);
+  --color-control: rgba(255, 255, 255, 0.055);
+  --color-elevated: rgba(255, 255, 255, 0.085);
 }
 
 html,
@@ -50,7 +56,7 @@ body {
 }
 
 .text-secondary {
-  color: color-mix(in oklch, var(--color-foreground) 55%, transparent);
+  color: color-mix(in oklch, var(--color-foreground) 68%, transparent);
 }
 
 .text-small {
@@ -78,10 +84,117 @@ body {
   border-color: var(--color-separator);
 }
 
-/* Drag region (no-op in browser) */
+.bg-control {
+  background-color: var(--color-control);
+}
+
+.bg-elevated {
+  background-color: var(--color-elevated);
+}
+
+/* Drag region — click-through overlay */
 .drag-region {
   -webkit-app-region: drag;
   app-region: drag;
+  pointer-events: none;
+}
+
+/* Electron frameless drag on real chrome; interactive children opt out */
+.titlebar-drag {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.titlebar-drag :is(button, a, input, textarea, select, label, [role="slider"], [role="switch"], [role="button"], .pointer-events-auto) {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+.sidebar-scroll {
+  scrollbar-color: color-mix(in oklch, var(--color-foreground) 32%, transparent) transparent;
+}
+
+.sidebar-fade {
+  --sidebar-fade-size: 2rem;
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+  z-index: 10;
+  height: var(--sidebar-fade-size);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.sidebar-fade.is-visible {
+  opacity: 1;
+}
+
+.sidebar-fade-top {
+  top: 0;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in oklch, var(--color-background) 68%, transparent) 0%,
+    color-mix(in oklch, var(--color-background) 34%, transparent) 42%,
+    color-mix(in oklch, var(--color-background) 10%, transparent) 72%,
+    transparent 100%
+  );
+}
+
+.sidebar-fade-bottom {
+  bottom: 0;
+  background: linear-gradient(
+    to top,
+    color-mix(in oklch, var(--color-background) 68%, transparent) 0%,
+    color-mix(in oklch, var(--color-background) 34%, transparent) 42%,
+    color-mix(in oklch, var(--color-background) 10%, transparent) 72%,
+    transparent 100%
+  );
+}
+
+.sidebar-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background: color-mix(in oklch, var(--color-foreground) 32%, transparent);
+  background-clip: content-box;
+  border: 3px solid transparent;
+  border-radius: 999px;
+}
+
+.inspector-slider {
+  height: 36px;
+  overflow: hidden;
+  border: 1px solid var(--color-separator);
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--color-foreground) 5%, transparent);
+}
+
+.inspector-slider > span:first-child {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  border-radius: 0;
+  background: transparent;
+}
+
+.inspector-slider > span:first-child > span {
+  height: 100%;
+  border-radius: 0;
+  background: color-mix(in oklch, var(--color-foreground) 10%, transparent);
+}
+
+.inspector-slider > span:last-child > [role="slider"] {
+  width: 2px;
+  height: 24px;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--color-foreground) 22%, transparent);
+  box-shadow: none;
 }
 
 /* Button press feedback — scale-down on active, matching Emil's 0.97 rule */
@@ -115,11 +228,41 @@ button {
   }
 }
 
-/* Subtle dotted backdrop for the live preview stage */
 .motion-stage {
+  --stage-background: var(--color-background);
+  --stage-mark: color-mix(in oklch, var(--color-foreground) 14%, transparent);
+  background-color: var(--stage-background);
+  transition:
+    background-color 0.22s ease,
+    background-image 0.22s ease;
+}
+
+.motion-stage[data-canvas-tone="light"] {
+  --stage-background: oklch(1 0 0);
+  --stage-mark: rgba(0, 0, 0, 0.12);
+}
+
+.motion-stage[data-canvas-tone="dark"] {
+  --stage-background: oklch(0.145 0 0);
+  --stage-mark: rgba(255, 255, 255, 0.12);
+}
+
+.motion-stage[data-bg-mode="dots"],
+.motion-stage:not([data-bg-mode]) {
   background-image: radial-gradient(
-    var(--color-separator) 1px,
+    var(--stage-mark) 1px,
     transparent 1px
   );
   background-size: 16px 16px;
 }
+
+.motion-stage[data-bg-mode="grid"] {
+  background-image:
+    linear-gradient(var(--stage-mark) 1px, transparent 1px),
+    linear-gradient(90deg, var(--stage-mark) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+
+.motion-stage[data-bg-mode="solid"] {
+  background-image: none;
+}
diff --git a/settings-window.html b/settings-window.html
index a08ae7c..031d10a 100644
--- a/settings-window.html
+++ b/settings-window.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Settings</title>
     <script>
       if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -27,4 +28,3 @@
     <script type="module" src="./renderer/settings/index.tsx"></script>
   </body>
 </html>
-
