diff --git a/.agents/skills/roids/SKILL.md b/.agents/skills/roids/SKILL.md
new file mode 100644
index 0000000000..41990749e9
--- /dev/null
+++ b/.agents/skills/roids/SKILL.md
@@ -0,0 +1,20 @@
+---
+name: roids
+description: Use when presenting more than one comparable UI direction, or proactively whenever you ship multiple layout options for the user to choose—do not wait for the user to mention Roids or type /roids. Use for comparison, preview-first, or pick-a-winner flows before cleanup. Default to a small set of variants (~2–5) unless the user specifies how many.
+metadata:
+  version: "1.0.0"
+---
+
+# Roids
+
+Compare variants in the browser with the hosted runtime and markup contract.
+
+## How it works
+
+1. Fetch the source URL below (documentation only—never load it as `<script src>`).
+2. Follow `SKILL.txt` exactly—wire `https://tryroids.com/roid-tool.js` and `data-roid-*` when showing multiple variants.
+3. Do not use custom tabs, selects, or one-off pickers for those variants.
+
+## Source
+
+`https://tryroids.com/SKILL.txt`
diff --git a/apps/dashboard/DESIGN-GUIDE.md b/apps/dashboard/DESIGN-GUIDE.md
index 7923f49fdb..6dcd934511 100644
--- a/apps/dashboard/DESIGN-GUIDE.md
+++ b/apps/dashboard/DESIGN-GUIDE.md
@@ -50,6 +50,8 @@ Use this when implementing a new dashboard UI quickly:
    - Use `DesignDataTable`.
 11. Need dropdown action/selector/toggle menu?
    - Use `DesignMenu`.
+12. Need a focus-trapping modal/dialog (confirmation, rich modal, tester, form)?
+   - Use `DesignDialog`.
 
 ---
 
@@ -57,10 +59,13 @@ Use this when implementing a new dashboard UI quickly:
 
 `@/components/ui/*` can still be used for primitives that do not currently have a design-components equivalent:
 
-- dialogs/sheets/popovers (`ActionDialog`, `FormDialog`, `Sheet`, etc.)
+- confirmation-pattern helpers like `ActionDialog` / `FormDialog` (these wrap an `onClick`/form submit lifecycle and remain useful when you only need a dressed-up confirm/submit prompt)
+- side-sheets/popovers (`Sheet`, `Popover`, etc.)
 - complex layout containers where design-components does not provide one
 - highly specialized editor internals
 
+For any general-purpose modal surface (rich detail dialogs, tester surfaces, data dialogs, settings popovers presented as modals), use `DesignDialog` instead of wiring `Dialog` + `DialogContent` + `DialogHeader` etc. by hand. `DesignDialog` is the canonical glassmorphic dialog surface for the dashboard — see §22 below.
+
 When using a primitive directly:
 
 - keep visual style compatible with design-components surfaces
@@ -567,6 +572,99 @@ Rules:
 - keep as optional enhancement, not required UX
 - avoid distracting overuse in production-critical flows
 
