diff --git a/.agents/skills/roids/SKILL.md b/.agents/skills/roids/SKILL.md
new file mode 100644
index 0000000000..90f7405dfe
--- /dev/null
+++ b/.agents/skills/roids/SKILL.md
@@ -0,0 +1,22 @@
+---
+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
+
+**Preview-only — not for production.** The TryRoids hosted runtime (`https://tryroids.com/roid-tool.js`) and any wiring described in `SKILL.txt` are intended only for sandboxed variant previews. Never include them in production dashboard or app code, and never inject a `<script src="https://tryroids.com/roid-tool.js">` into shipped bundles.
+
+1. Fetch the source URL below for documentation only—do not load it via `<script src>` in production code.
+2. Follow `SKILL.txt` exactly: "wire" means using the documented inline markup pattern (the `data-roid-*` attributes on variant elements) inside a sandboxed preview runner. The hosted runtime URL is referenced in docs or loaded only by the preview sandbox, never by application code.
+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 8f02dabfb2..d372493754 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 `DataGrid` + `useDataSource` + `createDefaultDataGridState` from `@stackframe/dashboard-ui-components`.
 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 §4.14 below.
+
 When using a primitive directly:
 
 - keep visual style compatible with design-components surfaces
@@ -635,6 +640,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 8212d87f2c..11cd4aff78 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
@@ -18,10 +18,13 @@ import {
   Cube,
   Envelope,
   FileText,
+  FlaskIcon,
   HardDrive,
+  InfoIcon,
   MagnifyingGlassIcon,
   Package,
   PencilSimple,
+  PulseIcon,
   Sliders,
   Sparkle,
   StackSimple,
@@ -43,6 +46,10 @@ import {
   DesignButton,
   DesignCard,
   DesignCategoryTabs,
+  DesignDialog,
+  DesignDialogClose,
+  type DesignDialogSize,
+  type DesignDialogVariant,
   DesignInput,
   DesignPillToggle,
 } from "@stackframe/dashboard-ui-components";
@@ -60,6 +67,7 @@ type ComponentId =
   | "cursor-blast"
   | "data-grid"
   | "data-table"
+  | "dialog"
   | "editable-grid"
   | "input"
   | "list-item-row"
@@ -78,6 +86,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" },
@@ -445,6 +454,16 @@ export default function PageClient() {
   const [dtState, setDtState] = useState(() => createDefaultDataGridState(DEMO_PRODUCT_COLUMNS));
   const dtData = useDataSource({ data: DEMO_PRODUCTS, columns: DEMO_PRODUCT_COLUMNS, getRowId: (r: DemoProduct) => r.id, sorting: dtState.sorting, quickSearch: dtState.quickSearch, pagination: dtState.pagination, paginationMode: "client" });
 
+  // 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");
@@ -911,6 +930,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">
@@ -1610,6 +1731,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">
@@ -2067,6 +2282,39 @@ export default function PageClient() {
   toolbar={${dgShowToolbar ? "undefined" : "false"}}
   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") {
       return `<DataGrid
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..aa5075e473 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,256 @@ 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 () => {
+          if (pendingChange == null) return;
+          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 +524,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 +550,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 +562,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 +574,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 +599,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 +618,7 @@ export default function PageClient() {
     if (localAllowClientDeletion !== undefined) {
       await updateConfig({
         adminApp: stackAdminApp,
-        configUpdate: {
-          'users.allowClientUserDeletion': localAllowClientDeletion,
-        },
+        configUpdate: { 'users.allowClientUserDeletion': localAllowClientDeletion },
         pushable: true,
       });
     }
@@ -375,191 +633,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 +788,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..73d351250d 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 { useState, type ReactNode } 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: 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 117d7e6638..f502456540 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
@@ -12,6 +12,8 @@ import {
   DesignCard,
   DesignCardTint,
   DesignCategoryTabs,
+  DesignDialog,
+  DesignDialogClose,
   DesignInput,
   DesignPillToggle,
 } from "@stackframe/dashboard-ui-components";
@@ -30,15 +32,19 @@ import {
   cn,
 } from "@/components/ui";
 import {
+  BrowsersIcon,
   CheckCircle,
   Cube,
   DotsThree,
   Envelope,
   FileText,
+  FlaskIcon,
   HardDrive,
+  InfoIcon,
   MagnifyingGlassIcon,
   Palette,
   PencilSimple,
+  PulseIcon,
   Sliders,
   SquaresFourIcon,
   StackSimple,
@@ -1099,6 +1105,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: "ReactElement", 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 DesignDialogClose 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]/onboarding/onboarding-email-verification-setting.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/onboarding-email-verification-setting.tsx
new file mode 100644
index 0000000000..1bfa73a6bf
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/onboarding-email-verification-setting.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Switch, Typography } from "@/components/ui";
+import { EnvelopeSimple } from "@phosphor-icons/react";
+import { useId } from "react";
+
+const DESCRIPTION =
+  "Require a verified primary email before users can continue after sign-up.";
+
+export type OnboardingEmailVerificationSettingProps = {
+  isEnabled: boolean,
+  isToggling: boolean,
+  onCheckedChange: (checked: boolean) => void,
+};
+
+/**
+ * Settings-strip layout: label + description + switch in one compact row.
+ */
+export function OnboardingEmailVerificationSetting({
+  isEnabled,
+  isToggling,
+  onCheckedChange,
+}: OnboardingEmailVerificationSettingProps) {
+  const switchId = useId();
+  return (
+    <div className="flex flex-col gap-3 rounded-2xl bg-foreground/[0.02] p-4 ring-1 ring-foreground/[0.06] sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-foreground/[0.04] ring-1 ring-foreground/[0.06]">
+          <EnvelopeSimple className="h-4 w-4 text-muted-foreground" />
+        </div>
+        <label htmlFor={switchId} className="min-w-0 cursor-pointer">
+          <Typography className="text-sm font-medium text-foreground">
+            Require email verification
+          </Typography>
+          <Typography variant="secondary" className="text-xs">
+            {DESCRIPTION}
+          </Typography>
+        </label>
+      </div>
+      <div className="flex shrink-0 justify-end sm:pl-4">
+        <Switch
+          id={switchId}
+          checked={isEnabled}
+          disabled={isToggling}
+          loading={isToggling}
+          onCheckedChange={onCheckedChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
index a97c02bc10..deac771312 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
@@ -1,16 +1,21 @@
 "use client";
 
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
-import { DesignBadge } from "@/components/design-components";
-import { DesignCard } from "@/components/design-components";
-import { ActionDialog, Spinner, Switch } from "@/components/ui";
+import {
+  DesignBadge,
+  DesignButton,
+  DesignDialog,
+  DesignDialogClose,
+} from "@/components/design-components";
+import { Typography } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
-import { ShieldCheck } from "@phosphor-icons/react";
+import { WarningCircle } from "@phosphor-icons/react";
 import type { RestrictedReason } from "@stackframe/stack-shared/dist/schema-fields";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { useState } from "react";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
+import { OnboardingEmailVerificationSetting } from "./onboarding-email-verification-setting";
 
 type AffectedUser = {
   id: string,
@@ -20,13 +25,118 @@ type AffectedUser = {
 };
 
 type PendingChange = {
-  title: string,
-  description: string,
   affectedUsers: AffectedUser[],
   totalAffectedCount: number,
   onConfirm: () => Promise<void>,
 };
 
+function EnableEmailVerificationDialog({
+  pendingChange,
+  onDismiss,
+}: {
+  pendingChange: PendingChange | null,
+  onDismiss: () => void,
+}) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const description =
+    pendingChange == null
+      ? undefined
+      : pendingChange.totalAffectedCount === 1
+        ? "Existing user who has not verified will need to complete verification the next time they open your app."
+        : "Existing users who have not verified will need to complete verification the next time they open your app.";
+
+  return (
+    <DesignDialog
+      open={pendingChange != null}
+      onOpenChange={(open) => {
+        if (!open && !isConfirming) {
+          onDismiss();
+        }
+      }}
+      size="lg"
+      icon={WarningCircle}
+      title="Enable email verification?"
+      description={description}
+      footer={(
+        <>
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm" disabled={isConfirming}>
+              <span>Cancel</span>
+            </DesignButton>
+          </DesignDialogClose>
+          <DesignButton
+            size="sm"
+            disabled={isConfirming}
+            onClick={() => {
+              if (pendingChange == null || isConfirming) return;
+              setIsConfirming(true);
+              runAsynchronouslyWithAlert(
+                pendingChange.onConfirm().finally(() => setIsConfirming(false)),
+              );
+            }}
+          >
+            <span>{isConfirming ? "Enabling…" : "Enable"}</span>
+          </DesignButton>
+        </>
+      )}
+    >
+      {pendingChange != null && (
+        <div className="flex flex-col gap-3">
+          {pendingChange.affectedUsers.length > 0 && (
+            <div>
+              <div className="mb-2 flex flex-wrap items-baseline gap-2">
+                <span className="text-lg font-semibold tabular-nums text-primary">
+                  {pendingChange.totalAffectedCount.toLocaleString()}
+                </span>
+                <Typography variant="secondary" className="text-[10px] font-semibold uppercase tracking-wider">
+                  Affected accounts
+                </Typography>
+              </div>
+              <div className="max-h-[min(200px,35vh)] overflow-y-auto rounded-xl bg-background/60 ring-1 ring-foreground/[0.06]">
+                <ul className="divide-y divide-foreground/[0.06]">
+                  {pendingChange.affectedUsers.map((user) => (
+                    <li
+                      key={user.id}
+                      className="flex flex-col gap-0.5 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
+                    >
+                      <div className="min-w-0">
+                        <span className="block truncate text-sm font-medium text-foreground">
+                          {user.displayName || user.primaryEmail || "Anonymous user"}
+                        </span>
+                        {user.displayName && user.primaryEmail && (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {user.primaryEmail}
+                          </span>
+                        )}
+                      </div>
+                      <div className="w-fit shrink-0">
+                        <DesignBadge
+                          label={user.restrictedReason.type === "email_not_verified" ? "Unverified" : "Anonymous"}
+                          color="orange"
+                          size="sm"
+                        />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+                {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
+                  <p className="border-t border-foreground/[0.06] px-3 py-2 text-xs text-muted-foreground">
+                    +
+                    {" "}
+                    {(pendingChange.totalAffectedCount - pendingChange.affectedUsers.length).toLocaleString()}
+                    {" "}
+                    more
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </DesignDialog>
+  );
+}
+
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
@@ -39,7 +149,6 @@ export default function PageClient() {
   const handleEmailVerificationChange = async (checked: boolean) => {
     setIsToggling(true);
     try {
-      // If enabling email verification, check for affected users first
       if (checked && !projectConfig.onboarding.requireEmailVerification) {
         // any cast needed: previewAffectedUsersByOnboardingChange is a dynamically-typed admin API method
         const preview = await (stackAdminApp as any).previewAffectedUsersByOnboardingChange(
@@ -49,8 +158,6 @@ export default function PageClient() {
 
         if (preview.totalAffectedCount > 0) {
           setPendingChange({
-            title: "Enable email verification requirement",
-            description: `This change will require ${preview.totalAffectedCount} user${preview.totalAffectedCount === 1 ? '' : 's'} to verify their email before they can continue using your application. They will be prompted to do so the next time they visit your application.`,
             affectedUsers: preview.affectedUsers,
             totalAffectedCount: preview.totalAffectedCount,
             onConfirm: async () => {
@@ -66,7 +173,6 @@ export default function PageClient() {
         }
       }
 
-      // No affected users or disabling — apply directly
       await updateConfig({
         adminApp: stackAdminApp,
         configUpdate: { "onboarding.requireEmailVerification": checked },
@@ -79,101 +185,24 @@ export default function PageClient() {
 
   return (
     <AppEnabledGuard appId="onboarding">
-      <PageLayout title="Onboarding">
-        <DesignCard gradient="default" glassmorphic>
-          <div className="flex flex-col gap-4">
-            {/* Header row: icon + title + badge + switch */}
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex items-center gap-2 min-w-0">
-                <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                  <ShieldCheck className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
-                </div>
-                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-                  Email Verification
-                </span>
-                <DesignBadge
-                  label={isEnabled ? "Enabled" : "Disabled"}
-                  color={isEnabled ? "green" : "red"}
-                  size="sm"
-                />
-              </div>
-              <div className="flex items-center flex-shrink-0">
-                {isToggling ? (
-                  <div className="flex items-center justify-center h-5 w-9">
-                    <Spinner size={14} className="text-muted-foreground" />
-                  </div>
-                ) : (
-                  <Switch
-                    checked={isEnabled}
-                    onCheckedChange={(checked) => {
-                      runAsynchronouslyWithAlert(handleEmailVerificationChange(checked));
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-
-            {/* Description */}
-            <p className="text-sm text-muted-foreground leading-relaxed">
-              {isEnabled
-                ? "Users who haven\u2019t verified their primary email will need to complete verification before they can continue. Unverified users are filtered out by default when listing users, and will be redirected to verify when using the SDK with redirect options."
-                : "Email verification is not required. Users can access your application without verifying their email address."
-              }
-            </p>
-          </div>
-        </DesignCard>
+      <PageLayout
+        title="Onboarding"
+        description="Control first-run requirements so users meet your app’s trust bar before they continue."
+      >
+        <div className="flex flex-col gap-4">
+          <OnboardingEmailVerificationSetting
+            isEnabled={isEnabled}
+            isToggling={isToggling}
+            onCheckedChange={(checked: boolean) => {
+              runAsynchronouslyWithAlert(handleEmailVerificationChange(checked));
+            }}
+          />
+        </div>
 
-        <ActionDialog
-          open={!!pendingChange}
-          onClose={() => setPendingChange(null)}
-          title="Enable email verification?"
-          danger
-          okButton={{
-            label: "Enable",
-            onClick: async () => {
-              await pendingChange?.onConfirm();
-            },
-          }}
-          cancelButton={{
-            label: "Cancel",
-          }}
-        >
-          {pendingChange && (
-            <div className="flex flex-col gap-3">
-              <p className="text-sm text-muted-foreground">
-                {pendingChange.totalAffectedCount} existing user{pendingChange.totalAffectedCount === 1 ? '' : 's'} will
-                need to verify their email next time they visit your app.
-              </p>
-
-              {pendingChange.affectedUsers.length > 0 && (
-                <div className="flex flex-col gap-1.5">
-                  {pendingChange.affectedUsers.map((user) => (
-                    <div key={user.id} className="flex items-center gap-2 text-sm">
-                      <span className="text-foreground truncate">
-                        {user.displayName || user.primaryEmail || "Anonymous user"}
-                      </span>
-                      {user.displayName && user.primaryEmail && (
-                        <span className="text-muted-foreground truncate text-xs">
-                          {user.primaryEmail}
-                        </span>
-                      )}
-                      <DesignBadge
-                        label={user.restrictedReason.type === "email_not_verified" ? "Unverified" : "Anonymous"}
-                        color="orange"
-                        size="sm"
-                      />
-                    </div>
-                  ))}
-                  {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
-                    <p className="text-xs text-muted-foreground">
-                      + {pendingChange.totalAffectedCount - pendingChange.affectedUsers.length} more
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </ActionDialog>
+        <EnableEmailVerificationDialog
+          pendingChange={pendingChange}
+          onDismiss={() => setPendingChange(null)}
+        />
       </PageLayout>
     </AppEnabledGuard>
   );
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 fe05db84a4..099998e204 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,30 @@ import { CountryCodeInput } from "@/components/country-code-select";
 import { ConditionBuilder, isConditionTreeValid } from "@/components/rule-builder";
 import {
   ActionDialog,
-  Alert,
-  Button,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   cn,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  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 +40,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, CaretDownIcon, CaretRightIcon, CheckIcon, CheckCircleIcon, CircleNotchIcon, PencilSimpleIcon, PlusIcon, SlidersIcon, TrashIcon, XCircleIcon, 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 +71,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 +135,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 +161,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 +201,6 @@ function RuleSparkline({
   timespanHours: number,
   isLoading: boolean,
 }) {
-  // Show skeleton while loading
   if (isLoading) {
     return (
       <div className="flex items-center gap-1">
@@ -167,9 +210,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 +265,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 +375,8 @@ function RuleTriggerHistoryDialog({
 }: {
   ruleId: string,
   ruleDisplayName: string,
+  ruleActionType: ActionType,
+  ruleEnabled: boolean,
   sparklineData: { hour: string, count: number }[],
   countInTimespan: number,
   allTimeCount: number,
@@ -278,27 +420,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) {
+        if (reset) setIsInitialLoading(false);
+        else setIsLoadingMore(false);
       }
     }
   };
@@ -313,22 +446,24 @@ 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}
+      size="2xl"
+      icon={PulseIcon}
+      title="Rule trigger history"
+      description={`${totalLabel} for this rule`}
+      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,107 @@ 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}
+      )}
+      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="space-y-3">
+        <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>
+      </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 +593,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 +609,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,102 +636,147 @@ 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) => {
+        if (v === "allow" || v === "reject" || v === "restrict" || v === "log") {
+          state.setActionType(v);
+        }
+      }}
+      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-white ring-1 ring-foreground/[0.08] dark:bg-background">
+      <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-white ring-1 ring-foreground/[0.12] text-muted-foreground text-[11px] font-semibold flex items-center justify-center tabular-nums shrink-0 mt-0.5 dark:bg-background">
+        {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-xl bg-white ring-1 ring-foreground/[0.14] shadow-sm transition-colors duration-150 hover:transition-none p-4 space-y-4 dark:bg-background">
+      <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 — table-style row with kebab menu
+// ─────────────────────────────────────────────────────────────────────────────
+
+type RuleRowProps = {
   entry: SignUpRuleEntry,
+  index: number,
   analytics?: RuleAnalytics,
   analyticsTimespanHours: number,
   isAnalyticsLoading: boolean,
@@ -572,149 +786,138 @@ 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 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';
+  const orderLabel = String(props.index + 1).padStart(2, "0");
 
-  const conditionSummary = entry.rule.condition || '(no condition)';
-  const isEnabled = entry.rule.enabled !== false;
-
-  // If editing, show the editor
-  if (isEditing) {
+  if (props.isEditing) {
     return (
-      <div ref={setNodeRef} style={style}>
+      <div ref={setNodeRef} style={style} className="p-3">
         <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,
-        "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",
+        "grid min-h-16 grid-cols-[3rem_minmax(0,1fr)_auto] items-center gap-3 px-3 py-3 cursor-grab active:cursor-grabbing",
+        "border-b border-foreground/[0.06] bg-white last:border-b-0 dark:bg-background",
+        "sm:grid-cols-[3rem_3rem_minmax(0,1fr)_7rem_7rem_2.5rem]",
+        !isDragging && "transition-colors duration-150 hover:bg-foreground/[0.025] hover:transition-none",
+        isDragging && "opacity-50 shadow-lg z-10 bg-background",
       )}
-      {...attributes}
-      {...listeners}
     >
-      {/* Enable/disable switch - on the left */}
-      <div
-        onClick={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <Switch
-          checked={isEnabled}
-          onCheckedChange={onToggleEnabled}
-        />
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <DotsSixVerticalIcon className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+        <span className="text-[11px] font-medium tabular-nums">{orderLabel}</span>
       </div>
-
-      {/* Rule info */}
-      <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'}
+      <div className="hidden sm:flex items-center">
+        {switchControl}
+      </div>
+      <div className="min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="sm:hidden">{switchControl}</span>
+          <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>
         </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="hidden sm:flex items-center">
+        <ActionBadge type={actionType} dim={!isEnabled} />
+      </div>
       <div
-        className="flex items-center gap-1"
+        className="flex items-center justify-end gap-2"
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {/* Sparkline and trigger count */}
-        <div className="hidden sm:flex items-center mr-1">
+        <div className="hidden sm:flex items-center">
           <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>
+        <div className="sm:hidden">
+          <ActionBadge type={actionType} dim={!isEnabled} />
+        </div>
+        <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 +925,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 min-h-14 items-center justify-between gap-3 border-t border-foreground/[0.06] bg-gray-50 px-4 py-3 dark:bg-muted/10">
+      <div className="flex items-center gap-2 min-w-0">
+        <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>
+      <DesignSelectorDropdown
+        value={value}
+        onValueChange={(v) => {
+          if (v === "allow" || v === "reject") onChange(v);
+        }}
+        className="w-32 shrink-0"
+        options={[
+          { value: "allow", label: "Allow" },
+          { value: "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__";
 
 
@@ -808,9 +1018,7 @@ function useTestRulesState(stackAdminApp: ReturnType<typeof useAdminApp>) {
           country_code: normalizedCountryCodeOverride === '' ? null : normalizedCountryCodeOverride,
           ...(turnstileResultOverride === DEFAULT_TURNSTILE_OVERRIDE
             ? {}
-            : {
-              turnstile_result: turnstileResultOverride,
-            }),
+            : { turnstile_result: turnstileResultOverride }),
           ...(normalizedBotRiskScoreOverride === ''
             ? {}
             : {
@@ -820,9 +1028,7 @@ function useTestRulesState(stackAdminApp: ReturnType<typeof useAdminApp>) {
               },
             }),
         }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       },
       'admin'
     );
@@ -851,16 +1057,6 @@ function useTestRulesState(stackAdminApp: ReturnType<typeof useAdminApp>) {
 
 type TestRulesState = ReturnType<typeof useTestRulesState>;
 
-function actionBadgeClassNameFor(type: SignUpRulesTestEvaluation['action']['type']) {
-  return 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 DECISION_LABEL: Record<SignUpRulesTestResult['outcome']['decision'], string> = {
   allow: 'Allowed by rule',
   reject: 'Rejected by rule',
@@ -876,264 +1072,368 @@ const STATUS_LABEL: Record<SignUpRulesTestEvaluationStatus, string> = {
   error: 'Error',
 };
 
-// Essentials-first test rules card with a collapsible "Advanced" panel
-// and an outcome-forward results view. The outcome box mounts as soon as
-// a run kicks off so users see a loading indicator before it resolves.
-function TestRulesCard({ state }: { state: TestRulesState }) {
-  const [showAdvanced, setShowAdvanced] = useState(false);
-  const { result, isRunning } = state;
+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;
+};
 
-  // Keep the results region mounted across loading -> result transitions
-  // so we can animate the color/icon change smoothly.
-  const hasRun = isRunning || result !== null;
+function TestRulesCard({ state }: { state: TestRulesState }) {
+  const {
+    email, setEmail,
+    authMethod, setAuthMethod,
+    oauthProvider, setOauthProvider,
+    countryCodeOverride, setCountryCodeOverride,
+    turnstileResultOverride, setTurnstileResultOverride,
+    botRiskScoreOverride, setBotRiskScoreOverride,
+    freeTrialAbuseRiskScoreOverride, setFreeTrialAbuseRiskScoreOverride,
+    result,
+    runTest,
+    isRunning,
+  } = state;
 
-  const matchedCount = result?.evaluations.filter((e) => e.status === 'matched').length ?? 0;
+  const evaluations = result?.evaluations ?? [];
+  const matchedEvaluations = evaluations.filter((evaluation) => evaluation.status === 'matched');
   const decisionRule = result?.outcome.decision_rule_id
-    ? result.evaluations.find((e) => e.rule_id === result.outcome.decision_rule_id)
+    ? evaluations.find((evaluation) => evaluation.rule_id === result.outcome.decision_rule_id)
     : undefined;
   const restrictedRule = result?.outcome.restricted_because_of_rule_id
     && result.outcome.restricted_because_of_rule_id !== result.outcome.decision_rule_id
-    ? result.evaluations.find((e) => e.rule_id === result.outcome.restricted_because_of_rule_id)
+    ? evaluations.find((evaluation) => evaluation.rule_id === result.outcome.restricted_because_of_rule_id)
     : undefined;
+  const outcomeLabel = result?.outcome.should_allow ? 'Allow' : 'Reject';
+  const outcomeBadgeColor = result?.outcome.should_allow ? 'green' : 'red';
+
+  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="space-y-5">
-      <div className="space-y-4">
-        <div className="grid gap-3 md:grid-cols-[2fr_1fr]">
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium">Email</label>
-            <Input
-              value={state.email}
-              onChange={(e) => state.setEmail(e.target.value)}
-              placeholder="user@company.com"
-            />
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
+      <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">
-            <label className="text-sm font-medium">Sign-up method</label>
-            <Select value={state.authMethod} onValueChange={(v) => {
-              if (v === 'password' || v === 'otp' || v === 'oauth' || v === 'passkey') {
-                state.setAuthMethod(v);
-                if (v !== 'oauth') state.setOauthProvider('');
-              }
-            }}>
-              <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>
 
-        <button
-          type="button"
-          onClick={() => setShowAdvanced((v) => !v)}
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {showAdvanced ? <CaretDownIcon className="h-3.5 w-3.5" /> : <CaretRightIcon className="h-3.5 w-3.5" />}
-          <SlidersIcon className="h-3.5 w-3.5" />
-          Advanced options
-          <span className="text-muted-foreground/70">
-            (OAuth provider, country, risk scores, turnstile)
-          </span>
-        </button>
+        <div className="h-px bg-foreground/[0.06]" />
 
-        {showAdvanced && (
-          <div className="rounded-lg border border-dashed p-4 space-y-3 bg-muted/20">
-            {state.authMethod === 'oauth' && (
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">OAuth provider</label>
-                <Input
-                  value={state.oauthProvider}
-                  onChange={(e) => state.setOauthProvider(e.target.value)}
-                  placeholder="google"
-                  list="sign-up-rule-test-oauth-providers-v1"
-                />
-                <datalist id="sign-up-rule-test-oauth-providers-v1">
-                  {OAUTH_PROVIDER_OPTIONS.map((p) => <option key={p} value={p} />)}
-                </datalist>
-              </div>
-            )}
-            <div className="grid gap-3 md:grid-cols-2">
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">Country</label>
-                <CountryCodeInput
-                  value={state.countryCodeOverride || null}
-                  onChange={(val) => state.setCountryCodeOverride(val ?? "")}
-                />
-                <Typography variant="secondary" className="text-[11px]">Leave blank to use real geolocation.</Typography>
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">Turnstile result</label>
-                <Select value={state.turnstileResultOverride} onValueChange={(v) => {
-                  if (v === DEFAULT_TURNSTILE_OVERRIDE || v === "ok" || v === "invalid" || v === "error") {
-                    state.setTurnstileResultOverride(v);
+        <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);
                   }
-                }}>
-                  <SelectTrigger><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={DEFAULT_TURNSTILE_OVERRIDE}>Use real result</SelectItem>
-                    <SelectItem value="ok">OK</SelectItem>
-                    <SelectItem value="invalid">Invalid</SelectItem>
-                    <SelectItem value="error">Error</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">Bot risk score</label>
-                <Input
-                  value={state.botRiskScoreOverride}
-                  onChange={(e) => state.setBotRiskScoreOverride(e.target.value)}
-                  placeholder="0-100 (blank = real)"
-                  inputMode="numeric"
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">Free trial abuse score</label>
-                <Input
-                  value={state.freeTrialAbuseRiskScoreOverride}
-                  onChange={(e) => state.setFreeTrialAbuseRiskScoreOverride(e.target.value)}
-                  placeholder="0-100 (blank = real)"
-                  inputMode="numeric"
-                />
-              </div>
+                }}
+                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 justify-end">
-          <Button
-            size="lg"
-            onClick={() => runAsynchronouslyWithAlert(state.runTest)}
-            loading={state.isRunning}
+        <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>
+            <span className="inline-flex items-center gap-1.5">
+              <FlaskIcon className="h-4 w-4" />
+              Run test
+            </span>
+          </DesignButton>
         </div>
       </div>
 
-      <div
-        className={cn(
-          "grid transition-[grid-template-rows,opacity,margin] duration-300 ease-out",
-          hasRun ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-        )}
-      >
-        <div className="overflow-hidden">
-          <div className="space-y-3">
-            {/* Outcome hero — mounts on run start with neutral/loading style,
-                then fades into green/red once the result arrives. */}
-            <div
-              className={cn(
-                "rounded-xl border-2 p-5 flex items-center gap-4 transition-colors duration-500 ease-out",
-                !result && "bg-muted/30 border-muted-foreground/20 text-muted-foreground",
-                result?.outcome.should_allow && "bg-green-500/5 border-green-500/30 text-green-700 dark:text-green-400",
-                result && !result.outcome.should_allow && "bg-red-500/5 border-red-500/30 text-red-700 dark:text-red-400",
-              )}
-            >
-              <div className="relative h-10 w-10 flex-shrink-0">
-                <CircleNotchIcon
-                  className={cn(
-                    "absolute inset-0 h-10 w-10 text-muted-foreground/60 animate-spin transition-opacity duration-200",
-                    result ? "opacity-0" : "opacity-100",
-                  )}
-                />
-                <CheckCircleIcon
-                  weight="fill"
-                  className={cn(
-                    "absolute inset-0 h-10 w-10 transition-opacity duration-300",
-                    result?.outcome.should_allow ? "opacity-100" : "opacity-0",
-                  )}
-                />
-                <XCircleIcon
-                  weight="fill"
-                  className={cn(
-                    "absolute inset-0 h-10 w-10 transition-opacity duration-300",
-                    result && !result.outcome.should_allow ? "opacity-100" : "opacity-0",
-                  )}
-                />
-              </div>
-              <div className="flex-1 min-w-0">
-                <Typography className="text-xl font-bold">
-                  {!result && "Running test…"}
-                  {result && `Sign-up would ${result.outcome.should_allow ? 'be allowed' : 'be rejected'}`}
-                </Typography>
-                <Typography variant="secondary" className="text-sm">
-                  {!result && "Evaluating configured rules."}
-                  {result && (
-                    <>
-                      {DECISION_LABEL[result.outcome.decision]}
-                      {decisionRule && <> — <span className="font-medium">{decisionRule.display_name || decisionRule.rule_id}</span></>}
-                    </>
-                  )}
+      <div className="space-y-3">
+        {!result ? (
+          <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>
+        ) : (
+          <>
+            {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">
+                  {DECISION_LABEL[result.outcome.decision]}
                 </Typography>
-                {restrictedRule && (
-                  <Typography variant="secondary" className="text-xs mt-1">
-                    Restricted by: <span className="font-medium">{restrictedRule.display_name || restrictedRule.rule_id}</span>
+                {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 mt-1 italic">
-                    Reason: {decisionRule.action.message}
+                  <Typography variant="secondary" className="text-xs">
+                    Rejection reason: {decisionRule.action.message}
                   </Typography>
                 )}
-              </div>
-            </div>
+                {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"
+            )}
 
-            {/* Matched rules + context only render once the result arrives; they
-                slide in underneath the outcome hero. */}
-            <div
-              className={cn(
-                "grid transition-[grid-template-rows,opacity] duration-300 ease-out",
-                result ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-              )}
-            >
-              <div className="overflow-hidden space-y-3">
-                {result && (
-                  <>
-                    <details className="rounded-lg border bg-background/40">
-                      <summary className="cursor-pointer px-4 py-2.5 text-sm font-medium flex items-center justify-between">
-                        <span>Rule evaluations</span>
-                        <span className="text-xs text-muted-foreground">{matchedCount} matched of {result.evaluations.length}</span>
-                      </summary>
-                      <div className="px-4 pb-3 space-y-1">
-                        {result.evaluations.map((e) => (
-                          <div key={e.rule_id} className="flex items-center gap-2 py-1.5 border-t first:border-t-0">
-                            <span className={cn(
-                              "h-2 w-2 rounded-full flex-shrink-0",
-                              e.status === 'matched' && "bg-emerald-500",
-                              e.status === 'not_matched' && "bg-muted-foreground/30",
-                              e.status === 'disabled' && "bg-muted-foreground/20",
-                              e.status === 'error' && "bg-red-500",
-                              e.status === 'missing_condition' && "bg-amber-500",
-                            )} />
-                            <span className="text-sm font-medium truncate flex-1">{e.display_name || e.rule_id}</span>
-                            <span className="text-[11px] text-muted-foreground">{STATUS_LABEL[e.status]}</span>
-                            <span className={actionBadgeClassNameFor(e.action.type)}>{e.action.type}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </details>
-
-                    <details className="rounded-lg border bg-background/40">
-                      <summary className="cursor-pointer px-4 py-2.5 text-sm font-medium">Resolved context</summary>
-                      <div className="px-4 pb-3 pt-1 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
-                        <div><span className="text-muted-foreground">Email: </span>{result.context.email || "(empty)"}</div>
-                        <div><span className="text-muted-foreground">Domain: </span>{result.context.email_domain || "(empty)"}</div>
-                        <div><span className="text-muted-foreground">Country: </span>{result.context.country_code || "(empty)"}</div>
-                        <div><span className="text-muted-foreground">OAuth provider: </span>{result.context.oauth_provider || "(empty)"}</div>
-                        <div><span className="text-muted-foreground">Turnstile: </span>{result.context.turnstile_result}</div>
-                        <div><span className="text-muted-foreground">Bot score: </span>{result.context.risk_scores.bot}</div>
-                        <div><span className="text-muted-foreground">Free-trial abuse: </span>{result.context.risk_scores.free_trial_abuse}</div>
+            {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>
-                    </details>
-                  </>
+                    ))}
+                  </div>
                 )}
-              </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>
+                {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={STATUS_LABEL[evaluation.status]} color={statusColor} size="sm" />
+                            ) : (
+                              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                                {STATUS_LABEL[evaluation.status]}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </>
+            )}
+
+            {subCard(
+              <>
+                <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Normalized context
+                </Typography>
+                <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>
+              </>,
+              "space-y-1.5"
+            )}
+          </>
+        )}
       </div>
     </div>
   );
@@ -1141,34 +1441,64 @@ function TestRulesCard({ state }: { state: TestRulesState }) {
 
 function TestRulesDialog({
   stackAdminApp,
+  trigger,
 }: {
   stackAdminApp: ReturnType<typeof useAdminApp>,
+  trigger: React.ReactElement,
 }) {
   const state = useTestRulesState(stackAdminApp);
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="secondary">
-          Open tester
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-3xl">
-        <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>
-        </DialogHeader>
-        <DialogBody>
-          <TestRulesCard state={state} />
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
+    <DesignDialog
+      size="5xl"
+      icon={FlaskIcon}
+      title="Test sign-up rules"
+      description="Simulate a sign-up request to preview which rules trigger and how the final decision is made."
+      trigger={trigger}
+      footer={(
+        <DesignDialogClose asChild>
+          <DesignButton variant="secondary" size="sm">Close</DesignButton>
+        </DesignDialogClose>
+      )}
+    >
+      <TestRulesCard state={state} />
+    </DesignDialog>
   );
 }
 
-// Delete confirmation dialog
+function TestRulesPanel({ stackAdminApp }: { stackAdminApp: ReturnType<typeof useAdminApp> }) {
+  const state = useTestRulesState(stackAdminApp);
+
+  return (
+    <Accordion type="single" collapsible className="w-full rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+      <AccordionItem value="test-rules" className="border-0">
+        <AccordionTrigger className="px-4 py-3 hover:no-underline">
+          <div className="flex items-center gap-3 text-left">
+            <div className="h-7 w-7 rounded-md bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
+              <FlaskIcon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Typography className="text-xs font-semibold uppercase tracking-wider">Test rules</Typography>
+              <Typography variant="secondary" className="text-xs font-normal">
+                Try sample sign-ups without touching the live flow
+              </Typography>
+            </div>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="px-4 pb-4">
+          <div className="border-t border-foreground/[0.06] pt-4">
+            <TestRulesCard state={state} />
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete confirmation
+// ─────────────────────────────────────────────────────────────────────────────
+
 function DeleteRuleDialog({
   open,
   onOpenChange,
@@ -1184,7 +1514,7 @@ function DeleteRuleDialog({
     <ActionDialog
       open={open}
       onOpenChange={onOpenChange}
-      title="Delete Rule"
+      title="Delete rule"
       danger
       okButton={{
         label: "Delete",
@@ -1199,7 +1529,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());
@@ -1214,7 +1547,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;
 
@@ -1240,7 +1573,6 @@ function useSignUpRulesAnalytics() {
     };
 
     runAsynchronouslyWithAlert(fetchAnalytics);
-
     return () => {
       cancelled = true;
     };
@@ -1249,6 +1581,161 @@ function useSignUpRulesAnalytics() {
   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,
+  defaultAction: 'allow' | 'reject',
+  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,
+  stackAdminApp: ReturnType<typeof useAdminApp>,
+};
+
+function PageBody(props: PageBodyProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const renderRules = () => {
+    if (props.signUpRules.length === 0) {
+      return (
+        <EmptyState
+          onAddRule={props.onAddRule}
+          disabled={props.editingRuleId !== null}
+        />
+      );
+    }
+
+    return (
+      <div className="overflow-hidden rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+        <div className="hidden min-h-9 grid-cols-[3rem_3rem_minmax(0,1fr)_7rem_7rem_2.5rem] items-center gap-3 border-b border-foreground/[0.06] bg-gray-50 px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground dark:bg-muted/20 sm:grid">
+          <span>Order</span>
+          <span>On</span>
+          <span>Rule / condition</span>
+          <span>Action</span>
+          <span>Activity</span>
+          <span />
+        </div>
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={props.onDragEnd}>
+          <SortableContext items={props.signUpRules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
+            <div>
+              {props.signUpRules.map((entry, index) => (
+                <SortableRuleRow
+                  key={entry.id}
+                  entry={entry}
+                  index={index}
+                  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>
+        <DefaultActionRow
+          value={props.defaultAction}
+          onChange={props.onDefaultActionChange}
+        />
+      </div>
+    );
+  };
+
+  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.isCreatingNew || props.signUpRules.length > 0) && (
+          renderRules()
+        )}
+
+        {props.signUpRules.length === 0 && props.isCreatingNew && (
+          <div className="overflow-hidden rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+            <DefaultActionRow
+              value={props.defaultAction}
+              onChange={props.onDefaultActionChange}
+            />
+          </div>
+        )}
+
+        <div className="pt-6">
+          <TestRulesPanel stackAdminApp={props.stackAdminApp} />
+        </div>
+
+        <div className="pt-5" aria-hidden />
+      </div>
+    </div>
+  );
+}
+
+function OrderChangeActions({
+  isSavingOrder,
+  onSaveOrder,
+  onDiscardOrder,
+}: {
+  isSavingOrder: boolean,
+  onSaveOrder: () => Promise<void>,
+  onDiscardOrder: () => void,
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-amber-500/25 bg-amber-50 px-2 py-1.5 dark:bg-amber-950/20">
+      <span className="hidden items-center gap-1.5 px-1 text-xs text-amber-800 dark:text-amber-200 sm:flex">
+        <ArrowsDownUpIcon className="h-3.5 w-3.5" />
+        Unsaved order
+      </span>
+      <DesignButton
+        variant="ghost"
+        size="sm"
+        onClick={onDiscardOrder}
+        disabled={isSavingOrder}
+      >
+        <XIcon className="h-4 w-4 mr-1.5" />
+        Discard
+      </DesignButton>
+      <DesignButton
+        size="sm"
+        onClick={onSaveOrder}
+        loading={isSavingOrder}
+      >
+        <CheckIcon className="h-4 w-4 mr-1.5" />
+        Save order
+      </DesignButton>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Page client — owns all state; passes handlers to PageBody
+// ─────────────────────────────────────────────────────────────────────────────
+
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
@@ -1261,32 +1748,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) {
@@ -1298,17 +1778,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);
@@ -1325,9 +1796,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;
@@ -1350,7 +1819,6 @@ export default function PageClient() {
     setNewRuleId(null);
   };
 
-  // Delete rule immediately
   const handleDeleteRule = async () => {
     if (!ruleToDelete) return;
     await updateConfig({
@@ -1360,7 +1828,6 @@ export default function PageClient() {
       },
       pushable: true,
     });
-    // Clear from pending order if present
     if (pendingOrder) {
       setPendingOrder(pendingOrder.filter(id => id !== ruleToDelete.id));
     }
@@ -1368,7 +1835,6 @@ export default function PageClient() {
     setRuleToDelete(null);
   };
 
-  // Toggle enabled immediately
   const handleToggleEnabled = async (ruleId: string, enabled: boolean) => {
     await updateConfig({
       adminApp: stackAdminApp,
@@ -1379,7 +1845,6 @@ export default function PageClient() {
     });
   };
 
-  // Change default action immediately
   const handleDefaultActionChange = async (value: 'allow' | 'reject') => {
     await updateConfig({
       adminApp: stackAdminApp,
@@ -1390,7 +1855,6 @@ export default function PageClient() {
     });
   };
 
-  // Save reorder changes
   const handleSaveOrder = async () => {
     if (!pendingOrder) return;
 
@@ -1408,9 +1872,7 @@ export default function PageClient() {
     setPendingOrder(null);
   };
 
-  const handleDiscardOrder = () => {
-    setPendingOrder(null);
-  };
+  const handleDiscardOrder = () => setPendingOrder(null);
 
   const [handleSaveOrderAsync, isSavingOrder] = useAsyncCallback(handleSaveOrder, [handleSaveOrder]);
 
@@ -1423,147 +1885,50 @@ export default function PageClient() {
         description="Create rules to control who can sign up. Rules are evaluated in order from top to bottom."
         actions={
           <div className="flex items-center gap-2">
-            <TestRulesDialog stackAdminApp={stackAdminApp} />
-            <Button
+            {hasOrderChanges && (
+              <OrderChangeActions
+                isSavingOrder={isSavingOrder}
+                onSaveOrder={handleSaveOrderAsync}
+                onDiscardOrder={handleDiscardOrder}
+              />
+            )}
+            <DesignButton
               onClick={handleAddRule}
               disabled={isAnyEditing || hasOrderChanges}
             >
               <PlusIcon className="h-4 w-4 mr-2" />
               Add rule
-            </Button>
+            </DesignButton>
           </div>
         }
       >
-        {/* 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>
-          )}
+        <PageBody
+          signUpRules={signUpRules}
+          ruleAnalytics={ruleAnalytics}
+          analyticsTimespanHours={analyticsTimespanHours}
+          isAnalyticsLoading={isAnalyticsLoading}
+          isCreatingNew={isCreatingNew}
+          newRuleId={newRuleId}
+          editingRuleId={editingRuleId}
+          defaultAction={defaultAction}
+          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}
+          stackAdminApp={stackAdminApp}
+        />
 
-          {/* Default action card - always at the bottom */}
-          <DefaultActionCard
-            value={defaultAction}
-            onChange={(v) => runAsynchronouslyWithAlert(handleDefaultActionChange(v))}
-          />
-        </div>
 
-        {/* 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..f0fc7c4238
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/dialog.tsx
@@ -0,0 +1,204 @@
+"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;
+  const hasStandardTitle = title != null;
+  const needsAccessibleTitleFallback = !hasStandardTitle && customHeader == null;
+
+  if (process.env.NODE_ENV !== "production" && needsAccessibleTitleFallback) {
+    console.warn(
+      "[DesignDialog] Rendered without a `title` or `customHeader`. Every dialog needs an accessible name — pass `title`, or render a `DialogTitle` inside `customHeader`.",
+    );
+  }
+
+  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}
+      >
+        {needsAccessibleTitleFallback && (
+          <DialogTitle className="sr-only">Dialog</DialogTitle>
+        )}
+        {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"
+    }
+  }
+}