diff --git a/app/globals.css b/app/globals.css
index 9ca2d70..6def69c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,11 +12,20 @@
   --accent: #4f7a58;
   --accent-soft: #dbe6dd;
   --accent-ink: #2f5d35;
+  --danger: #e11d48;
+  --danger-hover: #be123c;
+  --danger-contrast: #fff8fb;
   --danger-soft: rgba(190, 24, 93, 0.08);
   --danger-ink: #be123c;
   --danger-line: rgba(190, 24, 93, 0.24);
   --line: rgba(23, 23, 23, 0.08);
   --line-strong: rgba(23, 23, 23, 0.14);
+  --shadow-surface: 0 22px 60px rgba(15, 23, 42, 0.08);
+  --shadow-elevated: 0 18px 44px rgba(15, 23, 42, 0.08);
+  --shadow-button: 0 16px 40px rgba(15, 23, 42, 0.18);
+  --shadow-button-hover: 0 20px 48px rgba(15, 23, 42, 0.24);
+  --shadow-toast: 0 18px 50px rgba(15, 23, 42, 0.12);
+  --shadow-accent: 0 16px 40px rgba(79, 122, 88, 0.1);
 }
 
 :root[data-theme="dark"] {
@@ -31,11 +40,20 @@
   --accent: #8db896;
   --accent-soft: rgba(141, 184, 150, 0.16);
   --accent-ink: #d7ecd9;
+  --danger: #ff6b93;
+  --danger-hover: #ff5b88;
+  --danger-contrast: #220710;
   --danger-soft: rgba(190, 24, 93, 0.16);
   --danger-ink: #ffb3c7;
   --danger-line: rgba(255, 179, 199, 0.28);
   --line: rgba(255, 255, 255, 0.1);
   --line-strong: rgba(255, 255, 255, 0.18);
+  --shadow-surface: 0 22px 60px rgba(0, 0, 0, 0.24);
+  --shadow-elevated: 0 18px 44px rgba(0, 0, 0, 0.22);
+  --shadow-button: 0 16px 40px rgba(0, 0, 0, 0.32);
+  --shadow-button-hover: 0 20px 48px rgba(0, 0, 0, 0.4);
+  --shadow-toast: 0 18px 50px rgba(0, 0, 0, 0.28);
+  --shadow-accent: 0 16px 40px rgba(79, 122, 88, 0.22);
   color-scheme: dark;
 }
 
diff --git a/components/dashboard-form-browser.tsx b/components/dashboard-form-browser.tsx
index e4352cb..526a5e5 100644
--- a/components/dashboard-form-browser.tsx
+++ b/components/dashboard-form-browser.tsx
@@ -6,10 +6,10 @@ import { ArrowDown, ArrowUp, LayoutGrid, Plus, TableProperties } from "lucide-re
 import { useEffect, useMemo, useState } from "react";
 
 import { createFormAction } from "@/app/(creator)/actions";
-import { Badge } from "@/components/ui/badge";
+import { FormStatusBadge } from "@/components/form-status-badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import type { FormListItem } from "@/lib/forms";
+import type { FormListItem } from "@/lib/form-types";
 import { cn, formatDate } from "@/lib/utils";
 
 type DashboardView = "grid" | "table";