+### 4.14 `DesignDialog`
+
+File: `packages/dashboard-ui-components/src/components/dialog.tsx` (re-exported through `@/components/design-components`)
+
+Use for:
+
+- any focus-trapping modal in the dashboard (confirmations, rich detail dialogs, tester surfaces, settings forms presented as modals)
+- replacing hand-wired `Dialog` + `DialogContent` + `DialogHeader` combinations from `@stackframe/stack-ui`
+
+Props you should use most:
+
+- `trigger`: element wrapped in a `DialogTrigger`. Skip when controlling externally via `open`/`onOpenChange`/`defaultOpen`.
+- `size`: `"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full"` (defaults to `"lg"`).
+- `variant`: `"glassmorphic"` (default) or `"plain"`. `glassmorphic` applies the dashboard's blurred surface + dimmed overlay.
+- `icon`: a Phosphor icon component (or `null` to skip the chip).
+- `title` / `description`: standard header text. `title` is automatically wired into `DialogTitle` for a11y.
+- `headerContent`: rich content rendered below the icon/title block — use this for embedded summary cards, metric tiles, or status pills inside the header.
+- `customHeader`: complete override of the header region. You become responsible for rendering an accessible `DialogTitle`.
+- `footer`: footer node rendered in a styled bottom bar. Wrap close buttons in `DesignDialogClose asChild` (re-exported by the same module).
+- `noBodyPadding`: disable the default `px-6 py-4` padding for full-bleed body content.
+- `hideTopCloseButton`: hide the top-right "X" rendered by `DialogContent` for fully custom close affordances.
+- `bodyClassName` / `headerClassName` / `footerClassName` / `overlayClassName` / `className`: fine-grained class overrides for each region.
+
+Re-exports (import these from the same module — do not mix with `@stackframe/stack-ui` for the same dialog):
+
+- `DesignDialogClose` (alias of `DialogClose`)
+- `DesignDialogTrigger` (alias of `DialogTrigger`)
+- `DesignDialogTitle` / `DesignDialogDescription`
+- `DesignDialogRoot` (alias of `Dialog`) for the rare cases that need raw `Dialog.Root` semantics
+
+Rules:
+
+- Do not write `Dialog` + `DialogContent` + `DialogHeader` + `DialogBody` + `DialogFooter` directly when building a full-page modal — use `DesignDialog`.
+- When refactoring an existing dialog, preserve any `headerContent` summary cards, sparklines, or stat tiles by passing them via the `headerContent` prop rather than crafting a `customHeader` from scratch.
+- Footer slot already provides border + background + responsive flex; don't re-add wrapping divs with the same styling.
+- Use the smallest `size` that fits your content. `md`/`lg` for confirmations, `2xl`/`3xl` for detail dialogs with summary cards, `5xl`+ for tester/forms.
+
+Common shapes (for AI agents):
+
+```tsx
+// Confirmation
+<DesignDialog
+  trigger={<DesignButton size="sm">Open</DesignButton>}
+  icon={InfoIcon}
+  title="Heads up"
+  description="You're about to do something."
+  footer={
+    <DesignDialogClose asChild>
+      <DesignButton variant="secondary" size="sm">Close</DesignButton>
+    </DesignDialogClose>
+  }
+>
+  <p className="text-sm">Body content.</p>
+</DesignDialog>
+
+// Rich modal with summary card
+<DesignDialog
+  open={open}
+  onOpenChange={setOpen}
+  size="2xl"
+  icon={PulseIcon}
+  title="Rule trigger history"
+  description="3 total triggers"
+  headerContent={<SummaryCard />}
+  footer={
+    <DesignDialogClose asChild>
+      <DesignButton variant="secondary" size="sm">Close</DesignButton>
+    </DesignDialogClose>
+  }
+>
+  {/* recent triggers list */}
+</DesignDialog>
+
+// Wide tester / form
+<DesignDialog
+  trigger={<DesignButton size="sm">Open tester</DesignButton>}
+  size="5xl"
+  icon={FlaskIcon}
+  title="Test sign-up rules"
+  description="Simulate a sign-up request."
+  footer={
+    <>
+      <DesignDialogClose asChild>
+        <DesignButton variant="secondary" size="sm">Cancel</DesignButton>
+      </DesignDialogClose>
+      <DesignButton size="sm">Run test</DesignButton>
+    </>
+  }
+>
+  <TesterForm />
+</DesignDialog>
+```
+
 ---
 
 ## 5) Route-Specific Guidance (Project + Email Surfaces)
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
index 45703700d4..0b418fa6a3 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
@@ -19,10 +19,13 @@ import {
   Cube,
   Envelope,
   FileText,
+  FlaskIcon,
   HardDrive,
+  InfoIcon,
   MagnifyingGlassIcon,
   Package,
   PencilSimple,
+  PulseIcon,
   Sliders,
   Sparkle,
   StackSimple,
@@ -44,6 +47,10 @@ import {
   DesignButton,
   DesignCard,
   DesignCategoryTabs,
+  DesignDialog,
+  DesignDialogClose,
+  type DesignDialogSize,
+  type DesignDialogVariant,
   DesignInput,
   DesignPillToggle,
 } from "@stackframe/dashboard-ui-components";
@@ -62,6 +69,7 @@ type ComponentId =
   | "cursor-blast"
   | "data-grid"
   | "data-table"
+  | "dialog"
   | "editable-grid"
   | "input"
   | "list-item-row"
@@ -80,6 +88,7 @@ const COMPONENT_LIST: Array<{ value: ComponentId, label: string }> = [
   { value: "cursor-blast", label: "Cursor Blast Effect" },
   { value: "data-grid", label: "Data Grid" },
   { value: "data-table", label: "Data Table" },
+  { value: "dialog", label: "Dialog" },
   { value: "editable-grid", label: "Editable Grid" },
   { value: "input", label: "Input" },
   { value: "list-item-row", label: "List Item Row" },
@@ -399,6 +408,16 @@ export default function PageClient() {
   const [tableGlass, setTableGlass] = useState<boolean | undefined>(undefined);
   const [tableShowToolbar, setTableShowToolbar] = useState(false);
 
+  // Dialog
+  const [dialogShape, setDialogShape] = useState<"confirm" | "rich" | "wide">("confirm");
+  const [dialogSize, setDialogSize] = useState<DesignDialogSize>("md");
+  const [dialogVariant, setDialogVariant] = useState<DesignDialogVariant>("glassmorphic");
+  const [dialogTitle, setDialogTitle] = useState("Heads up");
+  const [dialogDescription, setDialogDescription] = useState("This is a lightweight confirmation modal.");
+  const [dialogShowFooter, setDialogShowFooter] = useState(true);
+  const [dialogShowIcon, setDialogShowIcon] = useState(true);
+  const [dialogHideTopClose, setDialogHideTopClose] = useState(false);
+
   // Editable Grid
   const [gridCols, setGridCols] = useState<1 | 2>(2);
   const [gridMode, setGridMode] = useState<"basic" | "full">("basic");
@@ -900,6 +919,108 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "dialog") {
+      const dialogTriggerLabel = dialogShape === "rich"
+        ? "Open trigger history"
+        : dialogShape === "wide"
+          ? "Open tester"
+          : "Open confirmation";
+      const dialogIcon = dialogShowIcon
+        ? (dialogShape === "rich" ? PulseIcon : dialogShape === "wide" ? FlaskIcon : InfoIcon)
+        : null;
+      const headerContent = dialogShape === "rich" ? (
+        <div className="rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-3 space-y-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-sm font-semibold truncate flex-1 min-w-0">Allow @stack.dev signups</span>
+            <DesignBadge label="Allow" color="green" size="sm" />
+            <DesignBadge label="Enabled" color="green" size="sm" />
+          </div>
+          <div className="grid grid-cols-3 gap-2">
+            <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2">
+              <span className="block text-[10px] uppercase tracking-wider text-muted-foreground">Last 24h</span>
+              <span className="text-sm font-semibold tabular-nums">12</span>
+            </div>
+            <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2">
+              <span className="block text-[10px] uppercase tracking-wider text-muted-foreground">All-time</span>
+              <span className="text-sm font-semibold tabular-nums">3</span>
+            </div>
+            <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2 flex items-center justify-center">
+              <span className="text-[10px] text-muted-foreground">sparkline</span>
+            </div>
+          </div>
+        </div>
+      ) : undefined;
+
+      let body: React.ReactNode;
+      if (dialogShape === "rich") {
+        body = (
+          <>
+            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Recent triggers</span>
+            <div className="rounded-xl ring-1 ring-foreground/[0.06] bg-background/60 divide-y divide-foreground/[0.06]">
+              {["jordan@stack.dev", "ops@stack.dev", "pat@stack.dev"].map((email) => (
+                <div key={email} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
+                  <span className="truncate">{email}</span>
+                  <DesignBadge label="2m ago" color="blue" size="sm" />
+                </div>
+              ))}
+            </div>
+          </>
+        );
+      } else if (dialogShape === "wide") {
+        body = (
+          <>
+            <DesignAlert
+              variant="info"
+              description="Use a wider size for forms and tester surfaces. The body region is scrollable."
+            />
+            <DesignCard>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <DesignInput placeholder="Email" />
+                <DesignInput placeholder="Country (e.g. US)" />
+              </div>
+            </DesignCard>
+          </>
+        );
+      } else {
+        body = (
+          <p className="text-sm">
+            Body content lives in the scrollable region between the header and the footer.
+            Use it for short messages, inline forms, or detail views.
+          </p>
+        );
+      }
+
+      const footer = dialogShowFooter ? (
+        dialogShape === "wide" ? (
+          <>
+            <DesignDialogClose asChild>
+              <DesignButton variant="secondary" size="sm">Cancel</DesignButton>
+            </DesignDialogClose>
+            <DesignButton size="sm">Run test</DesignButton>
+          </>
+        ) : (
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm">Close</DesignButton>
+          </DesignDialogClose>
+        )
+      ) : undefined;
+
+      return (
+        <DesignDialog
+          size={dialogSize}
+          variant={dialogVariant}
+          icon={dialogIcon}
+          title={dialogTitle || "Dialog"}
+          description={dialogDescription || undefined}
+          headerContent={headerContent}
+          footer={footer}
+          hideTopCloseButton={dialogHideTopClose}
+          trigger={<DesignButton size="sm">{dialogTriggerLabel}</DesignButton>}
+        >
+          {body}
+        </DesignDialog>
+      );
+    }
     if (selected === "data-table") {
       return (
         <div className="w-full max-w-2xl">
@@ -1598,6 +1719,100 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "dialog") {
+      const sizeOptions: Array<{ value: DesignDialogSize, label: string }> = [
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" },
+        { value: "xl", label: "XL" },
+        { value: "2xl", label: "2XL" },
+        { value: "3xl", label: "3XL" },
+        { value: "4xl", label: "4XL" },
+        { value: "5xl", label: "5XL" },
+        { value: "6xl", label: "6XL" },
+        { value: "7xl", label: "7XL" },
+        { value: "full", label: "Full" },
+      ];
+      return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
+          <PropField label="Shape">
+            <DesignSelectorDropdown
+              value={dialogShape}
+              onValueChange={(v) => {
+                if (v === "confirm" || v === "rich" || v === "wide") {
+                  setDialogShape(v);
+                  if (v === "confirm") {
+                    setDialogSize("md");
+                    setDialogTitle("Heads up");
+                    setDialogDescription("This is a lightweight confirmation modal.");
+                  } else if (v === "rich") {
+                    setDialogSize("2xl");
+                    setDialogTitle("Rule trigger history");
+                    setDialogDescription("3 total triggers for this rule");
+                  } else {
+                    setDialogSize("5xl");
+                    setDialogTitle("Test sign-up rules");
+                    setDialogDescription("Simulate a sign-up request to see which rules trigger.");
+                  }
+                  return;
+                }
+                throw new Error(`Unknown dialog shape "${v}"`);
+              }}
+              options={[
+                { value: "confirm", label: "Confirmation" },
+                { value: "rich", label: "Rule trigger history" },
+                { value: "wide", label: "Open tester" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Size">
+            <DesignSelectorDropdown
+              value={dialogSize}
+              onValueChange={(v) => {
+                const match = sizeOptions.find((o) => o.value === v);
+                if (!match) throw new Error(`Unknown dialog size "${v}"`);
+                setDialogSize(match.value);
+              }}
+              options={sizeOptions}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Variant">
+            <DesignSelectorDropdown
+              value={dialogVariant}
+              onValueChange={(v) => {
+                if (v === "glassmorphic" || v === "plain") {
+                  setDialogVariant(v);
+                  return;
+                }
+                throw new Error(`Unknown dialog variant "${v}"`);
+              }}
+              options={[
+                { value: "glassmorphic", label: "Glassmorphic" },
+                { value: "plain", label: "Plain" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Title">
+            <DesignInput size="sm" value={dialogTitle} onChange={(e) => setDialogTitle(e.target.value)} />
+          </PropField>
+          <PropField label="Description">
+            <DesignInput size="sm" value={dialogDescription} onChange={(e) => setDialogDescription(e.target.value)} placeholder="(empty = none)" />
+          </PropField>
+          <PropField label="Header Icon">
+            <BoolToggle value={dialogShowIcon} onChange={setDialogShowIcon} on="Show" off="Hide" />
+          </PropField>
+          <PropField label="Footer">
+            <BoolToggle value={dialogShowFooter} onChange={setDialogShowFooter} on="Show" off="Hide" />
+          </PropField>
+          <PropField label="Top-right Close">
+            <BoolToggle value={!dialogHideTopClose} onChange={(v) => setDialogHideTopClose(!v)} on="Show" off="Hide" />
+          </PropField>
+        </div>
+      );
+    }
     if (selected === "editable-grid") {
       return (
         <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
@@ -2053,6 +2268,39 @@ export default function PageClient() {
   toolbar={${dgShowToolbar}}
   maxHeight={400}
 />`;
+    }
+    if (selected === "dialog") {
+      const dialogTriggerLabel = dialogShape === "rich"
+        ? "Open trigger history"
+        : dialogShape === "wide"
+          ? "Open tester"
+          : "Open confirmation";
+      const iconImport = dialogShowIcon
+        ? (dialogShape === "rich" ? "PulseIcon" : dialogShape === "wide" ? "FlaskIcon" : "InfoIcon")
+        : null;
+      const iconProp = iconImport ? `\n  icon={${iconImport}}` : `\n  icon={null}`;
+      const descProp = dialogDescription ? `\n  description="${escapeAttr(dialogDescription)}"` : "";
+      const variantProp = dialogVariant === "glassmorphic" ? "" : `\n  variant="${dialogVariant}"`;
+      const hideCloseProp = dialogHideTopClose ? `\n  hideTopCloseButton` : "";
+      const headerContentProp = dialogShape === "rich"
+        ? `\n  headerContent={\n    <div className=\"rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-3 space-y-3\">\n      {/* summary card: title row + 3 stat tiles */}\n    </div>\n  }`
+        : "";
+      const footerProp = dialogShowFooter
+        ? (dialogShape === "wide"
+          ? `\n  footer={\n    <>\n      <DesignDialogClose asChild>\n        <DesignButton variant=\"secondary\" size=\"sm\">Cancel</DesignButton>\n      </DesignDialogClose>\n      <DesignButton size=\"sm\">Run test</DesignButton>\n    </>\n  }`
+          : `\n  footer={\n    <DesignDialogClose asChild>\n      <DesignButton variant=\"secondary\" size=\"sm\">Close</DesignButton>\n    </DesignDialogClose>\n  }`)
+        : "";
+      const bodySnippet = dialogShape === "rich"
+        ? `\n  <span className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Recent triggers</span>\n  {/* recent triggers list */}`
+        : dialogShape === "wide"
+          ? `\n  <DesignAlert variant=\"info\" description=\"Wide-form body content\" />\n  {/* tester form */}`
+          : `\n  <p className=\"text-sm\">Body content lives here.</p>`;
+      return `<DesignDialog
+  size="${dialogSize}"${variantProp}${iconProp}
+  title="${escapeAttr(dialogTitle || "Dialog")}"${descProp}${headerContentProp}${footerProp}${hideCloseProp}
+  trigger={<DesignButton size="sm">${escapeAttr(dialogTriggerLabel)}</DesignButton>}
+>${bodySnippet}
+</DesignDialog>`;
     }
     if (selected === "data-table") {
       const glassProp = tableGlass === undefined ? "" : `\n  glassmorphic={${tableGlass}}`;
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
index 190cb66cd8..a2d129719d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
@@ -1,18 +1,42 @@
 "use client";
 
-import { EmailVerificationSetting } from "@/components/email-verification-setting";
 import { InlineSaveDiscard } from "@/components/inline-save-discard";
-import { SettingCard, SettingSelect, SettingSwitch } from "@/components/settings";
-import { ActionDialog, Badge, BrandIcons, BrowserFrame, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, SelectItem, SimpleTooltip, Typography } from "@/components/ui";
+import { ActionDialog, BrandIcons, BrowserFrame, Label, SimpleTooltip, Switch, Typography } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
-import { AsteriskIcon, DotsThreeIcon, KeyIcon, LinkIcon, PlusCircleIcon } from "@phosphor-icons/react";
+import {
+  DesignAlert,
+  DesignBadge,
+  DesignButton,
+  DesignCard,
+  DesignCardTint,
+  DesignInput,
+} from "@stackframe/dashboard-ui-components";
+import { DesignMenu, type DesignMenuActionItem } from "@/components/design-components/menu";
+import { DesignSelectorDropdown } from "@/components/design-components/select";
+import {
+  AsteriskIcon,
+  EnvelopeSimpleIcon,
+  EyeIcon,
+  GearSixIcon,
+  KeyIcon,
+  LinkIcon,
+  MagnifyingGlassIcon,
+  PlusCircleIcon,
+  PowerIcon,
+  SignInIcon,
+  TrashIcon,
+  UserCircleIcon,
+  UserPlusIcon,
+} from "@phosphor-icons/react";
 import { AdminProject, AuthPage } from "@stackframe/stack";
 import type { CompleteConfig } from "@stackframe/stack-shared/dist/config/schema";
+import type { RestrictedReason } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 import { allProviders } from "@stackframe/stack-shared/dist/utils/oauth";
 import { typedFromEntries } from "@stackframe/stack-shared/dist/utils/objects";
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from "../use-admin-app";
@@ -22,6 +46,10 @@ type AdminOAuthProviderConfig = AdminProject['config']['oauthProviders'][number]
 
 type OAuthAccountMergeStrategy = 'link_method' | 'raise_error' | 'allow_duplicates';
 
+const SHARED_TOOLTIP = "Shared keys are automatically created by Stack, but show Stack's logo on the OAuth sign-in page.\n\nYou should replace these before you go into production.";
+
+// ─── Confirmation dialogs ─────────────────────────────────────────────────
+
 function ConfirmSignUpEnabledDialog(props: {
   open?: boolean,
   onOpenChange?: (open: boolean) => void,
@@ -39,9 +67,11 @@ function ConfirmSignUpEnabledDialog(props: {
       }}
       cancelButton
     >
-      <Typography>
-        Do you really want to enable sign-up for your project? Anyone will be able to create an account on your project.
-      </Typography>
+      <DesignAlert
+        variant="warning"
+        title="Anyone will be able to create an account"
+        description="Enabling sign-up means new accounts can be created from your auth pages without admin approval. You can disable it again at any time."
+      />
     </ActionDialog>
   );
 }
@@ -63,15 +93,16 @@ function ConfirmSignUpDisabledDialog(props: {
       }}
       cancelButton
     >
-      <Typography>
-        Do you really want to disable sign-up for your project? No one except for the project admins will be able to create new accounts. However, existing users will still be able to sign in.
-      </Typography>
+      <DesignAlert
+        variant="warning"
+        title="No new accounts can be created"
+        description="Existing users can still sign in. Only project admins will be able to create new accounts going forward."
+      />
     </ActionDialog>
   );
 }
 
 function adminProviderToConfigProvider(provider: AdminOAuthProviderConfig): CompleteConfig['auth']['oauth']['providers'][string] {
-  // TODO: Remove this function (and the AdminOAuthProviderConfig type) and use the new config everywhere instead. Then we can also make allowSignIn and allowConnectedAccounts configurable
   switch (provider.type) {
     case 'shared': {
       return {
@@ -126,11 +157,12 @@ function DisabledProvidersDialog({ open, onOpenChange }: { open?: boolean, onOpe
     onOpenChange={onOpenChange}
     cancelButton
   >
-    <Input
+    <DesignInput
       className="mb-4"
       placeholder="Search for a provider..."
       value={providerSearch}
       onChange={(e) => setProviderSearch(e.target.value)}
+      leadingIcon={<MagnifyingGlassIcon size={14} />}
     />
     <div className="flex gap-2 flex-wrap justify-center">
       {filteredProviders
@@ -145,7 +177,6 @@ function DisabledProvidersDialog({ open, onOpenChange }: { open?: boolean, onOpe
                 configUpdate: {
                   [`auth.oauth.providers.${provider.id}`]: adminProviderToConfigProvider(provider),
                 },
-                // OAuth client ID/secret are environment-level (not pushable)
                 pushable: false,
               });
             }}
@@ -161,12 +192,16 @@ function DisabledProvidersDialog({ open, onOpenChange }: { open?: boolean, onOpe
           />;
         })}
 
-      { filteredProviders.length === 0 && <Typography variant="secondary">No providers found.</Typography> }
+      { filteredProviders.length === 0 && (
+        <Typography variant="secondary">No providers found.</Typography>
+      ) }
     </div>
 
   </ActionDialog>;
 }
 
+// ─── Provider action menu (dots) ──────────────────────────────────────────
+
 function OAuthActionCell({ config }: { config: AdminOAuthProviderConfig }) {
   const stackAdminApp = useAdminApp();
   const updateConfig = useUpdateConfig();
@@ -179,7 +214,6 @@ function OAuthActionCell({ config }: { config: AdminOAuthProviderConfig }) {
       configUpdate: {
         [`auth.oauth.providers.${provider.id}`]: adminProviderToConfigProvider(provider),
       },
-      // OAuth client ID/secret are environment-level (not pushable)
       pushable: false,
     });
   };
@@ -194,8 +228,24 @@ function OAuthActionCell({ config }: { config: AdminOAuthProviderConfig }) {
     });
   };
 
+  const items: DesignMenuActionItem[] = [
+    {
+      id: "configure",
+      label: "Configure",
+      icon: <GearSixIcon size={14} />,
+      onClick: () => setProviderSettingDialogOpen(true),
+    },
+    {
+      id: "disable",
+      label: "Disable Provider",
+      icon: <PowerIcon size={14} />,
+      itemVariant: "destructive",
+      onClick: () => setTurnOffProviderDialogOpen(true),
+    },
+  ];
+
   return (
-    <DropdownMenu>
+    <>
       <TurnOffProviderDialog
         open={turnOffProviderDialogOpen}
         onClose={() => setTurnOffProviderDialogOpen(false)}
@@ -213,28 +263,255 @@ function OAuthActionCell({ config }: { config: AdminOAuthProviderConfig }) {
         deleteProvider={deleteProvider}
       />
 
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <span className="sr-only">Open menu</span>
-          <DotsThreeIcon className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => { setProviderSettingDialogOpen(true); }}>
-          Configure
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="text-red-400"
-          onClick={() => { setTurnOffProviderDialogOpen(true); }}
-        >
-          Disable Provider
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <DesignMenu
+        variant="actions"
+        trigger="icon"
+        triggerLabel="Open menu"
+        align="end"
+        withIcons
+        items={items}
+      />
+    </>
   );
 }
 
-const SHARED_TOOLTIP = "Shared keys are automatically created by Stack, but show Stack's logo on the OAuth sign-in page.\n\nYou should replace these before you go into production.";
+// ─── Method toggle row (used everywhere) ──────────────────────────────────
+
+type MethodIcon = React.ElementType;
+
+function MethodToggleRow({
+  icon: Icon,
+  label,
+  hint,
+  checked,
+  onCheckedChange,
+  density = "default",
+}: {
+  icon: MethodIcon,
+  label: string,
+  hint?: string,
+  checked: boolean,
+  onCheckedChange: (checked: boolean) => void,
+  density?: "compact" | "default" | "card",
+}) {
+  const id = useId();
+  const padding = density === "compact" ? "px-3 py-2.5" : density === "card" ? "p-4" : "px-3.5 py-3";
+  const innerRing = density === "card"
+    ? "bg-foreground/[0.03] ring-1 ring-black/[0.06] dark:ring-white/[0.06] rounded-2xl"
+    : "rounded-xl hover:bg-foreground/[0.03] transition-colors duration-150 hover:transition-none";
+  const iconSize = density === "card" ? 20 : 18;
+
+  return (
+    <Label
+      htmlFor={id}
+      className={`flex items-center gap-3 cursor-pointer ${innerRing} ${padding}`}
+    >
+      <div className="p-2 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04] shrink-0">
+        <Icon size={iconSize} className="text-foreground/70 dark:text-muted-foreground" aria-hidden="true" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-foreground truncate">{label}</div>
+        {hint && <div className="text-xs text-muted-foreground mt-0.5">{hint}</div>}
+      </div>
+      <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />
+    </Label>
+  );
+}
+
+// ─── Provider row ─────────────────────────────────────────────────────────
+
+function ProviderInlineRow({ provider }: { provider: AdminOAuthProviderConfig }) {
+  return (
+    <DesignCardTint gradient="default" className="px-4 py-3">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <ProviderIcon id={provider.id} size="sm" />
+          <span className="text-sm font-semibold text-foreground truncate">{BrandIcons.toTitle(provider.id)}</span>
+          {provider.type === 'shared' && (
+            <SimpleTooltip tooltip={SHARED_TOOLTIP}>
+              <DesignBadge label="Shared keys" color="orange" size="sm" />
+            </SimpleTooltip>
+          )}
+        </div>
+        <OAuthActionCell config={provider} />
+      </div>
+    </DesignCardTint>
+  );
+}
+
+// ─── Live preview content ────────────────────────────────────────────────
+
+function LivePreviewBody({
+  config,
+  passwordEnabled,
+  otpEnabled,
+  passkeyEnabled,
+  enabledProviders,
+}: {
+  config: AdminProject['config'],
+  passwordEnabled: boolean,
+  otpEnabled: boolean,
+  passkeyEnabled: boolean,
+  enabledProviders: AdminOAuthProviderConfig[],
+}) {
+  return (
+    <div className="self-stretch py-2 min-w-[400px] items-center">
+      <BrowserFrame url="your-website.com/signin">
+        <div className="flex flex-col items-center justify-center min-h-[400px]">
+          <div className='w-full sm:max-w-xs m-auto scale-90 pointer-events-none' inert>
+            <div className="absolute inset-0 bg-transparent z-10"></div>
+            <AuthPage
+              type="sign-in"
+              mockProject={{
+                config: {
+                  ...config,
+                  credentialEnabled: passwordEnabled,
+                  magicLinkEnabled: otpEnabled,
+                  passkeyEnabled: passkeyEnabled,
+                  oauthProviders: enabledProviders,
+                },
+              }}
+            />
+          </div>
+        </div>
+      </BrowserFrame>
+    </div>
+  );
+}
+
+const MERGE_STRATEGY_SHORT: Record<OAuthAccountMergeStrategy, string> = {
+  link_method: "Link providers",
+  allow_duplicates: "Allow duplicates",
+  raise_error: "Block multiple",
+};
+
+// ─── Designed Email Verification toggle (logic copied from EmailVerificationSetting) ──
+
+type AffectedUser = {
+  id: string,
+  displayName: string | null,
+  primaryEmail: string | null,
+  restrictedReason: RestrictedReason,
+};
+
+type PendingChange = {
+  affectedUsers: AffectedUser[],
+  totalAffectedCount: number,
+  onConfirm: () => Promise<void>,
+};
+
+function useEmailVerificationToggle() {
+  const stackAdminApp = useAdminApp();
+  const project = stackAdminApp.useProject();
+  const projectConfig = project.useConfig();
+  const updateConfig = useUpdateConfig();
+  const [pendingChange, setPendingChange] = useState<PendingChange | null>(null);
+
+  const checked = projectConfig.onboarding.requireEmailVerification;
+
+  const handleChange = async (next: boolean) => {
+    if (next && !projectConfig.onboarding.requireEmailVerification) {
+      const preview = await (stackAdminApp as any).previewAffectedUsersByOnboardingChange(
+        { requireEmailVerification: true },
+        10,
+      );
+      if (preview.totalAffectedCount > 0) {
+        setPendingChange({
+          affectedUsers: preview.affectedUsers,
+          totalAffectedCount: preview.totalAffectedCount,
+          onConfirm: async () => {
+            await updateConfig({
+              adminApp: stackAdminApp,
+              configUpdate: { "onboarding.requireEmailVerification": true },
+              pushable: true,
+            });
+            setPendingChange(null);
+          },
+        });
+        return;
+      }
+    }
+    await updateConfig({
+      adminApp: stackAdminApp,
+      configUpdate: { "onboarding.requireEmailVerification": next },
+      pushable: true,
+    });
+  };
+
+  const onCheckedChange = (next: boolean) => {
+    runAsynchronouslyWithAlert(handleChange(next));
+  };
+
+  const dialog = (
+    <ActionDialog
+      open={!!pendingChange}
+      onClose={() => setPendingChange(null)}
+      title="Enable email verification requirement"
+      danger
+      okButton={{
+        label: "Apply Change",
+        onClick: async () => {
+          await pendingChange?.onConfirm();
+        },
+      }}
+      cancelButton={{ label: "Cancel" }}
+    >
+      <div className="flex flex-col gap-4">
+        <DesignAlert
+          variant="warning"
+          title={`${pendingChange?.totalAffectedCount ?? 0} user${(pendingChange?.totalAffectedCount ?? 0) === 1 ? "" : "s"} will be required to verify their email`}
+          description="Affected users will be prompted to verify their email the next time they visit your application."
+        />
+        {pendingChange && pendingChange.affectedUsers.length > 0 && (
+          <div className="flex flex-col gap-2">
+            <Typography variant="secondary" type="label">
+              Affected users
+            </Typography>
+            <div className="rounded-xl ring-1 ring-black/[0.06] dark:ring-white/[0.06] overflow-hidden">
+              <table className="w-full text-sm">
+                <thead className="bg-foreground/[0.04]">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-medium">User</th>
+                    <th className="px-3 py-2 text-left font-medium">Email</th>
+                    <th className="px-3 py-2 text-left font-medium">Reason</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pendingChange.affectedUsers.map((user) => (
+                    <tr key={user.id} className="border-t border-black/[0.06] dark:border-white/[0.06]">
+                      <td className="px-3 py-2">
+                        {user.displayName || <span className="text-muted-foreground italic">No name</span>}
+                      </td>
+                      <td className="px-3 py-2">
+                        {user.primaryEmail || <span className="text-muted-foreground italic">No email</span>}
+                      </td>
+                      <td className="px-3 py-2">
+                        <DesignBadge
+                          label={user.restrictedReason.type === "email_not_verified" ? "Email not verified" : "Anonymous user"}
+                          color="orange"
+                          size="sm"
+                        />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
+              <Typography variant="secondary" type="footnote">
+                ... and {pendingChange.totalAffectedCount - pendingChange.affectedUsers.length} more user{pendingChange.totalAffectedCount - pendingChange.affectedUsers.length === 1 ? "" : "s"}
+              </Typography>
+            )}
+          </div>
+        )}
+      </div>
+    </ActionDialog>
+  );
+
+  return { checked, onCheckedChange, dialog };
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────
 
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
@@ -246,17 +523,15 @@ export default function PageClient() {
   const [confirmSignUpDisabled, setConfirmSignUpDisabled] = useState(false);
   const [disabledProvidersDialogOpen, setDisabledProvidersDialogOpen] = useState(false);
 
-  // ===== LOCAL STATE FOR AUTH METHODS =====
+  // ===== AUTH METHODS local state =====
   const [localPasswordEnabled, setLocalPasswordEnabled] = useState<boolean | undefined>(undefined);
   const [localOtpEnabled, setLocalOtpEnabled] = useState<boolean | undefined>(undefined);
   const [localPasskeyEnabled, setLocalPasskeyEnabled] = useState<boolean | undefined>(undefined);
 
-  // Computed values (local or config)
   const passwordEnabled = localPasswordEnabled ?? config.auth.password.allowSignIn;
   const otpEnabled = localOtpEnabled ?? config.auth.otp.allowSignIn;
   const passkeyEnabled = localPasskeyEnabled ?? config.auth.passkey.allowSignIn;
 
-  // Check if auth methods have unsaved changes
   const authMethodsHasChanges = useMemo(() =>
     localPasswordEnabled !== undefined ||
     localOtpEnabled !== undefined ||
@@ -274,12 +549,7 @@ export default function PageClient() {
     if (localPasskeyEnabled !== undefined) {
       configUpdate['auth.passkey.allowSignIn'] = localPasskeyEnabled;
     }
-    await updateConfig({
-      adminApp: stackAdminApp,
-      configUpdate,
-      pushable: true,
-    });
-    // Clear local state
+    await updateConfig({ adminApp: stackAdminApp, configUpdate, pushable: true });
     setLocalPasswordEnabled(undefined);
     setLocalOtpEnabled(undefined);
     setLocalPasskeyEnabled(undefined);
@@ -291,7 +561,7 @@ export default function PageClient() {
     setLocalPasskeyEnabled(undefined);
   };
 
-  // ===== LOCAL STATE FOR SIGN-UP SETTINGS =====
+  // ===== SIGN-UP local state =====
   const [localAllowSignUp, setLocalAllowSignUp] = useState<boolean | undefined>(undefined);
   const [localMergeStrategy, setLocalMergeStrategy] = useState<OAuthAccountMergeStrategy | undefined>(undefined);
 
@@ -303,23 +573,19 @@ export default function PageClient() {
   [localAllowSignUp, localMergeStrategy]);
 
   const handleSignUpSave = async () => {
-    // If allowSignUp is being changed, show confirmation dialog
     if (localAllowSignUp !== undefined && localAllowSignUp !== config.auth.allowSignUp) {
       if (localAllowSignUp) {
         setConfirmSignUpEnabled(true);
       } else {
         setConfirmSignUpDisabled(true);
       }
-      return; // Dialog will handle the actual save
+      return;
     }
 
-    // Otherwise just save merge strategy
     if (localMergeStrategy !== undefined) {
       await updateConfig({
         adminApp: stackAdminApp,
-        configUpdate: {
-          'auth.oauth.accountMergeStrategy': localMergeStrategy,
-        },
+        configUpdate: { 'auth.oauth.accountMergeStrategy': localMergeStrategy },
         pushable: true,
       });
     }
@@ -332,24 +598,17 @@ export default function PageClient() {
     setLocalMergeStrategy(undefined);
   };
 
-  // Called after confirmation dialog confirms the change
   const handleSignUpConfirmed = async (newAllowSignUp: boolean) => {
-    const configUpdate: Record<string, any> = {
-      'auth.allowSignUp': newAllowSignUp,
-    };
+    const configUpdate: Record<string, any> = { 'auth.allowSignUp': newAllowSignUp };
     if (localMergeStrategy !== undefined) {
       configUpdate['auth.oauth.accountMergeStrategy'] = localMergeStrategy;
     }
-    await updateConfig({
-      adminApp: stackAdminApp,
-      configUpdate,
-      pushable: true,
-    });
+    await updateConfig({ adminApp: stackAdminApp, configUpdate, pushable: true });
     setLocalAllowSignUp(undefined);
     setLocalMergeStrategy(undefined);
   };
 
-  // ===== LOCAL STATE FOR USER DELETION =====
+  // ===== USER DELETION local state =====
   const [localAllowClientDeletion, setLocalAllowClientDeletion] = useState<boolean | undefined>(undefined);
   const allowClientDeletion = localAllowClientDeletion ?? config.users.allowClientUserDeletion;
   const userDeletionHasChanges = localAllowClientDeletion !== undefined;
@@ -358,9 +617,7 @@ export default function PageClient() {
     if (localAllowClientDeletion !== undefined) {
       await updateConfig({
         adminApp: stackAdminApp,
-        configUpdate: {
-          'users.allowClientUserDeletion': localAllowClientDeletion,
-        },
+        configUpdate: { 'users.allowClientUserDeletion': localAllowClientDeletion },
         pushable: true,
       });
     }
@@ -375,191 +632,146 @@ export default function PageClient() {
     .map((id) => [id, oauthProviders.find((provider: AdminOAuthProviderConfig) => provider.id === id)] as const)
     .filter(([, provider]) => !!provider);
 
+  const enabledProvidersList = enabledProviders
+    .map(([, provider]) => provider)
+    .filter((provider): provider is AdminOAuthProviderConfig => !!provider);
+
+  // ===== Toggle helpers =====
+  const onPasswordChange = (checked: boolean) => {
+    setLocalPasswordEnabled(checked === config.auth.password.allowSignIn ? undefined : checked);
+  };
+  const onOtpChange = (checked: boolean) => {
+    setLocalOtpEnabled(checked === config.auth.otp.allowSignIn ? undefined : checked);
+  };
+  const onPasskeyChange = (checked: boolean) => {
+    setLocalPasskeyEnabled(checked === config.auth.passkey.allowSignIn ? undefined : checked);
+  };
+  const onAllowSignUpChange = (checked: boolean) => {
+    setLocalAllowSignUp(checked === config.auth.allowSignUp ? undefined : checked);
+  };
+  const onMergeStrategyChange = (value: string) => {
+    const next = value as OAuthAccountMergeStrategy;
+    setLocalMergeStrategy(next === config.auth.oauth.accountMergeStrategy ? undefined : next);
+  };
+  const onAllowClientDeletionChange = (checked: boolean) => {
+    setLocalAllowClientDeletion(checked === config.users.allowClientUserDeletion ? undefined : checked);
+  };
+
+  const emailVerification = useEmailVerificationToggle();
+
   return (
     <AppEnabledGuard appId="authentication">
       <PageLayout title="Auth Methods" description="Configure how users can sign in to your app">
-        <div className="flex gap-4">
-          <SettingCard className="flex-grow">
-            <SettingSwitch
-              label={
-                <div className="flex items-center gap-2">
-                  <AsteriskIcon size={20} aria-hidden="true" />
-                  <span>Email/password authentication</span>
-                </div>
-              }
-              checked={passwordEnabled}
-              onCheckedChange={(checked) => {
-                if (checked === config.auth.password.allowSignIn) {
-                  setLocalPasswordEnabled(undefined);
-                } else {
-                  setLocalPasswordEnabled(checked);
-                }
-              }}
-            />
-            <SettingSwitch
-              label={
-                <div className="flex items-center gap-2">
-                  <LinkIcon size={20} />
-                  <span>Magic link (Email OTP)</span>
+        <section className="flex flex-col gap-4">
+          <div className="flex gap-4">
+            <DesignCard
+              title="Sign-in methods"
+              subtitle="Each method below is independently toggleable"
+              icon={UserCircleIcon}
+              className="flex-grow"
+              gradient="default"
+            >
+              <div className="flex flex-col gap-2">
+                <MethodToggleRow icon={AsteriskIcon} label="Email/password authentication" hint="Classic email + password credentials." checked={passwordEnabled} onCheckedChange={onPasswordChange} density="default" />
+                <MethodToggleRow icon={LinkIcon} label="Magic link (Email OTP)" hint="One-time codes delivered by email." checked={otpEnabled} onCheckedChange={onOtpChange} density="default" />
+                <MethodToggleRow icon={KeyIcon} label="Passkey" hint="Phishing-resistant device-bound credentials." checked={passkeyEnabled} onCheckedChange={onPasskeyChange} density="default" />
+              </div>
+              <InlineSaveDiscard hasChanges={authMethodsHasChanges} onSave={handleAuthMethodsSave} onDiscard={handleAuthMethodsDiscard} />
+
+              <div className="mt-5 mb-3">
+                <div className="text-xs font-semibold uppercase tracking-wider text-foreground">SSO Providers</div>
+              </div>
+              <div className="flex flex-col gap-2">
+                {enabledProvidersList.map(provider => (
+                  <ProviderInlineRow key={provider.id} provider={provider} />
+                ))}
+                {enabledProvidersList.length === 0 && (
+                  <DesignAlert
+                    variant="info"
+                    description="No SSO providers enabled. Add one to let users sign in with their existing accounts."
+                  />
+                )}
+              </div>
+              <DesignButton
+                className="mt-4 w-fit"
+                onClick={() => setDisabledProvidersDialogOpen(true)}
+                variant="secondary"
+              >
+                <PlusCircleIcon size={16} className="mr-1.5" />
+                Add SSO providers
+              </DesignButton>
+            </DesignCard>
+            <DesignCard
+              title="Live preview"
+              icon={EyeIcon}
+              className="hidden lg:flex"
+              gradient="default"
+            >
+              <LivePreviewBody
+                config={project.config}
+                passwordEnabled={passwordEnabled}
+                otpEnabled={otpEnabled}
+                passkeyEnabled={passkeyEnabled}
+                enabledProviders={enabledProvidersList}
+              />
+            </DesignCard>
+          </div>
+
+          <DesignCard title="Sign-up" subtitle="Account creation policies for new users" icon={UserPlusIcon} gradient="default">
+            <div className="flex flex-col gap-2">
+              <MethodToggleRow
+                icon={SignInIcon}
+                label="Allow new user sign-ups"
+                checked={allowSignUp}
+                onCheckedChange={onAllowSignUpChange}
+                density="compact"
+              />
+              <MethodToggleRow
+                icon={EnvelopeSimpleIcon}
+                label="Require email verification"
+                checked={emailVerification.checked}
+                onCheckedChange={emailVerification.onCheckedChange}
+                density="compact"
+              />
+              <Label
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-foreground/[0.03] transition-colors duration-150 hover:transition-none cursor-pointer"
+              >
+                <div className="p-2 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04] shrink-0">
+                  <UserCircleIcon size={18} className="text-foreground/70 dark:text-muted-foreground" aria-hidden="true" />
                 </div>
-              }
-              checked={otpEnabled}
-              onCheckedChange={(checked) => {
-                if (checked === config.auth.otp.allowSignIn) {
-                  setLocalOtpEnabled(undefined);
-                } else {
-                  setLocalOtpEnabled(checked);
-                }
-              }}
-            />
-            <SettingSwitch
-              label={
-                <div className="flex items-center gap-2">
-                  <KeyIcon size={20} />
-                  <span>Passkey</span>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-foreground truncate">Multi-provider sign-up mode</div>
                 </div>
-              }
-              checked={passkeyEnabled}
-              onCheckedChange={(checked) => {
-                if (checked === config.auth.passkey.allowSignIn) {
-                  setLocalPasskeyEnabled(undefined);
-                } else {
-                  setLocalPasskeyEnabled(checked);
-                }
-              }}
-            />
-            <InlineSaveDiscard
-              hasChanges={authMethodsHasChanges}
-              onSave={handleAuthMethodsSave}
-              onDiscard={handleAuthMethodsDiscard}
+                <DesignSelectorDropdown
+                  value={mergeStrategy}
+                  onValueChange={onMergeStrategyChange}
+                  options={[
+                    { value: "link_method", label: MERGE_STRATEGY_SHORT.link_method },
+                    { value: "allow_duplicates", label: MERGE_STRATEGY_SHORT.allow_duplicates },
+                    { value: "raise_error", label: MERGE_STRATEGY_SHORT.raise_error },
+                  ]}
+                  size="sm"
+                  className="w-[180px]"
+                />
+              </Label>
+            </div>
+            <InlineSaveDiscard hasChanges={signUpHasChanges} onSave={handleSignUpSave} onDiscard={handleSignUpDiscard} />
+          </DesignCard>
+
+          <DesignCard title="User deletion" subtitle="Self-service account removal" icon={TrashIcon} gradient="default">
+            <MethodToggleRow
+              icon={TrashIcon}
+              label="Allow users to delete their own accounts on the client-side"
+              hint="A delete button will also be added to the account settings page."
+              checked={allowClientDeletion}
+              onCheckedChange={onAllowClientDeletionChange}
+              density="default"
             />
-            <Typography variant="secondary" className="mt-2">
-              SSO Providers
-            </Typography>
+            <InlineSaveDiscard hasChanges={userDeletionHasChanges} onSave={handleUserDeletionSave} onDiscard={handleUserDeletionDiscard} />
+          </DesignCard>
 
-            {enabledProviders.map(([, provider]) => provider)
-              .filter((provider): provider is AdminOAuthProviderConfig => !!provider).map(provider => {
-                return <div key={provider.id} className="flex h-10 items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <ProviderIcon id={provider.id} />
-                    <span className="text-sm font-semibold">{BrandIcons.toTitle(provider.id)}</span>
-                    {provider.type === 'shared' && <SimpleTooltip tooltip={SHARED_TOOLTIP}>
-                      <Badge variant="secondary">Shared keys</Badge>
-                    </SimpleTooltip>}
-                  </div>
-
-                  <OAuthActionCell config={provider} />
-                </div>;
-              }) }
-
-            <Button
-              className="mt-4"
-              onClick={() => {
-              setDisabledProvidersDialogOpen(true);
-              }}
-              variant="secondary"
-            >
-              <PlusCircleIcon size={16}/>
-              <span className="ml-2">Add SSO providers</span>
-            </Button>
-            <DisabledProvidersDialog
-              open={disabledProvidersDialogOpen}
-              onOpenChange={(x) => {
-              setDisabledProvidersDialogOpen(x);
-              }}
-            />
-          </SettingCard>
-          <SettingCard className="hidden lg:flex">
-            <div className="self-stretch py-4 px-4 min-w-[400px] items-center">
-              <div className="w-full">
-                <BrowserFrame url="your-website.com/signin">
-                  <div className="flex flex-col items-center justify-center min-h-[400px]">
-                    <div className='w-full sm:max-w-xs m-auto scale-90 pointer-events-none' inert>
-                      {/* a transparent cover that prevents the card from being clicked, even when pointer-events is overridden */}
-                      <div className="absolute inset-0 bg-transparent z-10"></div>
-                      <AuthPage
-                        type="sign-in"
-                        mockProject={{
-                          config: {
-                            ...project.config,
-                            credentialEnabled: passwordEnabled,
-                            magicLinkEnabled: otpEnabled,
-                            passkeyEnabled: passkeyEnabled,
-                            oauthProviders: enabledProviders
-                              .map(([, provider]) => provider)
-                              .filter((provider): provider is AdminOAuthProviderConfig => !!provider),
-                          },
-                        }}
-                      />
-                    </div>
-                  </div>
-                </BrowserFrame>
-              </div>
-            </div>
-          </SettingCard>
-        </div>
-        <SettingCard title="Sign-up">
-          <SettingSwitch
-            label="Allow new user sign-ups"
-            checked={allowSignUp}
-            onCheckedChange={(checked) => {
-              if (checked === config.auth.allowSignUp) {
-                setLocalAllowSignUp(undefined);
-              } else {
-                setLocalAllowSignUp(checked);
-              }
-            }}
-            hint="Existing users can still sign in when sign-up is disabled. You can always create new accounts manually via the dashboard."
-          />
-          <EmailVerificationSetting
-            showIcon
-            hint="Users must verify their primary email before they can use your application. Unverified users will be restricted. Requires SDK version >=2.8.57."
-          />
-          <SettingSelect
-            label="Sign-up mode when logging in with same email on multiple providers"
-            value={mergeStrategy}
-            onValueChange={(value) => {
-              const newValue = value as OAuthAccountMergeStrategy;
-              if (newValue === config.auth.oauth.accountMergeStrategy) {
-                setLocalMergeStrategy(undefined);
-              } else {
-                setLocalMergeStrategy(newValue);
-              }
-            }}
-            hint="Determines what happens when a user tries to sign in with a different OAuth provider using the same email address"
-          >
-            <SelectItem value="link_method">Link - Connect multiple providers to the same account</SelectItem>
-            <SelectItem value="allow_duplicates">Allow - Create separate accounts for each provider</SelectItem>
-            <SelectItem value="raise_error">Block - Show an error and prevent sign-in with multiple providers</SelectItem>
-          </SettingSelect>
-          <InlineSaveDiscard
-            hasChanges={signUpHasChanges}
-            onSave={handleSignUpSave}
-            onDiscard={handleSignUpDiscard}
-          />
-        </SettingCard>
-
-        <SettingCard title="User deletion">
-          <SettingSwitch
-            label="Allow users to delete their own accounts on the client-side"
-            checked={allowClientDeletion}
-            onCheckedChange={(checked) => {
-              if (checked === config.users.allowClientUserDeletion) {
-                setLocalAllowClientDeletion(undefined);
-              } else {
-                setLocalAllowClientDeletion(checked);
-              }
-            }}
-          />
-          <Typography variant="secondary" type="footnote">
-            A delete button will also be added to the account settings page.
-          </Typography>
-          <InlineSaveDiscard
-            hasChanges={userDeletionHasChanges}
-            onSave={handleUserDeletionSave}
-            onDiscard={handleUserDeletionDiscard}
-          />
-        </SettingCard>
+          <div className="h-5 shrink-0" aria-hidden="true" />
+        </section>
 
         <ConfirmSignUpEnabledDialog
           open={confirmSignUpEnabled}
@@ -575,6 +787,11 @@ export default function PageClient() {
             await handleSignUpConfirmed(false);
           }}
         />
+        <DisabledProvidersDialog
+          open={disabledProvidersDialogOpen}
+          onOpenChange={(x) => setDisabledProvidersDialogOpen(x)}
+        />
+        {emailVerification.dialog}
       </PageLayout>
     </AppEnabledGuard>
   );
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
index 18439a6707..4d3562c89d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
@@ -1,24 +1,35 @@
 "use client";
+import { ChipsInputField } from "@/components/form-fields";
 import { FormDialog } from "@/components/form-dialog";
-import { ChipsInputField, InputField, SwitchField } from "@/components/form-fields";
 import { Link } from "@/components/link";
-import { ActionDialog, Badge, BrandIcons, InlineCode, Label, SimpleTooltip, Typography, buttonVariants, cn } from "@/components/ui";
+import { ActionDialog, BrandIcons, FormControl, FormField, FormItem, FormLabel, FormMessage, InlineCode, SimpleTooltip, Typography } from "@/components/ui";
+import {
+  DesignAlert,
+  DesignBadge,
+  DesignCardTint,
+  DesignInput,
+  DesignPillToggle,
+} from "@stackframe/dashboard-ui-components";
 import { getPublicEnvVar } from '@/lib/env';
-import { ArrowRightIcon } from "@phosphor-icons/react";
+import { ArrowRightIcon, InfoIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { AdminProject } from "@stackframe/stack";
 import { yupBoolean, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { sharedProviders } from "@stackframe/stack-shared/dist/utils/oauth";
-import clsx from "clsx";
 import { useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { useWatch } from "react-hook-form";
 import * as yup from "yup";
 
-export function ProviderIcon(props: { id: string }) {
+export function ProviderIcon(props: { id: string, size?: "sm" | "md" | "lg" }) {
+  const size = props.size ?? "md";
+  const dim = size === "sm" ? "w-9 h-9" : size === "lg" ? "w-14 h-14" : "w-12 h-12";
+  const iconPx = size === "sm" ? 18 : size === "lg" ? 28 : 24;
   return (
     <div
-      className="flex items-center justify-center w-12 h-12 rounded-md border"
+      className={`flex items-center justify-center ${dim} rounded-xl ring-1 ring-black/[0.08] dark:ring-white/[0.08] shadow-sm`}
       style={{ backgroundColor: props.id in BrandIcons.BRAND_COLORS ? BrandIcons.BRAND_COLORS[props.id] : undefined }}
     >
-      <BrandIcons.Mapping iconSize={24} provider={props.id} />
+      <BrandIcons.Mapping iconSize={iconPx} provider={props.id} />
     </div>
   );
 }
@@ -68,6 +79,216 @@ export const providerFormSchema = yupObject({
 
 export type ProviderFormValues = yup.InferType<typeof providerFormSchema>
 
+/** Modal chrome — "Floating soft" (variant G). */
+const PROVIDER_DIALOG_CHROME_CLASS = "border-0 rounded-3xl bg-background shadow-2xl shadow-black/30 dark:shadow-black/60";
+
+function ProviderHeader({ providerId }: { providerId: string }) {
+  return (
+    <div className="flex items-center gap-3">
+      <ProviderIcon id={providerId} size="sm" />
+      <div className="flex flex-col min-w-0 flex-1">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm font-semibold text-foreground">{toTitle(providerId)}</span>
+          <DesignBadge label="OAuth 2.0" color="blue" size="sm" />
+        </div>
+        <span className="text-[11px] text-muted-foreground">Configure credentials for this provider</span>
+      </div>
+    </div>
+  );
+}
+
+function PillToggleControl({
+  form,
+  hasSharedKeys,
+}: {
+  form: UseFormReturn<ProviderFormValues>,
+  hasSharedKeys: boolean,
+}) {
+  if (!hasSharedKeys) {
+    return (
+      <Typography variant="secondary" type="footnote">
+        This OAuth provider does not support shared keys
+      </Typography>
+    );
+  }
+  return (
+    <FormField
+      control={form.control}
+      name="shared"
+      render={({ field }) => (
+        <FormItem className="space-y-0">
+          <FormControl>
+            <DesignPillToggle
+              selected={field.value ? "shared" : "custom"}
+              onSelect={(id) => field.onChange(id === "shared")}
+              options={[
+                { id: "shared", label: "Shared keys" },
+                { id: "custom", label: "Own credentials" },
+              ]}
+              size="sm"
+              gradient="default"
+              glassmorphic
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function RedirectInline({ providerId }: { providerId: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-[11px] uppercase tracking-wider text-muted-foreground">Redirect URL</span>
+      <Typography type="footnote" className="break-all">
+        <InlineCode>{`${getPublicEnvVar('NEXT_PUBLIC_STACK_API_URL')}/api/v1/auth/oauth/callback/${providerId}`}</InlineCode>
+      </Typography>
+    </div>
+  );
+}
+
+function CredentialFields({ form, providerId }: { form: UseFormReturn<ProviderFormValues>, providerId: string }) {
+  const clientIdLabel = providerId === 'apple' ? "Service ID (Client ID)" : "Client ID";
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="clientId"
+        render={({ field }) => (
+          <FormItem className="space-y-1.5">
+            <FormLabel className="text-xs font-medium text-muted-foreground">{clientIdLabel}</FormLabel>
+            <FormControl>
+              <DesignInput {...field} value={field.value ?? ""} placeholder="Client ID" size="sm" autoComplete="off" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="clientSecret"
+        render={({ field }) => (
+          <FormItem className="space-y-1.5">
+            <FormLabel className="text-xs font-medium text-muted-foreground">Client Secret</FormLabel>
+            <FormControl>
+              <DesignInput {...field} value={field.value ?? ""} type="password" placeholder="Client Secret" size="sm" autoComplete="off" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {providerId === 'facebook' && (
+        <FormField
+          control={form.control}
+          name="facebookConfigId"
+          render={({ field }) => (
+            <FormItem className="space-y-1.5">
+              <FormLabel className="text-xs font-medium text-muted-foreground">Facebook configuration ID</FormLabel>
+              <FormControl>
+                <DesignInput {...field} value={field.value ?? ""} placeholder="Business Config ID" size="sm" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
+      {providerId === 'microsoft' && (
+        <FormField
+          control={form.control}
+          name="microsoftTenantId"
+          render={({ field }) => (
+            <FormItem className="space-y-1.5">
+              <FormLabel className="text-xs font-medium text-muted-foreground">Microsoft tenant ID</FormLabel>
+              <FormControl>
+                <DesignInput {...field} value={field.value ?? ""} placeholder="Organizational tenant" size="sm" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
+      {providerId === 'apple' && (
+        <ChipsInputField
+          control={form.control}
+          name="appleBundleIds"
+          label="Bundle IDs"
+          placeholder="com.example.myiosapp"
+          helperText="Optional native app bundle IDs. Press Enter or comma to add multiple."
+        />
+      )}
+    </>
+  );
+}
+
+function WarningInline() {
+  return (
+    <p className="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-400">
+      <WarningCircleIcon size={14} className="mt-[2px] shrink-0" />
+      <span>Stack-managed shared keys are development only — they show the Stack logo on the OAuth screen.</span>
+    </p>
+  );
+}
+
+function NoteInline({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="flex items-start gap-2 text-[11px] text-muted-foreground">
+      <InfoIcon size={12} className="mt-[2px] shrink-0" />
+      <span>{children}</span>
+    </p>
+  );
+}
+
+function GithubNoteInline() {
+  return <NoteInline>GitHub apps must be public with read-only email permissions enabled.</NoteInline>;
+}
+
+function DocsTextLink({ providerId }: { providerId: string }) {
+  return (
+    <Link
+      href={`https://docs.stack-auth.com/docs/concepts/auth-providers/${providerId === "x" ? "x-twitter" : providerId}`}
+      target="_blank"
+      className="inline-flex items-center gap-1 text-xs font-medium text-foreground/70 hover:text-foreground transition-colors"
+    >
+      Provider documentation
+      <ArrowRightIcon size={12} />
+    </Link>
+  );
+}
+
+/** Flat & airy inner layout (final). */
+function OAuthProviderSettingsForm(props: {
+  form: UseFormReturn<ProviderFormValues>,
+  providerId: string,
+  hasSharedKeys: boolean,
+}) {
+  const shared = useWatch({ control: props.form.control, name: "shared" });
+
+  return (
+    <div className="flex flex-col gap-5 w-full">
+      <ProviderHeader providerId={props.providerId} />
+      <div className="flex flex-col gap-2">
+        <span className="text-[11px] uppercase tracking-wider text-muted-foreground">Credential source</span>
+        <PillToggleControl form={props.form} hasSharedKeys={props.hasSharedKeys} />
+      </div>
+      {shared && <WarningInline />}
+      {!shared && (
+        <>
+          <RedirectInline providerId={props.providerId} />
+          <div className="flex flex-col gap-3">
+            <CredentialFields form={props.form} providerId={props.providerId} />
+          </div>
+          {props.providerId === 'github' && <GithubNoteInline />}
+        </>
+      )}
+      <NoteInline>Existing user accounts transfer automatically when you change OAuth keys.</NoteInline>
+      <div className="pt-1">
+        <DocsTextLink providerId={props.providerId} />
+      </div>
+    </div>
+  );
+}
+
 export function ProviderSettingDialog(props: Props & { open: boolean, onClose: () => void }) {
   const hasSharedKeys = sharedProviders.includes(props.id as any);
   const bundleIdsArray = (props.provider as any)?.appleBundleIds ?? [];
@@ -98,7 +319,7 @@ export function ProviderSettingDialog(props: Props & { open: boolean, onClose: (
   };
 
   return (
-    <FormDialog
+    <FormDialog<ProviderFormValues>
       defaultValues={defaultValues}
       formSchema={providerFormSchema}
       onSubmit={onSubmit}
@@ -107,99 +328,13 @@ export function ProviderSettingDialog(props: Props & { open: boolean, onClose: (
       title={`${toTitle(props.id)} OAuth provider`}
       cancelButton
       okButton={{ label: 'Save' }}
+      contentClassName={PROVIDER_DIALOG_CHROME_CLASS}
       render={(form) => (
-        <>
-          {hasSharedKeys ?
-            <SwitchField
-              control={form.control}
-              name="shared"
-              label="Shared keys"
-            /> :
-            <Typography variant="secondary" type="footnote">
-              This OAuth provider does not support shared keys
-            </Typography>}
-
-          {form.watch("shared") ?
-            <Typography variant="secondary" type="footnote">
-              Shared keys are created by the Stack team for development. It helps you get started, but will show a Stack logo and name on the OAuth screen. This should never be enabled in production.
-            </Typography> :
-            <div className="flex flex-col gap-2">
-              <Label>
-                Redirect URL for the OAuth provider settings
-              </Label>
-              <Typography type="footnote">
-                <InlineCode>{`${getPublicEnvVar('NEXT_PUBLIC_STACK_API_URL')}/api/v1/auth/oauth/callback/${props.id}`}</InlineCode>
-              </Typography>
-            </div>}
-
-          <Typography variant="secondary" type="footnote">
-            Existing user accounts will be transferred over automatically when you change the OAuth keys.
-          </Typography>
-
-          {!form.watch("shared") && (
-            <>
-              <InputField
-                control={form.control}
-                name="clientId"
-                label={props.id === 'apple' ? "Service ID (Client ID)" : "Client ID"}
-                placeholder="Client ID"
-                required
-              />
-
-              <InputField
-                control={form.control}
-                name="clientSecret"
-                label={props.id === 'apple' ? "Client Secret" : "Client Secret"}
-                placeholder="Client Secret"
-                required
-              />
-
-              {props.id === 'facebook' && (
-                <InputField
-                  control={form.control}
-                  name="facebookConfigId"
-                  label="Configuration ID (only required for Facebook Business)"
-                  placeholder="Facebook Config ID"
-                />
-              )}
-
-              {props.id === 'microsoft' && (
-                <InputField
-                  control={form.control}
-                  name="microsoftTenantId"
-                  label="Tenant ID (required if you are using the organizational directory)"
-                  placeholder="Tenant ID"
-                />
-              )}
-
-              {props.id === 'apple' && (
-                <ChipsInputField
-                  control={form.control}
-                  name="appleBundleIds"
-                  label="Bundle IDs"
-                  placeholder="com.example.myiosapp"
-                  helperText="Optional bundle IDs of the native iOS or macOS apps that use Sign in with Apple. These are required for native/mobile Sign in with Apple to work. Press Enter or comma to add multiple."
-                />
-              )}
-            </>
-          )}
-
-          {props.id === 'github' && !form.watch("shared") && (
-            <Typography variant="secondary" type="footnote">
-              Note: GitHub apps must be public with read-only email permissions enabled.
-            </Typography>
-          )}
-
-          <Link
-            className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 mt-2")}
-            href={`https://docs.stack-auth.com/docs/concepts/auth-providers/${props.id === "x" ? "x-twitter" : props.id}`}
-            target="_blank"
-          >
-            See full documentation
-            <ArrowRightIcon size={16} />
-          </Link>
-
-        </>
+        <OAuthProviderSettingsForm
+          form={form}
+          providerId={props.id}
+          hasSharedKeys={hasSharedKeys}
+        />
       )}
     />
   );
@@ -226,9 +361,18 @@ export function TurnOffProviderDialog(props: {
       cancelButton
       confirmText="I understand that this will disable sign-in and sign-up for new and existing users with this provider."
     >
-      <Typography>
-        Disabling this provider will prevent users from signing in with it, including existing users who have used it before. They might not be able to log in anymore. Are you sure you want to do this?
-      </Typography>
+      <div className="flex items-center gap-3 mb-1">
+        <ProviderIcon id={props.providerId} size="sm" />
+        <div className="flex flex-col min-w-0">
+          <span className="text-sm font-semibold text-foreground">{toTitle(props.providerId)}</span>
+          <span className="text-xs text-muted-foreground">Will be removed from the sign-in surface</span>
+        </div>
+      </div>
+      <DesignAlert
+        variant="error"
+        title="This action affects existing users"
+        description="Disabling this provider will prevent users from signing in with it, including existing users who have already used it. They might not be able to log in anymore."
+      />
     </ActionDialog>
   );
 }
@@ -253,24 +397,30 @@ export function ProviderSettingSwitch(props: Props) {
 
   return (
     <>
-      <div
-        className={clsx("flex flex-col items-center justify-center gap-2 py-2 border border-1 rounded-lg p-2 w-[120px] h-[120px] transition-all hover:border-gray-500 cursor-pointer")}
-        onClick={() => {
-          if (enabled) {
-            setTurnOffProviderDialogOpen(true);
-          } else {
-            setProviderSettingDialogOpen(true);
-          }
-        }}
+      <DesignCardTint
+        gradient="default"
+        className="cursor-pointer w-[120px] h-[120px]"
       >
-        <ProviderIcon id={props.id} />
-        <span className="text-sm">{toTitle(props.id)}</span>
-        {isShared && enabled &&
-          <SimpleTooltip tooltip={"Shared keys are automatically created by Stack, but show Stack's logo on the OAuth sign-in page.\n\nYou should replace these before you go into production."}>
-            <Badge variant="secondary">Shared keys</Badge>
-          </SimpleTooltip>
-        }
-      </div>
+        <button
+          type="button"
+          onClick={() => {
+            if (enabled) {
+              setTurnOffProviderDialogOpen(true);
+            } else {
+              setProviderSettingDialogOpen(true);
+            }
+          }}
+          className="flex flex-col items-center justify-center gap-2 py-2 px-2 w-full h-full text-foreground transition-all duration-150 hover:transition-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1] rounded-2xl"
+        >
+          <ProviderIcon id={props.id} />
+          <span className="text-sm font-medium">{toTitle(props.id)}</span>
+          {isShared && enabled &&
+            <SimpleTooltip tooltip={"Shared keys are automatically created by Stack, but show Stack's logo on the OAuth sign-in page.\n\nYou should replace these before you go into production."}>
+              <DesignBadge label="Shared keys" color="orange" size="sm" />
+            </SimpleTooltip>
+          }
+        </button>
+      </DesignCardTint>
 
       <TurnOffProviderDialog
         open={TurnOffProviderDialogOpen}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
index 315540701e..f845d3f9db 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
@@ -8,6 +8,8 @@ import {
   DesignCard,
   DesignCardTint,
   DesignCategoryTabs,
+  DesignDialog,
+  DesignDialogClose,
   DesignInput,
   DesignPillToggle,
 } from "@stackframe/dashboard-ui-components";
@@ -28,15 +30,19 @@ import {
   cn,
 } from "@/components/ui";
 import {
+  BrowsersIcon,
   CheckCircle,
   Cube,
   DotsThree,
   Envelope,
   FileText,
+  FlaskIcon,
   HardDrive,
+  InfoIcon,
   MagnifyingGlassIcon,
   Palette,
   PencilSimple,
+  PulseIcon,
   Sliders,
   SquaresFourIcon,
   StackSimple,
@@ -1074,6 +1080,178 @@ export default function PageClient() {
           </div>
         </DesignSection>
 
+        {/* ============================================================ */}
+        {/* DIALOG COMPONENT */}
+        {/* ============================================================ */}
+        <DesignSection
+          id="dialog"
+          icon={BrowsersIcon}
+          title="Dialog"
+          description="Use the standard glassmorphic modal for any focus-trapping modal in the dashboard. Supports header/body/footer regions, an icon chip, and an optional rich header card."
+        >
+          <ComponentDemo
+            title="Confirmation dialog"
+            description="The most common shape: icon chip, title, description, body content, and a single secondary close action."
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <DesignDialog
+                size="md"
+                trigger={<DesignButton size="sm">Open confirmation</DesignButton>}
+                icon={InfoIcon}
+                title="Heads up"
+                description="This is a lightweight confirmation modal."
+                footer={
+                  <DesignDialogClose asChild>
+                    <DesignButton variant="secondary" size="sm">Close</DesignButton>
+                  </DesignDialogClose>
+                }
+              >
+                <Typography className="text-sm">
+                  Body content lives in the scrollable region between the header and the
+                  footer. Use it for short messages, inline forms, or detail views.
+                </Typography>
+              </DesignDialog>
+            </div>
+          </ComponentDemo>
+
+          <ComponentDemo
+            title="Rich header with summary card"
+            description="Mirrors the rule trigger history dialog: an icon chip, title, description, and an embedded summary card rendered via headerContent."
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <DesignDialog
+                size="2xl"
+                trigger={<DesignButton variant="secondary" size="sm">Open trigger history</DesignButton>}
+                icon={PulseIcon}
+                title="Rule trigger history"
+                description="3 total triggers for this rule"
+                headerContent={
+                  <div className="rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-3 space-y-3">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Typography className="text-sm font-semibold truncate flex-1 min-w-0">
+                        Allow @stack.dev signups
+                      </Typography>
+                      <DesignBadge label="Allow" color="green" size="sm" />
+                      <DesignBadge label="Enabled" color="green" size="sm" />
+                    </div>
+                    <div className="grid grid-cols-3 gap-2">
+                      <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2">
+                        <Typography variant="secondary" className="text-[10px] uppercase tracking-wider">Last 24h</Typography>
+                        <Typography className="text-sm font-semibold tabular-nums">12</Typography>
+                      </div>
+                      <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2">
+                        <Typography variant="secondary" className="text-[10px] uppercase tracking-wider">All-time</Typography>
+                        <Typography className="text-sm font-semibold tabular-nums">3</Typography>
+                      </div>
+                      <div className="rounded-lg bg-background/60 ring-1 ring-foreground/[0.06] p-2 flex items-center justify-center">
+                        <Typography variant="secondary" className="text-[10px]">sparkline goes here</Typography>
+                      </div>
+                    </div>
+                  </div>
+                }
+                footer={
+                  <DesignDialogClose asChild>
+                    <DesignButton variant="secondary" size="sm">Close</DesignButton>
+                  </DesignDialogClose>
+                }
+              >
+                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Recent triggers</span>
+                <div className="rounded-xl ring-1 ring-foreground/[0.06] bg-background/60 divide-y divide-foreground/[0.06]">
+                  {["jordan@stack.dev", "ops@stack.dev", "pat@stack.dev"].map((email) => (
+                    <div key={email} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
+                      <span className="truncate">{email}</span>
+                      <DesignBadge label="2m ago" color="blue" size="sm" />
+                    </div>
+                  ))}
+                </div>
+              </DesignDialog>
+            </div>
+          </ComponentDemo>
+
+          <ComponentDemo
+            title="Wide tester / form modal"
+            description="Use a larger size for forms and tester surfaces. Combine with primary + secondary footer actions."
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <DesignDialog
+                size="5xl"
+                trigger={<DesignButton size="sm">Open tester</DesignButton>}
+                icon={FlaskIcon}
+                title="Test sign-up rules"
+                description="Simulate a sign-up request to see which rules trigger."
+                footer={
+                  <>
+                    <DesignDialogClose asChild>
+                      <DesignButton variant="secondary" size="sm">Cancel</DesignButton>
+                    </DesignDialogClose>
+                    <DesignButton size="sm">Run test</DesignButton>
+                  </>
+                }
+              >
+                <DesignAlert
+                  variant="info"
+                  description="In a real tester this body holds the form. The dialog itself simply provides the surface, structure, and a11y."
+                />
+                <DesignCard>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <DesignInput placeholder="Email" />
+                    <DesignInput placeholder="Country (e.g. US)" />
+                  </div>
+                </DesignCard>
+              </DesignDialog>
+            </div>
+          </ComponentDemo>
+
+          <ComponentDemo
+            title="Sign-up rules shell parity"
+            description="Use region-level class overrides when migrating existing hand-built dialogs and preserving exact shell spacing."
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <DesignDialog
+                size="2xl"
+                trigger={<DesignButton variant="secondary" size="sm">Open parity shell</DesignButton>}
+                icon={PulseIcon}
+                title="Rule trigger history"
+                description="0 total triggers for this rule"
+                overlayClassName="bg-black/50 backdrop-blur-sm"
+                headerClassName="px-6 pt-6 pb-4 border-b border-foreground/[0.06]"
+                bodyClassName="mx-0 my-0 w-auto px-6 py-4"
+                footerClassName="px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]"
+                footer={
+                  <DesignDialogClose asChild>
+                    <DesignButton variant="secondary" size="sm">Close</DesignButton>
+                  </DesignDialogClose>
+                }
+              >
+                <DesignAlert
+                  variant="info"
+                  description="This preset mirrors the shell used by the sign-up rules trigger-history and tester dialogs."
+                />
+              </DesignDialog>
+            </div>
+          </ComponentDemo>
+
+          <div className="pt-4 border-t border-black/[0.12] dark:border-white/[0.06]">
+            <Typography type="label" className="font-semibold mb-3">Props</Typography>
+            <PropsTable props={[
+              { name: "trigger", type: "ReactNode", description: "Element wrapped in a DialogTrigger. Optional when controlling externally via open/onOpenChange." },
+              { name: "open / onOpenChange / defaultOpen", type: "boolean / fn / boolean", description: "Standard controlled or uncontrolled state for the dialog." },
+              { name: "size", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl' | ... | '7xl' | 'full'", default: "'lg'", description: "Width preset for the modal surface." },
+              { name: "variant", type: "'glassmorphic' | 'plain'", default: "'glassmorphic'", description: "Visual style for the surface and overlay." },
+              { name: "icon", type: "ElementType | null", description: "Icon component for the header chip. Pass null to skip the chip." },
+              { name: "title / description", type: "ReactNode", description: "Standard header text. `title` is wired into DialogTitle for a11y." },
+              { name: "headerContent", type: "ReactNode", description: "Rich content rendered below the icon/title block (summary cards, badges, etc)." },
+              { name: "customHeader", type: "ReactNode", description: "Override the entire header. You become responsible for rendering DialogTitle." },
+              { name: "footer", type: "ReactNode", description: "Footer node. Renders in a styled bottom bar. Wrap close buttons in DialogClose asChild." },
+              { name: "noBodyPadding", type: "boolean", default: "false", description: "Disable the default px-6 py-4 padding for full-bleed content." },
+              { name: "hideTopCloseButton", type: "boolean", default: "false", description: "Hide the top-right close button rendered by DialogContent." },
+              { name: "className", type: "string", description: "Extra classes for the modal surface container." },
+              { name: "overlayClassName", type: "string", description: "Overlay classes, useful for custom backdrop opacity/blur." },
+              { name: "headerClassName / bodyClassName / footerClassName", type: "string", description: "Region-specific class overrides for exact parity migrations." },
+            ]} />
+          </div>
+        </DesignSection>
+
         {/* ============================================================ */}
         {/* TABS COMPONENT */}
         {/* ============================================================ */}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
index eefe671f6b..2f361e62d4 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
@@ -4,28 +4,35 @@ import { CountryCodeInput } from "@/components/country-code-select";
 import { ConditionBuilder, isConditionTreeValid } from "@/components/rule-builder";
 import {
   ActionDialog,
-  Alert,
-  Button,
   cn,
   Dialog,
   DialogBody,
+  DialogClose,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
   Switch,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
   Typography,
 } from "@/components/ui";
+import {
+  DesignAlert,
+  DesignBadge,
+  DesignButton,
+  DesignCard,
+  DesignDialog,
+  DesignDialogClose,
+  DesignEmptyState,
+  DesignInput,
+  DesignMenu,
+  DesignSelectorDropdown,
+  DesignSkeleton,
+} from "@/components/design-components";
 import {
   createEmptyCondition,
   createEmptyGroup,
@@ -38,7 +45,20 @@ import { stackAppInternalsSymbol } from "@/lib/stack-app-internals";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { ArrowsDownUpIcon, CheckIcon, PencilSimpleIcon, PlusIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
+import {
+  ArrowsDownUpIcon,
+  CheckIcon,
+  ClockIcon,
+  DotsSixVerticalIcon,
+  FlaskIcon,
+  PencilSimpleIcon,
+  PlusIcon,
+  PulseIcon,
+  ShieldCheckIcon,
+  TrashIcon,
+  UserIcon,
+  XIcon,
+} from "@phosphor-icons/react";
 import type { CompleteConfig } from "@stackframe/stack-shared/dist/config/schema";
 import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
 import type { SignUpRule, SignUpRuleAction } from "@stackframe/stack-shared/dist/interface/crud/sign-up-rules";
@@ -56,7 +76,10 @@ import { useAdminApp } from "../use-admin-app";
 import { validateRiskScore } from "@/lib/risk-score-utils";
 import { parseClickHouseDate } from "../analytics/shared";
 
-// Analytics types
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
 type RuleAnalytics = {
   ruleId: string,
   countInTimespan: number,
@@ -117,6 +140,15 @@ type SignUpRulesTestResult = {
   },
 };
 
+type ActionType = SignUpRuleAction['type'];
+
+type ConfigWithSignUpRules = CompleteConfig & {
+  auth: {
+    signUpRules?: Record<string, SignUpRule>,
+    signUpRulesDefaultAction?: 'allow' | 'reject',
+  },
+};
+
 const OAUTH_PROVIDER_OPTIONS = Array.from(standardProviders);
 const RULE_TRIGGER_EVENTS_PAGE_SIZE = 50;
 const RULE_TRIGGER_EVENTS_QUERY = `
@@ -134,16 +166,33 @@ LIMIT {limit:UInt32}
 OFFSET {offset:UInt32}
 `;
 
-// Get sorted rules from config
-// Type assertion needed because schema changes take effect at build time
-type ConfigWithSignUpRules = CompleteConfig & {
-  auth: {
-    signUpRules?: Record<string, SignUpRule>,
-    signUpRulesDefaultAction?: 'allow' | 'reject',
-  },
+const ACTION_LABELS: Record<ActionType, string> = {
+  allow: 'Allow',
+  reject: 'Reject',
+  restrict: 'Restrict',
+  log: 'Log',
 };
 
-// Compact sparkline component for rule analytics (inline next to buttons)
+const ACTION_BADGE_COLOR: Record<ActionType, "green" | "red" | "orange" | "blue"> = {
+  allow: 'green',
+  reject: 'red',
+  restrict: 'orange',
+  log: 'blue',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Small reused atoms
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ActionBadge({ type, dim = false, size = "sm" }: { type: ActionType, dim?: boolean, size?: "sm" | "md" }) {
+  return (
+    <span className={cn(dim && "opacity-50")}>
+      <DesignBadge label={ACTION_LABELS[type]} color={ACTION_BADGE_COLOR[type]} size={size} />
+    </span>
+  );
+}
+
+// Sparkline (kept identical — purely visual + tooltip)
 function RuleSparkline({
   data,
   countInTimespan,
@@ -157,7 +206,6 @@ function RuleSparkline({
   timespanHours: number,
   isLoading: boolean,
 }) {
-  // Show skeleton while loading
   if (isLoading) {
     return (
       <div className="flex items-center gap-1">
@@ -167,9 +215,7 @@ function RuleSparkline({
     );
   }
 
-  // Ensure we have at least 2 data points for the chart to render a line
   const chartData = data.length >= 2 ? data : [{ hour: '0', count: 0 }, { hour: '1', count: 0 }];
-  // Calculate max for Y domain - use at least 1 to avoid divide-by-zero
   const maxCount = Math.max(1, ...chartData.map(d => d.count));
   const timespanLabel = `Last ${timespanHours}h`;
 
@@ -224,9 +270,108 @@ function parseRuleTriggerRows(resultRows: Record<string, unknown>[]): RuleTrigge
   });
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Trigger history dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TriggerStatTile({ label, value, hint }: { label: string, value: React.ReactNode, hint?: string }) {
+  return (
+    <div className="rounded-xl bg-foreground/[0.03] ring-1 ring-foreground/[0.06] px-3 py-2.5 min-w-0">
+      <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate">
+        {label}
+      </div>
+      <div className="mt-0.5 text-lg font-semibold tabular-nums text-foreground leading-none">
+        {value}
+      </div>
+      {hint && (
+        <div className="mt-1 text-[10px] text-muted-foreground/80 truncate">{hint}</div>
+      )}
+    </div>
+  );
+}
+
+function TriggerHistoryChart({ data }: { data: { hour: string, count: number }[] }) {
+  const chartData = data.length >= 2 ? data : [{ hour: '0', count: 0 }, { hour: '1', count: 0 }];
+  const maxCount = Math.max(1, ...chartData.map(d => d.count));
+  return (
+    <div className="rounded-xl bg-foreground/[0.03] ring-1 ring-foreground/[0.06] px-3 py-2 h-full flex flex-col justify-between min-w-0">
+      <div className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        <span>Activity</span>
+        <PulseIcon className="h-3 w-3 text-muted-foreground/70" />
+      </div>
+      <div className="h-9 -mx-1">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={chartData} margin={{ top: 2, right: 2, bottom: 0, left: 2 }}>
+            <YAxis hide domain={[0, maxCount]} />
+            <Area
+              type="monotone"
+              dataKey="count"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              fill="currentColor"
+              fillOpacity={0.18}
+              className="text-primary"
+              isAnimationActive={false}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+function formatTriggerTime(triggeredAt: string): { date: string, time: string, relative: string } {
+  const dt = parseClickHouseDate(triggeredAt);
+  const now = new Date();
+  const diffMs = now.getTime() - dt.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHr / 24);
+
+  let relative: string;
+  if (diffMin < 1) relative = "just now";
+  else if (diffMin < 60) relative = `${diffMin}m ago`;
+  else if (diffHr < 24) relative = `${diffHr}h ago`;
+  else if (diffDay < 7) relative = `${diffDay}d ago`;
+  else relative = dt.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+
+  return {
+    date: dt.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }),
+    time: dt.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }),
+    relative,
+  };
+}
+
+function TriggerRow({ trigger }: { trigger: RuleTriggerListItem }) {
+  const { date, time, relative } = formatTriggerTime(trigger.triggeredAt);
+  const email = trigger.email;
+  return (
+    <div className="group flex items-center gap-3 px-3 py-2.5 transition-colors duration-150 hover:bg-foreground/[0.03] hover:transition-none">
+      <div className="h-8 w-8 rounded-lg bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center shrink-0">
+        <ClockIcon className="h-4 w-4 text-muted-foreground" />
+      </div>
+      <div className="flex-1 min-w-0 flex items-center gap-2">
+        <UserIcon className="h-3.5 w-3.5 text-muted-foreground/70 shrink-0" />
+        {email ? (
+          <Typography className="text-xs font-mono truncate">{email}</Typography>
+        ) : (
+          <Typography variant="secondary" className="text-xs italic">no email captured</Typography>
+        )}
+      </div>
+      <div className="hidden sm:flex flex-col items-end shrink-0 leading-tight">
+        <Typography className="text-xs font-medium tabular-nums">{time}</Typography>
+        <Typography variant="secondary" className="text-[10px] tabular-nums">{date}</Typography>
+      </div>
+      <DesignBadge label={relative} color="blue" size="sm" />
+    </div>
+  );
+}
+
 function RuleTriggerHistoryDialog({
   ruleId,
   ruleDisplayName,
+  ruleActionType,
+  ruleEnabled,
   sparklineData,
   countInTimespan,
   allTimeCount,
@@ -235,6 +380,8 @@ function RuleTriggerHistoryDialog({
 }: {
   ruleId: string,
   ruleDisplayName: string,
+  ruleActionType: ActionType,
+  ruleEnabled: boolean,
   sparklineData: { hour: string, count: number }[],
   countInTimespan: number,
   allTimeCount: number,
@@ -278,28 +425,18 @@ function RuleTriggerHistoryDialog({
         include_all_branches: false,
       });
 
-      // Drop stale responses if a newer request started after this one.
-      if (nextRequestId !== latestRequestIdRef.current) {
-        return;
-      }
+      if (nextRequestId !== latestRequestIdRef.current) return;
 
       const parsedRows = parseRuleTriggerRows(response.result);
       setTriggers((current) => reset ? parsedRows : [...current, ...parsedRows]);
       setHasMore(parsedRows.length === RULE_TRIGGER_EVENTS_PAGE_SIZE);
     } catch (error) {
-      if (nextRequestId !== latestRequestIdRef.current) {
-        return;
-      }
+      if (nextRequestId !== latestRequestIdRef.current) return;
       setLoadingError(error instanceof Error ? error.message : "Failed to load triggers");
     } finally {
-      if (nextRequestId !== latestRequestIdRef.current) {
-        return;
-      }
-      if (reset) {
-        setIsInitialLoading(false);
-      } else {
-        setIsLoadingMore(false);
-      }
+      if (nextRequestId !== latestRequestIdRef.current) return;
+      if (reset) setIsInitialLoading(false);
+      else setIsLoadingMore(false);
     }
   };
 
@@ -313,22 +450,20 @@ function RuleTriggerHistoryDialog({
   };
 
   const handleScroll: React.UIEventHandler<HTMLDivElement> = (event) => {
-    if (!hasMore || isInitialLoading || isLoadingMore) {
-      return;
-    }
-
+    if (!hasMore || isInitialLoading || isLoadingMore) return;
     const target = event.currentTarget;
     const remainingScrollPx = target.scrollHeight - target.scrollTop - target.clientHeight;
-    if (remainingScrollPx > 120) {
-      return;
-    }
-
+    if (remainingScrollPx > 120) return;
     runAsynchronouslyWithAlert(() => fetchTriggerPage({ offset: triggers.length, reset: false }));
   };
 
+  const totalLabel = `${allTimeCount.toLocaleString()} total trigger${allTimeCount === 1 ? "" : "s"}`;
+
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
+    <DesignDialog
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={(
         <button
           type="button"
           className="rounded-sm hover:bg-muted/40 px-1 py-0.5 transition-colors hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
@@ -343,69 +478,109 @@ function RuleTriggerHistoryDialog({
             isLoading={isSparklineLoading}
           />
         </button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Rule trigger history</DialogTitle>
-          <DialogDescription>
-            {ruleDisplayName} triggered {allTimeCount.toLocaleString()} time{allTimeCount === 1 ? "" : "s"} all-time.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          {loadingError ? (
-            <Alert variant="destructive">{loadingError}</Alert>
-          ) : null}
-
-          <div
-            className="max-h-[420px] overflow-auto rounded-lg border bg-background/40"
-            onScroll={handleScroll}
-          >
-            {isInitialLoading ? (
-              <div className="space-y-2 p-3">
-                {["one", "two", "three", "four", "five", "six"].map((skeletonId) => (
-                  <div key={skeletonId} className="h-11 rounded-md bg-muted animate-pulse" />
-                ))}
-              </div>
-            ) : triggers.length === 0 ? (
-              <div className="p-6 text-center">
-                <Typography variant="secondary" className="text-xs">
-                  No trigger events found for this rule.
-                </Typography>
-              </div>
-            ) : (
-              <div className="divide-y">
-                {triggers.map((trigger) => (
-                  <div key={trigger.id} className="px-3 py-2.5">
-                    <Typography className="text-xs font-medium tabular-nums">
-                      {parseClickHouseDate(trigger.triggeredAt).toLocaleString()}
-                    </Typography>
-                    <Typography variant="secondary" className="text-xs font-mono">
-                      {trigger.email ?? "(no email)"}
-                    </Typography>
-                  </div>
-                ))}
-              </div>
-            )}
-            {isLoadingMore ? (
-              <div className="p-3">
-                <div className="h-9 rounded-md bg-muted animate-pulse" />
-              </div>
-            ) : null}
+      )}
+      size="2xl"
+      icon={PulseIcon}
+      title="Rule trigger history"
+      description={`${totalLabel} for this rule`}
+      headerContent={(
+        <div className="rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-3 space-y-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Typography className="text-sm font-semibold truncate flex-1 min-w-0" title={ruleDisplayName}>
+              {ruleDisplayName}
+            </Typography>
+            <ActionBadge type={ruleActionType} />
+            <DesignBadge
+              label={ruleEnabled ? "Enabled" : "Disabled"}
+              color={ruleEnabled ? "green" : "orange"}
+              size="sm"
+            />
           </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
+          <div className="grid grid-cols-3 gap-2">
+            <TriggerStatTile
+              label={`Last ${timespanHours}h`}
+              value={countInTimespan.toLocaleString()}
+              hint="recent matches"
+            />
+            <TriggerStatTile
+              label="All-time"
+              value={allTimeCount.toLocaleString()}
+              hint="since rule created"
+            />
+            <TriggerHistoryChart data={sparklineData} />
+          </div>
+        </div>
+      )}
+      footer={(
+        <DesignDialogClose asChild>
+          <DesignButton variant="secondary" size="sm">Close</DesignButton>
+        </DesignDialogClose>
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Recent triggers
+        </span>
+        {!isInitialLoading && triggers.length > 0 && (
+          <Typography variant="secondary" className="text-[11px] tabular-nums">
+            showing {triggers.length}{hasMore ? "+" : ""}
+          </Typography>
+        )}
+      </div>
+
+      {loadingError ? (
+        <DesignAlert variant="error" description={loadingError} />
+      ) : null}
+
+      <div
+        className="max-h-[360px] overflow-auto rounded-xl ring-1 ring-foreground/[0.06] bg-background/60"
+        onScroll={handleScroll}
+      >
+        {isInitialLoading ? (
+          <div className="space-y-2 p-3">
+            {["one", "two", "three", "four", "five"].map((skeletonId) => (
+              <DesignSkeleton key={skeletonId} className="h-11 rounded-lg" />
+            ))}
+          </div>
+        ) : triggers.length === 0 ? (
+          <DesignEmptyState
+            icon={ClockIcon}
+            title="No triggers yet"
+            description={
+              isSparklineLoading
+                ? "Loading recent activity…"
+                : "Once a sign-up matches this rule, you'll see it appear here."
+            }
+          />
+        ) : (
+          <div className="divide-y divide-foreground/[0.06]">
+            {triggers.map((trigger) => (
+              <TriggerRow key={trigger.id} trigger={trigger} />
+            ))}
+          </div>
+        )}
+        {isLoadingMore ? (
+          <div className="p-3">
+            <DesignSkeleton className="h-9 rounded-lg" />
+          </div>
+        ) : null}
+      </div>
+    </DesignDialog>
   );
 }
 
-// Base card style for rules (without transition - added conditionally per component)
-const ruleCardClassName = cn(
-  "rounded-xl",
-  "bg-background/60 backdrop-blur-xl ring-1 ring-foreground/[0.06]",
-);
+// ─────────────────────────────────────────────────────────────────────────────
+// Inline rule editor (visible when adding/editing a rule)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ACTION_DROPDOWN_OPTIONS: { value: ActionType, label: string }[] = [
+  { value: "allow", label: "Allow" },
+  { value: "reject", label: "Reject" },
+  { value: "restrict", label: "Restrict" },
+  { value: "log", label: "Log only" },
+];
 
-// Inline rule editor component
-function RuleEditor({
+function useRuleEditorState({
   rule,
   ruleId,
   isNew,
@@ -420,12 +595,11 @@ function RuleEditor({
 }) {
   const ruleAction = rule?.action;
   const [displayName, setDisplayName] = useState(rule?.displayName ?? '');
-  const [actionType, setActionType] = useState<SignUpRuleAction['type']>(ruleAction?.type ?? 'allow');
+  const [actionType, setActionType] = useState<ActionType>(ruleAction?.type ?? 'allow');
   const [actionMessage, setActionMessage] = useState(ruleAction?.message ?? '');
   const [enabled, setEnabled] = useState(rule?.enabled ?? true);
   const [isSaving, setIsSaving] = useState(false);
 
-  // Parse existing condition or create empty group
   const initialConditionTree = useMemo((): RuleNode => {
     if (rule?.condition) {
       const parsed = parseCelToVisualTree(rule.condition);
@@ -437,13 +611,10 @@ function RuleEditor({
   }, [rule?.condition]);
 
   const [conditionTree, setConditionTree] = useState<RuleNode>(initialConditionTree);
-
-  // Validate the condition tree
   const isTreeValid = isConditionTreeValid(conditionTree);
 
   const handleSave = async () => {
     if (!displayName.trim() || !isTreeValid) return;
-
     setIsSaving(true);
     try {
       const normalizedConditionTree = conditionTree.type === 'group' && conditionTree.children.length === 0
@@ -467,101 +638,141 @@ function RuleEditor({
     }
   };
 
+  return {
+    displayName, setDisplayName,
+    actionType, setActionType,
+    actionMessage, setActionMessage,
+    enabled, setEnabled,
+    isSaving,
+    conditionTree, setConditionTree,
+    isTreeValid,
+    isNew,
+    ruleId,
+    handleSave,
+    onCancel,
+  };
+}
+
+type RuleEditorState = ReturnType<typeof useRuleEditorState>;
+
+function ActionDropdown({ state, size = "sm", className }: { state: RuleEditorState, size?: "sm" | "md" | "lg", className?: string }) {
   return (
-    <div className={cn(ruleCardClassName, "p-4 ring-primary/50 ring-2 transition-all duration-150 hover:transition-none")}>
-      <div className="flex items-start gap-3">
-        {/* Enabled toggle on the left */}
-        <div className="pt-2">
-          <Switch checked={enabled} onCheckedChange={setEnabled} />
-        </div>
+    <DesignSelectorDropdown
+      value={state.actionType}
+      onValueChange={(v) => state.setActionType(v as ActionType)}
+      size={size}
+      className={className ?? "w-40"}
+      options={ACTION_DROPDOWN_OPTIONS}
+    />
+  );
+}
 
-        {/* Main content */}
-        <div className="flex-1 space-y-4">
-          {/* Name input */}
-          <Input
-            value={displayName}
-            onChange={(e) => setDisplayName(e.target.value)}
-            placeholder="Rule name (e.g., Block disposable emails)"
-            autoFocus
-          />
+function RejectMessageField({ state, size = "sm", className }: { state: RuleEditorState, size?: "sm" | "md" | "lg", className?: string }) {
+  if (state.actionType !== 'reject') return null;
+  return (
+    <DesignInput
+      value={state.actionMessage}
+      onChange={(e) => state.setActionMessage(e.target.value)}
+      placeholder="Internal rejection reason (not shown to user)"
+      className={cn("flex-1 min-w-[200px]", className)}
+      size={size}
+    />
+  );
+}
 
-          {/* Conditions */}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-muted-foreground">Conditions</label>
-            <div className="p-3 rounded-lg bg-muted/30 ring-1 ring-foreground/[0.04]">
-              <ConditionBuilder
-                value={conditionTree}
-                onChange={setConditionTree}
-              />
-            </div>
-          </div>
+function SaveCancelButtons({ state, size = "sm" }: { state: RuleEditorState, size?: "sm" | "lg" }) {
+  return (
+    <>
+      <DesignButton
+        onClick={state.handleSave}
+        disabled={!state.displayName.trim() || !state.isTreeValid || state.isSaving}
+        size={size}
+        loading={state.isSaving}
+      >
+        {state.isNew ? 'Create rule' : 'Save changes'}
+      </DesignButton>
+      <DesignButton
+        variant="ghost"
+        onClick={state.onCancel}
+        disabled={state.isSaving}
+        size={size}
+      >
+        Cancel
+      </DesignButton>
+    </>
+  );
+}
 
-          {/* Action */}
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <label className="text-sm font-medium text-muted-foreground">Action:</label>
-              <Select value={actionType} onValueChange={(v) => setActionType(v as SignUpRuleAction['type'])}>
-                <SelectTrigger className="w-40">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="allow">Allow</SelectItem>
-                  <SelectItem value="reject">Reject</SelectItem>
-                  <SelectItem value="restrict">Restrict</SelectItem>
-                  <SelectItem value="log">Log only</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+function ConditionsPanel({ state }: { state: RuleEditorState }) {
+  return (
+    <div className="p-3 rounded-xl bg-foreground/[0.03] ring-1 ring-foreground/[0.04]">
+      <ConditionBuilder value={state.conditionTree} onChange={state.setConditionTree} />
+    </div>
+  );
+}
 
-            {actionType === 'reject' && (
-              <Input
-                value={actionMessage}
-                onChange={(e) => setActionMessage(e.target.value)}
-                placeholder="Internal rejection reason (not shown to user)"
-                className="flex-1"
-              />
-            )}
-          </div>
+function NumberedStep({ n, title, children }: { n: number, title: string, children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="h-6 w-6 rounded-full bg-primary/10 ring-1 ring-primary/20 text-primary text-[11px] font-semibold flex items-center justify-center tabular-nums shrink-0 mt-0.5">
+        {n}
+      </div>
+      <div className="flex-1 min-w-0 space-y-2">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
+        {children}
+      </div>
+    </div>
+  );
+}
 
-          {/* Save/Cancel buttons */}
-          <div className="flex items-center gap-2 pt-2">
-            <Button
-              onClick={handleSave}
-              disabled={!displayName.trim() || !isTreeValid || isSaving}
-              size="sm"
-            >
-              <CheckIcon className="h-4 w-4 mr-1.5" />
-              {isNew ? 'Create rule' : 'Save changes'}
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={onCancel}
-              disabled={isSaving}
-              size="sm"
-            >
-              <XIcon className="h-4 w-4 mr-1.5" />
-              Cancel
-            </Button>
+function RuleEditor(props: {
+  rule?: SignUpRule,
+  ruleId: string,
+  isNew: boolean,
+  onSave: (ruleId: string, rule: SignUpRule) => Promise<void>,
+  onCancel: () => void,
+}) {
+  const state = useRuleEditorState(props);
+
+  return (
+    <div className="rounded-2xl bg-background/70 backdrop-blur-xl ring-2 ring-primary/40 shadow-sm transition-all duration-150 hover:transition-none p-4 space-y-4">
+      <NumberedStep n={1} title="Name this rule">
+        <div className="flex items-center gap-3">
+          <DesignInput
+            value={state.displayName}
+            onChange={(e) => state.setDisplayName(e.target.value)}
+            placeholder="Rule name (e.g., Block disposable emails)"
+            size="md"
+            className="flex-1"
+            autoFocus
+          />
+          <div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0">
+            <Switch checked={state.enabled} onCheckedChange={state.setEnabled} />
+            <span>{state.enabled ? "Enabled" : "Disabled"}</span>
           </div>
         </div>
+      </NumberedStep>
+      <NumberedStep n={2} title="When these conditions match">
+        <ConditionsPanel state={state} />
+      </NumberedStep>
+      <NumberedStep n={3} title="Then take this action">
+        <div className="flex flex-wrap items-center gap-3">
+          <ActionDropdown state={state} />
+          <RejectMessageField state={state} />
+        </div>
+      </NumberedStep>
+      <div className="flex items-center justify-end gap-2 pt-2 border-t border-foreground/[0.06]">
+        <SaveCancelButtons state={state} />
       </div>
     </div>
   );
 }
 
-// Sortable rule row component (view mode)
-function SortableRuleRow({
-  entry,
-  analytics,
-  analyticsTimespanHours,
-  isAnalyticsLoading,
-  isEditing,
-  onEdit,
-  onDelete,
-  onToggleEnabled,
-  onSave,
-  onCancelEdit,
-}: {
+// ─────────────────────────────────────────────────────────────────────────────
+// SortableRuleRow — card row with kebab menu (final layout)
+// ─────────────────────────────────────────────────────────────────────────────
+
+type RuleRowProps = {
   entry: SignUpRuleEntry,
   analytics?: RuleAnalytics,
   analyticsTimespanHours: number,
@@ -572,149 +783,125 @@ function SortableRuleRow({
   onToggleEnabled: (enabled: boolean) => void,
   onSave: (ruleId: string, rule: SignUpRule) => Promise<void>,
   onCancelEdit: () => void,
-}) {
+};
+
+function SortableRuleRow(props: RuleRowProps) {
   const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: entry.id, disabled: isEditing });
+    attributes, listeners, setNodeRef, transform, transition, isDragging,
+  } = useSortable({ id: props.entry.id, disabled: props.isEditing });
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    // Only apply transition when not actively dragging to avoid lag
     transition: isDragging ? undefined : transition,
   };
 
-  const actionType = entry.rule.action.type;
-  const actionLabels: Record<string, string> = {
-    'allow': 'Allow',
-    'reject': 'Reject',
-    'restrict': 'Restrict',
-    'log': 'Log',
-  };
-  const actionLabel = actionLabels[actionType];
-
-  const conditionSummary = entry.rule.condition || '(no condition)';
-  const isEnabled = entry.rule.enabled !== false;
+  const actionType = props.entry.rule.action.type;
+  const conditionSummary = props.entry.rule.condition || '(no condition)';
+  const isEnabled = props.entry.rule.enabled !== false;
+  const ruleName = props.entry.rule.displayName || 'Unnamed rule';
 
-  // If editing, show the editor
-  if (isEditing) {
+  if (props.isEditing) {
     return (
       <div ref={setNodeRef} style={style}>
         <RuleEditor
-          rule={entry.rule}
-          ruleId={entry.id}
+          rule={props.entry.rule}
+          ruleId={props.entry.id}
           isNew={false}
-          onSave={onSave}
-          onCancel={onCancelEdit}
+          onSave={props.onSave}
+          onCancel={props.onCancelEdit}
         />
       </div>
     );
   }
 
-  // View mode - entire card is draggable
+  const switchControl = (
+    <div
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <Switch checked={isEnabled} onCheckedChange={props.onToggleEnabled} />
+    </div>
+  );
+
+  const dragBindings = {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners,
+  } as const;
+
   return (
     <div
-      ref={setNodeRef}
-      style={style}
+      {...dragBindings}
       className={cn(
-        ruleCardClassName,
+        "rounded-2xl bg-background/70 backdrop-blur-xl ring-1 ring-foreground/[0.06] shadow-sm",
         "flex items-center gap-3 p-4 cursor-grab active:cursor-grabbing",
-        "hover:ring-foreground/[0.1] hover:shadow-md",
-        // Only apply CSS transition when not dragging to avoid lag
         !isDragging && "transition-all duration-150 hover:transition-none",
         isDragging && "opacity-50 shadow-lg z-10",
       )}
-      {...attributes}
-      {...listeners}
     >
-      {/* Enable/disable switch - on the left */}
-      <div
-        onClick={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <Switch
-          checked={isEnabled}
-          onCheckedChange={onToggleEnabled}
-        />
-      </div>
-
-      {/* Rule info */}
+      <DotsSixVerticalIcon className="h-4 w-4 text-muted-foreground/60 shrink-0" />
+      {switchControl}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <Typography className={cn(
-            "font-medium text-sm truncate",
-            !isEnabled && "text-muted-foreground line-through",
-          )}>
-            {entry.rule.displayName || 'Unnamed rule'}
+          <Typography className={cn("font-medium text-sm truncate", !isEnabled && "text-muted-foreground line-through")}>
+            {ruleName}
           </Typography>
-          <span className={cn(
-            "text-[10px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded",
-            actionType === 'allow' && "bg-green-500/10 text-green-600 dark:text-green-400",
-            actionType === 'reject' && "bg-red-500/10 text-red-600 dark:text-red-400",
-            actionType === 'restrict' && "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-            actionType === 'log' && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-            !isEnabled && "opacity-50",
-          )}>
-            {actionLabel}
-          </span>
+          <ActionBadge type={actionType} dim={!isEnabled} />
         </div>
-        <Typography variant="secondary" className={cn(
-          "text-xs truncate mt-0.5",
-          !isEnabled && "line-through",
-        )}>
+        <Typography variant="secondary" className={cn("text-xs truncate mt-0.5 font-mono", !isEnabled && "line-through")}>
           {conditionSummary}
         </Typography>
       </div>
-
-      {/* Actions - sparkline, edit, and delete */}
       <div
-        className="flex items-center gap-1"
+        className="flex items-center gap-2"
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {/* Sparkline and trigger count */}
         <div className="hidden sm:flex items-center mr-1">
           <RuleTriggerHistoryDialog
-            ruleId={entry.id}
-            ruleDisplayName={entry.rule.displayName || entry.id}
-            sparklineData={analytics?.hourlyCounts ?? []}
-            countInTimespan={analytics?.countInTimespan ?? 0}
-            allTimeCount={analytics?.allTimeCount ?? 0}
-            timespanHours={analyticsTimespanHours}
-            isSparklineLoading={isAnalyticsLoading}
+            ruleId={props.entry.id}
+            ruleDisplayName={ruleName}
+            ruleActionType={actionType}
+            ruleEnabled={isEnabled}
+            sparklineData={props.analytics?.hourlyCounts ?? []}
+            countInTimespan={props.analytics?.countInTimespan ?? 0}
+            allTimeCount={props.analytics?.allTimeCount ?? 0}
+            timespanHours={props.analyticsTimespanHours}
+            isSparklineLoading={props.isAnalyticsLoading}
           />
         </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-8 w-8 p-0"
-          aria-label={`Edit rule ${entry.rule.displayName || entry.id}`}
-          title={`Edit rule ${entry.rule.displayName || entry.id}`}
-          onClick={onEdit}
-        >
-          <PencilSimpleIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-          aria-label={`Delete rule ${entry.rule.displayName || entry.id}`}
-          title={`Delete rule ${entry.rule.displayName || entry.id}`}
-          onClick={onDelete}
-        >
-          <TrashIcon className="h-4 w-4" />
-        </Button>
+        <DesignMenu
+          variant="actions"
+          trigger="icon"
+          triggerLabel={`Actions for rule ${ruleName}`}
+          align="end"
+          items={[
+            {
+              id: "edit",
+              label: "Edit rule",
+              icon: <PencilSimpleIcon className="h-4 w-4" />,
+              onClick: props.onEdit,
+            },
+            {
+              id: "delete",
+              label: "Delete rule",
+              icon: <TrashIcon className="h-4 w-4" />,
+              itemVariant: "destructive",
+              onClick: props.onDelete,
+            },
+          ]}
+        />
       </div>
     </div>
   );
 }
 
-// Default action card - looks like a rule but without controls
-function DefaultActionCard({
+// ─────────────────────────────────────────────────────────────────────────────
+// Default action row
+// ─────────────────────────────────────────────────────────────────────────────
+
+function DefaultActionRow({
   value,
   onChange,
 }: {
@@ -722,46 +909,53 @@ function DefaultActionCard({
   onChange: (value: 'allow' | 'reject') => void,
 }) {
   return (
-    <div className={cn(ruleCardClassName, "flex items-center gap-3 p-4 border-dashed border border-border/50 ring-0 transition-all duration-150 hover:transition-none")}>
-      {/* Spacer to align with switch position in rule cards */}
-      <div className="w-9" />
-
-      {/* Info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <Typography className="font-medium text-sm text-muted-foreground">
-            Default action
-          </Typography>
-        </div>
-        <Typography variant="secondary" className="text-xs mt-0.5">
-          When no rules match
+    <div className="flex items-center justify-between gap-3 rounded-xl ring-1 ring-foreground/[0.06] bg-background/40 px-4 py-3">
+      <div className="flex items-center gap-2">
+        <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
+        <Typography className="text-sm">
+          <span className="text-muted-foreground">If no rules match → </span>
+          <span className="font-medium">{value === 'allow' ? 'Allow sign-up' : 'Reject sign-up'}</span>
         </Typography>
       </div>
-
-      {/* Action dropdown */}
-      <Select value={value} onValueChange={onChange}>
-        <SelectTrigger className="w-36 h-8">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="allow">
-            <span className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-green-500" />
-              Allow
-            </span>
-          </SelectItem>
-          <SelectItem value="reject">
-            <span className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-red-500" />
-              Reject
-            </span>
-          </SelectItem>
-        </SelectContent>
-      </Select>
+      <DesignMenu
+        variant="selector"
+        trigger="button"
+        triggerLabel={value === 'allow' ? 'Allow' : 'Reject'}
+        value={value}
+        onValueChange={(v) => onChange(v as 'allow' | 'reject')}
+        options={[
+          { id: "allow", label: "Allow" },
+          { id: "reject", label: "Reject" },
+        ]}
+      />
     </div>
   );
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Empty state
+// ─────────────────────────────────────────────────────────────────────────────
+
+function EmptyState({ onAddRule, disabled }: { onAddRule: () => void, disabled: boolean }) {
+  return (
+    <DesignCard title="No rules yet" subtitle="Define rules to gate who can sign up" icon={ShieldCheckIcon} gradient="default">
+      <div className="flex items-center justify-between gap-3">
+        <Typography variant="secondary" className="text-xs">
+          Rules are evaluated top-to-bottom. The first matching rule decides the outcome.
+        </Typography>
+        <DesignButton size="sm" onClick={onAddRule} disabled={disabled}>
+          <PlusIcon className="h-4 w-4 mr-1.5" />
+          Add your first rule
+        </DesignButton>
+      </div>
+    </DesignCard>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Test rules section + dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
 const DEFAULT_TURNSTILE_OVERRIDE = "__default__";
 
 function TestRulesCard({
@@ -809,9 +1003,7 @@ function TestRulesCard({
           country_code: normalizedCountryCodeOverride === '' ? null : normalizedCountryCodeOverride,
           ...(turnstileResultOverride === DEFAULT_TURNSTILE_OVERRIDE
             ? {}
-            : {
-              turnstile_result: turnstileResultOverride,
-            }),
+            : { turnstile_result: turnstileResultOverride }),
           ...(normalizedBotRiskScoreOverride === ''
             ? {}
             : {
@@ -821,9 +1013,7 @@ function TestRulesCard({
               },
             }),
         }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       },
       'admin'
     );
@@ -836,15 +1026,6 @@ function TestRulesCard({
     setResult(data);
   }, [authMethod, botRiskScoreOverride, countryCodeOverride, email, freeTrialAbuseRiskScoreOverride, oauthProvider, stackAdminApp, turnstileResultOverride]);
 
-  const handleAuthMethodChange = (value: string) => {
-    if (value === 'password' || value === 'otp' || value === 'oauth' || value === 'passkey') {
-      setAuthMethod(value);
-      if (value !== 'oauth') {
-        setOauthProvider('');
-      }
-    }
-  };
-
   const evaluations = result?.evaluations ?? [];
   const matchedEvaluations = evaluations.filter((evaluation) => evaluation.status === 'matched');
   const decisionRule = result?.outcome.decision_rule_id
@@ -855,26 +1036,14 @@ function TestRulesCard({
     : undefined;
 
   const outcomeLabel = result?.outcome.should_allow ? 'Allow' : 'Reject';
-  const outcomeTone = result?.outcome.should_allow
-    ? "bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20"
-    : "bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20";
-
-  const actionBadgeClassName = (type: SignUpRulesTestEvaluation['action']['type']) => cn(
-    "text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded",
-    type === 'allow' && "bg-green-500/10 text-green-600 dark:text-green-400",
-    type === 'reject' && "bg-red-500/10 text-red-600 dark:text-red-400",
-    type === 'restrict' && "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-    type === 'log' && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-  );
+  const outcomeBadgeColor = result?.outcome.should_allow ? 'green' : 'red';
 
-  const statusBadgeClassName = (status: SignUpRulesTestEvaluationStatus) => cn(
-    "text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded",
-    status === 'matched' && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
-    status === 'not_matched' && "bg-muted/60 text-muted-foreground",
-    status === 'disabled' && "bg-muted/60 text-muted-foreground",
-    status === 'missing_condition' && "bg-amber-500/10 text-amber-600 dark:text-amber-400",
-    status === 'error' && "bg-red-500/10 text-red-600 dark:text-red-400",
-  );
+  const statusBadgeColor = (status: SignUpRulesTestEvaluationStatus): "green" | "red" | "orange" | "blue" | undefined => {
+    if (status === 'matched') return 'green';
+    if (status === 'missing_condition') return 'orange';
+    if (status === 'error') return 'red';
+    return undefined;
+  };
 
   const statusLabel: Record<SignUpRulesTestEvaluationStatus, string> = {
     matched: 'Matched',
@@ -891,277 +1060,333 @@ function TestRulesCard({
     'default-reject': 'Rejected by default',
   };
 
+  const fieldLabel = (text: string) => (
+    <Typography variant="secondary" className="text-[10px] font-semibold uppercase tracking-wider">
+      {text}
+    </Typography>
+  );
+
+  const sectionHeader = (icon: React.ReactNode, title: string, hint?: string) => (
+    <div className="flex items-center gap-2">
+      <div className="h-6 w-6 rounded-lg bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center shrink-0">
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
+        {hint && <span className="text-[10px] text-muted-foreground/80 ml-2">{hint}</span>}
+      </div>
+    </div>
+  );
+
+  const subCard = (children: React.ReactNode, className?: string) => (
+    <div className={cn("rounded-xl ring-1 ring-foreground/[0.06] bg-background/60 p-3 space-y-2", className)}>
+      {children}
+    </div>
+  );
+
   return (
     <div className="grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
-      <div className="space-y-3">
-        <div className="grid gap-3 md:grid-cols-2">
-          <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Email
-            </Typography>
-            <Input
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="user@company.com"
-            />
+      <div className="rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-4 space-y-4">
+        <div className="space-y-3">
+          {sectionHeader(
+            <UserIcon className="h-3.5 w-3.5 text-muted-foreground" />,
+            "Identity",
+            "What the user submits"
+          )}
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
+              {fieldLabel("Email")}
+              <DesignInput
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="user@company.com"
+                size="sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              {fieldLabel("Auth method")}
+              <DesignSelectorDropdown
+                value={authMethod}
+                onValueChange={(v) => {
+                  if (v === 'password' || v === 'otp' || v === 'oauth' || v === 'passkey') {
+                    setAuthMethod(v);
+                    if (v !== 'oauth') setOauthProvider('');
+                  }
+                }}
+                size="sm"
+                options={[
+                  { value: "password", label: "Password" },
+                  { value: "otp", label: "OTP" },
+                  { value: "oauth", label: "OAuth" },
+                  { value: "passkey", label: "Passkey" },
+                ]}
+              />
+            </div>
           </div>
           <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Auth method
-            </Typography>
-            <Select value={authMethod} onValueChange={handleAuthMethodChange}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="password">Password</SelectItem>
-                <SelectItem value="otp">OTP</SelectItem>
-                <SelectItem value="oauth">OAuth</SelectItem>
-                <SelectItem value="passkey">Passkey</SelectItem>
-              </SelectContent>
-            </Select>
+            {fieldLabel("OAuth provider")}
+            <DesignInput
+              value={oauthProvider}
+              onChange={(e) => setOauthProvider(e.target.value)}
+              placeholder={authMethod === 'oauth' ? "google" : "Only used for OAuth"}
+              disabled={authMethod !== 'oauth'}
+              list="sign-up-rule-test-oauth-providers"
+              size="sm"
+            />
+            <datalist id="sign-up-rule-test-oauth-providers">
+              {OAUTH_PROVIDER_OPTIONS.map((provider) => (
+                <option key={provider} value={provider} />
+              ))}
+            </datalist>
           </div>
         </div>
 
-        <div className="space-y-1.5">
-          <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-            OAuth provider
-          </Typography>
-          <Input
-            value={oauthProvider}
-            onChange={(e) => setOauthProvider(e.target.value)}
-            placeholder={authMethod === 'oauth' ? "google" : "Only used for OAuth"}
-            disabled={authMethod !== 'oauth'}
-            list="sign-up-rule-test-oauth-providers"
-          />
-          <datalist id="sign-up-rule-test-oauth-providers">
-            {OAUTH_PROVIDER_OPTIONS.map((provider) => (
-              <option key={provider} value={provider} />
-            ))}
-          </datalist>
-        </div>
+        <div className="h-px bg-foreground/[0.06]" />
 
-        <div className="grid gap-3 md:grid-cols-4">
-          <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Country code override
-            </Typography>
-            <CountryCodeInput
-              value={countryCodeOverride || null}
-              onChange={(val) => setCountryCodeOverride(val ?? "")}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Bot score override
-            </Typography>
-            <Input
-              value={botRiskScoreOverride}
-              onChange={(e) => setBotRiskScoreOverride(e.target.value)}
-              placeholder="0-100"
-              inputMode="numeric"
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Free trial abuse override
-            </Typography>
-            <Input
-              value={freeTrialAbuseRiskScoreOverride}
-              onChange={(e) => setFreeTrialAbuseRiskScoreOverride(e.target.value)}
-              placeholder="0-100"
-              inputMode="numeric"
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Typography variant="secondary" className="text-xs uppercase tracking-wide">
-              Turnstile override
-            </Typography>
-            <Select value={turnstileResultOverride} onValueChange={(value) => {
-              if (value === DEFAULT_TURNSTILE_OVERRIDE || value === "ok" || value === "invalid" || value === "error") {
-                setTurnstileResultOverride(value);
-              }
-            }}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={DEFAULT_TURNSTILE_OVERRIDE}>Default (use real result)</SelectItem>
-                <SelectItem value="ok">OK</SelectItem>
-                <SelectItem value="invalid">Invalid</SelectItem>
-                <SelectItem value="error">Error</SelectItem>
-              </SelectContent>
-            </Select>
+        <div className="space-y-3">
+          {sectionHeader(
+            <ShieldCheckIcon className="h-3.5 w-3.5 text-muted-foreground" />,
+            "Risk overrides",
+            "Optional"
+          )}
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+            <div className="space-y-1.5">
+              {fieldLabel("Country")}
+              <CountryCodeInput
+                value={countryCodeOverride || null}
+                onChange={(val) => setCountryCodeOverride(val ?? "")}
+              />
+            </div>
+            <div className="space-y-1.5">
+              {fieldLabel("Bot score")}
+              <DesignInput
+                value={botRiskScoreOverride}
+                onChange={(e) => setBotRiskScoreOverride(e.target.value)}
+                placeholder="0-100"
+                inputMode="numeric"
+                size="sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              {fieldLabel("Free-trial abuse")}
+              <DesignInput
+                value={freeTrialAbuseRiskScoreOverride}
+                onChange={(e) => setFreeTrialAbuseRiskScoreOverride(e.target.value)}
+                placeholder="0-100"
+                inputMode="numeric"
+                size="sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              {fieldLabel("Turnstile")}
+              <DesignSelectorDropdown
+                value={turnstileResultOverride}
+                onValueChange={(value) => {
+                  if (value === DEFAULT_TURNSTILE_OVERRIDE || value === "ok" || value === "invalid" || value === "error") {
+                    setTurnstileResultOverride(value);
+                  }
+                }}
+                size="sm"
+                options={[
+                  { value: DEFAULT_TURNSTILE_OVERRIDE, label: "Default (real result)" },
+                  { value: "ok", label: "OK" },
+                  { value: "invalid", label: "Invalid" },
+                  { value: "error", label: "Error" },
+                ]}
+              />
+            </div>
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
-          <Button
+        <div className="flex items-center justify-between gap-3 pt-1 border-t border-foreground/[0.06] -mx-1 px-1">
+          <Typography variant="secondary" className="text-xs">
+            Simulate a sign-up to preview which rules trigger.
+          </Typography>
+          <DesignButton
             size="sm"
             onClick={() => runAsynchronouslyWithAlert(runTest)}
             loading={isRunning}
           >
-            Run test
-          </Button>
-          <Typography variant="secondary" className="text-xs">
-            Simulate a sign-up request to preview which rules trigger.
-          </Typography>
-          <Typography variant="secondary" className="text-xs">
-            Leave overrides blank to derive country code and risk scores on the server from request geolocation and signup context.
-          </Typography>
+            <span className="inline-flex items-center gap-1.5">
+              <FlaskIcon className="h-4 w-4" />
+              Run test
+            </span>
+          </DesignButton>
         </div>
       </div>
 
       <div className="space-y-3">
         {!result ? (
-          <Alert>
-            Run a test to preview which rules trigger and what the sign-up outcome would be.
-          </Alert>
+          <div className="rounded-xl ring-1 ring-foreground/[0.06] bg-background/60 h-full min-h-[260px] flex items-center justify-center">
+            <DesignEmptyState
+              icon={FlaskIcon}
+              title="No simulation yet"
+              description="Fill in the context on the left, then run a test to see how each rule evaluates."
+            />
+          </div>
         ) : (
           <>
-            <div className={cn("rounded-lg border p-3 space-y-1", outcomeTone)}>
-              <div className="flex items-center justify-between">
-                <Typography className="text-sm font-semibold">Outcome</Typography>
-                <span className="text-xs font-semibold uppercase tracking-wide">{outcomeLabel}</span>
-              </div>
-              <Typography variant="secondary" className="text-xs">
-                {decisionLabel[result.outcome.decision]}
-              </Typography>
-              {decisionRule && (
-                <Typography variant="secondary" className="text-xs">
-                  Decision rule: {decisionRule.display_name || decisionRule.rule_id}
-                </Typography>
-              )}
-              {decisionRule?.action.message && (
-                <Typography variant="secondary" className="text-xs">
-                  Rejection reason: {decisionRule.action.message}
-                </Typography>
-              )}
-              {restrictedRule && (
+            {subCard(
+              <>
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <div className={cn(
+                      "h-7 w-7 rounded-lg flex items-center justify-center shrink-0 ring-1",
+                      result.outcome.should_allow
+                        ? "bg-emerald-500/10 ring-emerald-400/30 text-emerald-500"
+                        : "bg-red-500/10 ring-red-400/30 text-red-500",
+                    )}>
+                      {result.outcome.should_allow
+                        ? <CheckIcon className="h-4 w-4" />
+                        : <XIcon className="h-4 w-4" />}
+                    </div>
+                    <Typography className="text-sm font-semibold">Outcome</Typography>
+                  </div>
+                  <DesignBadge label={outcomeLabel} color={outcomeBadgeColor} size="sm" />
+                </div>
                 <Typography variant="secondary" className="text-xs">
-                  Restricted by: {restrictedRule.display_name || restrictedRule.rule_id}
+                  {decisionLabel[result.outcome.decision]}
                 </Typography>
-              )}
-            </div>
+                {decisionRule && (
+                  <Typography variant="secondary" className="text-xs">
+                    Decision rule: <span className="font-medium text-foreground">{decisionRule.display_name || decisionRule.rule_id}</span>
+                  </Typography>
+                )}
+                {decisionRule?.action.message && (
+                  <Typography variant="secondary" className="text-xs">
+                    Rejection reason: {decisionRule.action.message}
+                  </Typography>
+                )}
+                {restrictedRule && (
+                  <Typography variant="secondary" className="text-xs">
+                    Restricted by: <span className="font-medium text-foreground">{restrictedRule.display_name || restrictedRule.rule_id}</span>
+                  </Typography>
+                )}
+              </>,
+              "space-y-1.5"
+            )}
 
-            <div className="rounded-lg border p-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  Triggered rules
-                </Typography>
-                <Typography variant="secondary" className="text-[11px]">
-                  {matchedEvaluations.length} matched
-                </Typography>
-              </div>
-              {matchedEvaluations.length === 0 ? (
-                <Typography variant="secondary" className="text-xs">
-                  No rules matched. Default action applies.
-                </Typography>
-              ) : (
-                <div className="space-y-2">
-                  {matchedEvaluations.map((evaluation) => (
-                    <div
-                      key={evaluation.rule_id}
-                      className="flex items-center justify-between gap-2 rounded-md bg-background/60 px-2.5 py-2 ring-1 ring-foreground/[0.04]"
-                    >
-                      <div className="min-w-0">
-                        <Typography className="text-xs font-medium truncate">
-                          {evaluation.display_name || evaluation.rule_id}
-                        </Typography>
-                        <Typography variant="secondary" className="text-[10px] truncate">
-                          {evaluation.condition || "No condition"}
-                        </Typography>
-                      </div>
-                      <div className="flex items-center gap-1.5 flex-shrink-0">
-                        <span className={actionBadgeClassName(evaluation.action.type)}>
-                          {evaluation.action.type}
-                        </span>
-                        {evaluation.rule_id === result.outcome.decision_rule_id && (
-                          <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded bg-foreground/5 text-foreground">
-                            Decision
-                          </span>
-                        )}
-                        {evaluation.rule_id === result.outcome.restricted_because_of_rule_id && (
-                          <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
-                            Restrict
-                          </span>
-                        )}
+            {subCard(
+              <>
+                <div className="flex items-center justify-between">
+                  <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Triggered rules
+                  </Typography>
+                  <Typography variant="secondary" className="text-[11px] tabular-nums">
+                    {matchedEvaluations.length} matched
+                  </Typography>
+                </div>
+                {matchedEvaluations.length === 0 ? (
+                  <Typography variant="secondary" className="text-xs">
+                    No rules matched. Default action applies.
+                  </Typography>
+                ) : (
+                  <div className="space-y-2">
+                    {matchedEvaluations.map((evaluation) => (
+                      <div
+                        key={evaluation.rule_id}
+                        className="flex items-center justify-between gap-2 rounded-lg bg-background/60 px-2.5 py-2 ring-1 ring-foreground/[0.04]"
+                      >
+                        <div className="min-w-0">
+                          <Typography className="text-xs font-medium truncate">
+                            {evaluation.display_name || evaluation.rule_id}
+                          </Typography>
+                          <Typography variant="secondary" className="text-[10px] truncate font-mono">
+                            {evaluation.condition || "No condition"}
+                          </Typography>
+                        </div>
+                        <div className="flex items-center gap-1.5 flex-shrink-0">
+                          <ActionBadge type={evaluation.action.type} />
+                          {evaluation.rule_id === result.outcome.decision_rule_id && (
+                            <DesignBadge label="Decision" color="purple" size="sm" />
+                          )}
+                          {evaluation.rule_id === result.outcome.restricted_because_of_rule_id && (
+                            <DesignBadge label="Restrict" color="orange" size="sm" />
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+
+            {subCard(
+              <>
+                <div className="flex items-center justify-between">
+                  <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Evaluation trace
+                  </Typography>
+                  <Typography variant="secondary" className="text-[11px] tabular-nums">
+                    {evaluations.length} evaluated
+                  </Typography>
                 </div>
-              )}
-            </div>
+                {evaluations.length === 0 ? (
+                  <Typography variant="secondary" className="text-xs">
+                    No rules configured yet.
+                  </Typography>
+                ) : (
+                  <div className="space-y-1 max-h-48 overflow-auto pr-1">
+                    {evaluations.map((evaluation) => {
+                      const statusColor = statusBadgeColor(evaluation.status);
+                      return (
+                        <div
+                          key={evaluation.rule_id}
+                          className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-foreground/[0.03] transition-colors hover:transition-none"
+                          title={evaluation.error ?? undefined}
+                        >
+                          <div className="min-w-0">
+                            <Typography className="text-xs font-medium truncate">
+                              {evaluation.display_name || evaluation.rule_id}
+                            </Typography>
+                            <Typography variant="secondary" className="text-[10px] truncate font-mono">
+                              {evaluation.condition || "No condition"}
+                            </Typography>
+                          </div>
+                          <div className="flex items-center gap-1.5 flex-shrink-0">
+                            <ActionBadge type={evaluation.action.type} />
+                            {statusColor ? (
+                              <DesignBadge label={statusLabel[evaluation.status]} color={statusColor} size="sm" />
+                            ) : (
+                              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                                {statusLabel[evaluation.status]}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </>
+            )}
 
-            <div className="rounded-lg border p-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  Evaluation trace
-                </Typography>
-                <Typography variant="secondary" className="text-[11px]">
-                  {evaluations.length} evaluated
-                </Typography>
-              </div>
-              {evaluations.length === 0 ? (
-                <Typography variant="secondary" className="text-xs">
-                  No rules configured yet.
+            {subCard(
+              <>
+                <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Normalized context
                 </Typography>
-              ) : (
-                <div className="space-y-1 max-h-48 overflow-auto pr-1">
-                  {evaluations.map((evaluation) => (
-                    <div
-                      key={evaluation.rule_id}
-                      className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-muted/40 transition-colors hover:transition-none"
-                      title={evaluation.error ?? undefined}
-                    >
-                      <div className="min-w-0">
-                        <Typography className="text-xs font-medium truncate">
-                          {evaluation.display_name || evaluation.rule_id}
-                        </Typography>
-                        <Typography variant="secondary" className="text-[10px] truncate">
-                          {evaluation.condition || "No condition"}
-                        </Typography>
-                      </div>
-                      <div className="flex items-center gap-1.5 flex-shrink-0">
-                        <span className={actionBadgeClassName(evaluation.action.type)}>
-                          {evaluation.action.type}
-                        </span>
-                        <span className={statusBadgeClassName(evaluation.status)}>
-                          {statusLabel[evaluation.status]}
-                        </span>
-                      </div>
+                <div className="grid grid-cols-2 gap-x-3 gap-y-1">
+                  {[
+                    ["Email", result.context.email || "(empty)"],
+                    ["Domain", result.context.email_domain || "(empty)"],
+                    ["Country", result.context.country_code || "(empty)"],
+                    ["OAuth", result.context.oauth_provider || "(empty)"],
+                    ["Turnstile", result.context.turnstile_result],
+                    ["Bot risk", String(result.context.risk_scores.bot)],
+                    ["Free-trial risk", String(result.context.risk_scores.free_trial_abuse)],
+                  ].map(([label, value]) => (
+                    <div key={label} className="flex items-center justify-between gap-2 min-w-0">
+                      <Typography variant="secondary" className="text-[10px] uppercase tracking-wider shrink-0">
+                        {label}
+                      </Typography>
+                      <Typography className="text-xs font-mono truncate">{value}</Typography>
                     </div>
                   ))}
                 </div>
-              )}
-            </div>
-
-            <div className="rounded-lg border p-3 space-y-1">
-              <Typography className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Normalized context
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Email: {result.context.email || "(empty)"}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Email domain: {result.context.email_domain || "(empty)"}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Country code: {result.context.country_code || "(empty)"}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                OAuth provider: {result.context.oauth_provider || "(empty)"}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Turnstile result: {result.context.turnstile_result}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Risk score (bot): {result.context.risk_scores.bot}
-              </Typography>
-              <Typography variant="secondary" className="text-xs">
-                Risk score (free trial abuse): {result.context.risk_scores.free_trial_abuse}
-              </Typography>
-            </div>
+              </>,
+              "space-y-1.5"
+            )}
           </>
         )}
       </div>
@@ -1171,32 +1396,72 @@ function TestRulesCard({
 
 function TestRulesDialog({
   stackAdminApp,
+  trigger,
 }: {
   stackAdminApp: ReturnType<typeof useAdminApp>,
+  trigger: React.ReactNode,
 }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button size="sm" variant="secondary">
-          Open tester
-        </Button>
+        {trigger}
       </DialogTrigger>
-      <DialogContent className="max-w-5xl">
-        <DialogHeader>
-          <DialogTitle>Test sign-up rules</DialogTitle>
-          <DialogDescription>
-            Simulate a sign-up request to see which rules trigger and how the final decision is made.
-          </DialogDescription>
+      <DialogContent
+        className="max-w-5xl gap-0 p-0 overflow-hidden border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"
+        overlayProps={{ className: "bg-black/50 backdrop-blur-sm" }}
+      >
+        <DialogHeader className="px-6 pt-6 pb-4 border-b border-foreground/[0.06]">
+          <div className="flex items-start gap-3">
+            <div className="h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0">
+              <FlaskIcon className="h-4 w-4 text-primary" />
+            </div>
+            <div className="flex-1 min-w-0 space-y-1">
+              <DialogTitle className="text-base">Test sign-up rules</DialogTitle>
+              <DialogDescription className="text-xs">
+                Simulate a sign-up request to preview which rules trigger and how the final decision is made.
+              </DialogDescription>
+            </div>
+          </div>
         </DialogHeader>
-        <DialogBody>
+
+        <DialogBody className="mx-0 my-0 w-auto px-6 py-4">
           <TestRulesCard stackAdminApp={stackAdminApp} />
         </DialogBody>
+
+        <DialogFooter className="px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]">
+          <DialogClose asChild>
+            <DesignButton variant="secondary" size="sm">Close</DesignButton>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 }
 
-// Delete confirmation dialog
+function TestRulesPanel({ stackAdminApp }: { stackAdminApp: ReturnType<typeof useAdminApp> }) {
+  const triggerButton = (
+    <DesignButton size="sm" variant="secondary">
+      <FlaskIcon className="h-4 w-4 mr-1.5" />
+      Open tester
+    </DesignButton>
+  );
+
+  return (
+    <DesignCard title="Test rules" subtitle="Try sample sign-ups without touching the live flow" icon={FlaskIcon} gradient="default">
+      <div className="flex items-center justify-between gap-3 flex-wrap">
+        <Typography variant="secondary" className="text-xs">
+          Run a simulated sign-up against your current ruleset and see the outcome.
+        </Typography>
+        <TestRulesDialog stackAdminApp={stackAdminApp} trigger={triggerButton} />
+      </div>
+    </DesignCard>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete confirmation
+// ─────────────────────────────────────────────────────────────────────────────
+
 function DeleteRuleDialog({
   open,
   onOpenChange,
@@ -1212,7 +1477,7 @@ function DeleteRuleDialog({
     <ActionDialog
       open={open}
       onOpenChange={onOpenChange}
-      title="Delete Rule"
+      title="Delete rule"
       danger
       okButton={{
         label: "Delete",
@@ -1227,7 +1492,10 @@ function DeleteRuleDialog({
   );
 }
 
-// Custom hook to fetch sign-up rules analytics
+// ─────────────────────────────────────────────────────────────────────────────
+// Analytics hook
+// ─────────────────────────────────────────────────────────────────────────────
+
 function useSignUpRulesAnalytics() {
   const stackAdminApp = useAdminApp();
   const [analytics, setAnalytics] = useState<Map<string, RuleAnalytics>>(new Map());
@@ -1242,7 +1510,7 @@ function useSignUpRulesAnalytics() {
       const response = await (stackAdminApp as any)[stackAppInternalsSymbol].sendRequest(
         '/internal/sign-up-rules-stats',
         { method: 'GET' },
-        'admin' // Required for internal endpoints
+        'admin'
       );
       if (cancelled) return;
 
@@ -1268,15 +1536,145 @@ function useSignUpRulesAnalytics() {
     };
 
     runAsynchronouslyWithAlert(fetchAnalytics);
-
-    return () => {
-      cancelled = true;
-    };
+    return () => { cancelled = true; };
   }, [stackAdminApp]);
 
   return { analytics, timespanHours, isLoading };
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Page body
+// ─────────────────────────────────────────────────────────────────────────────
+
+type PageBodyProps = {
+  signUpRules: SignUpRuleEntry[],
+  ruleAnalytics: Map<string, RuleAnalytics>,
+  analyticsTimespanHours: number,
+  isAnalyticsLoading: boolean,
+  isCreatingNew: boolean,
+  newRuleId: string | null,
+  editingRuleId: string | null,
+  hasOrderChanges: boolean,
+  defaultAction: 'allow' | 'reject',
+  isSavingOrder: boolean,
+  onAddRule: () => void,
+  onSaveRule: (ruleId: string, rule: SignUpRule) => Promise<void>,
+  onCancelEdit: () => void,
+  onEditRule: (id: string) => void,
+  onRequestDelete: (entry: SignUpRuleEntry) => void,
+  onToggleEnabled: (id: string, enabled: boolean) => void,
+  onDefaultActionChange: (value: 'allow' | 'reject') => void,
+  onDragEnd: (event: DragEndEvent) => void,
+  onSaveOrder: () => void,
+  onDiscardOrder: () => void,
+  stackAdminApp: ReturnType<typeof useAdminApp>,
+};
+
+function PageBody(props: PageBodyProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const renderRules = () => (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={props.onDragEnd}>
+      <SortableContext items={props.signUpRules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-2">
+          {props.signUpRules.map((entry) => (
+            <SortableRuleRow
+              key={entry.id}
+              entry={entry}
+              analytics={props.ruleAnalytics.get(entry.id)}
+              analyticsTimespanHours={props.analyticsTimespanHours}
+              isAnalyticsLoading={props.isAnalyticsLoading}
+              isEditing={props.editingRuleId === entry.id}
+              onEdit={() => props.onEditRule(entry.id)}
+              onDelete={() => props.onRequestDelete(entry)}
+              onToggleEnabled={(enabled) => props.onToggleEnabled(entry.id, enabled)}
+              onSave={props.onSaveRule}
+              onCancelEdit={props.onCancelEdit}
+            />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+
+  return (
+    <div className="relative">
+      <div className="flex flex-col gap-2">
+        {props.isCreatingNew && props.newRuleId && (
+          <RuleEditor
+            ruleId={props.newRuleId}
+            isNew
+            onSave={props.onSaveRule}
+            onCancel={props.onCancelEdit}
+          />
+        )}
+
+        {props.hasOrderChanges && (
+          <DesignAlert
+            variant="info"
+            title="Rule order has been changed"
+            description={
+              <span className="flex items-center gap-2">
+                <ArrowsDownUpIcon className="h-4 w-4" />
+                Save to commit, or discard to revert.
+              </span>
+            }
+          />
+        )}
+
+        {props.hasOrderChanges && (
+          <div className="flex items-center justify-end gap-2 mb-1">
+            <DesignButton
+              variant="ghost"
+              size="sm"
+              onClick={props.onDiscardOrder}
+              disabled={props.isSavingOrder}
+            >
+              <XIcon className="h-4 w-4 mr-1.5" />
+              Discard
+            </DesignButton>
+            <DesignButton
+              size="sm"
+              onClick={props.onSaveOrder}
+              loading={props.isSavingOrder}
+            >
+              <CheckIcon className="h-4 w-4 mr-1.5" />
+              Save order
+            </DesignButton>
+          </div>
+        )}
+
+        {props.signUpRules.length > 0 && renderRules()}
+
+        {props.signUpRules.length === 0 && !props.isCreatingNew && (
+          <EmptyState
+            onAddRule={props.onAddRule}
+            disabled={props.editingRuleId !== null || props.isCreatingNew || props.hasOrderChanges}
+          />
+        )}
+
+        <DefaultActionRow
+          value={props.defaultAction}
+          onChange={props.onDefaultActionChange}
+        />
+
+        <div className="pt-10">
+          <TestRulesPanel stackAdminApp={props.stackAdminApp} />
+        </div>
+
+        <div className="pt-5" aria-hidden />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Page client — owns all state; passes handlers to PageBody
+// ─────────────────────────────────────────────────────────────────────────────
+
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
@@ -1289,32 +1687,25 @@ export default function PageClient() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [ruleToDelete, setRuleToDelete] = useState<SignUpRuleEntry | null>(null);
 
-  // Fetch analytics data
   const {
     analytics: ruleAnalytics,
     timespanHours: analyticsTimespanHours,
     isLoading: isAnalyticsLoading,
   } = useSignUpRulesAnalytics();
 
-  // Type assertion needed because schema changes take effect at build time
   const configWithRules = config as ConfigWithSignUpRules;
 
-  // Server state (source of truth)
   const serverRules = useMemo(() =>
     typedEntries(configWithRules.auth.signUpRules).map(([id, rule]) => ({ id, rule })),
     [configWithRules.auth.signUpRules]
   );
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- TypeScript may not see these as optional due to type assertion
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const defaultAction = configWithRules.auth.signUpRulesDefaultAction ?? 'allow';
 
-  // ===== LOCAL STATE FOR REORDERING ONLY =====
-  // When user drags to reorder, we store the new order locally until they save
   const [pendingOrder, setPendingOrder] = useState<string[] | null>(null);
 
-  // Compute the displayed rules: if we have a pending order, reorder server rules accordingly
   const signUpRules: SignUpRuleEntry[] = useMemo(() => {
     if (pendingOrder === null) return serverRules;
-    // Reorder server rules based on pending order
     const ruleMap = new Map(serverRules.map(r => [r.id, r]));
     const result: SignUpRuleEntry[] = [];
     for (const id of pendingOrder) {
@@ -1326,17 +1717,8 @@ export default function PageClient() {
 
   const hasOrderChanges = pendingOrder !== null;
 
-  // DnD sensors
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
-
     if (over && active.id !== over.id) {
       const currentOrder = pendingOrder ?? serverRules.map(r => r.id);
       const oldIndex = currentOrder.indexOf(active.id as string);
@@ -1353,9 +1735,7 @@ export default function PageClient() {
     setEditingRuleId(null);
   };
 
-  // Save rule immediately to config
   const handleSaveRule = async (ruleId: string, rule: SignUpRule) => {
-    // For new rules, set priority to be at the top (don't mutate the input)
     const ruleToSave: SignUpRule = isCreatingNew
       ? { ...rule, priority: serverRules.length + 1 }
       : rule;
@@ -1378,7 +1758,6 @@ export default function PageClient() {
     setNewRuleId(null);
   };
 
-  // Delete rule immediately
   const handleDeleteRule = async () => {
     if (!ruleToDelete) return;
     await updateConfig({
@@ -1388,7 +1767,6 @@ export default function PageClient() {
       },
       pushable: true,
     });
-    // Clear from pending order if present
     if (pendingOrder) {
       setPendingOrder(pendingOrder.filter(id => id !== ruleToDelete.id));
     }
@@ -1396,7 +1774,6 @@ export default function PageClient() {
     setRuleToDelete(null);
   };
 
-  // Toggle enabled immediately
   const handleToggleEnabled = async (ruleId: string, enabled: boolean) => {
     await updateConfig({
       adminApp: stackAdminApp,
@@ -1407,7 +1784,6 @@ export default function PageClient() {
     });
   };
 
-  // Change default action immediately
   const handleDefaultActionChange = async (value: 'allow' | 'reject') => {
     await updateConfig({
       adminApp: stackAdminApp,
@@ -1418,7 +1794,6 @@ export default function PageClient() {
     });
   };
 
-  // Save reorder changes
   const handleSaveOrder = async () => {
     if (!pendingOrder) return;
 
@@ -1436,9 +1811,7 @@ export default function PageClient() {
     setPendingOrder(null);
   };
 
-  const handleDiscardOrder = () => {
-    setPendingOrder(null);
-  };
+  const handleDiscardOrder = () => setPendingOrder(null);
 
   const [handleSaveOrderAsync, isSavingOrder] = useAsyncCallback(handleSaveOrder, [handleSaveOrder]);
 
@@ -1450,158 +1823,45 @@ export default function PageClient() {
         title="Sign-up Rules"
         description="Create rules to control who can sign up. Rules are evaluated in order from top to bottom."
         actions={
-          <Button
+          <DesignButton
             onClick={handleAddRule}
             disabled={isAnyEditing || hasOrderChanges}
           >
             <PlusIcon className="h-4 w-4 mr-2" />
             Add rule
-          </Button>
+          </DesignButton>
         }
       >
-        {/* Rules list and default action */}
-        <div className="relative space-y-2">
-          {/* New rule editor (at the top when creating) */}
-          {isCreatingNew && newRuleId && (
-            <RuleEditor
-              ruleId={newRuleId}
-              isNew
-              onSave={handleSaveRule}
-              onCancel={handleCancelEdit}
-            />
-          )}
-
-          {/* Pending order banner */}
-          {hasOrderChanges && (
-            <div className="rounded-xl border-2 border-primary/50 bg-primary/5 p-4">
-              <div className="flex items-center justify-between gap-4 mb-3">
-                <div className="flex items-center gap-2 text-sm font-medium text-primary">
-                  <ArrowsDownUpIcon className="h-4 w-4" />
-                  <span>Rule order has been changed</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={handleDiscardOrder}
-                    disabled={isSavingOrder}
-                  >
-                    <XIcon className="h-4 w-4 mr-1.5" />
-                    Discard
-                  </Button>
-                  <Button
-                    size="sm"
-                    onClick={handleSaveOrderAsync}
-                    loading={isSavingOrder}
-                  >
-                    <CheckIcon className="h-4 w-4 mr-1.5" />
-                    Save order
-                  </Button>
-                </div>
-              </div>
-
-              {/* Rules list inside the banner */}
-              <div className="space-y-2">
-                <DndContext
-                  sensors={sensors}
-                  collisionDetection={closestCenter}
-                  onDragEnd={handleDragEnd}
-                >
-                  <SortableContext
-                    items={signUpRules.map((r) => r.id)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    {signUpRules.map((entry) => (
-                      <SortableRuleRow
-                        key={entry.id}
-                        entry={entry}
-                        analytics={ruleAnalytics.get(entry.id)}
-                        analyticsTimespanHours={analyticsTimespanHours}
-                        isAnalyticsLoading={isAnalyticsLoading}
-                        isEditing={editingRuleId === entry.id}
-                        onEdit={() => {
-                          setEditingRuleId(entry.id);
-                          setIsCreatingNew(false);
-                        }}
-                        onDelete={() => {
-                          setRuleToDelete(entry);
-                          setDeleteDialogOpen(true);
-                        }}
-                        onToggleEnabled={(enabled) => runAsynchronouslyWithAlert(handleToggleEnabled(entry.id, enabled))}
-                        onSave={handleSaveRule}
-                        onCancelEdit={handleCancelEdit}
-                      />
-                    ))}
-                  </SortableContext>
-                </DndContext>
-              </div>
-            </div>
-          )}
-
-          {/* Normal rules list (when no pending order) */}
-          {!hasOrderChanges && signUpRules.length > 0 && (
-            <DndContext
-              sensors={sensors}
-              collisionDetection={closestCenter}
-              onDragEnd={handleDragEnd}
-            >
-              <SortableContext
-                items={signUpRules.map((r) => r.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                {signUpRules.map((entry) => (
-                  <SortableRuleRow
-                    key={entry.id}
-                    entry={entry}
-                    analytics={ruleAnalytics.get(entry.id)}
-                    analyticsTimespanHours={analyticsTimespanHours}
-                    isAnalyticsLoading={isAnalyticsLoading}
-                    isEditing={editingRuleId === entry.id}
-                    onEdit={() => {
-                      setEditingRuleId(entry.id);
-                      setIsCreatingNew(false);
-                    }}
-                    onDelete={() => {
-                      setRuleToDelete(entry);
-                      setDeleteDialogOpen(true);
-                    }}
-                    onToggleEnabled={(enabled) => runAsynchronouslyWithAlert(handleToggleEnabled(entry.id, enabled))}
-                    onSave={handleSaveRule}
-                    onCancelEdit={handleCancelEdit}
-                  />
-                ))}
-              </SortableContext>
-            </DndContext>
-          )}
-
-          {/* Empty state */}
-          {!hasOrderChanges && signUpRules.length === 0 && !isCreatingNew && (
-            <Alert>
-              No sign-up rules configured. Click &quot;Add rule&quot; to create your first rule.
-            </Alert>
-          )}
-
-          {/* Default action card - always at the bottom */}
-          <DefaultActionCard
-            value={defaultAction}
-            onChange={(v) => runAsynchronouslyWithAlert(handleDefaultActionChange(v))}
-          />
-          <div className="pt-10">
-            <div className="relative rounded-xl border border-dashed border-border/70 bg-muted/10 p-4">
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <Typography className="text-sm font-semibold">Test rules</Typography>
-                  <Typography variant="secondary" className="text-xs">
-                    Try sample sign-ups without touching the live flow.
-                  </Typography>
-                </div>
-                <TestRulesDialog stackAdminApp={stackAdminApp} />
-              </div>
-            </div>
-          </div>
-        </div>
+        <PageBody
+          signUpRules={signUpRules}
+          ruleAnalytics={ruleAnalytics}
+          analyticsTimespanHours={analyticsTimespanHours}
+          isAnalyticsLoading={isAnalyticsLoading}
+          isCreatingNew={isCreatingNew}
+          newRuleId={newRuleId}
+          editingRuleId={editingRuleId}
+          hasOrderChanges={hasOrderChanges}
+          defaultAction={defaultAction}
+          isSavingOrder={isSavingOrder}
+          onAddRule={handleAddRule}
+          onSaveRule={handleSaveRule}
+          onCancelEdit={handleCancelEdit}
+          onEditRule={(id) => {
+            setEditingRuleId(id);
+            setIsCreatingNew(false);
+          }}
+          onRequestDelete={(entry) => {
+            setRuleToDelete(entry);
+            setDeleteDialogOpen(true);
+          }}
+          onToggleEnabled={(id, enabled) => runAsynchronouslyWithAlert(handleToggleEnabled(id, enabled))}
+          onDefaultActionChange={(v) => runAsynchronouslyWithAlert(handleDefaultActionChange(v))}
+          onDragEnd={handleDragEnd}
+          onSaveOrder={handleSaveOrderAsync}
+          onDiscardOrder={handleDiscardOrder}
+          stackAdminApp={stackAdminApp}
+        />
 
-        {/* Delete confirmation dialog */}
         <DeleteRuleDialog
           open={deleteDialogOpen}
           onOpenChange={setDeleteDialogOpen}
diff --git a/apps/dashboard/src/components/ui/action-dialog.tsx b/apps/dashboard/src/components/ui/action-dialog.tsx
index 7a437818e8..c002a3591a 100644
--- a/apps/dashboard/src/components/ui/action-dialog.tsx
+++ b/apps/dashboard/src/components/ui/action-dialog.tsx
@@ -32,6 +32,17 @@ export type ActionDialogProps = {
   confirmText?: string,
   children?: React.ReactNode,
   preventClose?: boolean,
+  /**
+   * When true, pointer / focus outside the dialog does not dismiss it (overlay clicks, third-party
+   * fixed UI such as preview toolbars, etc.). Header close, Escape, and explicit actions still work.
+   * Unlike `preventClose`, this does not hide the dialog’s close button.
+   */
+  keepOpenOnOutsideInteraction?: boolean,
+  /**
+   * Extra classes merged onto the dialog's content surface. Useful for variant chrome
+   * (border, ring, bg, shadow, padding, rounded, etc.).
+   */
+  contentClassName?: string,
 };
 
 export function ActionDialog(props: ActionDialogProps) {
@@ -49,6 +60,8 @@ export function ActionDialog(props: ActionDialogProps) {
   const { disabled: okButtonDisabledProp, ...okButtonProps } = okButtonExtraProps ?? {};
   const okButtonDisabled = (!!props.confirmText && !confirmed) || !!okButtonDisabledProp;
 
+  const blockDismissOnOutside = !!(props.preventClose || props.keepOpenOnOutsideInteraction);
+
   const onOpenChange = (open: boolean) => {
     if (!open) {
       props.onClose?.();
@@ -67,8 +80,13 @@ export function ActionDialog(props: ActionDialogProps) {
       </DialogTrigger>}
 
       <DialogContent
-        onInteractOutside={props.preventClose ? (e) => e.preventDefault() : undefined}
-        className={props.preventClose ? "[&>button]:hidden" : ""}
+        onInteractOutside={blockDismissOnOutside ? (e) => e.preventDefault() : undefined}
+        onPointerDownOutside={blockDismissOnOutside ? (e) => e.preventDefault() : undefined}
+        onFocusOutside={blockDismissOnOutside ? (e) => e.preventDefault() : undefined}
+        className={[
+          props.preventClose ? "[&>button]:hidden" : "",
+          props.contentClassName ?? "",
+        ].filter(Boolean).join(" ")}
       >
         <DialogHeader>
           <DialogTitle className="flex items-center">
diff --git a/packages/dashboard-ui-components/src/components/dialog.tsx b/packages/dashboard-ui-components/src/components/dialog.tsx
new file mode 100644
index 0000000000..cbea022da0
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/dialog.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  cn,
+} from "@stackframe/stack-ui";
+import React from "react";
+
+export type DesignDialogSize =
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl"
+  | "full";
+
+export type DesignDialogVariant = "glassmorphic" | "plain";
+
+const dialogSizeClasses = new Map<DesignDialogSize, string>([
+  ["sm", "max-w-sm"],
+  ["md", "max-w-md"],
+  ["lg", "max-w-lg"],
+  ["xl", "max-w-xl"],
+  ["2xl", "max-w-2xl"],
+  ["3xl", "max-w-3xl"],
+  ["4xl", "max-w-4xl"],
+  ["5xl", "max-w-5xl"],
+  ["6xl", "max-w-6xl"],
+  ["7xl", "max-w-7xl"],
+  ["full", "max-w-[calc(100vw-2rem)]"],
+]);
+
+const dialogSurfaceClasses = new Map<DesignDialogVariant, string>([
+  ["glassmorphic", "border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"],
+  ["plain", "border bg-background shadow-lg sm:rounded-lg"],
+]);
+
+const dialogOverlayClasses = new Map<DesignDialogVariant, string | undefined>([
+  ["glassmorphic", "bg-black/50 backdrop-blur-sm"],
+  ["plain", undefined],
+]);
+
+type DesignDialogIcon = React.ElementType<{ className?: string }>;
+
+type DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, "children">;
+
+export type DesignDialogProps = {
+  trigger?: React.ReactElement,
+  size?: DesignDialogSize,
+  variant?: DesignDialogVariant,
+  icon?: DesignDialogIcon | null,
+  title?: React.ReactNode,
+  description?: React.ReactNode,
+  headerContent?: React.ReactNode,
+  customHeader?: React.ReactNode,
+  footer?: React.ReactNode,
+  noBodyPadding?: boolean,
+  hideTopCloseButton?: boolean,
+  className?: string,
+  overlayClassName?: string,
+  headerClassName?: string,
+  bodyClassName?: string,
+  footerClassName?: string,
+  children?: React.ReactNode,
+} & DesignDialogRootProps;
+
+/**
+ * Canonical dashboard modal surface. This wraps the base dialog primitives with
+ * a reusable glassmorphic shell and consistent header/body/footer regions.
+ */
+export function DesignDialog({
+  trigger,
+  size = "lg",
+  variant = "glassmorphic",
+  icon: Icon = null,
+  title,
+  description,
+  headerContent,
+  customHeader,
+  footer,
+  noBodyPadding = false,
+  hideTopCloseButton = false,
+  className,
+  overlayClassName,
+  headerClassName,
+  bodyClassName,
+  footerClassName,
+  children,
+  ...dialogRootProps
+}: DesignDialogProps) {
+  const resolvedSizeClass = dialogSizeClasses.get(size) ?? "max-w-lg";
+  const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get("glassmorphic");
+  const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);
+  const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
+  const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
+  const shouldRenderBody = React.Children.count(children) > 0;
+
+  return (
+    <Dialog {...dialogRootProps}>
+      {trigger != null && (
+        <DialogTrigger asChild>
+          {trigger}
+        </DialogTrigger>
+      )}
+
+      <DialogContent
+        className={cn(
+          "gap-0 p-0 overflow-hidden",
+          resolvedSizeClass,
+          resolvedSurfaceClass,
+          className
+        )}
+        overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}
+        noCloseButton={hideTopCloseButton}
+      >
+        {shouldRenderHeader && (
+          <DialogHeader className={cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
+            {customHeader ?? (
+              <>
+                {shouldRenderTopHeaderRow && (
+                  <div className={cn("flex items-start gap-3", Icon == null && "gap-0")}>
+                    {Icon != null && (
+                      <div className="h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0">
+                        <Icon className="h-4 w-4 text-primary" />
+                      </div>
+                    )}
+                    {(title != null || description != null) && (
+                      <div className="flex-1 min-w-0 space-y-1">
+                        {title != null ? (
+                          <DialogTitle className="text-base">
+                            {title}
+                          </DialogTitle>
+                        ) : null}
+                        {description != null ? (
+                          <DialogDescription className="text-xs">
+                            {description}
+                          </DialogDescription>
+                        ) : null}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {headerContent != null ? (
+                  <div className={cn(shouldRenderTopHeaderRow && "mt-4")}>
+                    {headerContent}
+                  </div>
+                ) : null}
+              </>
+            )}
+          </DialogHeader>
+        )}
+
+        {shouldRenderBody && (
+          <DialogBody
+            className={cn(
+              "mx-0 my-0 w-auto",
+              noBodyPadding ? "px-0 py-0" : "px-6 py-4",
+              bodyClassName
+            )}
+          >
+            {children}
+          </DialogBody>
+        )}
+
+        {footer != null ? (
+          <DialogFooter className={cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
+            {footer}
+          </DialogFooter>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const DesignDialogRoot = Dialog;
+export const DesignDialogTrigger = DialogTrigger;
+export const DesignDialogClose = DialogClose;
+export const DesignDialogTitle = DialogTitle;
+export const DesignDialogDescription = DialogDescription;
diff --git a/packages/dashboard-ui-components/src/index.ts b/packages/dashboard-ui-components/src/index.ts
index 71c2da44f9..4e3d82bf19 100644
--- a/packages/dashboard-ui-components/src/index.ts
+++ b/packages/dashboard-ui-components/src/index.ts
@@ -13,6 +13,16 @@ export type { DesignCardProps, DesignCardTintProps } from "./components/card";
 export { CursorBlastEffect } from "./components/cursor-blast-effect";
 export type { CursorBlastEffectProps } from "./components/cursor-blast-effect";
 
+export {
+  DesignDialog,
+  DesignDialogClose,
+  DesignDialogDescription,
+  DesignDialogRoot,
+  DesignDialogTitle,
+  DesignDialogTrigger,
+} from "./components/dialog";
+export type { DesignDialogProps, DesignDialogSize, DesignDialogVariant } from "./components/dialog";
+
 export { DesignEditMode, useDesignEditMode } from "./components/edit-mode";
 
 export { DesignInput } from "./components/input";
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000000..ac4b83f00a
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "roids": {
+      "source": "developing-gamer/roids",
+      "sourceType": "github",
+      "computedHash": "dfb5b8c385bb5f427c13e621b572d8adaa449687d121f0f231f9aab69ebbc6bb"
+    }
+  }
+}