@@ -155,9 +155,7 @@ export function DashboardFormBrowser({ forms }: { forms: FormListItem[] }) {
                 <div>
                   <div className="flex flex-wrap items-center gap-3">
                     <h2 className="font-display text-3xl text-[var(--ink)]">{form.title}</h2>
-                    <Badge className={form.status === "PUBLISHED" ? "rounded-full bg-[var(--accent-soft)] text-[var(--accent-ink)]" : "rounded-full"}>
-                      {form.status === "PUBLISHED" ? "Published" : "Draft"}
-                    </Badge>
+                    <FormStatusBadge status={form.status} />
                   </div>
                   <p className="mt-3 max-w-xl text-sm leading-6 text-[var(--muted)]">{form.description || "No description yet."}</p>
                 </div>
@@ -228,9 +226,7 @@ export function DashboardFormBrowser({ forms }: { forms: FormListItem[] }) {
                       </div>
                     </td>
                     <td className="px-5 py-4">
-                      <Badge className={form.status === "PUBLISHED" ? "rounded-full bg-[var(--accent-soft)] text-[var(--accent-ink)]" : "rounded-full"}>
-                        {form.status === "PUBLISHED" ? "Published" : "Draft"}
-                      </Badge>
+                      <FormStatusBadge status={form.status} />
                     </td>
                     <td className="px-5 py-4 text-[var(--muted)]">{form.responseCount}</td>
                     <td className="px-5 py-4 text-[var(--muted)]">{formatDate(form.updatedAt)}</td>
diff --git a/components/form-builder-panels.tsx b/components/form-builder-panels.tsx
new file mode 100644
index 0000000..c1a5692
--- /dev/null
+++ b/components/form-builder-panels.tsx
@@ -0,0 +1,304 @@
+import { Copy, Link as LinkIcon, LoaderCircle, MessagesSquare, Plus, Save, Settings2, Trash2, type LucideIcon } from "lucide-react";
+import Link from "next/link";
+import type { Dispatch, SetStateAction } from "react";
+
+import { FormStatusBadge } from "@/components/form-status-badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  blockTypeLabels,
+  isQuestionBlock,
+  type BlockConfig,
+  type ChoiceBlockConfig,
+  type LongTextBlockConfig,
+  type ShortTextBlockConfig,
+  type TextBlockConfig,
+} from "@/lib/blocks";
+import type { BuilderBlock, BuilderForm } from "@/lib/form-types";
+
+export type FormMetadataDraft = {
+  title: string;
+  description: string;
+  completionTitle: string;
+  completionMessage: string;
+  completionLinkLabel: string;
+  completionLinkUrl: string;
+  slug: string;
+};
+
+export function BuilderHeader({
+  form,
+  settingsSelected,
+  busy,
+  onOpenSettings,
+  onTogglePublished,
+}: {
+  form: BuilderForm;
+  settingsSelected: boolean;
+  busy: string | null;
+  onOpenSettings: () => void;
+  onTogglePublished: () => void;
+}) {
+  return (
+    <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--accent)]">Builder</p>
+        <div className="mt-3 flex flex-wrap items-center gap-3">
+          <h1 className="font-display text-4xl text-[var(--ink)]">{form.title}</h1>
+          <FormStatusBadge status={form.status} />
+        </div>
+        <p className="mt-2 text-sm leading-6 text-[var(--muted)]">Edit blocks, update settings, and review responses.</p>
+      </div>
+      <div className="flex flex-wrap items-center gap-3 lg:justify-end">
+        <Button variant={settingsSelected ? "default" : "secondary"} onClick={onOpenSettings}>
+          <Settings2 className="size-4" />
+          Settings
+        </Button>
+        <Link href={`/forms/${form.id}/responses`}>
+          <Button variant="secondary">
+            <MessagesSquare className="size-4" />
+            Responses ({form.responseCount})
+          </Button>
+        </Link>
+        <Button variant={form.status === "PUBLISHED" ? "secondary" : "default"} onClick={onTogglePublished}>
+          {busy === "publish" ? <LoaderCircle className="size-4 animate-spin" /> : <LinkIcon className="size-4" />}
+          {form.status === "PUBLISHED" ? "Unpublish" : "Publish form"}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+export function FormSettingsPanel({
+  metadataDraft,
+  setMetadataDraft,
+  shareHref,
+  copyShareLink,
+  deleteForm,
+  saveMetadata,
+  busy,
+}: {
+  metadataDraft: FormMetadataDraft;
+  setMetadataDraft: Dispatch<SetStateAction<FormMetadataDraft>>;
+  shareHref: string;
+  copyShareLink: () => void;
+  deleteForm: () => void;
+  saveMetadata: () => void;
+  busy: string | null;
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="font-display text-4xl text-[var(--ink)]">Settings</h2>
+      </div>
+
+      <div className="grid gap-5">
+        <label className="space-y-2 text-sm text-[var(--muted)]">
+          <span className="font-medium text-[var(--ink)]">Title</span>
+          <Input value={metadataDraft.title} onChange={(event) => setMetadataDraft((current) => ({ ...current, title: event.target.value }))} />
+        </label>
+        <label className="space-y-2 text-sm text-[var(--muted)]">
+          <span className="font-medium text-[var(--ink)]">Description</span>
+          <Textarea value={metadataDraft.description} onChange={(event) => setMetadataDraft((current) => ({ ...current, description: event.target.value }))} />
+        </label>
+        <label className="space-y-2 text-sm text-[var(--muted)]">
+          <span className="font-medium text-[var(--ink)]">Share URL slug</span>
+          <Input value={metadataDraft.slug} className="font-mono text-[13px]" onChange={(event) => setMetadataDraft((current) => ({ ...current, slug: event.target.value }))} />
+        </label>
+      </div>
+
+      <div className="space-y-5 border-t border-[color:var(--line)] pt-6">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent)]">After submission</p>
+          <p className="mt-2 text-sm leading-6 text-[var(--muted)]">
+            Customize what respondents see after they finish the form, including an optional next-step link.
+          </p>
+        </div>
+
+        <div className="grid gap-5">
+          <label className="space-y-2 text-sm text-[var(--muted)]">
+            <span className="font-medium text-[var(--ink)]">Completion title</span>
+            <Input value={metadataDraft.completionTitle} onChange={(event) => setMetadataDraft((current) => ({ ...current, completionTitle: event.target.value }))} />
+          </label>
+          <label className="space-y-2 text-sm text-[var(--muted)]">
+            <span className="font-medium text-[var(--ink)]">Completion message</span>
+            <Textarea value={metadataDraft.completionMessage} onChange={(event) => setMetadataDraft((current) => ({ ...current, completionMessage: event.target.value }))} />
+          </label>
+          <div className="grid gap-5 lg:grid-cols-2">
+            <label className="space-y-2 text-sm text-[var(--muted)]">
+              <span className="font-medium text-[var(--ink)]">Follow-up link label</span>
+              <Input value={metadataDraft.completionLinkLabel} placeholder="Read next steps" onChange={(event) => setMetadataDraft((current) => ({ ...current, completionLinkLabel: event.target.value }))} />
+            </label>
+            <label className="space-y-2 text-sm text-[var(--muted)]">
+              <span className="font-medium text-[var(--ink)]">Follow-up link URL</span>
+              <Input value={metadataDraft.completionLinkUrl} placeholder="https://example.com/next" onChange={(event) => setMetadataDraft((current) => ({ ...current, completionLinkUrl: event.target.value }))} />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 rounded-[20px] border border-[color:var(--line)] bg-[var(--bg-strong)] p-5 lg:grid-cols-[1fr_auto_auto] lg:items-center">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent)]">Public route</p>
+          <p className="mt-2 truncate font-mono text-[13px] text-[var(--ink)]">{shareHref}</p>
+          <p className="mt-1 text-xs text-[var(--muted)]">
+            Published forms accept anonymous submissions. Changes to a published form go live immediately.
+          </p>
+        </div>
+        <Button variant="secondary" onClick={copyShareLink}>
+          <Copy className="size-4" />
+          Copy link
+        </Button>
+        <Link href={shareHref} target="_blank">
+          <Button variant="secondary">
+            <LinkIcon className="size-4" />
+            Open runner
+          </Button>
+        </Link>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--line)] pt-6">
+        <Button variant="danger" onClick={deleteForm}>
+          {busy === "delete-form" ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+          Delete form
+        </Button>
+        <Button onClick={saveMetadata}>
+          {busy === "metadata" ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
+          Save form settings
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function BlockEditorPanel({
+  blockDraft,
+  selectedBlockIcon: SelectedBlockIcon,
+  choiceOptionsDraft,
+  setChoiceOptionsDraft,
+  setBlockDraft,
+  deleteBlock,
+  saveBlock,
+  busy,
+}: {
+  blockDraft: BuilderBlock;
+  selectedBlockIcon: LucideIcon | null;
+  choiceOptionsDraft: string;
+  setChoiceOptionsDraft: (value: string) => void;
+  setBlockDraft: Dispatch<SetStateAction<BuilderBlock | null>>;
+  deleteBlock: (blockId: string) => void;
+  saveBlock: () => void;
+  busy: string | null;
+}) {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-center gap-3">
+          {SelectedBlockIcon ? <SelectedBlockIcon className="size-6 text-[var(--ink)]" /> : null}
+          <h2 className="font-display text-4xl text-[var(--ink)]">{blockTypeLabels[blockDraft.type]}</h2>
+        </div>
+        <span className="inline-flex size-8 items-center justify-center rounded-full border border-[color:var(--line-strong)] bg-[var(--accent-soft)] text-sm font-semibold text-[var(--accent-ink)]">
+          {blockDraft.position + 1}
+        </span>
+      </div>
+
+      <div className="grid gap-5">
+        <label className="space-y-2 text-sm text-[var(--muted)]">
+          <span className="font-medium text-[var(--ink)]">Prompt</span>
+          <Input value={blockDraft.title} onChange={(event) => setBlockDraft((current) => (current ? { ...current, title: event.target.value } : current))} />
+        </label>
+        <label className="space-y-2 text-sm text-[var(--muted)]">
+          <span className="font-medium text-[var(--ink)]">Support text</span>
+          <Textarea value={blockDraft.description} onChange={(event) => setBlockDraft((current) => (current ? { ...current, description: event.target.value } : current))} />
+        </label>
+
+        {blockDraft.type === "TEXT" ? (
+          <label className="space-y-2 text-sm text-[var(--muted)]">
+            <span className="font-medium text-[var(--ink)]">Body copy</span>
+            <Textarea
+              value={(blockDraft.config as TextBlockConfig).body}
+              onChange={(event) => setBlockDraft((current) => (current ? { ...current, config: { body: event.target.value } as BlockConfig } : current))}
+            />
+          </label>
+        ) : null}
+
+        {(blockDraft.type === "SHORT_TEXT" || blockDraft.type === "LONG_TEXT") && (
+          <label className="space-y-2 text-sm text-[var(--muted)]">
+            <span className="font-medium text-[var(--ink)]">Placeholder</span>
+            <Input
+              value={blockDraft.type === "SHORT_TEXT" ? (blockDraft.config as ShortTextBlockConfig).placeholder : (blockDraft.config as LongTextBlockConfig).placeholder}
+              onChange={(event) =>
+                setBlockDraft((current) =>
+                  current ? { ...current, config: { placeholder: event.target.value } as BlockConfig } : current,
+                )
+              }
+            />
+          </label>
+        )}
+
+        {(blockDraft.type === "SINGLE_CHOICE" || blockDraft.type === "MULTIPLE_CHOICE") && (
+          <label className="space-y-2 text-sm text-[var(--muted)]">
+            <span className="font-medium text-[var(--ink)]">Choice options</span>
+            <Textarea
+              value={choiceOptionsDraft}
+              onChange={(event) => {
+                setChoiceOptionsDraft(event.target.value);
+                setBlockDraft((current) =>
+                  current
+                    ? {
+                        ...current,
+                        config: { options: event.target.value.split("\n") } as BlockConfig,
+                      }
+                    : current,
+                );
+              }}
+            />
+            <p className="text-xs text-[var(--muted)]">Use one option per line. We’ll keep the first 10 non-empty values.</p>
+          </label>
+        )}
+
+        {isQuestionBlock(blockDraft.type) ? (
+          <label className="flex items-center gap-3 rounded-xl border border-[color:var(--line)] bg-[var(--bg-strong)] px-4 py-3 text-sm text-[var(--ink)]">
+            <input
+              checked={blockDraft.required}
+              className="size-4 rounded border-[color:var(--line-strong)]"
+              type="checkbox"
+              onChange={(event) => setBlockDraft((current) => (current ? { ...current, required: event.target.checked } : current))}
+            />
+            Mark this question as required
+          </label>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--line)] pt-6">
+        <Button variant="danger" onClick={() => deleteBlock(blockDraft.id)}>
+          {busy === `delete-${blockDraft.id}` ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+          Delete block
+        </Button>
+        <Button onClick={saveBlock}>
+          {busy === `block-${blockDraft.id}` ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
+          Save block
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function EmptyEditorState({ onAddShortText }: { onAddShortText: () => void }) {
+  return (
+    <div className="flex min-h-[420px] items-center justify-center rounded-[20px] border border-dashed border-[color:var(--line)] bg-[var(--bg-strong)] p-10 text-center">
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--accent)]">Nothing selected</p>
+        <h2 className="mt-4 font-display text-4xl text-[var(--ink)]">Select a block or open form settings.</h2>
+        <p className="mx-auto mt-3 max-w-lg text-sm leading-6 text-[var(--muted)]">Use the left panel to choose what you want to edit.</p>
+        <div className="mt-6 flex justify-center">
+          <Button variant="secondary" onClick={onAddShortText}>
+            <Plus className="size-4" />
+            Add a short text question
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/form-builder.tsx b/components/form-builder.tsx
index 41f9ce6..44172a1 100644
--- a/components/form-builder.tsx
+++ b/components/form-builder.tsx
@@ -17,62 +17,33 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
-  Copy,
   GripVertical,
-  Link as LinkIcon,
   LoaderCircle,
-  Plus,
-  MessagesSquare,
   Radio,
   Rows3,
-  Save,
-  Settings2,
   SquareCheck,
   TextCursorInput,
-  Trash2,
   Type,
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
+import {
+  BlockEditorPanel,
+  BuilderHeader,
+  EmptyEditorState,
+  FormSettingsPanel,
+  type FormMetadataDraft,
+} from "@/components/form-builder-panels";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { ToastViewport, type ToastData } from "@/components/ui/toast";
-import { Textarea } from "@/components/ui/textarea";
+import { blockTypeLabels, getBlockPreview, type ChoiceBlockConfig } from "@/lib/blocks";
+import type { BuilderBlock, BuilderForm } from "@/lib/form-types";
 import { cn } from "@/lib/utils";
 
-type BlockType = "TEXT" | "SHORT_TEXT" | "LONG_TEXT" | "SINGLE_CHOICE" | "MULTIPLE_CHOICE";
-
-type TextConfig = { body: string };
-type PlaceholderConfig = { placeholder: string };
-type ChoiceConfig = { options: string[] };
-
-type BuilderBlock = {
-  id: string;
-  type: BlockType;
-  title: string;
-  description: string;
-  required: boolean;
-  position: number;
-  config: TextConfig | PlaceholderConfig | ChoiceConfig;
-};
-
-type BuilderForm = {
-  id: string;
-  title: string;
-  description: string;
-  completionTitle: string;
-  completionMessage: string;
-  completionLinkLabel: string | null;
-  completionLinkUrl: string | null;
-  slug: string;
-  status: "DRAFT" | "PUBLISHED";
-  updatedAt: string;
-  responseCount: number;
-  blocks: BuilderBlock[];
-};
+type BlockType = BuilderBlock["type"];
 
 type Selection = { kind: "form" } | { kind: "block"; blockId: string };
 
@@ -84,14 +55,6 @@ const blockIcons: Record<BlockType, typeof Type> = {
   MULTIPLE_CHOICE: SquareCheck,
 };
 
-const blockLabels: Record<BlockType, string> = {
-  TEXT: "Text block",
-  SHORT_TEXT: "Short text",
-  LONG_TEXT: "Long text",
-  SINGLE_CHOICE: "Single choice",
-  MULTIPLE_CHOICE: "Multiple choice",
-};
-
 const blockCreationOrder: BlockType[] = ["TEXT", "SHORT_TEXT", "LONG_TEXT", "SINGLE_CHOICE", "MULTIPLE_CHOICE"];
 
 async function fetchJson<T>(url: string, init?: RequestInit) {
@@ -112,30 +75,6 @@ async function fetchJson<T>(url: string, init?: RequestInit) {
   return payload;
 }
 
-function getBlockPreview(block: BuilderBlock) {
-  if (block.title.trim()) {
-    return block.title;
-  }
-
-  if (block.type === "TEXT") {
-    return (block.config as TextConfig).body;
-  }
-
-  if ("placeholder" in block.config) {
-    return block.config.placeholder;
-  }
-
-  if ("options" in block.config) {
-    return block.config.options.join(" • ");
-  }
-
-  return blockLabels[block.type];
-}
-
-function isQuestion(type: BlockType) {
-  return type !== "TEXT";
-}
-
 function BlockRowInner({
   block,
   onSelect,
@@ -154,7 +93,7 @@ function BlockRowInner({
         <div className="flex items-center justify-between gap-2 text-[var(--muted)]">
           <div className="flex min-w-0 items-center gap-1.5">
             <Icon className="size-3.5 shrink-0" />
-            <span className="truncate text-[10px] font-semibold uppercase tracking-[0.18em]">{blockLabels[block.type]}</span>
+            <span className="truncate text-[10px] font-semibold uppercase tracking-[0.18em]">{blockTypeLabels[block.type]}</span>
           </div>
           <span className="inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-[color:var(--line-strong)] bg-[var(--accent-soft)] text-[10px] font-semibold text-[var(--accent-ink)]">
             {block.position + 1}
@@ -187,7 +126,7 @@ function SortableBlockRow({
       className={cn(
         "group flex items-center gap-2.5 rounded-[16px] border px-3 py-3 transition",
         selected
-          ? "border-[var(--accent)] bg-[var(--surface-strong)] shadow-[0_18px_44px_rgba(15,23,42,0.08)]"
+          ? "border-[var(--accent)] bg-[var(--surface-strong)] shadow-[var(--shadow-elevated)]"
           : "border-[color:var(--line)] bg-[var(--surface)] hover:bg-[var(--surface-strong)]",
       )}
     >
@@ -223,7 +162,7 @@ function StaticBlockRow({
       className={cn(
         "group flex items-center gap-2.5 rounded-[16px] border px-3 py-3 transition",
         selected
-          ? "border-[var(--accent)] bg-[var(--surface-strong)] shadow-[0_18px_44px_rgba(15,23,42,0.08)]"
+          ? "border-[var(--accent)] bg-[var(--surface-strong)] shadow-[var(--shadow-elevated)]"
           : "border-[color:var(--line)] bg-[var(--surface)] hover:bg-[var(--surface-strong)]",
       )}
     >
@@ -250,7 +189,7 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
   const [busy, setBusy] = useState<string | null>(null);
   const [isDndReady, setIsDndReady] = useState(false);
 
-  const [metadataDraft, setMetadataDraft] = useState({
+  const [metadataDraft, setMetadataDraft] = useState<FormMetadataDraft>({
     title: initialForm.title,
     description: initialForm.description,
     completionTitle: initialForm.completionTitle,
@@ -268,7 +207,7 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
   const [blockDraft, setBlockDraft] = useState<BuilderBlock | null>(selectedBlock);
   const [choiceOptionsDraft, setChoiceOptionsDraft] = useState(
     selectedBlock && (selectedBlock.type === "SINGLE_CHOICE" || selectedBlock.type === "MULTIPLE_CHOICE")
-      ? (selectedBlock.config as ChoiceConfig).options.join("\n")
+      ? (selectedBlock.config as ChoiceBlockConfig).options.join("\n")
       : "",
   );
   const SelectedBlockIcon = blockDraft ? blockIcons[blockDraft.type] : null;
@@ -291,7 +230,7 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
     setBlockDraft(selectedBlock);
     setChoiceOptionsDraft(
       selectedBlock && (selectedBlock.type === "SINGLE_CHOICE" || selectedBlock.type === "MULTIPLE_CHOICE")
-        ? (selectedBlock.config as ChoiceConfig).options.join("\n")
+        ? (selectedBlock.config as ChoiceBlockConfig).options.join("\n")
         : "",
     );
   }, [selectedBlock]);
@@ -346,7 +285,7 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
         blocks: [...current.blocks, payload.block],
       }));
       setSelection({ kind: "block", blockId: payload.block.id });
-      showToast(`Added ${blockLabels[type].toLowerCase()}`);
+      showToast(`Added ${blockTypeLabels[type].toLowerCase()}`);
     });
   }
 
@@ -475,35 +414,13 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
     <>
       <ToastViewport toasts={toasts} onDismiss={dismissToast} />
       <div className="space-y-6">
-        <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--accent)]">Builder</p>
-          <div className="mt-3 flex flex-wrap items-center gap-3">
-            <h1 className="font-display text-4xl text-[var(--ink)]">{form.title}</h1>
-            <Badge className={cn("rounded-full", form.status === "PUBLISHED" && "bg-[var(--accent-soft)] text-[var(--accent-ink)]")}>{form.status}</Badge>
-          </div>
-          <p className="mt-2 text-sm leading-6 text-[var(--muted)]">Edit blocks, update settings, and review responses.</p>
-        </div>
-        <div className="flex flex-wrap items-center gap-3 lg:justify-end">
-          <Button
-            variant={selection.kind === "form" ? "default" : "secondary"}
-            onClick={() => setSelection({ kind: "form" })}
-          >
-            <Settings2 className="size-4" />
-            Settings
-          </Button>
-          <Link href={`/forms/${form.id}/responses`}>
-            <Button variant="secondary">
-              <MessagesSquare className="size-4" />
-              Responses ({form.responseCount})
-            </Button>
-          </Link>
-          <Button variant={form.status === "PUBLISHED" ? "secondary" : "default"} onClick={togglePublished}>
-            {busy === "publish" ? <LoaderCircle className="size-4 animate-spin" /> : <LinkIcon className="size-4" />}
-            {form.status === "PUBLISHED" ? "Unpublish" : "Publish form"}
-          </Button>
-        </div>
-      </section>
+        <BuilderHeader
+          form={form}
+          settingsSelected={selection.kind === "form"}
+          busy={busy}
+          onOpenSettings={() => setSelection({ kind: "form" })}
+          onTogglePublished={togglePublished}
+        />
 
         <div className="grid gap-6 lg:grid-cols-[340px_minmax(0,1fr)]">
         <Card className="p-5">
@@ -553,7 +470,7 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
                     onClick={() => addBlock(type)}
                   >
                     {busy === `add-${type}` ? <LoaderCircle className="size-4 animate-spin" /> : <Icon className="size-4" />}
-                    {blockLabels[type]}
+                    {blockTypeLabels[type]}
                   </Button>
                 );
               })}
@@ -563,229 +480,28 @@ export function FormBuilder({ initialForm }: { initialForm: BuilderForm }) {
 
         <Card className="p-6 lg:p-8">
           {selection.kind === "form" ? (
-            <div className="space-y-6">
-              <div>
-                <h2 className="font-display text-4xl text-[var(--ink)]">Settings</h2>
-              </div>
-
-              <div className="grid gap-5">
-                <label className="space-y-2 text-sm text-[var(--muted)]">
-                  <span className="font-medium text-[var(--ink)]">Title</span>
-                  <Input value={metadataDraft.title} onChange={(event) => setMetadataDraft((current) => ({ ...current, title: event.target.value }))} />
-                </label>
-                <label className="space-y-2 text-sm text-[var(--muted)]">
-                  <span className="font-medium text-[var(--ink)]">Description</span>
-                  <Textarea
-                    value={metadataDraft.description}
-                    onChange={(event) => setMetadataDraft((current) => ({ ...current, description: event.target.value }))}
-                  />
-                </label>
-                <label className="space-y-2 text-sm text-[var(--muted)]">
-                  <span className="font-medium text-[var(--ink)]">Share URL slug</span>
-                  <Input
-                    value={metadataDraft.slug}
-                    className="font-mono text-[13px]"
-                    onChange={(event) => setMetadataDraft((current) => ({ ...current, slug: event.target.value }))}
-                  />
-                </label>
-              </div>
-
-              <div className="space-y-5 border-t border-[color:var(--line)] pt-6">
-                <div>
-                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent)]">After submission</p>
-                  <p className="mt-2 text-sm leading-6 text-[var(--muted)]">
-                    Customize what respondents see after they finish the form, including an optional next-step link.
-                  </p>
-                </div>
-
-                <div className="grid gap-5">
-                  <label className="space-y-2 text-sm text-[var(--muted)]">
-                    <span className="font-medium text-[var(--ink)]">Completion title</span>
-                    <Input
-                      value={metadataDraft.completionTitle}
-                      onChange={(event) => setMetadataDraft((current) => ({ ...current, completionTitle: event.target.value }))}
-                    />
-                  </label>
-                  <label className="space-y-2 text-sm text-[var(--muted)]">
-                    <span className="font-medium text-[var(--ink)]">Completion message</span>
-                    <Textarea
-                      value={metadataDraft.completionMessage}
-                      onChange={(event) => setMetadataDraft((current) => ({ ...current, completionMessage: event.target.value }))}
-                    />
-                  </label>
-                  <div className="grid gap-5 lg:grid-cols-2">
-                    <label className="space-y-2 text-sm text-[var(--muted)]">
-                      <span className="font-medium text-[var(--ink)]">Follow-up link label</span>
-                      <Input
-                        value={metadataDraft.completionLinkLabel}
-                        placeholder="Read next steps"
-                        onChange={(event) => setMetadataDraft((current) => ({ ...current, completionLinkLabel: event.target.value }))}
-                      />
-                    </label>
-                    <label className="space-y-2 text-sm text-[var(--muted)]">
-                      <span className="font-medium text-[var(--ink)]">Follow-up link URL</span>
-                      <Input
-                        value={metadataDraft.completionLinkUrl}
-                        placeholder="https://example.com/next"
-                        onChange={(event) => setMetadataDraft((current) => ({ ...current, completionLinkUrl: event.target.value }))}
-                      />
-                    </label>
-                  </div>
-                </div>
-              </div>
-
-              <div className="grid gap-4 rounded-[20px] border border-[color:var(--line)] bg-[var(--bg-strong)] p-5 lg:grid-cols-[1fr_auto_auto] lg:items-center">
-                <div>
-                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent)]">Public route</p>
-                  <p className="mt-2 truncate font-mono text-[13px] text-[var(--ink)]">{shareHref}</p>
-                  <p className="mt-1 text-xs text-[var(--muted)]">
-                    Published forms accept anonymous submissions. Changes to a published form go live immediately.
-                  </p>
-                </div>
-                <Button variant="secondary" onClick={copyShareLink}>
-                  <Copy className="size-4" />
-                  Copy link
-                </Button>
-                <Link href={shareHref} target="_blank">
-                  <Button variant="secondary">
-                    <LinkIcon className="size-4" />
-                    Open runner
-                  </Button>
-                </Link>
-              </div>
-
-              <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--line)] pt-6">
-                <Button variant="danger" onClick={deleteForm}>
-                  {busy === "delete-form" ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
-                  Delete form
-                </Button>
-                <Button onClick={saveMetadata}>
-                  {busy === "metadata" ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
-                  Save form settings
-                </Button>
-              </div>
-            </div>
+            <FormSettingsPanel
+              metadataDraft={metadataDraft}
+              setMetadataDraft={setMetadataDraft}
+              shareHref={shareHref}
+              copyShareLink={copyShareLink}
+              deleteForm={deleteForm}
+              saveMetadata={saveMetadata}
+              busy={busy}
+            />
           ) : blockDraft ? (
-            <div className="space-y-6">
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-center gap-3">
-                  {SelectedBlockIcon ? <SelectedBlockIcon className="size-6 text-[var(--ink)]" /> : null}
-                  <h2 className="font-display text-4xl text-[var(--ink)]">{blockLabels[blockDraft.type]}</h2>
-                </div>
-                <span className="inline-flex size-8 items-center justify-center rounded-full border border-[color:var(--line-strong)] bg-[var(--accent-soft)] text-sm font-semibold text-[var(--accent-ink)]">
-                  {blockDraft.position + 1}
-                </span>
-              </div>
-
-              <div className="grid gap-5">
-                <label className="space-y-2 text-sm text-[var(--muted)]">
-                  <span className="font-medium text-[var(--ink)]">Prompt</span>
-                  <Input
-                    value={blockDraft.title}
-                    onChange={(event) => setBlockDraft((current) => (current ? { ...current, title: event.target.value } : current))}
-                  />
-                </label>
-                <label className="space-y-2 text-sm text-[var(--muted)]">
-                  <span className="font-medium text-[var(--ink)]">Support text</span>
-                  <Textarea
-                    value={blockDraft.description}
-                    onChange={(event) => setBlockDraft((current) => (current ? { ...current, description: event.target.value } : current))}
-                  />
-                </label>
-
-                {blockDraft.type === "TEXT" ? (
-                  <label className="space-y-2 text-sm text-[var(--muted)]">
-                    <span className="font-medium text-[var(--ink)]">Body copy</span>
-                    <Textarea
-                      value={(blockDraft.config as TextConfig).body}
-                      onChange={(event) =>
-                        setBlockDraft((current) =>
-                          current ? { ...current, config: { body: event.target.value } } : current,
-                        )
-                      }
-                    />
-                  </label>
-                ) : null}
-
-                {(blockDraft.type === "SHORT_TEXT" || blockDraft.type === "LONG_TEXT") && (
-                  <label className="space-y-2 text-sm text-[var(--muted)]">
-                    <span className="font-medium text-[var(--ink)]">Placeholder</span>
-                    <Input
-                      value={(blockDraft.config as PlaceholderConfig).placeholder}
-                      onChange={(event) =>
-                        setBlockDraft((current) =>
-                          current ? { ...current, config: { placeholder: event.target.value } } : current,
-                        )
-                      }
-                    />
-                  </label>
-                )}
-
-                {(blockDraft.type === "SINGLE_CHOICE" || blockDraft.type === "MULTIPLE_CHOICE") && (
-                  <label className="space-y-2 text-sm text-[var(--muted)]">
-                    <span className="font-medium text-[var(--ink)]">Choice options</span>
-                    <Textarea
-                      value={choiceOptionsDraft}
-                      onChange={(event) => {
-                        setChoiceOptionsDraft(event.target.value);
-                        setBlockDraft((current) =>
-                          current
-                            ? {
-                                ...current,
-                                config: {
-                                  options: event.target.value.split("\n"),
-                                },
-                              }
-                            : current,
-                        );
-                      }}
-                    />
-                    <p className="text-xs text-[var(--muted)]">Use one option per line. We’ll keep the first 10 non-empty values.</p>
-                  </label>
-                )}
-
-                {isQuestion(blockDraft.type) ? (
-                  <label className="flex items-center gap-3 rounded-xl border border-[color:var(--line)] bg-[var(--bg-strong)] px-4 py-3 text-sm text-[var(--ink)]">
-                    <input
-                      checked={blockDraft.required}
-                      className="size-4 rounded border-[color:var(--line-strong)]"
-                      type="checkbox"
-                      onChange={(event) =>
-                        setBlockDraft((current) => (current ? { ...current, required: event.target.checked } : current))
-                      }
-                    />
-                    Mark this question as required
-                  </label>
-                ) : null}
-              </div>
-
-              <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--line)] pt-6">
-                <Button variant="danger" onClick={() => deleteBlock(blockDraft.id)}>
-                  {busy === `delete-${blockDraft.id}` ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
-                  Delete block
-                </Button>
-                <Button onClick={saveBlock}>
-                  {busy === `block-${blockDraft.id}` ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
-                  Save block
-                </Button>
-              </div>
-            </div>
+            <BlockEditorPanel
+              blockDraft={blockDraft}
+              selectedBlockIcon={SelectedBlockIcon}
+              choiceOptionsDraft={choiceOptionsDraft}
+              setChoiceOptionsDraft={setChoiceOptionsDraft}
+              setBlockDraft={setBlockDraft}
+              deleteBlock={deleteBlock}
+              saveBlock={saveBlock}
+              busy={busy}
+            />
           ) : (
-            <div className="flex min-h-[420px] items-center justify-center rounded-[20px] border border-dashed border-[color:var(--line)] bg-[var(--bg-strong)] p-10 text-center">
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--accent)]">Nothing selected</p>
-                <h2 className="mt-4 font-display text-4xl text-[var(--ink)]">Select a block or open form settings.</h2>
-                <p className="mx-auto mt-3 max-w-lg text-sm leading-6 text-[var(--muted)]">
-                  Use the left panel to choose what you want to edit.
-                </p>
-                <div className="mt-6 flex justify-center">
-                  <Button variant="secondary" onClick={() => addBlock("SHORT_TEXT")}>
-                    <Plus className="size-4" />
-                    Add a short text question
-                  </Button>
-                </div>
-              </div>
-            </div>
+            <EmptyEditorState onAddShortText={() => addBlock("SHORT_TEXT")} />
           )}
         </Card>
         </div>
diff --git a/components/form-status-badge.tsx b/components/form-status-badge.tsx
new file mode 100644
index 0000000..e5d4f50
--- /dev/null
+++ b/components/form-status-badge.tsx
@@ -0,0 +1,18 @@
+import type { FormStatus } from "@prisma/client";
+
+import { Badge } from "@/components/ui/badge";
+import { cn, sentenceCase } from "@/lib/utils";
+
+export function FormStatusBadge({ status, className }: { status: FormStatus; className?: string }) {
+  return (
+    <Badge
+      className={cn(
+        "rounded-full",
+        status === "PUBLISHED" && "bg-[var(--accent-soft)] text-[var(--accent-ink)]",
+        className,
+      )}
+    >
+      {sentenceCase(status)}
+    </Badge>
+  );
+}
diff --git a/components/loading-shell.tsx b/components/loading-shell.tsx
index 291da1a..2d898c0 100644
--- a/components/loading-shell.tsx
+++ b/components/loading-shell.tsx
@@ -4,8 +4,8 @@ export function LoadingShell({ title }: { title: string }) {
       <div className="h-4 w-24 animate-pulse rounded-full bg-[var(--line)]" />
       <div className="h-12 w-64 animate-pulse rounded-full bg-[var(--line)]" />
       <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-        <div className="h-[420px] animate-pulse rounded-[20px] bg-[var(--surface)] shadow-[0_22px_60px_rgba(15,23,42,0.08)]" />
-        <div className="h-[420px] animate-pulse rounded-[20px] bg-[var(--surface)] shadow-[0_22px_60px_rgba(15,23,42,0.08)]" />
+        <div className="h-[420px] animate-pulse rounded-[20px] bg-[var(--surface)] shadow-[var(--shadow-surface)]" />
+        <div className="h-[420px] animate-pulse rounded-[20px] bg-[var(--surface)] shadow-[var(--shadow-surface)]" />
       </div>
       <p className="text-sm text-[var(--muted)]">Loading {title}…</p>
     </div>
diff --git a/components/public-form-runner.tsx b/components/public-form-runner.tsx
index c997090..717776e 100644
--- a/components/public-form-runner.tsx
+++ b/components/public-form-runner.tsx
@@ -11,35 +11,10 @@ import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { ToastViewport, type ToastData } from "@/components/ui/toast";
 import { Textarea } from "@/components/ui/textarea";
+import type { ChoiceBlockConfig, LongTextBlockConfig, ShortTextBlockConfig, TextBlockConfig } from "@/lib/blocks";
+import type { PublicForm } from "@/lib/form-types";
 import { cn } from "@/lib/utils";
 
-type BlockType = "TEXT" | "SHORT_TEXT" | "LONG_TEXT" | "SINGLE_CHOICE" | "MULTIPLE_CHOICE";
-
-type PublicBlock = {
-  id: string;
-  type: BlockType;
-  title: string;
-  description: string;
-  required: boolean;
-  position: number;
-  config:
-    | { body: string }
-    | { placeholder: string }
-    | { options: string[] };
-};
-
-type PublicForm = {
-  id: string;
-  title: string;
-  description: string;
-  completionTitle: string;
-  completionMessage: string;
-  completionLinkLabel: string | null;
-  completionLinkUrl: string | null;
-  slug: string;
-  blocks: PublicBlock[];
-};
-
 async function submitResponse(slug: string, answers: Record<string, string | string[]>) {
   const response = await fetch(`/api/public/forms/${slug}/responses`, {
     method: "POST",
@@ -241,7 +216,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
                   {currentBlock.title || "Take a breath before the next step."}
                 </h2>
                 {currentBlock.description ? <p className="mt-5 max-w-2xl text-base leading-8 text-[var(--muted)]">{currentBlock.description}</p> : null}
-                <p className="mt-6 max-w-3xl text-lg leading-9 text-[var(--ink)]/82">{(currentBlock.config as { body: string }).body}</p>
+                <p className="mt-6 max-w-3xl text-lg leading-9 text-[var(--ink)]/82">{(currentBlock.config as TextBlockConfig).body}</p>
               </div>
             ) : (
               <div className="flex min-h-[320px] flex-col justify-center">
@@ -270,7 +245,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
                   {currentBlock.type === "SHORT_TEXT" ? (
                     <Input
                       className="h-14 text-base placeholder:text-[var(--muted)]/65"
-                      placeholder={(currentBlock.config as { placeholder: string }).placeholder}
+                      placeholder={(currentBlock.config as ShortTextBlockConfig).placeholder}
                       value={typeof answers[currentBlock.id] === "string" ? answers[currentBlock.id] : ""}
                       onChange={(event) => setAnswer(currentBlock.id, event.target.value)}
                     />
@@ -279,7 +254,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
                   {currentBlock.type === "LONG_TEXT" ? (
                     <Textarea
                       className="min-h-[180px] text-base placeholder:text-[var(--muted)]/65"
-                      placeholder={(currentBlock.config as { placeholder: string }).placeholder}
+                      placeholder={(currentBlock.config as LongTextBlockConfig).placeholder}
                       value={typeof answers[currentBlock.id] === "string" ? answers[currentBlock.id] : ""}
                       onChange={(event) => setAnswer(currentBlock.id, event.target.value)}
                     />
@@ -287,7 +262,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
 
                   {currentBlock.type === "SINGLE_CHOICE" ? (
                     <div className="grid gap-3">
-                      {(currentBlock.config as { options: string[] }).options.map((option) => {
+                      {(currentBlock.config as ChoiceBlockConfig).options.map((option) => {
                         const selected = answers[currentBlock.id] === option;
 
                         return (
@@ -297,7 +272,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
                             className={cn(
                               "flex items-center justify-between rounded-[18px] border px-5 py-4 text-left transition",
                               selected
-                                ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--ink)] shadow-[0_12px_28px_rgba(79,122,88,0.08)]"
+                                ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--ink)] shadow-[var(--shadow-accent)]"
                                 : "border-[color:var(--line)] bg-[var(--surface-strong)] text-[var(--ink)] hover:bg-[var(--surface)]",
                             )}
                             onClick={() => setAnswer(currentBlock.id, option)}
@@ -316,7 +291,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
 
                   {currentBlock.type === "MULTIPLE_CHOICE" ? (
                     <div className="grid gap-3">
-                      {(currentBlock.config as { options: string[] }).options.map((option) => {
+                      {(currentBlock.config as ChoiceBlockConfig).options.map((option) => {
                         const rawValues = answers[currentBlock.id];
                         const currentValues: string[] = Array.isArray(rawValues) ? rawValues : [];
                         const selected = currentValues.includes(option);
@@ -328,7 +303,7 @@ export function PublicFormRunner({ form }: { form: PublicForm }) {
                             className={cn(
                               "flex items-center justify-between rounded-[18px] border px-5 py-4 text-left transition",
                               selected
-                                ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--ink)] shadow-[0_12px_28px_rgba(79,122,88,0.08)]"
+                                ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--ink)] shadow-[var(--shadow-accent)]"
                                 : "border-[color:var(--line)] bg-[var(--surface-strong)] text-[var(--ink)] hover:bg-[var(--surface)]",
                             )}
                             onClick={() => {
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 3ed3d9d..c16bb11 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 import {
   THEME_STORAGE_KEY,
+  applyResolvedTheme,
   applyThemePreference,
   persistThemePreference,
   readStoredThemePreference,
@@ -39,8 +40,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         return;
       }
 
-      const nextResolved = event.matches ? "dark" : "light";
-      document.documentElement.dataset.theme = nextResolved;
+      const nextResolved = applyResolvedTheme(document.documentElement, currentPreference, event.matches);
       setResolvedTheme(nextResolved);
     };
 
diff --git a/components/theme-settings-panel.tsx b/components/theme-settings-panel.tsx
index 361a804..965b683 100644
--- a/components/theme-settings-panel.tsx
+++ b/components/theme-settings-panel.tsx
@@ -59,7 +59,7 @@ export function ThemeSettingsPanel() {
               className={cn(
                 "rounded-[18px] border p-5 text-left transition",
                 selected
-                  ? "border-[var(--accent)] bg-[var(--accent-soft)] shadow-[0_16px_40px_rgba(79,122,88,0.10)]"
+                  ? "border-[var(--accent)] bg-[var(--accent-soft)] shadow-[var(--shadow-accent)]"
                   : "border-[color:var(--line)] bg-[var(--surface-strong)] hover:bg-[var(--surface)]",
               )}
               aria-pressed={selected}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index ce6c439..b1ddf6d 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -9,13 +9,13 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-[var(--ink)] px-5 py-3 text-[var(--bg)] shadow-[0_16px_40px_rgba(15,23,42,0.18)] hover:-translate-y-0.5 hover:shadow-[0_20px_48px_rgba(15,23,42,0.24)] focus-visible:ring-[var(--ink)]",
+          "bg-[var(--ink)] px-5 py-3 text-[var(--bg)] shadow-[var(--shadow-button)] hover:-translate-y-0.5 hover:shadow-[var(--shadow-button-hover)] focus-visible:ring-[var(--ink)]",
         secondary:
           "bg-[var(--surface-strong)] px-5 py-3 text-[var(--ink)] ring-1 ring-[color:var(--line)] hover:bg-[var(--surface)] focus-visible:ring-[var(--ink)]",
         ghost:
           "px-3 py-2 text-[var(--muted)] hover:bg-[var(--accent-soft)] hover:text-[var(--ink)] focus-visible:ring-[var(--ink)]",
         danger:
-          "bg-[var(--surface-strong)] px-5 py-3 text-[var(--muted)] ring-1 ring-[color:var(--line)] hover:bg-[#ef4444] hover:text-white hover:ring-[#ef4444] focus-visible:ring-[#ef4444]",
+          "bg-[var(--surface-strong)] px-5 py-3 text-[var(--muted)] ring-1 ring-[color:var(--line)] hover:bg-[var(--danger-hover)] hover:text-[var(--danger-contrast)] hover:ring-[var(--danger-hover)] focus-visible:ring-[var(--danger-hover)]",
       },
       size: {
         default: "h-11",
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 0729991..9661553 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -6,7 +6,7 @@ export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       className={cn(
-        "rounded-[20px] border border-[color:var(--line)] bg-[var(--surface)] shadow-[0_22px_60px_rgba(15,23,42,0.08)] backdrop-blur-sm",
+        "rounded-[20px] border border-[color:var(--line)] bg-[var(--surface)] shadow-[var(--shadow-surface)] backdrop-blur-sm",
         className,
       )}
       {...props}
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index cdd9fd0..7921911 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -38,7 +38,7 @@ function ToastItem({
       exit={{ opacity: 0, x: 24, y: -8, scale: 0.98 }}
       transition={{ duration: 0.18, ease: "easeOut" }}
       className={cn(
-        "pointer-events-auto flex items-start gap-3 rounded-xl border bg-[var(--bg-strong)] px-4 py-3 shadow-[0_18px_50px_rgba(15,23,42,0.12)]",
+        "pointer-events-auto flex items-start gap-3 rounded-xl border bg-[var(--bg-strong)] px-4 py-3 shadow-[var(--shadow-toast)]",
         toast.variant === "error"
           ? "border-[color:var(--danger-line)] text-[var(--danger-ink)]"
           : "border-[color:var(--accent)] text-[var(--accent-ink)]",
diff --git a/lib/form-types.ts b/lib/form-types.ts
new file mode 100644
index 0000000..2783def
--- /dev/null
+++ b/lib/form-types.ts
@@ -0,0 +1,59 @@
+import type { FormStatus } from "@prisma/client";
+
+import type { SerializedBlock } from "@/lib/blocks";
+
+export type BuilderBlock = SerializedBlock;
+export type PublicBlock = SerializedBlock;
+export type AnswerValue = string | string[];
+
+export type BuilderForm = {
+  id: string;
+  title: string;
+  description: string;
+  completionTitle: string;
+  completionMessage: string;
+  completionLinkLabel: string | null;
+  completionLinkUrl: string | null;
+  slug: string;
+  status: FormStatus;
+  updatedAt: string;
+  responseCount: number;
+  blocks: BuilderBlock[];
+};
+
+export type PublicForm = {
+  id: string;
+  title: string;
+  description: string;
+  completionTitle: string;
+  completionMessage: string;
+  completionLinkLabel: string | null;
+  completionLinkUrl: string | null;
+  slug: string;
+  blocks: PublicBlock[];
+};
+
+export type FormListItem = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  status: FormStatus;
+  updatedAt: string;
+  responseCount: number;
+};
+
+export type ResponseListItem = {
+  id: string;
+  submittedAt: string;
+  answerCount: number;
+  submissionNumber: number;
+};
+
+export type ResponseDetail = {
+  id: string;
+  submittedAt: string;
+  submissionNumber: number;
+  answers: Record<string, AnswerValue>;
+  blocks: SerializedBlock[];
+};
diff --git a/lib/forms.ts b/lib/forms.ts
index 8a2cea7..ddbe0a6 100644
--- a/lib/forms.ts
+++ b/lib/forms.ts
@@ -17,6 +17,13 @@ import {
 } from "@/lib/blocks";
 import { db } from "@/lib/db";
 import { AppError } from "@/lib/errors";
+import type {
+  BuilderForm,
+  FormListItem,
+  PublicForm,
+  ResponseDetail,
+  ResponseListItem,
+} from "@/lib/form-types";
 import {
   blockUpdateSchema,
   createBlockSchema,
@@ -67,57 +74,13 @@ const snapshotBlockSchema = z.object({
   config: z.unknown(),
 });
 
-export type BuilderForm = {
-  id: string;
-  title: string;
-  description: string;
-  completionTitle: string;
-  completionMessage: string;
-  completionLinkLabel: string | null;
-  completionLinkUrl: string | null;
-  slug: string;
-  status: FormStatus;
-  updatedAt: string;
-  responseCount: number;
-  blocks: SerializedBlock[];
-};
-
-export type PublicForm = {
-  id: string;
-  title: string;
-  description: string;
-  completionTitle: string;
-  completionMessage: string;
-  completionLinkLabel: string | null;
-  completionLinkUrl: string | null;
-  slug: string;
-  blocks: SerializedBlock[];
-};
-
-export type FormListItem = {
-  id: string;
-  title: string;
-  description: string;
-  slug: string;
-  status: FormStatus;
-  updatedAt: string;
-  responseCount: number;
-};
-
-export type ResponseListItem = {
-  id: string;
-  submittedAt: string;
-  answerCount: number;
-  submissionNumber: number;
-};
-
-export type ResponseDetail = {
-  id: string;
-  submittedAt: string;
-  submissionNumber: number;
-  answers: Record<string, string | string[]>;
-  blocks: SerializedBlock[];
-};
+export type {
+  BuilderForm,
+  FormListItem,
+  PublicForm,
+  ResponseDetail,
+  ResponseListItem,
+} from "@/lib/form-types";
 
 function toBuilderForm(form: BuilderFormRecord): BuilderForm {
   return {
diff --git a/lib/theme.ts b/lib/theme.ts
index ec0555c..cadb9f5 100644
--- a/lib/theme.ts
+++ b/lib/theme.ts
@@ -9,6 +9,10 @@ export function isThemePreference(value: unknown): value is ThemePreference {
   return typeof value === "string" && THEME_PREFERENCES.includes(value as ThemePreference);
 }
 
+export function normalizeThemePreference(value: unknown): ThemePreference {
+  return isThemePreference(value) ? value : "system";
+}
+
 export function resolveTheme(preference: ThemePreference, systemPrefersDark: boolean): ResolvedTheme {
   if (preference === "system") {
     return systemPrefersDark ? "dark" : "light";
@@ -17,19 +21,23 @@ export function resolveTheme(preference: ThemePreference, systemPrefersDark: boo
   return preference;
 }
 
-export function applyThemePreference(preference: ThemePreference) {
-  const resolved = resolveTheme(preference, window.matchMedia("(prefers-color-scheme: dark)").matches);
-  const root = document.documentElement;
+export function applyResolvedTheme(root: HTMLElement, preference: ThemePreference, systemPrefersDark: boolean) {
+  const resolved = resolveTheme(preference, systemPrefersDark);
 
   root.dataset.themePreference = preference;
   root.dataset.theme = resolved;
   root.style.colorScheme = resolved;
+
+  return resolved;
+}
+
+export function applyThemePreference(preference: ThemePreference) {
+  return applyResolvedTheme(document.documentElement, preference, window.matchMedia("(prefers-color-scheme: dark)").matches);
 }
 
 export function readStoredThemePreference(): ThemePreference {
   try {
-    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
-    return isThemePreference(stored) ? stored : "system";
+    return normalizeThemePreference(window.localStorage.getItem(THEME_STORAGE_KEY));
   } catch {
     return "system";
   }
@@ -43,22 +51,27 @@ export function persistThemePreference(preference: ThemePreference) {
   }
 }
 
-export const themeInitScript = `(() => {
-  const storageKey = ${JSON.stringify(THEME_STORAGE_KEY)};
-  const root = document.documentElement;
-  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+export function createThemeInitScript() {
+  return `(() => {
+    const storageKey = ${JSON.stringify(THEME_STORAGE_KEY)};
+    const validPreferences = ${JSON.stringify(THEME_PREFERENCES)};
+    const root = document.documentElement;
+    const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-  let preference = "system";
+    let preference = "system";
 
-  try {
-    const stored = window.localStorage.getItem(storageKey);
-    if (stored === "light" || stored === "dark" || stored === "system") {
-      preference = stored;
-    }
-  } catch {}
+    try {
+      const stored = window.localStorage.getItem(storageKey);
+      if (validPreferences.includes(stored)) {
+        preference = stored;
+      }
+    } catch {}
 
-  const resolved = preference === "system" ? (systemDark ? "dark" : "light") : preference;
-  root.dataset.themePreference = preference;
-  root.dataset.theme = resolved;
-  root.style.colorScheme = resolved;
-})();`;
+    const resolved = preference === "system" ? (systemDark ? "dark" : "light") : preference;
+    root.dataset.themePreference = preference;
+    root.dataset.theme = resolved;
+    root.style.colorScheme = resolved;
+  })();`;
+}
+
+export const themeInitScript = createThemeInitScript();