diff --git a/.claude/CLAUDE-KNOWLEDGE.md b/.claude/CLAUDE-KNOWLEDGE.md
index f01d96f85d..fa68fc8d04 100644
--- a/.claude/CLAUDE-KNOWLEDGE.md
+++ b/.claude/CLAUDE-KNOWLEDGE.md
@@ -563,5 +563,10 @@ A: Project config overrides only support the hosted `sourceOfTruth` shape. Legac
 ## Q: How should managed email onboarding e2e tests wait for mock verification?
 A: Do not rely on a fixed `wait(1500)` after setup. The mock onboarding path flips the domain to `verified` asynchronously through `runAsynchronously`, so tests should poll the managed-onboarding check endpoint until the expected status appears.
 
+## Q: How can we redesign or customize account settings pages for the dashboard only, without modifying any shared packages (like `@stackframe/stack` or `packages/template`)?
+A: Intercept the catch-all dynamic route in `apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx` on the server by awaiting `params` and checking if `stack.join("/") === "account-settings"`. If matched, completely bypass `StackHandler` and return a local, custom-built `DashboardAccountSettingsPage` Client Component. To implement the custom views cleanly, copy the necessary forms and layouts from `packages/template` into `apps/dashboard/src/components/dashboard-account-settings/`, replace the relative and package UI imports with local dashboard UI components (such as `@/components/ui/button`, `@/components/ui/input`, and local `Table` / `Badge` / `Switch` / `Avatar` / `Skeleton`), and custom style them with neutral, zinc/white border and card layers to match the dashboard's design system seamlessly.
+
+## Q: What can make dashboard/docs Vercel builds fail after adding dashboard-only account settings code?
+A: Dashboard-only imports still need direct dependency declarations in `apps/dashboard/package.json`; transitive workspace deps are not enough for CI/Vercel resolution. For example, imports of `@oslojs/otp`, `@stackframe/stack-ui`, `qrcode`, and `react-easy-crop` must be declared on the dashboard app itself. Also, placeholder comments like `NEXT_PUBLIC_STACK_PROJECT_ID=# ...` in `docs/.env` parse as empty values during `next build`; use real internal development defaults instead of comment-only assignments.
 ## Q: How should Microsoft OAuth callback token exchange include scopes?
 A: Microsoft Entra ID's v2 token endpoint can reject authorization-code exchanges with `AADSTS70011` if the token request omits `scope`. Keep scope emission opt-in at the provider layer (`includeScopeInCallbackTokenExchange`) and pass the same merged base/provider scopes to `openid-client` via the callback `extras.exchangeBody.scope` parameter. The callback route must forward stored `providerScope` from the outer OAuth info so custom Microsoft provider scopes are included in the token exchange.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 39bdbb84ff..6085e965b4 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -29,6 +29,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.3.4",
     "@monaco-editor/react": "4.7.0",
+    "@oslojs/otp": "^1.1.0",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
@@ -64,6 +65,7 @@
     "@stackframe/dashboard-ui-components": "workspace:*",
     "@stackframe/stack": "workspace:*",
     "@stackframe/stack-shared": "workspace:*",
+    "@stackframe/stack-ui": "workspace:*",
     "@stripe/connect-js": "^3.3.27",
     "@stripe/react-connect-js": "^3.3.24",
     "@stripe/react-stripe-js": "^3.8.1",
@@ -89,9 +91,11 @@
     "next": "16.1.7",
     "next-themes": "^0.2.1",
     "posthog-js": "^1.336.1",
+    "qrcode": "^1.5.4",
     "react": "19.2.3",
     "react-day-picker": "^9.6.7",
     "react-dom": "19.2.3",
+    "react-easy-crop": "^5.5.6",
     "react-globe.gl": "^2.28.2",
     "react-hook-form": "^7.53.1",
     "react-icons": "^5.0.1",
@@ -114,6 +118,7 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/lodash": "^4.17.5",
     "@types/node": "20.17.6",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/queries/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/queries/page-client.tsx
index 0e40542852..b82052353e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/queries/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/queries/page-client.tsx
@@ -612,7 +612,7 @@ function QueriesContent() {
                 value={sqlQuery}
                 onChange={(e) => setSqlQuery(e.target.value)}
                 placeholder="SELECT * FROM default.events ORDER BY event_at DESC LIMIT 100"
-                className="font-mono text-sm min-h-[80px] resize-y bg-background/60"
+                className="min-h-[80px] resize-y border-black/[0.08] bg-white/95 font-mono text-sm shadow-sm ring-1 ring-black/[0.06] dark:border-border/40 dark:bg-background/60 dark:ring-white/[0.06]"
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !loading) {
                     e.preventDefault();
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx
index 70ea162234..1efa2ff6c3 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx
@@ -60,10 +60,11 @@ export function AiQueryBar({
       <div
         className={cn(
           "group flex h-8 min-w-0 flex-1 items-center gap-2 rounded-xl px-2.5 sm:max-w-72",
-          "bg-background ring-1 transition-shadow",
+          "border border-black/[0.08] dark:border-white/[0.06]",
+          "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] transition-shadow hover:transition-none",
           isActive
-            ? "ring-purple-500/30 focus-within:ring-purple-500/50"
-            : "ring-black/[0.08] dark:ring-white/[0.08] focus-within:ring-foreground/[0.18]",
+            ? "ring-purple-500/30 focus-within:ring-purple-500/50 dark:ring-purple-400/30 dark:focus-within:ring-purple-400/50"
+            : "hover:ring-black/[0.12] dark:hover:ring-white/[0.1] focus-within:ring-foreground/[0.18]",
         )}
       >
         <SparkleIcon
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
index 1e80621352..400ba888d9 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
@@ -371,7 +371,7 @@ export function AiQueryDialog({
             </div>
           </DialogHeader>
 
-          <div className="shrink-0 border-b border-border/40 bg-muted/20">
+          <div className="shrink-0 border-b border-black/[0.06] bg-zinc-50/80 dark:border-border/40 dark:bg-muted/20">
             <div className="flex items-center justify-between px-5 py-2">
               <Label className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
                 Current query
@@ -417,7 +417,7 @@ export function AiQueryDialog({
                   }
                 }}
                 placeholder="Ask the AI a question to generate a query."
-                className="min-h-16 max-h-32 resize-y overflow-auto border-border/40 bg-background/70 font-mono text-[11px] text-foreground/90 shadow-none placeholder:italic placeholder:text-muted-foreground"
+                className="min-h-16 max-h-32 resize-y overflow-auto border-black/[0.08] bg-white/95 font-mono text-[11px] text-foreground/90 shadow-sm ring-1 ring-black/[0.06] placeholder:italic placeholder:text-muted-foreground dark:border-border/40 dark:bg-background/60 dark:ring-white/[0.06]"
               />
             </div>
           </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
index 18d70181bd..f238c53e1d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
@@ -231,7 +231,7 @@ export default function PageClient() {
     <AppEnabledGuard appId="analytics">
       <PageLayout fillWidth noPadding>
         <AnalyticsEventLimitBanner />
-        <div className="flex min-w-0 items-start lg:-mx-2 [--analytics-tables-sticky-top:3.5rem] [--analytics-tables-sidebar-height:calc(100vh-3.5rem)] dark:[--analytics-tables-sticky-top:5rem] dark:[--analytics-tables-sidebar-height:calc(100vh-6rem)]">
+        <div className="flex w-full min-w-0 items-stretch lg:-ml-2 [--analytics-tables-sticky-top:3.5rem] [--analytics-tables-sidebar-height:calc(100vh-3.5rem)] dark:[--analytics-tables-sticky-top:5rem] dark:[--analytics-tables-sidebar-height:calc(100vh-6rem)]">
           {/* Left sidebar — hidden on mobile */}
           <div
             className="hidden lg:flex w-48 min-h-0 flex-shrink-0 self-start flex-col overflow-hidden border-r border-border/50 pl-2 sticky"
@@ -271,8 +271,19 @@ export default function PageClient() {
             </div>
           </div>
 
-          {/* Right content */}
-          <div className="flex min-w-0 flex-1 flex-col">
+          {/* Right content — flush to card edge; companion gap is on <main> in sidebar-layout */}
+          <div
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              "[&_[role=grid]]:rounded-r-none",
+              "[&_[role=grid]_.sticky]:rounded-t-none",
+              // Toolbar row only (first child of sticky chrome) — analytics layout
+              "[&_[role=grid]_.sticky>div:first-child>div]:pt-3",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pb-2.5",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pr-0",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pl-2.5",
+            )}
+          >
             {selectedTable ? (
               <TableContent key={selectedTable} tableId={selectedTable} />
             ) : (
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx
index 3d7c30a657..94d841c412 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx
@@ -637,7 +637,7 @@ export const QueryDataGrid = forwardRef<QueryDataGridHandle, QueryDataGridProps>
         )}
 
         {!showEmptyError && (
-          <div className={fillHeight ? "flex-1 min-h-0 pr-0 lg:pr-8" : "pr-0 lg:pr-8"}>
+          <div className={fillHeight ? "flex-1 min-h-0" : undefined}>
             <DataGrid<RowData>
               columns={columns}
               rows={gridData.rows}
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 f8535d189b..e9c51d3ed3 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
@@ -162,7 +162,7 @@ function DisabledProvidersDialog({ open, onOpenChange }: { open?: boolean, onOpe
       placeholder="Search for a provider..."
       value={providerSearch}
       onChange={(e) => setProviderSearch(e.target.value)}
-      leadingIcon={<MagnifyingGlassIcon size={14} />}
+      leadingIcon={<MagnifyingGlassIcon className="h-3.5 w-3.5" />}
     />
     <div className="flex gap-2 flex-wrap justify-center">
       {filteredProviders
@@ -448,6 +448,7 @@ function useEmailVerificationToggle() {
       open={!!pendingChange}
       onClose={() => setPendingChange(null)}
       title="Enable email verification requirement"
+      size="2xl"
       danger
       okButton={{
         label: "Apply Change",
@@ -468,35 +469,50 @@ function useEmailVerificationToggle() {
             <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]">
+            <div className="overflow-hidden rounded-xl ring-1 ring-black/[0.06] dark:ring-white/[0.06]">
+              <table className="w-full table-fixed text-sm">
+                <colgroup>
+                  <col className="w-[22%]" />
+                  <col />
+                  <col className="w-[7.5rem]" />
+                </colgroup>
+                <thead className="bg-zinc-50 dark:bg-background">
                   <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>
+                    <th className="px-3 py-2 text-left font-medium whitespace-nowrap">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 className="max-h-52 overflow-y-auto border-t border-black/[0.06] dark:border-white/[0.06]">
+                <table className="w-full table-fixed text-sm">
+                  <colgroup>
+                    <col className="w-[22%]" />
+                    <col />
+                    <col className="w-[7.5rem]" />
+                  </colgroup>
+                  <tbody>
+                    {pendingChange.affectedUsers.map((user) => (
+                      <tr key={user.id} className="border-t border-black/[0.06] dark:border-white/[0.06] first:border-t-0">
+                        <td className="px-3 py-2 align-middle">
+                          {user.displayName || <span className="text-muted-foreground italic">No name</span>}
+                        </td>
+                        <td className="px-3 py-2 align-middle truncate" title={user.primaryEmail ?? undefined}>
+                          {user.primaryEmail || <span className="text-muted-foreground italic">No email</span>}
+                        </td>
+                        <td className="px-3 py-2 align-middle">
+                          <DesignBadge
+                            label={user.restrictedReason.type === "email_not_verified" ? "Not verified" : "Anonymous"}
+                            color="orange"
+                            size="sm"
+                            contentMode="text"
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
             {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
               <Typography variant="secondary" type="footnote">
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 47e9cbdfe7..e2a5e4dca5 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
@@ -80,9 +80,6 @@ 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">
@@ -329,7 +326,6 @@ 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) => (
         <OAuthProviderSettingsForm
           form={form}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/conversations/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/conversations/page-client.tsx
index 0eac87f8bd..23c4e2875e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/conversations/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/conversations/page-client.tsx
@@ -3,18 +3,22 @@
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
 import { UserPickerTable } from "@/components/data-table/user-picker-table";
 import { useRouter } from "@/components/router";
-import { DesignAlert, DesignBadge, DesignCard, DesignCategoryTabs, DesignInput, DesignSelectorDropdown } from "@/components/design-components";
+import {
+  DesignAlert,
+  DesignBadge,
+  DesignButton,
+  DesignCard,
+  DesignCategoryTabs,
+  DesignDialog,
+  DesignDialogClose,
+  DesignInput,
+  DesignSelectorDropdown,
+} from "@/components/design-components";
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
   Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  Input,
   Select,
   SelectContent,
   SelectItem,
@@ -582,7 +586,6 @@ function NewConversationDialog(props: {
   const [subject, setSubject] = useState("");
   const [initialMessage, setInitialMessage] = useState("");
   const [priority, setPriority] = useState<ConversationPriority>("normal");
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
@@ -600,36 +603,72 @@ function NewConversationDialog(props: {
   const canSubmit = subject.trim() !== "" && initialMessage.trim() !== "";
 
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent className="sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Create conversation</DialogTitle>
-          <DialogDescription>
-            Start a support conversation for a user and keep replies, notes, and context in one place.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-2">
-            <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              User
-            </Typography>
-            {selectedUserLabel != null ? (
-              <div className="flex items-center justify-between rounded-xl border border-border bg-muted/20 px-3 py-2">
-                <Typography className="text-sm">{selectedUserLabel}</Typography>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={() => {
-                    setSelectedUserId(null);
-                    setSelectedUserLabel(null);
-                  }}
-                >
-                  <XIcon className="h-4 w-4" />
-                </Button>
-              </div>
-            ) : (
+    <DesignDialog
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      size="2xl"
+      icon={ChatCircleDotsIcon}
+      title="Create conversation"
+      description="Start a support conversation for a user and keep replies, notes, and context in one place."
+      className="max-h-[min(100dvh-2rem,52rem)]"
+      bodyClassName="px-6 py-6"
+      footerClassName="px-6 py-4"
+      footer={(
+        <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm">
+              Cancel
+            </DesignButton>
+          </DesignDialogClose>
+          <DesignButton
+            size="sm"
+            disabled={selectedUserId == null || !canSubmit}
+            onClick={async () => {
+              if (!canSubmit) {
+                return;
+              }
+              const nextUserId = selectedUserId ?? throwErr("A support conversation must be attached to a selected user.");
+
+              setErrorMessage(null);
+              const result = await createConversation(props.currentUser, {
+                projectId: props.projectId,
+                userId: nextUserId,
+                subject: subject.trim(),
+                initialMessage: initialMessage.trim(),
+                priority,
+              });
+              props.onCreated(result.conversationId, nextUserId);
+              props.onOpenChange(false);
+            }}
+          >
+            <PlusIcon className="mr-2 h-4 w-4" />
+            Create Conversation
+          </DesignButton>
+        </div>
+      )}
+    >
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-2">
+          <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            User
+          </Typography>
+          {selectedUserLabel != null ? (
+            <div className="flex items-center justify-between rounded-xl border border-black/[0.08] bg-zinc-50/80 px-3 py-2 dark:border-white/[0.06] dark:bg-foreground/[0.03]">
+              <Typography className="text-sm">{selectedUserLabel}</Typography>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => {
+                  setSelectedUserId(null);
+                  setSelectedUserLabel(null);
+                }}
+              >
+                <XIcon className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-xl ring-1 ring-black/[0.06] dark:ring-white/[0.06]">
               <UserPickerTable
                 action={(user) => (
                   <Button
@@ -643,93 +682,59 @@ function NewConversationDialog(props: {
                   </Button>
                 )}
               />
-            )}
-          </div>
-
-          <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_160px]">
-            <div className="flex flex-col gap-2">
-              <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                Subject
-              </Typography>
-              <Input
-                value={subject}
-                onChange={(event) => setSubject(event.target.value)}
-                placeholder="Password reset loop on mobile"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                Priority
-              </Typography>
-              <Select value={priority} onValueChange={(value: ConversationPriority) => setPriority(value)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {PRIORITY_OPTIONS.map((option) => (
-                    <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
             </div>
-          </div>
+          )}
+        </div>
 
+        <div className="grid gap-5 md:grid-cols-[minmax(0,1fr)_160px]">
           <div className="flex flex-col gap-2">
             <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              Initial message
+              Subject
             </Typography>
-            <Textarea
-              value={initialMessage}
-              onChange={(event) => setInitialMessage(event.target.value)}
-              placeholder="Describe the issue, customer context, and what support should do next."
-              className="min-h-32"
+            <DesignInput
+              value={subject}
+              onChange={(event) => setSubject(event.target.value)}
+              placeholder="Password reset loop on mobile"
             />
           </div>
-
-          {errorMessage != null && (
-            <DesignAlert
-              variant="error"
-              title="Could not create conversation"
-              description={errorMessage}
-            />
-          )}
-
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => props.onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button
-              disabled={selectedUserId == null || !canSubmit || isSubmitting}
-              onClick={async () => {
-                if (!canSubmit) {
-                  return;
-                }
-                const nextUserId = selectedUserId ?? throwErr("A support conversation must be attached to a selected user.");
-
-                setIsSubmitting(true);
-                setErrorMessage(null);
-                try {
-                  const result = await createConversation(props.currentUser, {
-                    projectId: props.projectId,
-                    userId: nextUserId,
-                    subject: subject.trim(),
-                    initialMessage: initialMessage.trim(),
-                    priority,
-                  });
-                  props.onCreated(result.conversationId, nextUserId);
-                  props.onOpenChange(false);
-                } finally {
-                  setIsSubmitting(false);
-                }
-              }}
-            >
-              {isSubmitting ? <Spinner className="mr-2 h-4 w-4" /> : <PlusIcon className="mr-2 h-4 w-4" />}
-              Create Conversation
-            </Button>
+          <div className="flex flex-col gap-2">
+            <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Priority
+            </Typography>
+            <Select value={priority} onValueChange={(value: ConversationPriority) => setPriority(value)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PRIORITY_OPTIONS.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
-      </DialogContent>
-    </Dialog>
+
+        <div className="flex flex-col gap-2">
+          <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Initial message
+          </Typography>
+          <Textarea
+            value={initialMessage}
+            onChange={(event) => setInitialMessage(event.target.value)}
+            placeholder="Describe the issue, customer context, and what support should do next."
+            className="min-h-32"
+          />
+        </div>
+
+        {errorMessage != null && (
+          <DesignAlert
+            variant="error"
+            title="Could not create conversation"
+            description={errorMessage}
+          />
+        )}
+      </div>
+    </DesignDialog>
   );
 }
 
@@ -1111,28 +1116,22 @@ export default function PageClient() {
         } : { fillWidth: true as const })}
       >
         <div className={cn("relative isolate", isConversationSelected && "flex min-h-0 flex-1 flex-col")}>
-          <div className="pointer-events-none absolute inset-x-0 -top-8 -z-10 h-44 bg-gradient-to-b from-blue-500/12 via-cyan-500/8 to-transparent blur-2xl" />
           <div className={cn(isConversationSelected ? "flex min-h-0 flex-1 flex-col gap-3" : "grid gap-6")}>
             {!isConversationSelected && (
               <DesignCard
-                className="h-fit rounded-3xl border border-white/10 bg-background/80 shadow-[0_10px_40px_-24px_rgba(30,80,255,0.6)] backdrop-blur-xl"
-                contentClassName="overflow-hidden p-0"
+                title="Unified inbox"
+                subtitle="Search conversations by subject or user and jump straight into the full history."
+                icon={HeadsetIcon}
+                gradient="default"
+                className="h-fit"
+                contentClassName="overflow-hidden !p-0"
+                actions={selectedUserId != null ? (
+                  <Button variant="ghost" size="sm" onClick={() => updateSelection({ userId: null, conversationId: null })}>
+                    Clear Filter
+                  </Button>
+                ) : undefined}
               >
-                <div className="flex flex-col gap-4 border-b border-border/70 bg-gradient-to-b from-foreground/[0.03] to-transparent px-5 py-5">
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <Typography className="text-sm font-semibold tracking-wide">Unified inbox</Typography>
-                      <Typography variant="secondary" className="mt-1 text-xs">
-                        Search conversations by subject or user and jump straight into the full history.
-                      </Typography>
-                    </div>
-                    {selectedUserId != null && (
-                      <Button variant="ghost" size="sm" onClick={() => updateSelection({ userId: null, conversationId: null })}>
-                        Clear Filter
-                      </Button>
-                    )}
-                  </div>
-
+                <div className="flex flex-col gap-4 px-5 pt-4 pb-4">
                   <DesignInput
                     value={searchInput}
                     onChange={(event) => setSearchInput(event.target.value)}
@@ -1146,11 +1145,12 @@ export default function PageClient() {
                     onSelect={(id) => id === "closed" ? setStatusFilter("closed") : id === "pending" ? setStatusFilter("pending") : id === "open" ? setStatusFilter("open") : setStatusFilter("all")}
                     showBadge={false}
                     size="sm"
-                    gradient="blue"
+                    gradient="default"
+                    glassmorphic={false}
                   />
                 </div>
 
-                <div className="flex max-h-[760px] flex-col overflow-y-auto px-2 py-2">
+                <div className="flex max-h-[760px] flex-col overflow-y-auto border-t border-black/[0.06] px-2 py-2 dark:border-white/[0.06]">
                   {conversationsLoading && (
                     <div className="flex items-center justify-center py-10">
                       <Spinner className="h-5 w-5" />
@@ -1201,8 +1201,8 @@ export default function PageClient() {
                           "w-full rounded-2xl border border-transparent px-2 py-2 text-left",
                           "transition-colors duration-150 hover:transition-none",
                           isActive
-                            ? "border-blue-400/25 bg-blue-500/10 shadow-[0_8px_24px_-20px_rgba(30,80,255,0.9)]"
-                            : "hover:bg-foreground/[0.03]",
+                            ? "border-black/[0.08] bg-zinc-50 ring-1 ring-black/[0.06] dark:border-white/[0.08] dark:bg-white/[0.06] dark:ring-white/[0.06]"
+                            : "hover:bg-zinc-50 dark:hover:bg-foreground/[0.03]",
                         )}
                           onClick={() => updateSelection({ conversationId: conversation.conversationId, userId: conversation.userId })}
                         >
@@ -1254,7 +1254,7 @@ export default function PageClient() {
                               </span>
                             </div>
 
-                            <div className="rounded-md border border-border/60 bg-foreground/[0.03] px-2 py-1.5">
+                            <div className="rounded-md border border-black/[0.06] bg-zinc-50/80 px-2 py-1.5 dark:border-white/[0.06] dark:bg-foreground/[0.03]">
                               <Typography variant="secondary" className="text-[10px] uppercase tracking-wider">
                                 Last message
                               </Typography>
@@ -1289,7 +1289,7 @@ export default function PageClient() {
                 </button>
 
                 {conversationLoading && (
-                  <DesignCard className="rounded-3xl" contentClassName="flex items-center justify-center p-10">
+                  <DesignCard gradient="default" contentClassName="flex items-center justify-center p-10">
                     <Spinner className="h-5 w-5" />
                   </DesignCard>
                 )}
@@ -1301,7 +1301,7 @@ export default function PageClient() {
                 {!conversationLoading && conversationDetail != null && (
                   <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:items-stretch lg:gap-5">
                     <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2">
-                      <div className="shrink-0 rounded-xl border border-border/60 bg-background/80 px-3 py-2.5 shadow-sm backdrop-blur-sm dark:bg-background/50">
+                      <div className="shrink-0 rounded-xl bg-white/90 px-3 py-2.5 shadow-sm ring-1 ring-black/[0.06] backdrop-blur-xl dark:bg-background/50 dark:ring-white/[0.06]">
                         <div className="flex flex-wrap items-start justify-between gap-2">
                           <SupportUserHeader
                             size="compact"
@@ -1369,12 +1369,13 @@ export default function PageClient() {
                         </div>
                       </div>
 
-                      <div
+                      <DesignCard
+                        gradient="default"
                         className={cn(
-                          "relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-white/10 bg-background/50 shadow-[0_10px_36px_-28px_rgba(30,80,255,0.55)]",
-                          "ring-1 ring-black/[0.06] dark:bg-background/60 dark:ring-white/[0.06] dark:backdrop-blur-xl",
+                          "relative flex min-h-0 flex-1 flex-col overflow-hidden",
                           "min-h-[min(520px,calc(100dvh-14rem))] lg:min-h-0",
                         )}
+                        contentClassName="flex min-h-0 flex-1 flex-col overflow-hidden !p-0"
                       >
                         <div className="flex min-h-0 flex-1 flex-col">
                           <div
@@ -1406,7 +1407,7 @@ export default function PageClient() {
                             }}
                           />
                         </div>
-                      </div>
+                      </DesignCard>
                     </div>
 
                     {isLgViewport && (
@@ -1462,7 +1463,7 @@ export default function PageClient() {
                 )}
 
                 {!conversationLoading && conversationDetail == null && selectedUserId != null && selectedUser != null && (
-                  <DesignCard className="rounded-3xl border border-white/10" contentClassName="p-7">
+                  <DesignCard gradient="default" contentClassName="p-7">
                     <div className="flex flex-col gap-6">
                       <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                         <div className="flex flex-col gap-3">
@@ -1492,15 +1493,15 @@ export default function PageClient() {
                       </div>
 
                       <div className="grid gap-4 md:grid-cols-3">
-                        <DesignCard className="rounded-2xl border border-white/10" contentClassName="p-4">
+                        <DesignCard gradient="default" contentClassName="p-4">
                           <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Primary Email</Typography>
                           <Typography className="mt-2 text-sm">{selectedUser.primaryEmail ?? "Not set"}</Typography>
                         </DesignCard>
-                        <DesignCard className="rounded-2xl border border-white/10" contentClassName="p-4">
+                        <DesignCard gradient="default" contentClassName="p-4">
                           <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Signed Up</Typography>
                           <Typography className="mt-2 text-sm">{fromNow(selectedUser.signedUpAt)}</Typography>
                         </DesignCard>
-                        <DesignCard className="rounded-2xl border border-white/10" contentClassName="p-4">
+                        <DesignCard gradient="default" contentClassName="p-4">
                           <Typography className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Last Active</Typography>
                           <Typography className="mt-2 text-sm">{fromNow(selectedUser.lastActiveAt)}</Typography>
                         </DesignCard>
@@ -1510,22 +1511,17 @@ export default function PageClient() {
                 )}
 
                 {!conversationLoading && conversationDetail == null && selectedUserId == null && (
-                  <DesignCard className="rounded-3xl border border-white/10 bg-gradient-to-b from-blue-500/[0.08] to-background/80" contentClassName="p-10">
-                    <div className="flex flex-col items-center gap-4 text-center">
-                      <div className="rounded-2xl bg-blue-500/10 p-4 text-blue-600 dark:text-blue-300">
-                        <ChatCircleDotsIcon className="h-8 w-8" />
-                      </div>
-                      <div className="space-y-1">
-                        <Typography className="text-lg font-semibold">Pick a conversation or open a user</Typography>
-                        <Typography variant="secondary" className="mx-auto max-w-xl text-sm">
-                          This inbox is the single place to investigate a user, add internal context, and reply in the same conversation the user sees.
-                        </Typography>
-                      </div>
-                      <Button onClick={() => setNewConversationOpen(true)}>
-                        <PlusIcon className="mr-2 h-4 w-4" />
-                        Create First Conversation
-                      </Button>
-                    </div>
+                  <DesignCard
+                    title="Pick a conversation or open a user"
+                    subtitle="This inbox is the single place to investigate a user, add internal context, and reply in the same conversation the user sees."
+                    icon={ChatCircleDotsIcon}
+                    gradient="default"
+                    contentClassName="flex justify-center p-10"
+                  >
+                    <Button onClick={() => setNewConversationOpen(true)}>
+                      <PlusIcon className="mr-2 h-4 w-4" />
+                      Create First Conversation
+                    </Button>
                   </DesignCard>
                 )}
               </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
index 4b5561c45a..96aba917e1 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
@@ -2,6 +2,7 @@
 import { FormDialog } from "@/components/form-dialog";
 import { InputField, SwitchField } from "@/components/form-fields";
 import { InlineSaveDiscard } from "@/components/inline-save-discard";
+import { DesignAlert } from "@/components/design-components";
 import { SettingCard, SettingSwitch } from "@/components/settings";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, ActionDialog, Alert, Button, Typography } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
@@ -180,18 +181,18 @@ function EditDialog(props: {
     }}
     render={(form) => (
       <>
-        <Alert>
-          <div className="space-y-2">
+        <DesignAlert variant="info">
+          <div className="space-y-2 text-foreground/80 dark:text-muted-foreground">
             <p>Please ensure you own or have control over this domain. Also note that each subdomain (e.g. blog.example.com, app.example.com) is treated as a distinct domain.</p>
-            <p><strong>Wildcard domains:</strong> You can use wildcards to match multiple domains:</p>
-            <ul className="list-disc list-inside ml-2 space-y-1">
+            <p><strong className="text-foreground">Wildcard domains:</strong> You can use wildcards to match multiple domains:</p>
+            <ul className="ml-2 list-inside list-disc space-y-1">
               <li><code>*.example.com</code> - matches any single subdomain (e.g., api.example.com, www.example.com)</li>
               <li><code>**.example.com</code> - matches any subdomain level (e.g., api.v2.example.com)</li>
               <li><code>api-*.example.com</code> - matches api-v1.example.com, api-prod.example.com, etc.</li>
               <li><code>*.*.org</code> - matches mail.example.org, but not example.org</li>
             </ul>
           </div>
-        </Alert>
+        </DesignAlert>
         <InputField
           label="Domain"
           name="domain"
@@ -413,9 +414,7 @@ export default function PageClient() {
           {domains.length > 0 ? (
             <DomainDataGrid domains={domains} />
           ) : (
-            <Alert>
-              No domains added yet.
-            </Alert>
+            <DesignAlert variant="info" description="No domains added yet." />
           )}
         </SettingCard>
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
index a845873083..047f2aec93 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
@@ -270,7 +270,7 @@ export function DomainReputationCard() {
     <DesignCard
       gradient="default"
       glassmorphic
-      className="w-full lg:w-72"
+      className="w-full xl:w-72"
     >
       <div className="flex items-center gap-2 mb-3">
         <div className="p-1 rounded-md bg-foreground/[0.06] dark:bg-foreground/[0.04]">
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
index 96bc4276f9..9319fa6cf9 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
@@ -73,14 +73,16 @@ const emailTableColumns: DataGridColumnDef<AdminEmailOutbox>[] = [
   {
     id: "recipient",
     header: "Recipient",
-    width: 200,
+    width: 160,
+    minWidth: 96,
     type: "string",
     accessor: (row) => getRecipientDisplay(row),
   },
   {
     id: "subject",
     header: "Subject",
-    width: 220,
+    width: 180,
+    minWidth: 120,
     flex: 1,
     type: "string",
     accessor: (row) => getSubjectDisplay(row),
@@ -88,7 +90,8 @@ const emailTableColumns: DataGridColumnDef<AdminEmailOutbox>[] = [
   {
     id: "scheduledAt",
     header: "Time",
-    width: 180,
+    width: 140,
+    minWidth: 100,
     type: "dateTime",
     accessor: (row) => getTimeValue(row),
   },
@@ -96,6 +99,7 @@ const emailTableColumns: DataGridColumnDef<AdminEmailOutbox>[] = [
     id: "status",
     header: "Status",
     width: 120,
+    minWidth: 108,
     renderCell: ({ row }) => {
       const status = row.status;
       return (
@@ -158,26 +162,28 @@ function EmailSendDataTable() {
   }
 
   return (
-    <DataGrid
-      columns={emailTableColumns}
-      rows={gridData.rows}
-      getRowId={getRowId}
-      totalRowCount={gridData.totalRowCount}
-      isLoading={gridData.isLoading}
-      isRefetching={gridData.isRefetching}
-      state={gridState}
-      onChange={setGridState}
-      paginationMode="infinite"
-      hasMore={gridData.hasMore}
-      isLoadingMore={gridData.isLoadingMore}
-      onLoadMore={gridData.loadMore}
-      fillHeight={false}
-      footer={false}
-
-      onRowClick={(row) => {
-        router.push(`email-viewer/${row.id}`);
-      }}
-    />
+    <div className="min-w-0 w-full">
+      <DataGrid
+        className="min-w-0"
+        columns={emailTableColumns}
+        rows={gridData.rows}
+        getRowId={getRowId}
+        totalRowCount={gridData.totalRowCount}
+        isLoading={gridData.isLoading}
+        isRefetching={gridData.isRefetching}
+        state={gridState}
+        onChange={setGridState}
+        paginationMode="infinite"
+        hasMore={gridData.hasMore}
+        isLoadingMore={gridData.isLoadingMore}
+        onLoadMore={gridData.loadMore}
+        fillHeight={false}
+        footer={false}
+        onRowClick={(row) => {
+          router.push(`email-viewer/${row.id}`);
+        }}
+      />
+    </div>
   );
 }
 
@@ -190,15 +196,16 @@ export default function PageClient() {
         title="Sent"
         description="View email logs and domain reputation"
       >
-        <div data-walkthrough="emails-sent" className="flex flex-col lg:flex-row gap-6">
+        <div data-walkthrough="emails-sent" className="flex flex-col xl:flex-row gap-6 min-w-0">
           {/* Left side: Email Log with toggle inside card */}
-          <div className="flex-1 flex flex-col gap-4">
+          <div className="order-2 xl:order-1 flex-1 flex flex-col gap-4 min-w-0">
             <DesignCard
-              contentClassName="p-3"
+              className="min-w-0"
+              contentClassName="p-3 min-w-0"
               gradient="default"
               glassmorphic
             >
-              <div className="flex items-center justify-between mb-2">
+              <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
                 <div className="flex items-center gap-2">
                   <div className="p-1 rounded-md bg-foreground/[0.06] dark:bg-foreground/[0.04]">
                     <Envelope className="h-3 w-3 text-foreground/70 dark:text-muted-foreground" />
@@ -220,7 +227,7 @@ export default function PageClient() {
           </div>
 
           {/* Right side: Domain Reputation */}
-          <div className="flex-shrink-0">
+          <div className="order-1 xl:order-2 flex-shrink-0">
             <DomainReputationCard />
           </div>
         </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx
index c22eea820c..03881ff1fd 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx
@@ -142,20 +142,16 @@ type LaunchTask = {
 const STATUS_META: Record<
   LaunchTaskStatus,
   {
-    cardClass: string,
     inactiveIcon: string,
   }
 > = {
   done: {
-    cardClass: "border-primary/30 bg-background transition-all duration-300 hover:shadow-lg dark:border-primary/40 dark:shadow-primary/5",
     inactiveIcon: "text-emerald-500 dark:text-emerald-400",
   },
   action: {
-    cardClass: "border-primary/30 bg-background transition-all duration-300 hover:shadow-lg dark:border-primary/40 dark:shadow-primary/5",
     inactiveIcon: "text-muted-foreground",
   },
   blocked: {
-    cardClass: "border-primary/30 bg-background transition-all duration-300 hover:shadow-lg dark:border-primary/40 dark:shadow-primary/5",
     inactiveIcon: "text-muted-foreground",
   },
 };
@@ -191,17 +187,16 @@ function TaskCard(props: {
   isExpanded: boolean,
   onToggle: () => void,
 }) {
-  const meta = STATUS_META[props.task.status];
   const allItemsDone = props.task.items.every((item) => item.done);
 
   return (
     <DesignCard
       glassmorphic
+      gradient="default"
       contentClassName="p-0"
       className={cn(
-        "transition-all duration-300",
-        meta.cardClass,
-        allItemsDone && "border-emerald-500/30 bg-emerald-500/5 dark:border-emerald-500/40 dark:bg-emerald-500/10"
+        "transition-all duration-150 hover:transition-none",
+        allItemsDone && "bg-emerald-50/80 ring-emerald-500/20 dark:bg-emerald-500/10 dark:ring-emerald-500/30",
       )}
     >
       <div
@@ -239,7 +234,7 @@ function TaskCard(props: {
               e.stopPropagation();
               props.onToggle();
             }}
-            className="flex shrink-0 items-center justify-center rounded-md p-1.5 transition-colors hover:bg-accent"
+            className="flex shrink-0 items-center justify-center rounded-md p-1.5 transition-colors duration-150 hover:transition-none hover:bg-zinc-100 dark:hover:bg-foreground/[0.06]"
             aria-label={props.isExpanded ? "Collapse section" : "Expand section"}
           >
             {props.isExpanded ? (
@@ -616,8 +611,9 @@ export default function PageClient() {
                 selectedCategory={selectedProviderTab}
                 onSelect={setSelectedProviderTab}
                 showBadge={false}
+                size="sm"
                 gradient="default"
-                className="!border-0 !bg-transparent !p-0"
+                glassmorphic
               />
               {selectedProviderGuide && (
                 <div className="space-y-2.5">
@@ -744,13 +740,10 @@ export default function PageClient() {
       >
         <DesignCard
           glassmorphic
-          className="group relative overflow-hidden border border-sky-400/40 ring-1 ring-sky-400/20 transition-all duration-300 hover:shadow-md dark:border-sky-500/40 dark:ring-sky-500/30"
+          gradient="default"
           contentClassName="p-7"
         >
-          {/* Subtle blue glow on bottom border */}
-          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-sky-400/30 to-transparent blur-[2px] dark:via-sky-500/40" />
-
-          <div className="relative space-y-6">
+          <div className="space-y-6">
             {/* Header */}
             <div className="flex flex-wrap items-center justify-between gap-4">
               <h2 className="text-2xl font-semibold tracking-tight text-foreground">
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
index d7bc2618f3..76a872ce62 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
@@ -37,6 +37,7 @@ export function PageLayout(props: {
           <div
             className={cn(
               "mb-6",
+              props.noPadding && "px-4 pt-4 sm:px-6 sm:pt-6",
               props.wrapHeaderInCard && "rounded-2xl border border-black/[0.06] bg-white/90 px-4 py-3 shadow-[0_2px_12px_rgba(0,0,0,0.04)] backdrop-blur-xl sm:px-5 sm:py-4 dark:border-0 dark:bg-transparent dark:shadow-none dark:backdrop-blur-none dark:rounded-none dark:px-0 dark:py-0 dark:sm:px-0 dark:sm:py-0"
             )}
           >
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
index 5e1de69ef8..559b252645 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Input, SimpleTooltip } from "@/components/ui";
+import { Button, SimpleTooltip } from "@/components/ui";
+import { DesignInput } from "@/components/design-components";
 import { cn } from "@/lib/utils";
 import { MagnifyingGlassIcon, PlusIcon } from "@phosphor-icons/react";
 import React, { ReactNode, useState } from "react";
@@ -53,22 +54,16 @@ export function ListSection({
                 "relative flex items-center transition-all duration-150 hover:transition-none",
                 isSearchFocused ? "w-[160px]" : "w-[140px]"
               )}>
-                <Input
+                <DesignInput
                   type="text"
                   size="sm"
-                  leadingIcon={<MagnifyingGlassIcon className="h-3 w-3" />}
+                  leadingIcon={<MagnifyingGlassIcon className="h-3.5 w-3.5" />}
                   placeholder={searchPlaceholder}
                   value={searchValue || ''}
                   onChange={(e) => onSearchChange(e.target.value)}
                   onFocus={() => setIsSearchFocused(true)}
                   onBlur={() => setIsSearchFocused(false)}
-                  className={cn(
-                    "w-full rounded-lg",
-                    "bg-background dark:bg-foreground/[0.04] border border-border/50 dark:border-foreground/[0.08]",
-                    "focus:bg-background dark:focus:bg-foreground/[0.06] focus:outline-none focus:ring-1 focus:ring-foreground/[0.1] focus:border-border dark:focus:border-foreground/[0.12]",
-                    "placeholder:text-muted-foreground/50",
-                    "transition-all duration-150 hover:transition-none"
-                  )}
+                  className="h-8 w-full rounded-lg"
                 />
               </div>
             </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
index 1a944589e4..acf68b6c1d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
@@ -257,7 +257,7 @@ function ConnectionLine({ fromRef, toRef, containerRef, quantity }: ConnectionLi
               cx={midpoint.x}
               cy={midpoint.y}
               r="14"
-              className="fill-background"
+              className="fill-white dark:fill-background"
               stroke="hsl(200, 91%, 70%)"
               strokeWidth="1"
               strokeOpacity="0.3"
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/session-replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/session-replays/page-client.tsx
index 3c240fca9b..4145e77c79 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/session-replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/session-replays/page-client.tsx
@@ -39,6 +39,16 @@ import {
   type StreamInfo,
 } from "./session-replay-machine";
 
+const replaysPanelShellClass =
+  "flex-1 min-h-[520px] overflow-hidden rounded-xl bg-white/90 ring-1 ring-black/[0.06] dark:bg-background/60 dark:ring-white/[0.06]";
+const replaysListChromeClass =
+  "shrink-0 space-y-2 border-b border-black/[0.06] px-3 py-2.5 dark:border-border/30";
+const replaysDetailChromeClass =
+  "flex h-10 shrink-0 items-center justify-between gap-3 border-b border-black/[0.06] px-3 py-2 dark:border-border/30";
+const replaysViewerSurfaceClass = "bg-zinc-100 dark:bg-background";
+const replaysTransportBarClass =
+  "flex items-center gap-3 border-t border-black/[0.06] bg-white/95 px-3 dark:border-border/30 dark:bg-background/80";
+
 const PAGE_SIZE = 50;
 const INITIAL_CHUNK_BATCH = 20;
 const BACKGROUND_CHUNK_BATCH = 50;
@@ -289,7 +299,7 @@ function Timeline({
   const hoveredMarker = hoveredMarkerIndex !== null ? markers?.[hoveredMarkerIndex] ?? null : null;
 
   return (
-    <div className={cn("border-t border-border/30 bg-background px-3 flex items-center gap-3", hasMarkers ? "py-1.5" : "py-2")}>
+    <div className={cn(replaysTransportBarClass, hasMarkers ? "py-1.5" : "py-2")}>
       <Button
         variant="ghost"
         size="icon"
@@ -367,7 +377,7 @@ function Timeline({
       </span>
 
       <select
-        className="h-7 rounded-md border border-border/40 bg-background px-1.5 text-xs"
+        className="h-7 rounded-md border border-black/[0.08] bg-white/95 px-1.5 text-xs ring-1 ring-black/[0.06] dark:border-border/40 dark:bg-background dark:ring-white/[0.06]"
         value={playerSpeed}
         onChange={(e) => onSpeedChange(Number(e.target.value))}
       >
@@ -1463,642 +1473,647 @@ export default function PageClient({ initialReplayId, lockedUserId }: PageClient
           </StyledLink>
         ) : undefined}
         fillWidth
-        noPadding={isEmbedded}
+        noPadding
       >
-        <SessionReplayLimitBanner />
-        <PanelGroup data-walkthrough="analytics-replays" direction="horizontal" className="flex-1 min-h-[520px] rounded-xl border border-border/40 overflow-hidden bg-background">
-          {!isStandaloneReplayPage && (
-            <>
-              <Panel defaultSize={25} minSize={16}>
-                <div className="h-full flex flex-col">
-                  <div className="shrink-0 px-3 py-2 border-b border-border/30 space-y-2">
-                    <div className="flex items-center justify-between gap-2 h-8">
-                      <Typography className="text-sm font-medium">
-                        Sessions{!loadingInitial && recordings.length > 0 ? ` (${recordings.length}${nextCursor ? "+" : ""})` : ""}
-                      </Typography>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-7 px-2.5"
+        <div className={cn("flex min-h-0 flex-1 flex-col gap-3", !isEmbedded && "px-4 sm:px-6")}>
+          <SessionReplayLimitBanner />
+          <PanelGroup data-walkthrough="analytics-replays" direction="horizontal" className={replaysPanelShellClass}>
+            {!isStandaloneReplayPage && (
+              <>
+                <Panel defaultSize={25} minSize={16}>
+                  <div className="flex h-full flex-col bg-zinc-50 dark:bg-transparent">
+                    <div className={replaysListChromeClass}>
+                      <div className="flex items-center justify-between gap-2 h-8">
+                        <Typography className="text-sm font-medium">
+                          Sessions{!loadingInitial && recordings.length > 0 ? ` (${recordings.length}${nextCursor ? "+" : ""})` : ""}
+                        </Typography>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-7 px-2.5"
+                            >
+                              <FunnelSimpleIcon className="h-3.5 w-3.5 mr-1" />
+                              Filters
+                              {activeFilterCount > 0 && (
+                                <span className="ml-1 rounded-full bg-foreground/10 px-1.5 py-0 text-[10px]">
+                                  {activeFilterCount}
+                                </span>
+                              )}
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent
+                            align="end"
+                            className="w-48"
+                            onCloseAutoFocus={(e) => e.preventDefault()}
                           >
-                            <FunnelSimpleIcon className="h-3.5 w-3.5 mr-1" />
-                            Filters
-                            {activeFilterCount > 0 && (
-                              <span className="ml-1 rounded-full bg-foreground/10 px-1.5 py-0 text-[10px]">
-                                {activeFilterCount}
-                              </span>
+                            {!isEmbedded && (
+                              <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("user")); }}>
+                                User
+                              </DropdownMenuItem>
                             )}
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="end"
-                          className="w-48"
-                          onCloseAutoFocus={(e) => e.preventDefault()}
-                        >
-                          {!isEmbedded && (
-                            <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("user")); }}>
-                              User
+                            <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("team")); }}>
+                              Team
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("duration")); }}>
+                              Duration
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("lastActive")); }}>
+                              Last active
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("clicks")); }}>
+                              Click count
                             </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+
+                      {activeFilterCount > 0 && (
+                        <div className="flex flex-wrap items-center gap-1.5">
+                          {appliedFilters.userId && !isEmbedded && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                              user:{appliedFilters.userLabel || "selected"}
+                            </span>
+                          )}
+                          {appliedFilters.teamId && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                              team:{appliedFilters.teamLabel || "selected"}
+                            </span>
+                          )}
+                          {(appliedFilters.durationMinSeconds || appliedFilters.durationMaxSeconds) && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                              duration
+                            </span>
                           )}
-                          <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("team")); }}>
-                            Team
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("duration")); }}>
-                            Duration
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("lastActive")); }}>
-                            Last active
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("clicks")); }}>
-                            Click count
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                          {appliedFilters.lastActivePreset && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                              last active: {appliedFilters.lastActivePreset}
+                            </span>
+                          )}
+                          {appliedFilters.clickCountMin && (
+                            <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                              clicks
+                            </span>
+                          )}
+                          <button
+                            className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground transition-colors hover:transition-none"
+                            onClick={() => setAppliedFilters(baseFilters)}
+                          >
+                            <XIcon className="h-2.5 w-2.5" />
+                            clear
+                          </button>
+                        </div>
+                      )}
                     </div>
 
-                    {activeFilterCount > 0 && (
-                      <div className="flex flex-wrap items-center gap-1.5">
-                        {appliedFilters.userId && !isEmbedded && (
-                          <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
-                            user:{appliedFilters.userLabel || "selected"}
-                          </span>
-                        )}
-                        {appliedFilters.teamId && (
-                          <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
-                            team:{appliedFilters.teamLabel || "selected"}
-                          </span>
-                        )}
-                        {(appliedFilters.durationMinSeconds || appliedFilters.durationMaxSeconds) && (
-                          <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
-                            duration
-                          </span>
-                        )}
-                        {appliedFilters.lastActivePreset && (
-                          <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
-                            last active: {appliedFilters.lastActivePreset}
-                          </span>
-                        )}
-                        {appliedFilters.clickCountMin && (
-                          <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
-                            clicks
-                          </span>
-                        )}
-                        <button
-                          className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground transition-colors hover:transition-none"
-                          onClick={() => setAppliedFilters(baseFilters)}
-                        >
-                          <XIcon className="h-2.5 w-2.5" />
-                          clear
-                        </button>
-                      </div>
-                    )}
-                  </div>
-
-                  <Dialog open={activeFilterDialog === "user"} onOpenChange={(open) => setActiveFilterDialog(open ? "user" : null)}>
-                    <DialogContent className="max-w-md">
-                      <DialogHeader>
-                        <DialogTitle>User Filter</DialogTitle>
-                      </DialogHeader>
-                      <div className="space-y-3">
-                        <UserPickerTable
-                          action={(user) => (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => {
+                    <Dialog open={activeFilterDialog === "user"} onOpenChange={(open) => setActiveFilterDialog(open ? "user" : null)}>
+                      <DialogContent className="max-w-md">
+                        <DialogHeader>
+                          <DialogTitle>User Filter</DialogTitle>
+                        </DialogHeader>
+                        <div className="space-y-3">
+                          <UserPickerTable
+                            action={(user) => (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
                             setAppliedFilters((prev) => ({
                               ...prev,
                               userId: user.id,
                               userLabel: user.displayName ?? user.primaryEmail ?? user.id,
                             }));
                             setActiveFilterDialog(null);
+                                }}
+                              >
+                                Select
+                              </Button>
+                            )}
+                          />
+                          <div className="flex items-center justify-end gap-2">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8"
+                              onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, userId: "", userLabel: "" }));
+                          setActiveFilterDialog(null);
                               }}
                             >
-                              Select
+                              Clear
                             </Button>
-                          )}
-                        />
-                        <div className="flex items-center justify-end gap-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8"
-                            onClick={() => {
-                          setAppliedFilters((prev) => ({ ...prev, userId: "", userLabel: "" }));
-                          setActiveFilterDialog(null);
-                            }}
-                          >
-                            Clear
-                          </Button>
+                          </div>
                         </div>
-                      </div>
-                    </DialogContent>
-                  </Dialog>
-
-                  <Dialog open={activeFilterDialog === "team"} onOpenChange={(open) => setActiveFilterDialog(open ? "team" : null)}>
-                    <DialogContent className="max-w-3xl">
-                      <DialogHeader>
-                        <DialogTitle>Team Filter</DialogTitle>
-                      </DialogHeader>
-                      <div className="space-y-3 pt-2">
-                        <TeamSearchTable
-                          action={(team) => (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => {
+                      </DialogContent>
+                    </Dialog>
+
+                    <Dialog open={activeFilterDialog === "team"} onOpenChange={(open) => setActiveFilterDialog(open ? "team" : null)}>
+                      <DialogContent className="max-w-3xl">
+                        <DialogHeader>
+                          <DialogTitle>Team Filter</DialogTitle>
+                        </DialogHeader>
+                        <div className="space-y-3 pt-2">
+                          <TeamSearchTable
+                            action={(team) => (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
                             setAppliedFilters((prev) => ({
                               ...prev,
                               teamId: team.id,
                               teamLabel: team.displayName,
                             }));
                             setActiveFilterDialog(null);
+                                }}
+                              >
+                                Select
+                              </Button>
+                            )}
+                          />
+                          <div className="flex items-center justify-end gap-2">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8"
+                              onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, teamId: "", teamLabel: "" }));
+                          setActiveFilterDialog(null);
                               }}
                             >
-                              Select
+                              Clear
                             </Button>
-                          )}
-                        />
-                        <div className="flex items-center justify-end gap-2">
+                          </div>
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+
+                    <Dialog open={activeFilterDialog === "duration"} onOpenChange={(open) => setActiveFilterDialog(open ? "duration" : null)}>
+                      <DialogContent className="max-w-md">
+                        <DialogHeader>
+                          <DialogTitle>Duration Filter</DialogTitle>
+                        </DialogHeader>
+                        <form onSubmit={(e) => {
+                    e.preventDefault();
+                    applyDraftFilters();
+                        }}>
+                          <div className="grid grid-cols-2 gap-3 pt-2">
+                            <label className="space-y-1">
+                              <Typography className="text-xs text-muted-foreground">Min (seconds)</Typography>
+                              <input
+                                type="number"
+                                min={0}
+                                className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
+                                value={draftFilters.durationMinSeconds}
+                                onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMinSeconds: e.target.value }))}
+                              />
+                            </label>
+                            <label className="space-y-1">
+                              <Typography className="text-xs text-muted-foreground">Max (seconds)</Typography>
+                              <input
+                                type="number"
+                                min={0}
+                                className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
+                                value={draftFilters.durationMaxSeconds}
+                                onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMaxSeconds: e.target.value }))}
+                              />
+                            </label>
+                          </div>
+                          <div className="pt-3 flex items-center justify-end gap-2">
+                            <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
+                            <Button type="submit" size="sm" className="h-8">Apply</Button>
+                          </div>
+                        </form>
+                      </DialogContent>
+                    </Dialog>
+
+                    <Dialog open={activeFilterDialog === "lastActive"} onOpenChange={(open) => setActiveFilterDialog(open ? "lastActive" : null)}>
+                      <DialogContent className="max-w-md">
+                        <DialogHeader>
+                          <DialogTitle>Last Active Filter</DialogTitle>
+                        </DialogHeader>
+                        <div className="flex flex-wrap gap-2 pt-2">
+                          {([["24h", "Last 24 hours"], ["7d", "Last 7 days"], ["30d", "Last 30 days"]] as const).map(([value, label]) => (
+                            <Button
+                              key={value}
+                              variant={appliedFilters.lastActivePreset === value ? "default" : "outline"}
+                              size="sm"
+                              className="h-8"
+                              onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, lastActivePreset: value }));
+                          setActiveFilterDialog(null);
+                              }}
+                            >
+                              {label}
+                            </Button>
+                          ))}
+                        </div>
+                        <div className="pt-1 flex items-center justify-end gap-2">
                           <Button
                             variant="ghost"
                             size="sm"
                             className="h-8"
                             onClick={() => {
-                          setAppliedFilters((prev) => ({ ...prev, teamId: "", teamLabel: "" }));
-                          setActiveFilterDialog(null);
+                        setAppliedFilters((prev) => ({ ...prev, lastActivePreset: "" }));
+                        setActiveFilterDialog(null);
                             }}
                           >
                             Clear
                           </Button>
                         </div>
-                      </div>
-                    </DialogContent>
-                  </Dialog>
-
-                  <Dialog open={activeFilterDialog === "duration"} onOpenChange={(open) => setActiveFilterDialog(open ? "duration" : null)}>
-                    <DialogContent className="max-w-md">
-                      <DialogHeader>
-                        <DialogTitle>Duration Filter</DialogTitle>
-                      </DialogHeader>
-                      <form onSubmit={(e) => {
+                      </DialogContent>
+                    </Dialog>
+
+                    <Dialog open={activeFilterDialog === "clicks"} onOpenChange={(open) => setActiveFilterDialog(open ? "clicks" : null)}>
+                      <DialogContent className="max-w-md">
+                        <DialogHeader>
+                          <DialogTitle>Click Count Filter</DialogTitle>
+                        </DialogHeader>
+                        <form onSubmit={(e) => {
                     e.preventDefault();
                     applyDraftFilters();
-                      }}>
-                        <div className="grid grid-cols-2 gap-3 pt-2">
-                          <label className="space-y-1">
-                            <Typography className="text-xs text-muted-foreground">Min (seconds)</Typography>
+                        }}>
+                          <div className="space-y-3 pt-2">
                             <input
                               type="number"
                               min={0}
                               className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
-                              value={draftFilters.durationMinSeconds}
-                              onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMinSeconds: e.target.value }))}
+                              value={draftFilters.clickCountMin}
+                              onChange={(e) => setDraftFilters((prev) => ({ ...prev, clickCountMin: e.target.value }))}
+                              placeholder="Minimum click count"
                             />
-                          </label>
-                          <label className="space-y-1">
-                            <Typography className="text-xs text-muted-foreground">Max (seconds)</Typography>
-                            <input
-                              type="number"
-                              min={0}
-                              className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
-                              value={draftFilters.durationMaxSeconds}
-                              onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMaxSeconds: e.target.value }))}
-                            />
-                          </label>
-                        </div>
-                        <div className="pt-3 flex items-center justify-end gap-2">
-                          <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
-                          <Button type="submit" size="sm" className="h-8">Apply</Button>
-                        </div>
-                      </form>
-                    </DialogContent>
-                  </Dialog>
-
-                  <Dialog open={activeFilterDialog === "lastActive"} onOpenChange={(open) => setActiveFilterDialog(open ? "lastActive" : null)}>
-                    <DialogContent className="max-w-md">
-                      <DialogHeader>
-                        <DialogTitle>Last Active Filter</DialogTitle>
-                      </DialogHeader>
-                      <div className="flex flex-wrap gap-2 pt-2">
-                        {([["24h", "Last 24 hours"], ["7d", "Last 7 days"], ["30d", "Last 30 days"]] as const).map(([value, label]) => (
-                          <Button
-                            key={value}
-                            variant={appliedFilters.lastActivePreset === value ? "default" : "outline"}
-                            size="sm"
-                            className="h-8"
-                            onClick={() => {
-                          setAppliedFilters((prev) => ({ ...prev, lastActivePreset: value }));
-                          setActiveFilterDialog(null);
-                            }}
-                          >
-                            {label}
-                          </Button>
-                        ))}
-                      </div>
-                      <div className="pt-1 flex items-center justify-end gap-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-8"
-                          onClick={() => {
-                        setAppliedFilters((prev) => ({ ...prev, lastActivePreset: "" }));
-                        setActiveFilterDialog(null);
-                          }}
-                        >
-                          Clear
-                        </Button>
+                          </div>
+                          <div className="pt-3 flex items-center justify-end gap-2">
+                            <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
+                            <Button type="submit" size="sm" className="h-8">Apply</Button>
+                          </div>
+                        </form>
+                      </DialogContent>
+                    </Dialog>
+
+                    {listError && (
+                      <div className="p-3">
+                        <Alert variant="destructive">{listError}</Alert>
                       </div>
-                    </DialogContent>
-                  </Dialog>
-
-                  <Dialog open={activeFilterDialog === "clicks"} onOpenChange={(open) => setActiveFilterDialog(open ? "clicks" : null)}>
-                    <DialogContent className="max-w-md">
-                      <DialogHeader>
-                        <DialogTitle>Click Count Filter</DialogTitle>
-                      </DialogHeader>
-                      <form onSubmit={(e) => {
-                    e.preventDefault();
-                    applyDraftFilters();
-                      }}>
-                        <div className="space-y-3 pt-2">
-                          <input
-                            type="number"
-                            min={0}
-                            className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
-                            value={draftFilters.clickCountMin}
-                            onChange={(e) => setDraftFilters((prev) => ({ ...prev, clickCountMin: e.target.value }))}
-                            placeholder="Minimum click count"
-                          />
+                    )}
+
+                    <div
+                      ref={listBoxRef}
+                      onScroll={onListScroll}
+                      className="flex-1 overflow-y-auto"
+                    >
+                      {loadingInitial ? (
+                        <div className="p-2 space-y-1">
+                          {Array.from({ length: 8 }).map((_, i) => (
+                            <div key={i} className="rounded-lg p-3">
+                              <Skeleton className="h-4 w-36" />
+                              <Skeleton className="mt-1.5 h-3 w-24" />
+                            </div>
+                          ))}
                         </div>
-                        <div className="pt-3 flex items-center justify-end gap-2">
-                          <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
-                          <Button type="submit" size="sm" className="h-8">Apply</Button>
+                      ) : recordings.length === 0 ? (
+                        <div className="p-6 text-center">
+                          <Typography className="text-sm text-muted-foreground">
+                            {activeFilterCount > 0 ? "No replays match these filters." : "No replays yet."}
+                          </Typography>
                         </div>
-                      </form>
-                    </DialogContent>
-                  </Dialog>
-
-                  {listError && (
-                    <div className="p-3">
-                      <Alert variant="destructive">{listError}</Alert>
-                    </div>
-                  )}
-
-                  <div
-                    ref={listBoxRef}
-                    onScroll={onListScroll}
-                    className="flex-1 overflow-y-auto"
-                  >
-                    {loadingInitial ? (
-                      <div className="p-2 space-y-1">
-                        {Array.from({ length: 8 }).map((_, i) => (
-                          <div key={i} className="rounded-lg p-3">
-                            <Skeleton className="h-4 w-36" />
-                            <Skeleton className="mt-1.5 h-3 w-24" />
-                          </div>
-                        ))}
-                      </div>
-                    ) : recordings.length === 0 ? (
-                      <div className="p-6 text-center">
-                        <Typography className="text-sm text-muted-foreground">
-                          {activeFilterCount > 0 ? "No replays match these filters." : "No replays yet."}
-                        </Typography>
-                      </div>
-                    ) : (
-                      <div className="p-1.5 space-y-0.5">
-                        {recordings.map((r) => {
-                          const isSelected = r.id === selectedRecordingId;
-                          const durationMs = r.lastEventAt.getTime() - r.startedAt.getTime();
-                          const duration = formatDurationMs(durationMs);
-                          return (
-                            <div
-                              key={r.id}
-                              className={cn(
+                      ) : (
+                        <div className="p-1.5 space-y-0.5">
+                          {recordings.map((r) => {
+                            const isSelected = r.id === selectedRecordingId;
+                            const durationMs = r.lastEventAt.getTime() - r.startedAt.getTime();
+                            const duration = formatDurationMs(durationMs);
+                            return (
+                              <div
+                                key={r.id}
+                                className={cn(
                                 "rounded-lg",
-                                isSelected ? "bg-muted/60 ring-1 ring-border/40" : "hover:bg-muted/20",
+                                isSelected
+                                  ? "bg-white shadow-sm ring-1 ring-black/[0.06] dark:bg-background/80 dark:ring-white/[0.06]"
+                                  : "hover:bg-white/70 dark:hover:bg-muted/20",
                               )}
-                            >
-                              <button
-                                onClick={() => setSelectedRecordingId(r.id)}
-                                className={cn(
+                              >
+                                <button
+                                  onClick={() => setSelectedRecordingId(r.id)}
+                                  className={cn(
                                   "w-full text-left rounded-lg px-3 py-2.5",
                                   "transition-colors hover:transition-none",
                                 )}
-                              >
-                                <div className="flex items-center justify-between gap-2">
-                                  <span className="text-sm font-medium truncate">
-                                    {getRecordingTitle(r)}
-                                  </span>
-                                  <span className="text-xs text-muted-foreground whitespace-nowrap">
-                                    {duration}
-                                  </span>
-                                </div>
-                                <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
-                                  <DisplayDate date={r.lastEventAt} />
-                                  {(clickCountsByReplayId.get(r.id) ?? 0) > 0 && (
-                                    <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70">
-                                      <CursorClickIcon className="h-3 w-3" />
-                                      {clickCountsByReplayId.get(r.id)}
+                                >
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="text-sm font-medium truncate">
+                                      {getRecordingTitle(r)}
                                     </span>
-                                  )}
-                                </div>
-                              </button>
-                            </div>
-                          );
-                        })}
+                                    <span className="text-xs text-muted-foreground whitespace-nowrap">
+                                      {duration}
+                                    </span>
+                                  </div>
+                                  <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+                                    <DisplayDate date={r.lastEventAt} />
+                                    {(clickCountsByReplayId.get(r.id) ?? 0) > 0 && (
+                                      <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70">
+                                        <CursorClickIcon className="h-3 w-3" />
+                                        {clickCountsByReplayId.get(r.id)}
+                                      </span>
+                                    )}
+                                  </div>
+                                </button>
+                              </div>
+                            );
+                          })}
 
-                        {loadingMore && (
-                          <div className="rounded-lg p-3">
-                            <Skeleton className="h-4 w-36" />
-                            <Skeleton className="mt-1.5 h-3 w-24" />
-                          </div>
-                        )}
-                      </div>
-                    )}
+                          {loadingMore && (
+                            <div className="rounded-lg p-3">
+                              <Skeleton className="h-4 w-36" />
+                              <Skeleton className="mt-1.5 h-3 w-24" />
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Panel>
+
+                <PanelResizeHandle className="w-px bg-black/[0.08] transition-colors duration-150 hover:bg-black/[0.14] hover:transition-none dark:bg-border/40 dark:hover:bg-border" />
+              </>
+            )}
+
+            <Panel defaultSize={isStandaloneReplayPage ? 100 : 75} minSize={35}>
+              <div className="h-full flex flex-col bg-white dark:bg-background">
+                {(standaloneReplayError || ms.downloadError || ms.playerError) && (
+                  <div className="p-3 space-y-2">
+                    {standaloneReplayError && <Alert variant="destructive">{standaloneReplayError}</Alert>}
+                    {ms.downloadError && <Alert variant="destructive">{ms.downloadError}</Alert>}
+                    {ms.playerError && <Alert variant="destructive">{ms.playerError}</Alert>}
                   </div>
-                </div>
-              </Panel>
-
-              <PanelResizeHandle className="w-px bg-border/40 hover:bg-border transition-colors hover:transition-none" />
-            </>
-          )}
-
-          <Panel defaultSize={isStandaloneReplayPage ? 100 : 75} minSize={35}>
-            <div className="h-full flex flex-col">
-              {(standaloneReplayError || ms.downloadError || ms.playerError) && (
-                <div className="p-3 space-y-2">
-                  {standaloneReplayError && <Alert variant="destructive">{standaloneReplayError}</Alert>}
-                  {ms.downloadError && <Alert variant="destructive">{ms.downloadError}</Alert>}
-                  {ms.playerError && <Alert variant="destructive">{ms.playerError}</Alert>}
-                </div>
-              )}
-
-              <div className="shrink-0 px-3 py-2 border-b border-border/30 flex items-center justify-between gap-3 h-10">
-                {selectedRecording ? (
-                  <StyledLink
-                    href={`/projects/${encodeURIComponent(adminApp.projectId)}/users/${encodeURIComponent(selectedRecording.projectUser.id)}`}
-                    className="text-sm font-medium truncate"
-                  >
-                    {getRecordingTitle(selectedRecording)}
-                  </StyledLink>
-                ) : isStandaloneReplayPage && selectedRecordingId ? (
-                  <Typography className="text-sm font-medium truncate font-mono">
-                    Replay {selectedRecordingId}
-                  </Typography>
-                ) : (
-                  <Typography className="text-sm font-medium truncate" />
                 )}
-                <div className="flex items-center gap-1">
-                  {selectedRecordingId && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7"
-                      aria-label={replayShareLinkCopied ? "Link copied" : "Copy link to replay"}
-                      title={replayShareLinkCopied ? "Copied!" : "Copy link to replay"}
-                      onClick={() => runAsynchronouslyWithAlert(async () => {
-                        await navigator.clipboard.writeText(
+
+                <div className={replaysDetailChromeClass}>
+                  {selectedRecording ? (
+                    <StyledLink
+                      href={`/projects/${encodeURIComponent(adminApp.projectId)}/users/${encodeURIComponent(selectedRecording.projectUser.id)}`}
+                      className="text-sm font-medium truncate"
+                    >
+                      {getRecordingTitle(selectedRecording)}
+                    </StyledLink>
+                  ) : isStandaloneReplayPage && selectedRecordingId ? (
+                    <Typography className="text-sm font-medium truncate font-mono">
+                      Replay {selectedRecordingId}
+                    </Typography>
+                  ) : (
+                    <Typography className="text-sm font-medium truncate" />
+                  )}
+                  <div className="flex items-center gap-1">
+                    {selectedRecordingId && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        aria-label={replayShareLinkCopied ? "Link copied" : "Copy link to replay"}
+                        title={replayShareLinkCopied ? "Copied!" : "Copy link to replay"}
+                        onClick={() => runAsynchronouslyWithAlert(async () => {
+                          await navigator.clipboard.writeText(
                           `${window.location.origin}/projects/${encodeURIComponent(adminApp.projectId)}/session-replays/${encodeURIComponent(selectedRecordingId)}`,
                         );
                         setReplayShareLinkCopied(true);
-                      })}
-                    >
-                      {replayShareLinkCopied ? (
-                        <CheckIcon className="h-4 w-4 text-emerald-600" weight="bold" />
-                      ) : (
-                        <LinkIcon className="h-4 w-4" />
-                      )}
-                    </Button>
-                  )}
-                  <ReplaySettingsButton
-                    settings={ms.settings}
-                    onSettingsChange={(updates) => actRef.current({ type: "UPDATE_SETTINGS", updates })}
-                  />
+                        })}
+                      >
+                        {replayShareLinkCopied ? (
+                          <CheckIcon className="h-4 w-4 text-emerald-600" weight="bold" />
+                        ) : (
+                          <LinkIcon className="h-4 w-4" />
+                        )}
+                      </Button>
+                    )}
+                    <ReplaySettingsButton
+                      settings={ms.settings}
+                      onSettingsChange={(updates) => actRef.current({ type: "UPDATE_SETTINGS", updates })}
+                    />
+                  </div>
                 </div>
-              </div>
 
-              {selectedRecordingId ? (
-                <div className="flex-1 overflow-hidden flex flex-col">
+                {selectedRecordingId ? (
                   <div className="flex-1 overflow-hidden flex flex-col">
-                    <div
-                      className="flex-1 overflow-hidden grid grid-cols-[minmax(0,1fr)_260px] gap-px bg-border/40"
-                      style={{
-                        gridTemplateColumns: showRightColumn ? "minmax(0, 1fr) 260px" : "minmax(0, 1fr) 0px",
-                        gridTemplateRows: showRightColumn ? `repeat(${EXTRA_TABS_TO_SHOW}, auto) 1fr` : "1fr",
-                        transition: "grid-template-columns 180ms ease-out",
-                      }}
-                    >
-                      {fullStreams.length === 0 && (
-                        <div className="col-span-2 row-span-6 grid place-items-center bg-background">
-                          <div className="text-center space-y-2 p-6">
-                            {isDownloading ? (
-                              <>
-                                <Skeleton className="h-2 w-48 mx-auto" />
+                    <div className="flex-1 overflow-hidden flex flex-col">
+                      <div
+                        className="grid flex-1 grid-cols-[minmax(0,1fr)_260px] gap-px overflow-hidden bg-black/[0.06] dark:bg-border/40"
+                        style={{
+                          gridTemplateColumns: showRightColumn ? "minmax(0, 1fr) 260px" : "minmax(0, 1fr) 0px",
+                          gridTemplateRows: showRightColumn ? `repeat(${EXTRA_TABS_TO_SHOW}, auto) 1fr` : "1fr",
+                          transition: "grid-template-columns 180ms ease-out",
+                        }}
+                      >
+                        {fullStreams.length === 0 && (
+                          <div className={cn("col-span-2 row-span-6 grid place-items-center", replaysViewerSurfaceClass)}>
+                            <div className="text-center space-y-2 p-6">
+                              {isDownloading ? (
+                                <>
+                                  <Skeleton className="h-2 w-48 mx-auto" />
+                                  <Typography className="text-sm text-muted-foreground">
+                                    Loading replay...
+                                  </Typography>
+                                </>
+                              ) : (
                                 <Typography className="text-sm text-muted-foreground">
-                                  Loading replay...
+                                  No replay data loaded yet.
                                 </Typography>
-                              </>
-                            ) : (
-                              <Typography className="text-sm text-muted-foreground">
-                                No replay data loaded yet.
-                              </Typography>
-                            )}
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      )}
-
-                      {fullStreams.map((s) => {
-                        const isActive = s.tabKey === ms.activeTabKey;
-                        const miniIndex = miniIndexByKey.get(s.tabKey);
-                        const isMiniVisible = miniIndex !== undefined && miniIndex >= 0 && miniIndex < EXTRA_TABS_TO_SHOW;
-                        if (!isActive && !isMiniVisible) return null;
+                        )}
 
-                        const title = getTabLabel(s.tabKey);
+                        {fullStreams.map((s) => {
+                          const isActive = s.tabKey === ms.activeTabKey;
+                          const miniIndex = miniIndexByKey.get(s.tabKey);
+                          const isMiniVisible = miniIndex !== undefined && miniIndex >= 0 && miniIndex < EXTRA_TABS_TO_SHOW;
+                          if (!isActive && !isMiniVisible) return null;
 
-                        return (
-                          <button
-                            key={s.tabKey}
-                            type="button"
-                            onClick={() => {
-                              if (!isActive) onSelectActiveTab(s.tabKey);
-                            }}
-                            className={cn(
-                              "relative overflow-hidden bg-background text-left block w-full",
-                              isActive ? "h-full cursor-default" : "transition-colors hover:transition-none hover:bg-muted/10",
-                            )}
-                            style={{
-                              gridColumn: isActive ? "1" : "2",
-                              gridRow: isActive ? ("1 / -1" as any) : ((miniIndex ?? 0) + 1),
-                              ...(isActive ? {} : { aspectRatio: "16/10" }),
-                            }}
-                          >
-                            <div
-                              ref={(el) => setContainerRefForTab(s.tabKey, el)}
-                              className="absolute inset-0 bg-background"
-                            />
+                          const title = getTabLabel(s.tabKey);
 
-                            {!isActive && (
-                              <div className="absolute inset-x-0 top-0 z-10 px-2 pt-1.5">
-                                <span className="text-[11px] font-medium truncate bg-black/50 text-white px-2 py-0.5 rounded-full backdrop-blur-sm">{title}</span>
-                              </div>
+                          return (
+                            <button
+                              key={s.tabKey}
+                              type="button"
+                              onClick={() => {
+                                if (!isActive) onSelectActiveTab(s.tabKey);
+                              }}
+                              className={cn(
+                              "relative block w-full overflow-hidden text-left",
+                              replaysViewerSurfaceClass,
+                              isActive ? "h-full cursor-default" : "transition-colors duration-150 hover:transition-none hover:bg-zinc-200/50 dark:hover:bg-muted/10",
                             )}
+                              style={{
+                                gridColumn: isActive ? "1" : "2",
+                                gridRow: isActive ? ("1 / -1" as any) : ((miniIndex ?? 0) + 1),
+                                ...(isActive ? {} : { aspectRatio: "16/10" }),
+                              }}
+                            >
+                              <div
+                                ref={(el) => setContainerRefForTab(s.tabKey, el)}
+                                className={cn("absolute inset-0", replaysViewerSurfaceClass)}
+                              />
+
+                              {!isActive && (
+                                <div className="absolute inset-x-0 top-0 z-10 px-2 pt-1.5">
+                                  <span className="text-[11px] font-medium truncate bg-black/50 text-white px-2 py-0.5 rounded-full backdrop-blur-sm">{title}</span>
+                                </div>
+                              )}
 
-                            {!isActive && !replayerByTabRef.current.has(s.tabKey) && (
-                              <div className="absolute inset-0 grid place-items-center text-[11px] text-muted-foreground pointer-events-none">
-                                Loading...
-                              </div>
-                            )}
+                              {!isActive && !replayerByTabRef.current.has(s.tabKey) && (
+                                <div className="absolute inset-0 grid place-items-center text-[11px] text-muted-foreground pointer-events-none">
+                                  Loading...
+                                </div>
+                              )}
 
-                            {isActive && (
-                              <>
-                                {showMainTabLabel && (
-                                  <div className="absolute inset-x-0 top-4 z-10 flex justify-start pointer-events-none px-4">
-                                    <div className="flex items-center gap-1.5 rounded-full bg-black/50 px-3 py-1.5 backdrop-blur-sm">
-                                      <span className="text-xs text-white font-medium">{getTabLabel(s.tabKey)}</span>
-                                      {s.tabKey === NULL_TAB_KEY && (
-                                        <span className="text-xs text-white/70">unknown id</span>
-                                      )}
+                              {isActive && (
+                                <>
+                                  {showMainTabLabel && (
+                                    <div className="absolute inset-x-0 top-4 z-10 flex justify-start pointer-events-none px-4">
+                                      <div className="flex items-center gap-1.5 rounded-full bg-black/50 px-3 py-1.5 backdrop-blur-sm">
+                                        <span className="text-xs text-white font-medium">{getTabLabel(s.tabKey)}</span>
+                                        {s.tabKey === NULL_TAB_KEY && (
+                                          <span className="text-xs text-white/70">unknown id</span>
+                                        )}
+                                      </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
 
-                                {activeHasEvents && !playerIsPlaying && !isBuffering && (
-                                  <div
-                                    className="absolute inset-0 z-10 grid place-items-center cursor-pointer transition-opacity"
-                                    onClick={(e) => {
+                                  {activeHasEvents && !playerIsPlaying && !isBuffering && (
+                                    <div
+                                      className="absolute inset-0 z-10 grid place-items-center cursor-pointer transition-opacity"
+                                      onClick={(e) => {
                                       e.preventDefault();
                                       if (replayFinished) {
                                         handleSeek(0);
                                       } else {
                                         togglePlayPause();
                                       }
-                                    }}
-                                  >
-                                    {replayFinished ? (
-                                      <div className="flex flex-col items-center gap-2">
+                                      }}
+                                    >
+                                      {replayFinished ? (
+                                        <div className="flex flex-col items-center gap-2">
+                                          <div className="rounded-full bg-black/50 p-4 backdrop-blur-sm">
+                                            <ArrowsClockwiseIcon className="h-10 w-10 text-white" weight="bold" />
+                                          </div>
+                                          <span className="text-sm text-white/80 bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm">
+                                            Replay from start
+                                          </span>
+                                        </div>
+                                      ) : (
                                         <div className="rounded-full bg-black/50 p-4 backdrop-blur-sm">
-                                          <ArrowsClockwiseIcon className="h-10 w-10 text-white" weight="bold" />
+                                          <PlayIcon className="h-10 w-10 text-white" weight="fill" />
                                         </div>
-                                        <span className="text-sm text-white/80 bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm">
-                                          Replay from start
-                                        </span>
-                                      </div>
-                                    ) : (
-                                      <div className="rounded-full bg-black/50 p-4 backdrop-blur-sm">
-                                        <PlayIcon className="h-10 w-10 text-white" weight="fill" />
-                                      </div>
-                                    )}
-                                  </div>
-                                )}
+                                      )}
+                                    </div>
+                                  )}
 
-                                {activeHasEvents && ms.settings.skipInactivity && isSkipping && (
-                                  <div className="absolute inset-x-0 top-4 z-10 flex justify-center pointer-events-none">
-                                    <div className="flex items-center gap-1.5 rounded-full bg-black/50 px-3 py-1.5 backdrop-blur-sm">
-                                      <FastForwardIcon className="h-3.5 w-3.5 text-white" weight="fill" />
-                                      <span className="text-xs text-white">Skipping inactivity</span>
+                                  {activeHasEvents && ms.settings.skipInactivity && isSkipping && (
+                                    <div className="absolute inset-x-0 top-4 z-10 flex justify-center pointer-events-none">
+                                      <div className="flex items-center gap-1.5 rounded-full bg-black/50 px-3 py-1.5 backdrop-blur-sm">
+                                        <FastForwardIcon className="h-3.5 w-3.5 text-white" weight="fill" />
+                                        <span className="text-xs text-white">Skipping inactivity</span>
+                                      </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
 
-                                {activeHasEvents && isBuffering && (
-                                  <div
-                                    className="absolute inset-0 z-10 grid place-items-center cursor-pointer"
-                                    onClick={(e) => {
+                                  {activeHasEvents && isBuffering && (
+                                    <div
+                                      className="absolute inset-0 z-10 grid place-items-center cursor-pointer"
+                                      onClick={(e) => {
                                       e.preventDefault();
                                       togglePlayPause();
-                                    }}
-                                  >
-                                    <div className="flex items-center gap-2 rounded-full bg-black/50 px-4 py-2 backdrop-blur-sm">
-                                      <div className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
-                                      <span className="text-sm text-white">Buffering...</span>
+                                      }}
+                                    >
+                                      <div className="flex items-center gap-2 rounded-full bg-black/50 px-4 py-2 backdrop-blur-sm">
+                                        <div className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                                        <span className="text-sm text-white">Buffering...</span>
+                                      </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
 
-                                {activeHasEvents && playerIsPlaying && !isBuffering && (
-                                  <div
-                                    className="absolute inset-0 z-10 cursor-pointer"
-                                    onClick={(e) => {
+                                  {activeHasEvents && playerIsPlaying && !isBuffering && (
+                                    <div
+                                      className="absolute inset-0 z-10 cursor-pointer"
+                                      onClick={(e) => {
                                       e.stopPropagation();
                                       togglePlayPause();
-                                    }}
-                                  />
-                                )}
+                                      }}
+                                    />
+                                  )}
 
-                                {!activeHasEvents && (
-                                  <div className="absolute inset-0 grid place-items-center bg-background/80 backdrop-blur-sm">
-                                    <div className="text-center space-y-2 p-6">
-                                      {isDownloading ? (
-                                        <>
-                                          <Skeleton className="h-2 w-48 mx-auto" />
+                                  {!activeHasEvents && (
+                                    <div className="absolute inset-0 grid place-items-center bg-background/80 backdrop-blur-sm">
+                                      <div className="text-center space-y-2 p-6">
+                                        {isDownloading ? (
+                                          <>
+                                            <Skeleton className="h-2 w-48 mx-auto" />
+                                            <Typography className="text-sm text-muted-foreground">
+                                              Loading replay...
+                                            </Typography>
+                                          </>
+                                        ) : (
                                           <Typography className="text-sm text-muted-foreground">
-                                            Loading replay...
+                                            No events found.
                                           </Typography>
-                                        </>
-                                      ) : (
-                                        <Typography className="text-sm text-muted-foreground">
-                                          No events found.
-                                        </Typography>
-                                      )}
+                                        )}
+                                      </div>
                                     </div>
-                                  </div>
-                                )}
-                              </>
-                            )}
-                          </button>
-                        );
-                      })}
-                    </div>
+                                  )}
+                                </>
+                              )}
+                            </button>
+                          );
+                        })}
+                      </div>
 
-                    {activeStream && activeHasEvents && (
-                      <Timeline
-                        getCurrentTimeMs={getCurrentGlobalTimeMs}
-                        playerIsPlaying={playerIsPlaying}
-                        totalTimeMs={ms.globalTotalMs}
-                        onTogglePlayPause={togglePlayPause}
-                        onSeek={handleSeek}
-                        playerSpeed={ms.settings.playerSpeed}
-                        onSpeedChange={updateSpeed}
-                        markers={timelineMarkers}
-                      />
+                      {activeStream && activeHasEvents && (
+                        <Timeline
+                          getCurrentTimeMs={getCurrentGlobalTimeMs}
+                          playerIsPlaying={playerIsPlaying}
+                          totalTimeMs={ms.globalTotalMs}
+                          onTogglePlayPause={togglePlayPause}
+                          onSeek={handleSeek}
+                          playerSpeed={ms.settings.playerSpeed}
+                          onSpeedChange={updateSpeed}
+                          markers={timelineMarkers}
+                        />
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex-1 grid place-items-center">
+                    {loadingInitial ? (
+                      <div className="text-center space-y-2 p-6">
+                        <Skeleton className="h-2 w-48 mx-auto" />
+                        <Typography className="text-sm text-muted-foreground">
+                          Loading replay...
+                        </Typography>
+                      </div>
+                    ) : (
+                      <div className="text-center p-6 max-w-md mx-auto">
+                        <MonitorPlayIcon className="h-12 w-12 text-muted-foreground/40 mx-auto" />
+                        <Typography className="mt-3 text-sm font-medium">
+                          No session replays yet
+                        </Typography>
+                        <Typography className="mt-2 text-sm text-muted-foreground">
+                          Session replays let you watch how users interact with your app. For info on enabling replays,{" "}
+                          <StyledLink
+                            href="https://docs.hexclave.com/docs/apps/analytics"
+                            target="_blank"
+                          >
+                            look here
+                          </StyledLink>
+                          .
+                        </Typography>
+                      </div>
                     )}
                   </div>
-                </div>
-              ) : (
-                <div className="flex-1 grid place-items-center">
-                  {loadingInitial ? (
-                    <div className="text-center space-y-2 p-6">
-                      <Skeleton className="h-2 w-48 mx-auto" />
-                      <Typography className="text-sm text-muted-foreground">
-                        Loading replay...
-                      </Typography>
-                    </div>
-                  ) : (
-                    <div className="text-center p-6 max-w-md mx-auto">
-                      <MonitorPlayIcon className="h-12 w-12 text-muted-foreground/40 mx-auto" />
-                      <Typography className="mt-3 text-sm font-medium">
-                        No session replays yet
-                      </Typography>
-                      <Typography className="mt-2 text-sm text-muted-foreground">
-                        Session replays let you watch how users interact with your app. For info on enabling replays,{" "}
-                        <StyledLink
-                          href="https://docs.hexclave.com/docs/apps/analytics"
-                          target="_blank"
-                        >
-                          look here
-                        </StyledLink>
-                        .
-                      </Typography>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </Panel>
-        </PanelGroup>
+                )}
+              </div>
+            </Panel>
+          </PanelGroup>
+        </div>
       </PageLayout>
     </AppEnabledGuard>
   );
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
index b197e42add..2b608025a5 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { CmdKSearch, CmdKTrigger } from "@/components/cmdk-search";
+import { DashboardUserButton } from "@/components/dashboard-user-button";
 import { Link } from "@/components/link";
 import { Logo } from "@/components/logo";
 import { ProjectSwitcher } from "@/components/project-switcher";
@@ -37,7 +38,6 @@ import {
   type Icon as PhosphorIcon,
 } from "@phosphor-icons/react";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { UserButton } from "@stackframe/stack";
 import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -600,7 +600,7 @@ function SidebarContent({
           {!isCollapsed && (
             <div className="min-w-0 flex-1 overflow-hidden max-w-[calc(100%-3rem)]">
               <div className="w-full min-w-0 [&_button]:min-w-0 [&_button]:w-full [&_button]:max-w-full">
-                <UserButton showUserInfo />
+                <DashboardUserButton showUserInfo />
               </div>
             </div>
           )}
@@ -728,7 +728,7 @@ export default function SidebarLayout(props: { children?: React.ReactNode }) {
               {/* Right section: Search, Theme toggle and User button */}
               <div className="flex grow-1 gap-2 items-center">
                 <ThemeToggle />
-                <UserButton />
+                <DashboardUserButton />
               </div>
             </div>
           </div>
@@ -753,14 +753,14 @@ export default function SidebarLayout(props: { children?: React.ReactNode }) {
             </aside>
 
             {/* Main Content Area */}
-            <main className="flex-1 min-w-0 pt-1 pb-3 px-3 lg:pl-0 dark:py-0 dark:px-2 dark:pb-3">
+            <main className="flex-1 min-w-0 pt-1 pb-3 px-3 lg:pl-0 lg:pr-24 dark:py-0 dark:px-2 dark:pb-3 dark:lg:pr-24">
               <div className={cn(
               "relative flex min-w-0 flex-col overflow-visible has-[[data-full-bleed]]:h-full",
-              // Light mode card styling
-              "min-h-[calc(100vh-4.5rem)] bg-white/80 backdrop-blur-xl shadow-[0_4px_24px_rgba(0,0,0,0.06),0_1px_4px_rgba(0,0,0,0.04)] rounded-2xl border border-black/[0.06] lg:pr-20",
+              // Light mode card styling (companion gutter is on <main>, not here — avoids empty card chrome behind Stack Companion)
+              "min-h-[calc(100vh-4.5rem)] bg-white/80 backdrop-blur-xl shadow-[0_4px_24px_rgba(0,0,0,0.06),0_1px_4px_rgba(0,0,0,0.04)] rounded-2xl border border-black/[0.06]",
               // Dark mode: remove card styling
-              "dark:bg-transparent dark:backdrop-blur-none dark:shadow-none dark:rounded-none dark:border-0 dark:lg:pr-20",
-              // Full-bleed pages (email editors etc.): remove card styling in light mode too (keep lg:pr-20 for companion space)
+              "dark:bg-transparent dark:backdrop-blur-none dark:shadow-none dark:rounded-none dark:border-0",
+              // Full-bleed pages (email editors etc.): remove card styling in light mode too
               "has-[[data-full-bleed]]:min-h-0 has-[[data-full-bleed]]:bg-transparent has-[[data-full-bleed]]:backdrop-blur-none has-[[data-full-bleed]]:shadow-none has-[[data-full-bleed]]:rounded-none has-[[data-full-bleed]]:border-0",
             )}>
                 {props.children}
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 1d378b076d..86b7727718 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
@@ -86,6 +86,11 @@ import { useAdminApp } from "../use-admin-app";
 import { validateRiskScore } from "@/lib/risk-score-utils";
 import { parseClickHouseDate } from "../analytics/shared";
 
+const ruleCardSurfaceClass =
+  "bg-white/90 dark:bg-background/60 backdrop-blur-xl shadow-sm ring-1 ring-black/[0.06] dark:ring-white/[0.06]";
+const ruleCardMutedSurfaceClass =
+  "bg-white/90 dark:bg-background/60 shadow-sm ring-1 ring-black/[0.06] dark:ring-white/[0.06]";
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
@@ -196,8 +201,8 @@ const ACTION_BADGE_COLOR: Record<ActionType, "green" | "red" | "orange" | "blue"
 
 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 className={cn("inline-flex items-center", dim && "opacity-50")}>
+      <DesignBadge label={ACTION_LABELS[type]} color={ACTION_BADGE_COLOR[type]} size={size} contentMode="text" />
     </span>
   );
 }
@@ -286,7 +291,7 @@ function parseRuleTriggerRows(resultRows: Record<string, unknown>[]): RuleTrigge
 
 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={cn("rounded-xl px-3 py-2.5 min-w-0", ruleCardMutedSurfaceClass)}>
       <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate">
         {label}
       </div>
@@ -304,7 +309,7 @@ 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={cn("rounded-xl px-3 py-2 h-full flex flex-col justify-between min-w-0", ruleCardMutedSurfaceClass)}>
       <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" />
@@ -498,17 +503,20 @@ function RuleTriggerHistoryDialog({
         </button>
       )}
       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}>
+        <div className={cn("rounded-xl p-3 space-y-3", ruleCardMutedSurfaceClass)}>
+          <div className="flex items-center justify-between gap-3 min-w-0">
+            <Typography type="div" className="text-sm font-semibold leading-none truncate min-w-0" title={ruleDisplayName}>
               {ruleDisplayName}
             </Typography>
-            <ActionBadge type={ruleActionType} />
-            <DesignBadge
-              label={ruleEnabled ? "Enabled" : "Disabled"}
-              color={ruleEnabled ? "green" : "orange"}
-              size="sm"
-            />
+            <div className="flex items-center gap-2 shrink-0">
+              <ActionBadge type={ruleActionType} />
+              <DesignBadge
+                label={ruleEnabled ? "Enabled" : "Disabled"}
+                color={ruleEnabled ? "green" : "orange"}
+                size="sm"
+                contentMode="text"
+              />
+            </div>
           </div>
           <div className="grid grid-cols-3 gap-2">
             <TriggerStatTile
@@ -548,7 +556,7 @@ function RuleTriggerHistoryDialog({
         ) : null}
 
         <div
-          className="max-h-[360px] overflow-auto rounded-xl ring-1 ring-foreground/[0.06] bg-background/60"
+          className={cn("max-h-[360px] overflow-auto rounded-xl", ruleCardMutedSurfaceClass)}
           onScroll={handleScroll}
         >
           {isInitialLoading ? (
@@ -734,7 +742,7 @@ function SaveCancelButtons({ state, size = "sm" }: { state: RuleEditorState, siz
 
 function ConditionsPanel({ state }: { state: RuleEditorState }) {
   return (
-    <div className="p-3 rounded-xl bg-foreground/[0.03] ring-1 ring-foreground/[0.04]">
+    <div className={cn("p-3 rounded-xl", ruleCardMutedSurfaceClass)}>
       <ConditionBuilder value={state.conditionTree} onChange={state.setConditionTree} />
     </div>
   );
@@ -764,7 +772,7 @@ function RuleEditor(props: {
   const state = useRuleEditorState(props);
 
   return (
-    <div className="rounded-2xl bg-background/70 backdrop-blur-xl ring-2 ring-primary/40 shadow-sm transition-all duration-150 hover:transition-none p-4 space-y-4">
+    <div className={cn("rounded-2xl ring-2 ring-primary/40 transition-all duration-150 hover:transition-none p-4 space-y-4", ruleCardSurfaceClass)}>
       <NumberedStep n={1} title="Name this rule">
         <div className="flex items-center gap-3">
           <DesignInput
@@ -868,7 +876,8 @@ function SortableRuleRow(props: RuleRowProps) {
     <div
       {...dragBindings}
       className={cn(
-        "rounded-2xl bg-background/70 backdrop-blur-xl ring-1 ring-foreground/[0.06] shadow-sm",
+        "rounded-2xl",
+        ruleCardSurfaceClass,
         "flex items-center gap-3 p-4 cursor-grab active:cursor-grabbing",
         !isDragging && "transition-all duration-150 hover:transition-none",
         isDragging && "opacity-50 shadow-lg z-10",
@@ -943,7 +952,7 @@ function DefaultActionRow({
   onChange: (value: 'allow' | 'reject') => void,
 }) {
   return (
-    <div className="flex items-center justify-between gap-3 rounded-xl ring-1 ring-foreground/[0.06] bg-background/40 px-4 py-3">
+    <div className={cn("flex items-center justify-between gap-3 rounded-xl px-4 py-3", ruleCardMutedSurfaceClass)}>
       <div className="flex items-center gap-2">
         <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
         <Typography className="text-sm">
@@ -1146,14 +1155,14 @@ function TestRulesCard({ state }: { state: TestRulesState }) {
   );
 
   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)}>
+    <div className={cn("rounded-xl p-3 space-y-2", ruleCardMutedSurfaceClass, className)}>
       {children}
     </div>
   );
 
   return (
     <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={cn("rounded-xl p-4 space-y-4", ruleCardMutedSurfaceClass)}>
         <div className="space-y-3">
           {sectionHeader(
             <UserIcon className="h-3.5 w-3.5 text-muted-foreground" />,
@@ -1284,7 +1293,7 @@ function TestRulesCard({ state }: { state: TestRulesState }) {
 
       <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">
+          <div className={cn("rounded-xl h-full min-h-[260px] flex items-center justify-center", ruleCardMutedSurfaceClass)}>
             <DesignEmptyState
               icon={FlaskIcon}
               title="No simulation yet"
@@ -1352,7 +1361,7 @@ function TestRulesCard({ state }: { state: TestRulesState }) {
                     {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]"
+                        className={cn("flex items-center justify-between gap-2 rounded-lg px-2.5 py-2", ruleCardMutedSurfaceClass)}
                       >
                         <div className="min-w-0">
                           <Typography className="text-xs font-medium truncate">
diff --git a/apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx b/apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx
index 69d5acbe82..32ae8343f1 100644
--- a/apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx
+++ b/apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx
@@ -1,7 +1,17 @@
 import { StyledLink } from "@/components/link";
 import { StackHandler } from "@stackframe/stack";
+import { DashboardAccountSettingsPage } from "@/components/dashboard-account-settings/dashboard-account-settings-page";
+
+export default async function Handler(props: {
+  params: Promise<{ stack?: string[] }>,
+}) {
+  const params = await props.params;
+  const stack = params.stack || [];
+
+  if (stack.join("/") === "account-settings") {
+    return <DashboardAccountSettingsPage />;
+  }
 
-export default function Handler(props: unknown) {
   const extraInfo = <>
     <p className="text-xs">By signing in, you agree to the</p>
     <p className="text-xs"><StyledLink href="https://www.iubenda.com/privacy-policy/19290387/cookie-policy">Terms of Service</StyledLink> and <StyledLink href="https://www.iubenda.com/privacy-policy/19290387">Privacy Policy</StyledLink></p>
@@ -17,7 +27,10 @@ export default function Handler(props: unknown) {
     <div data-stack-handler-page className="min-h-screen">
       <StackHandler
         fullPage
-        componentProps={{ SignIn: { extraInfo }, SignUp: { extraInfo } }}
+        componentProps={{
+          SignIn: { extraInfo },
+          SignUp: { extraInfo },
+        }}
       />
     </div>
   );
diff --git a/apps/dashboard/src/components/assistant-ui/thread.tsx b/apps/dashboard/src/components/assistant-ui/thread.tsx
index d2eda88da7..dfc8bf4bf0 100644
--- a/apps/dashboard/src/components/assistant-ui/thread.tsx
+++ b/apps/dashboard/src/components/assistant-ui/thread.tsx
@@ -522,7 +522,7 @@ const ComposerStaticInput: FC<{ placeholder?: string, autoFocus?: boolean }> = (
 const Composer: FC<{ placeholder?: ComposerPlaceholder, autoFocus?: boolean }> = ({ placeholder, autoFocus = true }) => {
   const attachmentsEnabled = useComposerAttachmentsEnabled();
   return (
-    <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-border/20 dark:border-foreground/[0.08] bg-background/95 dark:bg-background/80 shadow-sm ring-1 ring-foreground/[0.04] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
+    <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-black/[0.08] dark:border-foreground/[0.08] bg-white/95 dark:bg-background/80 shadow-sm ring-1 ring-black/[0.06] dark:ring-white/[0.06] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
       {attachmentsEnabled && <ComposerAttachmentsRow />}
       {typeof placeholder === "object" ? (
         <ComposerAnimatedInput
diff --git a/apps/dashboard/src/components/country-code-select.tsx b/apps/dashboard/src/components/country-code-select.tsx
index 141e250578..4d7b4380c2 100644
--- a/apps/dashboard/src/components/country-code-select.tsx
+++ b/apps/dashboard/src/components/country-code-select.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { cn } from "@/lib/utils";
+import { DesignInput } from "@/components/design-components";
 import {
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-  Input,
 } from "@/components/ui";
+import { cn } from "@/lib/utils";
 import { FieldLabel } from "@/components/form-fields";
 import { useEffect, useState } from "react";
 import { Control, FieldValues, Path } from "react-hook-form";
@@ -34,7 +34,7 @@ export function CountryCodeInput({
   }, [value]);
 
   return (
-    <Input
+    <DesignInput
       value={draftValue}
       onChange={(e) => {
         const val = e.target.value.toUpperCase().replace(/[^A-Z]/g, "").slice(0, 2);
@@ -44,6 +44,7 @@ export function CountryCodeInput({
       placeholder={placeholder}
       disabled={disabled}
       maxLength={2}
+      size="sm"
       className={cn("font-mono", className)}
     />
   );
diff --git a/apps/dashboard/src/components/dashboard-account-settings/active-sessions/active-sessions-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/active-sessions/active-sessions-page.tsx
new file mode 100644
index 0000000000..3c1f255c35
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/active-sessions/active-sessions-page.tsx
@@ -0,0 +1,289 @@
+'use client';
+
+import { fromNow } from "@stackframe/stack-shared/dist/utils/dates";
+import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DotsThree, Monitor, DeviceMobile, Warning } from "@phosphor-icons/react";
+import { useEffect, useMemo, useState } from "react";
+import { useUser } from "@stackframe/stack";
+import { ActiveSession } from "../supporting/types";
+import { PageLayout } from "../page-layout";
+import { cn } from "@/lib/utils";
+
+export function ActiveSessionsPage(props?: {
+  mockSessions?: Array<{
+    id: string,
+    isCurrentSession: boolean,
+    isImpersonation?: boolean,
+    createdAt: string,
+    lastUsedAt?: string,
+    geoInfo?: {
+      ip?: string,
+      cityName?: string,
+    },
+  }>,
+  mockMode?: boolean,
+}) {
+  const userFromHook = useUser({ or: (props?.mockSessions || props?.mockMode) ? 'return-null' : 'throw' });
+  const [isLoading, setIsLoading] = useState(!props?.mockSessions);
+  const [isRevokingAll, setIsRevokingAll] = useState(false);
+  const [sessions, setSessions] = useState<any[]>([]);
+  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);
+
+  // Use mock data if provided
+  const mockSessionsData = useMemo(() => props?.mockSessions ? props.mockSessions.map(session => ({
+    id: session.id,
+    isCurrentSession: session.isCurrentSession,
+    isImpersonation: session.isImpersonation || false,
+    createdAt: session.createdAt,
+    lastUsedAt: session.lastUsedAt,
+    geoInfo: session.geoInfo,
+  })) : [
+    {
+      id: 'current-session',
+      isCurrentSession: true,
+      createdAt: new Date().toISOString(),
+      lastUsedAt: new Date().toISOString(),
+      geoInfo: { ip: '192.168.1.1', cityName: 'San Francisco' }
+    },
+    {
+      id: 'mobile-session',
+      isCurrentSession: false,
+      createdAt: new Date(Date.now() - 86400000).toISOString(),
+      lastUsedAt: new Date(Date.now() - 7200000).toISOString(),
+      geoInfo: { ip: '10.0.0.1', cityName: 'New York' }
+    }
+  ], [props?.mockSessions]);
+
+  useEffect(() => {
+    if (props?.mockSessions) {
+      setSessions(mockSessionsData as any);
+      setIsLoading(false);
+      return;
+    }
+
+    if (props?.mockMode && !userFromHook) {
+      setSessions(mockSessionsData as any);
+      setIsLoading(false);
+      return;
+    }
+
+    if (!userFromHook) return;
+
+    runAsynchronously(async () => {
+      setIsLoading(true);
+      const sessionsData = await userFromHook.getActiveSessions();
+      setSessions(sessionsData);
+      setIsLoading(false);
+    });
+  }, [mockSessionsData, userFromHook, props?.mockMode, props?.mockSessions]);
+
+  const handleRevokeSession = async (sessionId: string) => {
+    if (props?.mockSessions) {
+      setSessions(prev => prev.filter(session => session.id !== sessionId));
+      return;
+    }
+
+    if (!userFromHook) return;
+
+    try {
+      await userFromHook.revokeSession(sessionId);
+      setSessions(prev => prev.filter(session => session.id !== sessionId));
+    } catch (error) {
+      captureError("session-revoke", { sessionId, error });
+      throw error;
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    setIsRevokingAll(true);
+    try {
+      if (props?.mockSessions) {
+        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));
+      } else if (userFromHook) {
+        const deletionPromises = sessions
+          .filter(session => !session.isCurrentSession)
+          .map(session => userFromHook.revokeSession(session.id));
+        await Promise.all(deletionPromises);
+        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));
+      }
+    } catch (error) {
+      captureError("all-sessions-revoke", { error, sessionIds: sessions.map(session => session.id) });
+      throw error;
+    } finally {
+      setIsRevokingAll(false);
+      setShowConfirmRevokeAll(false);
+    }
+  };
+
+  return (
+    <PageLayout>
+      <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          <div>
+            <h3 className="font-semibold text-base text-foreground leading-snug">
+              Active Sessions
+            </h3>
+            <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+              These are devices where you&apos;re currently logged in. You can revoke access to end a session.
+            </p>
+          </div>
+          {sessions.filter(s => !s.isCurrentSession).length > 0 && !isLoading && (
+            showConfirmRevokeAll ? (
+              <div className="flex gap-2 w-full md:w-auto">
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  loading={isRevokingAll}
+                  onClick={handleRevokeAllSessions}
+                  className="rounded-xl flex-1 md:flex-none px-4 py-2"
+                >
+                  Confirm Revoke All
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={isRevokingAll}
+                  onClick={() => setShowConfirmRevokeAll(false)}
+                  className="border-black/[0.08] dark:border-white/[0.08] rounded-xl flex-1 md:flex-none px-4 py-2"
+                >
+                  Cancel
+                </Button>
+              </div>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowConfirmRevokeAll(true)}
+                className="border-black/[0.08] dark:border-white/[0.08] rounded-xl hover:bg-zinc-50 dark:hover:bg-zinc-900 px-4 py-2 text-xs font-semibold w-full md:w-auto"
+              >
+                Revoke All Other Sessions
+              </Button>
+            )
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full rounded-xl" />
+            <Skeleton className="h-[200px] w-full rounded-xl" />
+          </div>
+        ) : (
+          <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+            <Table>
+              <TableHeader className="bg-zinc-50/50 dark:bg-zinc-900/50">
+                <TableRow className="border-b border-black/[0.06] dark:border-white/[0.06]">
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Session</TableHead>
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">IP Address</TableHead>
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Location</TableHead>
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Last Used</TableHead>
+                  <TableHead className="py-3 px-4 text-right w-[60px]"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sessions.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="text-center py-8 text-muted-foreground italic text-sm">
+                      No active sessions found
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  sessions.map((session) => (
+                    <TableRow key={session.id} className="border-b border-black/[0.04] dark:border-white/[0.04] last:border-b-0 hover:bg-zinc-50/30 dark:hover:bg-zinc-900/30 transition-colors duration-150">
+                      <TableCell className="py-4 px-4">
+                        <div className="flex items-center gap-3">
+                          <div className="bg-zinc-100 dark:bg-zinc-900 p-2 rounded-xl text-foreground shrink-0 border border-black/[0.04] dark:border-white/[0.04]">
+                            {session.id.includes("mobile") ? (
+                              <DeviceMobile className="h-5 w-5" />
+                            ) : (
+                              <Monitor className="h-5 w-5" />
+                            )}
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-sm font-semibold text-foreground flex items-center gap-1.5">
+                              {session.isCurrentSession ? "Current Session" : "Other Session"}
+                              {session.isCurrentSession && (
+                                <Badge className="bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900 text-[10px] px-2 py-0 border-0 font-bold rounded-full">
+                                  Active
+                                </Badge>
+                              )}
+                            </span>
+                            {session.isImpersonation && (
+                              <Badge className="bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400 border border-amber-200 dark:border-amber-900/30 text-[9px] px-1.5 py-0 font-semibold rounded-md w-fit mt-1">
+                                Impersonation
+                              </Badge>
+                            )}
+                            <span className="text-xs text-muted-foreground/80 mt-0.5">
+                              Signed in {new Date(session.createdAt).toLocaleDateString()}
+                            </span>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className="py-4 px-4 text-sm text-foreground/90 font-medium">
+                        {session.geoInfo?.ip || '-'}
+                      </TableCell>
+                      <TableCell className="py-4 px-4 text-sm text-foreground/90 font-medium">
+                        {session.geoInfo?.cityName || 'Unknown'}
+                      </TableCell>
+                      <TableCell className="py-4 px-4">
+                        <div className="flex flex-col">
+                          <span className="text-sm font-semibold text-foreground">
+                            {session.lastUsedAt ? fromNow(new Date(session.lastUsedAt)) : "Never"}
+                          </span>
+                          <span className="text-xs text-muted-foreground/80 mt-0.5" title={session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : ""}>
+                            {session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : ""}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="py-4 px-4 text-right">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              className="h-8 w-8 p-0 rounded-lg text-muted-foreground hover:text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
+                            >
+                              <DotsThree className="h-5 w-5 weight-bold" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-[140px] rounded-xl border-black/[0.08] dark:border-white/[0.08] shadow-md">
+                            <DropdownMenuItem
+                              onClick={() => runAsynchronouslyWithAlert(async () => { await handleRevokeSession(session.id); })}
+                              disabled={session.isCurrentSession}
+                              className={cn(
+                                "cursor-pointer rounded-lg text-red-500 hover:text-red-600 focus:text-red-500",
+                                session.isCurrentSession ? "opacity-50 cursor-not-allowed" : ""
+                              )}
+                            >
+                              Revoke Session
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/api-keys/api-keys-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/api-keys/api-keys-page.tsx
new file mode 100644
index 0000000000..f3de2fac13
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/api-keys/api-keys-page.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../supporting/api-key-dialogs";
+import { ApiKeyTable } from "../supporting/api-key-table";
+import { useUser } from "@stackframe/stack";
+import { ApiKey, ApiKeyCreationOptions } from "../supporting/types";
+import { PageLayout } from "../page-layout";
+
+export function ApiKeysPage({
+  mockApiKeys,
+  mockMode,
+}: {
+  mockApiKeys?: Array<{
+    id: string,
+    description: string,
+    createdAt: string,
+    expiresAt?: string,
+    manuallyRevokedAt?: string,
+  }>,
+  mockMode?: boolean,
+} = {}) {
+  const isInMockMode = !!(mockApiKeys || mockMode);
+  const user = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });
+
+  if (isInMockMode) {
+    return <ApiKeysPageInner user={null} mockApiKeys={mockApiKeys} mockMode={true} />;
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return <ApiKeysPageInner user={user} mockMode={false} />;
+}
+
+function ApiKeysPageInner({
+  user,
+  mockApiKeys,
+  mockMode,
+}: {
+  user: any;
+  mockApiKeys?: any[];
+  mockMode: boolean;
+}) {
+  const mockApiKeysData = mockApiKeys ? mockApiKeys.map(mockKey => ({
+    id: mockKey.id,
+    description: mockKey.description,
+    createdAt: new Date(mockKey.createdAt),
+    expiresAt: mockKey.expiresAt ? new Date(mockKey.expiresAt) : undefined,
+    manuallyRevokedAt: mockKey.manuallyRevokedAt ? new Date(mockKey.manuallyRevokedAt) : null,
+    value: {
+      lastFour: mockKey.id.slice(-4).padStart(4, '0'),
+    },
+    type: 'user' as const,
+    userId: 'mock-user-id',
+    update: async () => {},
+    revoke: async () => {},
+    isValid: () => {
+      const now = new Date();
+      const isExpired = mockKey.expiresAt ? new Date(mockKey.expiresAt) < now : false;
+      const isRevoked = !!mockKey.manuallyRevokedAt;
+      return !isExpired && !isRevoked;
+    },
+    whyInvalid: () => {
+      const now = new Date();
+      if (mockKey.manuallyRevokedAt) return 'manually-revoked';
+      if (mockKey.expiresAt && new Date(mockKey.expiresAt) < now) return 'expired';
+      return null;
+    },
+  })) : [
+    {
+      id: 'key-1',
+      description: 'Development Key',
+      createdAt: new Date(Date.now() - 172800000),
+      expiresAt: undefined,
+      manuallyRevokedAt: null,
+      value: {
+        lastFour: 'ey-1'.slice(-4).padStart(4, '0'),
+      },
+      type: 'user' as const,
+      userId: 'mock-user-id',
+      update: async () => {},
+      revoke: async () => {},
+      isValid: () => true,
+      whyInvalid: () => null,
+    }
+  ];
+
+  const apiKeys = mockMode ? mockApiKeysData : user.useApiKeys();
+
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState<ApiKey<"user", true> | null>(null);
+
+  const CreateDialog = CreateApiKeyDialog<"user">;
+  const ShowDialog = ShowApiKeyDialog<"user">;
+
+  const handleCreateApiKey = async (data: ApiKeyCreationOptions<"user">) => {
+    if (mockMode) {
+      const mockApiKey = {
+        id: `key-${Date.now()}`,
+        description: data.description,
+        createdAt: new Date().toISOString(),
+        expiresAt: data.expiresAt?.toISOString(),
+        value: 'sk_dev_mock_key_' + Math.random().toString(36).substring(2),
+        update: async () => {},
+        revoke: async () => {},
+        isValid: () => true,
+        whyInvalid: () => null,
+        type: 'user' as const,
+        userId: 'mock-user-id',
+      };
+      return mockApiKey as any;
+    }
+
+    return await user.createApiKey(data as any);
+  };
+
+  return (
+    <PageLayout>
+      <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          <div>
+            <h3 className="font-semibold text-base text-foreground leading-snug">
+              User API Keys
+            </h3>
+            <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+              Create and manage API keys to authenticate your user actions from scripts or backend environments.
+            </p>
+          </div>
+          <Button
+            onClick={() => setIsNewApiKeyDialogOpen(true)}
+            className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4 py-2 w-full md:w-auto transition-colors duration-150"
+          >
+            Create API Key
+          </Button>
+        </div>
+
+        <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+          <ApiKeyTable apiKeys={apiKeys} />
+        </div>
+      </div>
+
+      <CreateDialog
+        open={isNewApiKeyDialogOpen}
+        onOpenChange={setIsNewApiKeyDialogOpen}
+        onKeyCreated={setReturnedApiKey}
+        createApiKey={handleCreateApiKey}
+        mockMode={mockMode}
+      />
+      <ShowDialog
+        apiKey={returnedApiKey}
+        onClose={() => setReturnedApiKey(null)}
+      />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/dashboard-account-settings-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/dashboard-account-settings-page.tsx
new file mode 100644
index 0000000000..7ff212bf76
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/dashboard-account-settings-page.tsx
@@ -0,0 +1,324 @@
+'use client';
+
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  UserCircle,
+  ShieldCheck,
+  Bell,
+  Monitor,
+  Key,
+  Gear,
+  CreditCard,
+  Plus,
+} from "@phosphor-icons/react";
+import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { Team, useStackApp, useUser } from "@stackframe/stack";
+import { SidebarLayout } from './sidebar-layout';
+import { ActiveSessionsPage } from "./active-sessions/active-sessions-page";
+import { ApiKeysPage } from "./api-keys/api-keys-page";
+import { EmailsAndAuthPage } from './email-and-auth/email-and-auth-page';
+import { NotificationsPage } from './notifications/notifications-page';
+import { ProfilePage } from "./profile-page/profile-page";
+import { SettingsPage } from './settings/settings-page';
+import { PaymentsPage } from "./payments/payments-page";
+import { TeamPage } from "./teams/team-page";
+import { TeamCreationPage } from "./teams/team-creation-page";
+import { TeamIcon } from "./supporting/team-icon";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+
+const iconMap = {
+  Contact: UserCircle,
+  ShieldCheck,
+  Bell,
+  Monitor,
+  Key,
+  Settings: Gear,
+  CreditCard,
+  Plus,
+} as const;
+
+const Icon = ({ name }: { name: keyof typeof iconMap }) => {
+  const PhosphorIcon = iconMap[name];
+  return <PhosphorIcon className="h-4 w-4 shrink-0" />;
+};
+
+const emptyTeams: Team[] = [];
+
+export function DashboardAccountSettingsPage(props: {
+  mockUser?: {
+    displayName?: string,
+    profileImageUrl?: string,
+  },
+  mockApiKeys?: Array<{
+    id: string,
+    description: string,
+    createdAt: string,
+    expiresAt?: string,
+    manuallyRevokedAt?: string,
+  }>,
+  mockProject?: {
+    config: {
+      allowUserApiKeys: boolean,
+      clientTeamCreationEnabled?: boolean,
+    },
+  },
+  mockSessions?: Array<{
+    id: string,
+    isCurrentSession: boolean,
+    isImpersonation?: boolean,
+    createdAt: string,
+    lastUsedAt?: string,
+    geoInfo?: {
+      ip?: string,
+      cityName?: string,
+    },
+  }>,
+}) {
+  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });
+  const stackApp = useStackApp();
+  const projectFromHook = stackApp.useProject();
+
+  const user = props.mockUser ? null : userFromHook;
+  const project = props.mockProject || projectFromHook;
+
+  const teams = user?.useTeams() ?? emptyTeams;
+  const teamsKey = teams.map(team => team.id).join("|");
+  // useTeams() may return a fresh array on each render; key by IDs so product checks do not refire unnecessarily.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const teamsById = useMemo(() => teams, [teamsKey]);
+  const userRef = useRef(userFromHook ?? null);
+  const userId = userFromHook?.id ?? null;
+
+  const [paymentsAvailability, setPaymentsAvailability] = useState<{
+    userHasProducts: boolean,
+    teamIdsWithProducts: Set<string>,
+    isReady: boolean,
+  }>(() => ({
+    userHasProducts: false,
+    teamIdsWithProducts: new Set<string>(),
+    isReady: !!props.mockUser,
+  }));
+
+  useEffect(() => {
+    userRef.current = userFromHook ?? null;
+  }, [userFromHook]);
+
+  useEffect(() => {
+    if (props.mockUser || !userId) {
+      return;
+    }
+    let cancelled = false;
+    runAsynchronouslyWithAlert(async () => {
+      const currentUser = userRef.current;
+      if (!currentUser || currentUser.id !== userId) {
+        return;
+      }
+      const [userProducts, teamsWithProducts] = await Promise.all([
+        currentUser.listProducts({ limit: 1 }),
+        Promise.all(teamsById.map(async (team) => {
+          const isTeamAdmin = await currentUser.hasPermission(team, "team_admin");
+          if (!isTeamAdmin) {
+            return null;
+          }
+          const teamProducts = await team.listProducts({ limit: 1 });
+          const hasTeamProducts = teamProducts.some((product) => product.customerType === "team");
+          return hasTeamProducts ? team.id : null;
+        })),
+      ]);
+      if (cancelled) {
+        return;
+      }
+      const userHasProducts = userProducts.some((product) => product.customerType === "user");
+      const teamIdsWithProducts = new Set<string>(teamsWithProducts.filter((id): id is string => id !== null));
+      setPaymentsAvailability({
+        userHasProducts,
+        teamIdsWithProducts,
+        isReady: true,
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [props.mockUser, teamsById, userId]);
+
+  const teamsWithProducts = useMemo(
+    () => teamsById.filter(team => paymentsAvailability.teamIdsWithProducts.has(team.id)),
+    [paymentsAvailability.teamIdsWithProducts, teamsById],
+  );
+
+  const shouldShowPaymentsTab = props.mockUser
+    || (paymentsAvailability.isReady
+      && (paymentsAvailability.userHasProducts || teamsWithProducts.length > 0));
+
+  if (!props.mockUser && !userFromHook) {
+    return null;
+  }
+
+  const sidebarItems = [
+    {
+      title: 'My Profile',
+      type: 'item' as const,
+      id: 'profile',
+      icon: <Icon name="Contact"/>,
+      content: <ProfilePage mockUser={props.mockUser}/>,
+    },
+    {
+      title: 'Emails & Auth',
+      type: 'item' as const,
+      id: 'auth',
+      icon: <Icon name="ShieldCheck"/>,
+      content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>
+        <EmailsAndAuthPage mockMode={!!props.mockUser}/>
+      </Suspense>,
+    },
+    {
+      title: 'Notifications',
+      type: 'item' as const,
+      id: 'notifications',
+      icon: <Icon name="Bell"/>,
+      content: <Suspense fallback={<NotificationsPageSkeleton/>}>
+        <NotificationsPage/>
+      </Suspense>,
+    },
+    {
+      title: 'Active Sessions',
+      type: 'item' as const,
+      id: 'sessions',
+      icon: <Icon name="Monitor"/>,
+      content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>
+        <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>
+      </Suspense>,
+    },
+    ...(project.config.allowUserApiKeys ? [{
+      title: 'API Keys',
+      type: 'item' as const,
+      id: 'api-keys',
+      icon: <Icon name="Key" />,
+      content: <Suspense fallback={<ApiKeysPageSkeleton/>}>
+        <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />
+      </Suspense>,
+    }] as const : []),
+    ...(shouldShowPaymentsTab ? [{
+      title: 'Payments',
+      type: 'item' as const,
+      id: 'payments',
+      icon: <Icon name="CreditCard" />,
+      content: <Suspense fallback={<PaymentsPageSkeleton/>}>
+        <PaymentsPage
+          mockMode={!!props.mockUser}
+          allowPersonal={paymentsAvailability.userHasProducts}
+          availableTeams={teamsWithProducts}
+        />
+      </Suspense>,
+    }] as const : []),
+    {
+      title: 'Settings',
+      type: 'item' as const,
+      id: 'settings',
+      icon: <Icon name="Settings"/>,
+      content: <SettingsPage mockMode={!!props.mockUser}/>,
+    },
+    ...( (teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{
+      title: 'Teams',
+      type: 'divider' as const,
+    }] as const : [] ),
+    ...teams.map(team => ({
+      title: (
+        <div className="flex gap-2 items-center w-full min-w-0">
+          <TeamIcon team={team}/>
+          <span className="truncate max-w-[140px] md:max-w-[200px] text-sm font-medium">{team.displayName}</span>
+        </div>
+      ),
+      type: 'item' as const,
+      id: `team-${team.id}`,
+      content: <Suspense fallback={<TeamPageSkeleton/>}>
+        <TeamPage team={team}/>
+      </Suspense>,
+    } as const)),
+    ...( project.config.clientTeamCreationEnabled ? [{
+      title: 'Create a team',
+      icon: <Icon name="Plus"/>,
+      type: 'item' as const,
+      id: 'team-creation',
+      content: <Suspense fallback={<TeamCreationSkeleton/>}>
+        <TeamCreationPage mockMode={!!props.mockUser} />
+      </Suspense>,
+    }] as const : [] ),
+  ].filter(p => p.type === 'divider' || (p as any).content);
+
+  return (
+    <div className="flex-grow w-full max-w-7xl mx-auto px-4 md:px-8 py-8 flex flex-col">
+      <SidebarLayout
+        items={sidebarItems as any}
+        title="Account Settings"
+      />
+    </div>
+  );
+}
+
+function PageLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className='flex flex-col gap-6'>
+      {props.children}
+    </div>
+  );
+}
+
+function EmailsAndAuthPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[120px] w-full rounded-2xl" />
+      <Skeleton className="h-[120px] w-full rounded-2xl" />
+      <Skeleton className="h-[120px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function ActiveSessionsPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[250px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function ApiKeysPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[250px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function NotificationsPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[200px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function PaymentsPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[350px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function TeamPageSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[150px] w-full rounded-2xl" />
+      <Skeleton className="h-[250px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
+
+function TeamCreationSkeleton() {
+  return (
+    <PageLayout>
+      <Skeleton className="h-[150px] w-full rounded-2xl" />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/editable-text.tsx b/apps/dashboard/src/components/dashboard-account-settings/editable-text.tsx
new file mode 100644
index 0000000000..789bb6a4f9
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/editable-text.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { PencilSimple } from "@phosphor-icons/react";
+import { useState } from "react";
+
+export function EditableText(props: { value: string, onSave?: (value: string) => void | Promise<void> }) {
+  const [editing, setEditing] = useState(false);
+  const [editingValue, setEditingValue] = useState(props.value);
+
+  return (
+    <div className='flex items-center gap-2'>
+      {editing ? (
+        <>
+          <Input
+            value={editingValue}
+            onChange={(e) => setEditingValue(e.target.value)}
+            className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] min-w-[200px]"
+          />
+          <Button
+            size='sm'
+            onClick={async () => {
+              await props.onSave?.(editingValue);
+              setEditing(false);
+            }}
+            className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4 transition-colors duration-150"
+          >
+            Save
+          </Button>
+          <Button
+            size='sm'
+            variant='outline'
+            onClick={() => {
+              setEditingValue(props.value);
+              setEditing(false);
+            }}
+            className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 transition-colors duration-150"
+          >
+            Cancel
+          </Button>
+        </>
+      ) : (
+        <>
+          <span className="text-base font-medium text-foreground">{props.value}</span>
+          <Button
+            onClick={() => {
+              setEditingValue(props.value);
+              setEditing(true);
+            }}
+            size='icon'
+            variant='ghost'
+            className="rounded-lg text-muted-foreground hover:text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-900 h-8 w-8 p-0 transition-colors duration-150"
+          >
+            <PencilSimple className="w-4 h-4" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/email-and-auth-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/email-and-auth-page.tsx
new file mode 100644
index 0000000000..a3fb17122f
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/email-and-auth-page.tsx
@@ -0,0 +1,20 @@
+import { PageLayout } from "../page-layout";
+import { EmailsSection } from "./emails-section";
+import { MfaSection } from "./mfa-section";
+import { OtpSection } from "./otp-section";
+import { PasskeySection } from "./passkey-section";
+import { PasswordSection } from "./password-section";
+
+export function EmailsAndAuthPage(props?: {
+  mockMode?: boolean,
+}) {
+  return (
+    <PageLayout>
+      <EmailsSection mockMode={props?.mockMode}/>
+      <PasswordSection mockMode={props?.mockMode} />
+      <PasskeySection mockMode={props?.mockMode} />
+      <OtpSection mockMode={props?.mockMode} />
+      <MfaSection mockMode={props?.mockMode} />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/emails-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/emails-section.tsx
new file mode 100644
index 0000000000..afb0b3b52a
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/emails-section.tsx
@@ -0,0 +1,279 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
+import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DotsThree, EnvelopeSimple, Warning } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useUser } from "@stackframe/stack";
+
+export function EmailsSection(props?: {
+  mockMode?: boolean,
+}) {
+  const isInMockMode = !!props?.mockMode;
+  const user = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });
+
+  // In mock mode, show a placeholder message
+  if (isInMockMode && !user) {
+    return (
+      <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0">
+        <h3 className="font-semibold text-base text-foreground leading-snug mb-1">Emails</h3>
+        <span className="text-sm text-muted-foreground">Email management is not available in demo mode.</span>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return <EmailsSectionInner user={user} />;
+}
+
+function EmailsSectionInner({ user }: { user: any }) {
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = useState(false);
+  const [addedEmail, setAddedEmail] = useState<string | null>(null);
+  const isLastEmailUsedForAuth = contactChannels.filter((x: any) => x.usedForAuth && (x.type as string) === 'email').length === 1;
+
+  useEffect(() => {
+    if (addedEmail) {
+      runAsynchronouslyWithAlert(async () => {
+        const cc = contactChannels.find((x: any) => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+
+  const emailSchema = yupObject({
+    email: strictEmailSchema('Please enter a valid email address')
+      .notOneOf(contactChannels.map((x: any) => x.value), 'Email already exists')
+      .defined()
+      .nonEmpty('Email is required'),
+  });
+
+  const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    resolver: yupResolver(emailSchema)
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {
+    setAddingEmailLoading(true);
+    try {
+      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });
+      setAddedEmail(data.email);
+    } finally {
+      setAddingEmailLoading(false);
+    }
+    setAddingEmail(false);
+    reset();
+  };
+
+  const sortedEmails = [...contactChannels]
+    .filter((x: any) => (x.type as string) === 'email')
+    .sort((a: any, b: any) => {
+      if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+      if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+      return 0;
+    });
+
+  return (
+    <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-6">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h3 className="font-semibold text-base text-foreground leading-snug">
+            Email Addresses
+          </h3>
+          <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+            Manage your personal email addresses, primary contact, and sign-in credentials.
+          </p>
+        </div>
+        {!addingEmail && (
+          <Button
+            variant="outline"
+            onClick={() => setAddingEmail(true)}
+            className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 text-xs font-semibold w-full md:w-auto"
+          >
+            Add an email
+          </Button>
+        )}
+      </div>
+
+      {addingEmail && (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            runAsynchronouslyWithAlert(handleSubmit(onSubmit));
+          }}
+          className="bg-zinc-50/50 dark:bg-zinc-900/50 p-4 border border-black/[0.06] dark:border-white/[0.06] rounded-xl flex flex-col gap-3 max-w-md w-full"
+        >
+          <span className="text-sm font-semibold text-foreground">Add New Email</span>
+          <div className="flex gap-2">
+            <Input
+              {...register("email")}
+              placeholder="Enter email address"
+              className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] flex-1"
+            />
+            <Button
+              type="submit"
+              loading={addingEmailLoading}
+              className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4"
+            >
+              Add
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setAddingEmail(false);
+                reset();
+              }}
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl"
+            >
+              Cancel
+            </Button>
+          </div>
+          {errors.email && (
+            <span className="text-red-500 text-xs font-medium mt-1">{errors.email.message}</span>
+          )}
+        </form>
+      )}
+
+      {sortedEmails.length > 0 && (
+        <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm flex flex-col divide-y divide-black/[0.04] dark:divide-white/[0.04]">
+          {sortedEmails.map((cc: any) => (
+            <div key={cc.id} className="flex justify-between items-center p-4 bg-white/30 dark:bg-zinc-900/30 hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50 transition-colors duration-150">
+              <div className="flex items-center gap-3 min-w-0">
+                <div className="bg-zinc-100 dark:bg-zinc-900 p-2 rounded-xl text-foreground shrink-0 border border-black/[0.04] dark:border-white/[0.04]">
+                  <EnvelopeSimple className="h-5 w-5" />
+                </div>
+                <div className="flex flex-col min-w-0">
+                  <span className="text-sm font-semibold text-foreground truncate">{cc.value}</span>
+                  <div className="flex flex-wrap gap-1.5 mt-1.5">
+                    {cc.isPrimary && (
+                      <Badge className="bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900 text-[10px] px-2 py-0 border-0 font-bold rounded-full">
+                        Primary
+                      </Badge>
+                    )}
+                    {!cc.isVerified && (
+                      <Badge className="bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-400 border border-red-200 dark:border-red-900/30 text-[9px] px-1.5 py-0 font-semibold rounded-md">
+                        Unverified
+                      </Badge>
+                    )}
+                    {cc.usedForAuth && (
+                      <Badge className="bg-zinc-50 text-zinc-700 dark:bg-zinc-950/40 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-900/30 text-[9px] px-1.5 py-0 font-semibold rounded-md">
+                        Used for sign-in
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="h-8 w-8 p-0 rounded-lg text-muted-foreground hover:text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
+                  >
+                    <DotsThree className="h-5 w-5 weight-bold" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[180px] rounded-xl border-black/[0.08] dark:border-white/[0.08] shadow-md">
+                  {!cc.isVerified && (
+                    <DropdownMenuItem
+                      onClick={() => runAsynchronouslyWithAlert(async () => { await cc.sendVerificationEmail(); })}
+                      className="cursor-pointer rounded-lg text-foreground focus:bg-zinc-50 dark:focus:bg-zinc-900"
+                    >
+                      Verify Email
+                    </DropdownMenuItem>
+                  )}
+                  {!cc.isPrimary && cc.isVerified && (
+                    <DropdownMenuItem
+                      onClick={() => runAsynchronouslyWithAlert(async () => { await cc.update({ isPrimary: true }); })}
+                      className="cursor-pointer rounded-lg text-foreground focus:bg-zinc-50 dark:focus:bg-zinc-900"
+                    >
+                      Set as Primary
+                    </DropdownMenuItem>
+                  )}
+                  {!cc.isPrimary && !cc.isVerified && (
+                    <DropdownMenuItem
+                      disabled
+                      className="opacity-50 cursor-not-allowed rounded-lg"
+                    >
+                      Set as Primary (Verify first)
+                    </DropdownMenuItem>
+                  )}
+                  {!cc.usedForAuth && cc.isVerified && (
+                    <DropdownMenuItem
+                      onClick={() => runAsynchronouslyWithAlert(async () => {
+                        try {
+                          await cc.update({ usedForAuth: true });
+                        } catch (e) {
+                          if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {
+                            alert("This email is already used for sign-in by another user.");
+                            return;
+                          }
+                          throw e;
+                        }
+                      })}
+                      className="cursor-pointer rounded-lg text-foreground focus:bg-zinc-50 dark:focus:bg-zinc-900"
+                    >
+                      Enable Sign-in
+                    </DropdownMenuItem>
+                  )}
+                  {cc.usedForAuth && !isLastEmailUsedForAuth && (
+                    <DropdownMenuItem
+                      onClick={() => runAsynchronouslyWithAlert(async () => { await cc.update({ usedForAuth: false }); })}
+                      className="cursor-pointer rounded-lg text-foreground focus:bg-zinc-50 dark:focus:bg-zinc-900"
+                    >
+                      Disable Sign-in
+                    </DropdownMenuItem>
+                  )}
+                  {cc.usedForAuth && isLastEmailUsedForAuth && (
+                    <DropdownMenuItem
+                      disabled
+                      className="opacity-50 cursor-not-allowed rounded-lg"
+                    >
+                      Disable Sign-in (Last auth email)
+                    </DropdownMenuItem>
+                  )}
+                  <div className="my-1 border-t border-black/[0.04] dark:border-white/[0.04]" />
+                  {(!isLastEmailUsedForAuth || !cc.usedForAuth) ? (
+                    <DropdownMenuItem
+                      onClick={() => runAsynchronouslyWithAlert(async () => { await cc.delete(); })}
+                      className="cursor-pointer rounded-lg text-red-500 hover:text-red-600 focus:text-red-500"
+                    >
+                      Remove Email
+                    </DropdownMenuItem>
+                  ) : (
+                    <DropdownMenuItem
+                      disabled
+                      className="opacity-50 cursor-not-allowed rounded-lg text-red-500"
+                    >
+                      Remove Email (Last auth email)
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/mfa-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/mfa-section.tsx
new file mode 100644
index 0000000000..7014618b80
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/mfa-section.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import { createTOTPKeyURI, verifyTOTP } from "@oslojs/otp";
+import { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';
+import { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import * as QRCode from 'qrcode';
+import { useEffect, useState } from "react";
+import { CurrentUser, Project } from '@stackframe/stack';
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function MfaSection(props?: {
+  mockMode?: boolean,
+}) {
+  const project = useStackApp().useProject();
+  const isInMockMode = !!props?.mockMode;
+  const user = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });
+
+  // In mock mode, show a placeholder message
+  if (isInMockMode && !user) {
+    return (
+      <Section
+        title="Multi-factor authentication"
+        description="MFA management is not available in demo mode."
+      >
+        <span className="text-sm text-muted-foreground">MFA management is not available in demo mode.</span>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return <MfaSectionInner user={user} project={project} />;
+}
+
+function MfaSectionInner({ user, project }: { user: CurrentUser, project: Project }) {
+  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [mfaCode, setMfaCode] = useState<string>("");
+  const [isMaybeWrong, setIsMaybeWrong] = useState(false);
+  const isEnabled = user.isMultiFactorRequired;
+
+  const [handleSubmit, isLoading] = useAsyncCallback(async () => {
+    await user.update({
+      totpMultiFactorSecret: generatedSecret,
+    });
+    setGeneratedSecret(null);
+    setQrCodeUrl(null);
+    setMfaCode("");
+  }, [generatedSecret, user]);
+
+  useEffect(() => {
+    setIsMaybeWrong(false);
+    runAsynchronouslyWithAlert(async () => {
+      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {
+        await handleSubmit();
+        return;
+      }
+      setIsMaybeWrong(mfaCode.length === 6);
+    });
+  }, [mfaCode, generatedSecret, handleSubmit]);
+
+  return (
+    <Section
+      title="Multi-factor authentication"
+      description={isEnabled
+        ? "Multi-factor authentication is currently enabled."
+        : "Multi-factor authentication is currently disabled."}
+    >
+      <div className='flex flex-col gap-4 w-full md:w-[350px]'>
+        {!isEnabled && generatedSecret && (
+          <div className="flex flex-col gap-3">
+            <span className="text-sm font-medium text-foreground">Scan this QR code with your authenticator app:</span>
+            <div className="flex justify-center mx-auto p-2 bg-white rounded-xl border border-black/[0.08] dark:border-white/[0.08] w-[216px] h-[216px] shadow-sm">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img width={200} height={200} src={qrCodeUrl ?? throwErr("TOTP QR code failed to generate")} alt="TOTP multi-factor authentication QR code" />
+            </div>
+            <span className="text-sm font-medium text-foreground mt-2">Then, enter your six-digit MFA code:</span>
+            <Input
+              value={mfaCode}
+              onChange={(e) => {
+                setIsMaybeWrong(false);
+                setMfaCode(e.target.value);
+              }}
+              placeholder="123456"
+              maxLength={6}
+              disabled={isLoading}
+              className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] tracking-[0.2em] font-mono text-center text-lg"
+            />
+            {isMaybeWrong && mfaCode.length === 6 && (
+              <span className="text-red-500 text-xs font-medium">Incorrect code. Please try again.</span>
+            )}
+            <div className='flex'>
+              <Button
+                variant='outline'
+                onClick={() => {
+                  setGeneratedSecret(null);
+                  setQrCodeUrl(null);
+                  setMfaCode("");
+                }}
+                className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+        <div className='flex gap-2 w-full'>
+          {isEnabled ? (
+            <Button
+              variant='outline'
+              onClick={async () => {
+                await user.update({
+                  totpMultiFactorSecret: null,
+                });
+              }}
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full text-red-500 hover:text-red-600 transition-colors duration-150"
+            >
+              Disable MFA
+            </Button>
+          ) : !generatedSecret && (
+            <Button
+              variant='outline'
+              onClick={async () => {
+                const secret = generateRandomValues(new Uint8Array(20));
+                setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+                setGeneratedSecret(secret);
+              }}
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+            >
+              Enable MFA
+            </Button>
+          )}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+async function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {
+  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
+  return await QRCode.toDataURL(uri);
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/otp-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/otp-section.tsx
new file mode 100644
index 0000000000..2a9f7fbcfb
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/otp-section.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function OtpSection(props?: {
+  mockMode?: boolean,
+}) {
+  const isInMockMode = !!props?.mockMode;
+  const user = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });
+  const project = useStackApp().useProject();
+
+  // In mock mode, show a placeholder message
+  if (isInMockMode && !user) {
+    return (
+      <Section
+        title="One-Time Password"
+        description="OTP management is not available in demo mode."
+      >
+        <span className="text-sm text-muted-foreground">OTP management is not available in demo mode.</span>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  if (!project.config.magicLinkEnabled) {
+    return null;
+  }
+
+  return <OtpSectionInner user={user} />;
+}
+
+function OtpSectionInner({ user }: { user: any }) {
+  const contactChannels = user.useContactChannels();
+  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
+  const [disabling, setDisabling] = useState(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const hasValidEmail = contactChannels.filter((x: any) => (x.type as string) === 'email' && x.isVerified && x.usedForAuth).length > 0;
+
+  const handleDisableOTP = async () => {
+    try {
+      await user.update({ otpAuthEnabled: false });
+    } finally {
+      setDisabling(false);
+    }
+  };
+
+  return (
+    <Section title="OTP sign-in" description={user.otpAuthEnabled ? "OTP/magic link sign-in is currently enabled." : "Enable sign-in via magic link or OTP sent to your sign-in emails."}>
+      <div className='flex flex-col md:items-end gap-2 w-full md:w-[350px]'>
+        {hasValidEmail ? (
+          user.otpAuthEnabled ? (
+            !isLastAuth ? (
+              !disabling ? (
+                <Button
+                  variant='outline'
+                  onClick={() => setDisabling(true)}
+                  className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+                >
+                  Disable OTP
+                </Button>
+              ) : (
+                <div className='flex flex-col gap-3 w-full'>
+                  <span className='text-xs font-semibold text-red-500 leading-relaxed text-left md:text-right'>
+                    Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.
+                  </span>
+                  <div className='flex gap-2 w-full'>
+                    <Button
+                      variant='destructive'
+                      onClick={handleDisableOTP}
+                      className="rounded-xl flex-1 text-xs"
+                    >
+                      Disable
+                    </Button>
+                    <Button
+                      variant='outline'
+                      onClick={() => setDisabling(false)}
+                      className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl flex-1 text-xs"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )
+            ) : (
+              <span className="text-xs text-muted-foreground/85 leading-relaxed text-left md:text-right">
+                OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method.
+              </span>
+            )
+          ) : (
+            <Button
+              variant='outline'
+              onClick={async () => {
+                await user.update({ otpAuthEnabled: true });
+              }}
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+            >
+              Enable OTP
+            </Button>
+          )
+        ) : (
+          <span className="text-xs text-muted-foreground/85 leading-relaxed text-left md:text-right">
+            To enable OTP sign-in, please add a verified sign-in email.
+          </span>
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/passkey-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/passkey-section.tsx
new file mode 100644
index 0000000000..d9afd4ef39
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/passkey-section.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function PasskeySection(props?: {
+  mockMode?: boolean,
+}) {
+  const isInMockMode = !!props?.mockMode;
+  const user = useUser({ or: isInMockMode ? 'return-null' : "redirect" });
+  const stackApp = useStackApp();
+  const project = stackApp.useProject();
+
+  // In mock mode, show a placeholder message
+  if (isInMockMode && !user) {
+    return (
+      <Section
+        title="Passkey"
+        description="Passkey management is not available in demo mode."
+      >
+        <span className="text-sm text-muted-foreground">Passkey management is not available in demo mode.</span>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  if (!project.config.passkeyEnabled) {
+    return null;
+  }
+
+  return <PasskeySectionInner user={user} />;
+}
+
+function PasskeySectionInner({ user }: { user: any }) {
+  const contactChannels = user.useContactChannels();
+
+  // passkey is enabled if there is a passkey
+  const hasPasskey = user.passkeyAuthEnabled;
+
+  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const hasValidEmail = contactChannels.filter((x: any) => (x.type as string) === 'email' && x.isVerified && x.usedForAuth).length > 0;
+
+  const handleDeletePasskey = async () => {
+    await user.update({ passkeyAuthEnabled: false });
+    setShowConfirmationModal(false);
+  };
+
+  const handleAddNewPasskey = async () => {
+    await user.registerPasskey();
+  };
+
+  return (
+    <Section title="Passkey" description={hasPasskey ? "Passkey registered" : "Register a passkey"}>
+      <div className='flex flex-col md:items-end gap-2 w-full md:w-[350px]'>
+        {!hasValidEmail && (
+          <span className="text-xs text-muted-foreground/85 leading-relaxed text-left md:text-right">
+            To enable Passkey sign-in, please add a verified sign-in email.
+          </span>
+        )}
+        {hasValidEmail && hasPasskey && isLastAuth && (
+          <span className="text-xs text-muted-foreground/85 leading-relaxed text-left md:text-right">
+            Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method.
+          </span>
+        )}
+        {!hasPasskey && hasValidEmail && (
+          <Button
+            onClick={handleAddNewPasskey}
+            variant='outline'
+            className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+          >
+            Add new passkey
+          </Button>
+        )}
+        {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (
+          <Button
+            variant='outline'
+            onClick={() => setShowConfirmationModal(true)}
+            className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full text-red-500 hover:text-red-600 transition-colors duration-150"
+          >
+            Delete Passkey
+          </Button>
+        )}
+        {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (
+          <div className='flex flex-col gap-3 w-full'>
+            <span className='text-xs font-semibold text-red-500 leading-relaxed text-left md:text-right'>
+              Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.
+            </span>
+            <div className='flex gap-2 w-full'>
+              <Button
+                variant='destructive'
+                onClick={handleDeletePasskey}
+                className="rounded-xl flex-1 text-xs"
+              >
+                Disable
+              </Button>
+              <Button
+                variant='outline'
+                onClick={() => setShowConfirmationModal(false)}
+                className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl flex-1 text-xs"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/password-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/password-section.tsx
new file mode 100644
index 0000000000..2ac2628e2c
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/email-and-auth/password-section.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';
+import { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function PasswordSection(props?: {
+  mockMode?: boolean,
+}) {
+  const isInMockMode = !!props?.mockMode;
+  const user = useUser({ or: isInMockMode ? 'return-null' : "throw" });
+  const project = useStackApp().useProject();
+
+  // In mock mode, show a placeholder message
+  if (isInMockMode && !user) {
+    return (
+      <Section
+        title="Password"
+        description="Password management is not available in demo mode."
+      >
+        <span className="text-sm text-muted-foreground">Password management is not available in demo mode.</span>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  if (!project.config.credentialEnabled) {
+    return null;
+  }
+
+  return <PasswordSectionInner user={user} />;
+}
+
+function PasswordSectionInner({ user }: { user: any }) {
+  const contactChannels = user.useContactChannels();
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const passwordSchema = yupObject({
+    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty('Please enter your old password') : yupString(),
+    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty('Please enter your password').test({
+      name: 'is-valid-password',
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), "", null], 'Passwords do not match').defined().nonEmpty('Please repeat your password')
+  });
+
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({
+    resolver: yupResolver(passwordSchema)
+  });
+
+  const hasValidEmail = contactChannels.filter((x: any) => (x.type as string) === 'email' && x.usedForAuth).length > 0;
+
+  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {
+    setLoading(true);
+    try {
+      const { oldPassword, newPassword } = data;
+      const error = user.hasPassword
+        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })
+        : await user.setPassword({ password: newPassword! });
+      if (error) {
+        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });
+      } else {
+        reset();
+        setChangingPassword(false);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const registerPassword = register('newPassword');
+  const registerPasswordRepeat = register('newPasswordRepeat');
+
+  return (
+    <Section
+      title="Password"
+      description={user.hasPassword ? "Update your password" : "Set a password for your account"}
+    >
+      <div className='flex flex-col gap-4 w-full md:w-[350px]'>
+        {!changingPassword ? (
+          hasValidEmail ? (
+            <Button
+              variant='outline'
+              onClick={() => setChangingPassword(true)}
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150"
+            >
+              {user.hasPassword ? "Update password" : "Set password"}
+            </Button>
+          ) : (
+            <span className="text-xs text-muted-foreground/85 leading-normal">
+              To set a password, please add a sign-in email.
+            </span>
+          )
+        ) : (
+          <form
+            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+            noValidate
+            className="flex flex-col gap-3"
+          >
+            {user.hasPassword && (
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="old-password">Old password</Label>
+                <Input
+                  id="old-password"
+                  type="password"
+                  autoComplete="current-password"
+                  {...register("oldPassword")}
+                  className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06]"
+                />
+                {errors.oldPassword && <span className="text-red-500 text-xs font-medium">{errors.oldPassword.message?.toString()}</span>}
+              </div>
+            )}
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="new-password">New password</Label>
+              <Input
+                id="new-password"
+                type="password"
+                autoComplete="new-password"
+                {...registerPassword}
+                onChange={(e) => {
+                  clearErrors('newPassword');
+                  clearErrors('newPasswordRepeat');
+                  runAsynchronously(registerPassword.onChange(e));
+                }}
+                className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06]"
+              />
+              {errors.newPassword && <span className="text-red-500 text-xs font-medium">{errors.newPassword.message?.toString()}</span>}
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="repeat-password">Repeat new password</Label>
+              <Input
+                id="repeat-password"
+                type="password"
+                autoComplete="new-password"
+                {...registerPasswordRepeat}
+                onChange={(e) => {
+                  clearErrors('newPassword');
+                  clearErrors('newPasswordRepeat');
+                  runAsynchronously(registerPasswordRepeat.onChange(e));
+                }}
+                className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06]"
+              />
+              {errors.newPasswordRepeat && <span className="text-red-500 text-xs font-medium">{errors.newPasswordRepeat.message?.toString()}</span>}
+            </div>
+
+            <div className="mt-4 flex gap-2">
+              <Button
+                type="submit"
+                loading={loading}
+                className="rounded-xl flex-1 bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+              >
+                {user.hasPassword ? "Update Password" : "Set Password"}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setChangingPassword(false);
+                  reset();
+                }}
+                className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl flex-1"
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/notifications/notifications-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/notifications/notifications-page.tsx
new file mode 100644
index 0000000000..37d95e50e5
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/notifications/notifications-page.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useUser } from "@stackframe/stack";
+import { PageLayout } from "../page-layout";
+import { Switch } from "@/components/ui/switch";
+
+export function NotificationsPage() {
+  const user = useUser({ or: 'redirect' });
+  const notificationCategories = user.useNotificationCategories();
+
+  return (
+    <PageLayout>
+      <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-5">
+        <div>
+          <h3 className="font-semibold text-base text-foreground leading-snug">
+            Email Notifications
+          </h3>
+          <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+            Choose which emails you want to receive.
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {notificationCategories.map((category) => (
+            <div key={category.id} className="flex justify-between items-center py-2 border-b border-black/[0.04] dark:border-white/[0.04] last:border-0">
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">{category.name}</span>
+                {!category.canDisable && (
+                  <span className="text-xs text-muted-foreground/80 mt-0.5">
+                    (Required for transactional updates and cannot be disabled)
+                  </span>
+                )}
+              </div>
+              <Switch
+                checked={category.enabled}
+                onCheckedChange={(value) => void category.setEnabled(value)}
+                disabled={!category.canDisable}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx b/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx
new file mode 100644
index 0000000000..cee4d95f05
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function PageLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className='flex flex-col gap-4'>
+      {props.children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/payments/payments-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/payments/payments-page.tsx
new file mode 100644
index 0000000000..f0f55498e6
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/payments/payments-page.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { Team } from "@stackframe/stack";
+import { useUser } from "@stackframe/stack";
+import { PageLayout } from "../page-layout";
+import { PaymentsPanel } from "./payments-panel";
+import { DashboardTeamSwitcher } from "../supporting/dashboard-team-switcher";
+
+const emptyTeams: Team[] = [];
+
+export function PaymentsPage(props: { mockMode?: boolean, availableTeams?: Team[], allowPersonal?: boolean }) {
+  const user = useUser({ or: props.mockMode ? "return-null" : "redirect" });
+  const userTeams = user?.useTeams() ?? emptyTeams;
+  const teams = props.availableTeams ?? userTeams;
+  const allowPersonal = props.allowPersonal ?? true;
+  const hasTeams = teams.length > 0;
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? (teams[0] ?? null) : null);
+  const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);
+  const customerType = effectiveSelectedTeam ? "team" : "user";
+
+  useEffect(() => {
+    if (props.mockMode) {
+      return;
+    }
+    if (!allowPersonal && !selectedTeam && teams.length > 0) {
+      setSelectedTeam(teams[0]);
+      return;
+    }
+    if (selectedTeam && !teams.some(team => team.id === selectedTeam.id)) {
+      setSelectedTeam(allowPersonal ? null : (teams[0] ?? null));
+    }
+  }, [allowPersonal, props.mockMode, selectedTeam, teams]);
+
+  if (props.mockMode) {
+    return (
+      <PageLayout>
+        <PaymentsPanel
+          mockMode
+        />
+      </PageLayout>
+    );
+  }
+
+  if (!customer) {
+    return null;
+  }
+
+  return (
+    <PageLayout>
+      {hasTeams ? (
+        <div className="flex flex-col gap-1.5 max-w-[240px]">
+          <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">Account Billing context</span>
+          <DashboardTeamSwitcher
+            team={effectiveSelectedTeam ?? undefined}
+            teams={teams}
+            allowNull={allowPersonal}
+            nullLabel="Personal Account"
+            onChange={async (team) => {
+              setSelectedTeam(team);
+            }}
+          />
+        </div>
+      ) : null}
+      <PaymentsPanel
+        customer={customer as any}
+        customerType={customerType}
+      />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/payments/payments-panel.tsx b/apps/dashboard/src/components/dashboard-account-settings/payments/payments-panel.tsx
new file mode 100644
index 0000000000..d5f7b0e8a2
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/payments/payments-panel.tsx
@@ -0,0 +1,558 @@
+'use client';
+
+import { KnownErrors } from "@stackframe/stack-shared";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { useMemo, useState } from "react";
+import { useStackApp } from "@stackframe/stack";
+import { getPublicEnvVar } from "@/lib/env";
+import { Section } from "../section";
+import { Result } from "@stackframe/stack-shared/dist/utils/results";
+import { ActionDialog } from "@/components/ui/action-dialog";
+import { CreditCard, Receipt, CaretRight, WarningCircle } from "@phosphor-icons/react";
+
+type CustomerInvoiceStatus = "draft" | "open" | "paid" | "uncollectible" | "void" | null;
+type CustomerInvoicesListOptions = { limit?: number; startingAfter?: string };
+type CustomerInvoicesList = any[];
+
+type PaymentMethodSummary = {
+  id: string,
+  brand: string | null,
+  last4: string | null,
+  exp_month: number | null,
+  exp_year: number | null,
+} | null;
+
+function formatPaymentMethod(pm: NonNullable<PaymentMethodSummary>) {
+  const details = [
+    pm.brand ? pm.brand.toUpperCase() : null,
+    pm.last4 ? `•••• ${pm.last4}` : null,
+    pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null,
+  ].filter(Boolean);
+  return details.join(" · ");
+}
+
+const formatInvoiceStatus = (status: CustomerInvoiceStatus) => {
+  if (status === "draft") return "Draft";
+  if (status === "open") return "Open";
+  if (status === "paid") return "Paid";
+  if (status === "uncollectible") return "Uncollectible";
+  if (status === "void") return "Void";
+  return "Unknown";
+};
+
+const formatInvoiceAmount = (amountTotal: number | null | undefined) => {
+  if (typeof amountTotal !== "number" || Number.isNaN(amountTotal)) {
+    return "Unknown";
+  }
+  const normalized = amountTotal / 100;
+  const formatted = new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(normalized);
+  return `$${formatted}`;
+};
+
+const formatInvoiceDate = (date: Date | null | undefined) => {
+  if (!date || Number.isNaN(date.getTime())) {
+    return "Unknown";
+  }
+  return new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(date);
+};
+
+type CustomerBilling = {
+  hasCustomer: boolean,
+  defaultPaymentMethod: PaymentMethodSummary,
+};
+
+type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string,
+  stripeAccountId: string,
+};
+
+type CustomerLike = {
+  id: string,
+  useBilling: () => CustomerBilling,
+  useProducts: () => Array<{
+    id: string | null,
+    quantity: number,
+    displayName: string,
+    customerType: "user" | "team" | "custom",
+    type?: "one_time" | "subscription",
+    switchOptions?: Array<{
+      productId: string,
+      displayName: string,
+      prices: Record<string, { interval?: [number, "day" | "week" | "month" | "year"] }>
+    }>,
+    subscription: null | {
+      subscriptionId: string | null,
+      currentPeriodEnd: Date | null,
+      cancelAtPeriodEnd: boolean,
+      isCancelable: boolean,
+    },
+  }>,
+  useInvoices: (options?: CustomerInvoicesListOptions) => CustomerInvoicesList,
+  createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>,
+  setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>,
+  switchSubscription: (options: { fromProductId: string, toProductId: string, priceId?: string, quantity?: number }) => Promise<void>,
+};
+
+function SetDefaultPaymentMethodForm(props: {
+  clientSecret: string,
+  onSetupIntentSucceeded: (setupIntentId: string) => Promise<void>,
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const darkMode = "color-scheme" in document.documentElement.style && document.documentElement.style["color-scheme"] === "dark";
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-sm font-semibold text-foreground">Card Details</label>
+        <div className="rounded-xl border border-black/[0.08] dark:border-white/[0.08] bg-white dark:bg-zinc-900 p-3.5 shadow-sm">
+          <CardElement options={{ hidePostalCode: true, style: { base: { color: darkMode ? "white" : "black", fontSize: "14px" } } }} />
+        </div>
+      </div>
+      {errorMessage && (
+        <span className="text-red-500 text-xs font-medium">
+          {errorMessage}
+        </span>
+      )}
+      <Button
+        onClick={async () => {
+          if (!stripe || !elements) {
+            setErrorMessage("Stripe is still loading. Please try again.");
+            return;
+          }
+          const card = elements.getElement(CardElement);
+          if (!card) {
+            setErrorMessage("Card element not found.");
+            return;
+          }
+
+          const result = await stripe.confirmCardSetup(props.clientSecret, {
+            payment_method: { card },
+          });
+          if (result.error) {
+            setErrorMessage(result.error.message ?? "Failed to save payment method.");
+            return;
+          }
+          if (!result.setupIntent.id) {
+            setErrorMessage("No setup intent returned from Stripe.");
+            return;
+          }
+          await props.onSetupIntentSucceeded(result.setupIntent.id);
+        }}
+        className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl"
+      >
+        Save payment method
+      </Button>
+    </div>
+  );
+}
+
+export function PaymentsPanel(props: {
+  title?: string,
+  customer?: CustomerLike,
+  customerType?: "user" | "team",
+  mockMode?: boolean,
+}) {
+  if (props.mockMode) {
+    return <MockPaymentsPanel title={props.title} />;
+  }
+  if (!props.customer) {
+    return null;
+  }
+  return <RealPaymentsPanel title={props.title} customer={props.customer} customerType={props.customerType ?? "user"} />;
+}
+
+function MockPaymentsPanel(props: { title?: string }) {
+  const defaultPaymentMethod: PaymentMethodSummary = {
+    id: "pm_mock",
+    brand: "visa",
+    last4: "4242",
+    exp_month: 12,
+    exp_year: 2030,
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {props.title && <h3 className="text-lg font-semibold text-foreground">{props.title}</h3>}
+      <Section
+        title="Payment method"
+        description="Manage the default payment method used for subscriptions and invoices."
+      >
+        <div className="flex items-center gap-3 w-full md:w-[350px]">
+          <div className="bg-zinc-100 dark:bg-zinc-900 p-2 rounded-xl border border-black/[0.04] dark:border-white/[0.04] text-foreground shrink-0">
+            <CreditCard className="h-5 w-5" />
+          </div>
+          <span className="text-sm font-semibold text-foreground flex-1">{formatPaymentMethod(defaultPaymentMethod)}</span>
+          <Button disabled variant="outline" className="border-black/[0.08] dark:border-white/[0.08] rounded-xl text-xs font-semibold px-4 py-2">
+            Update
+          </Button>
+        </div>
+      </Section>
+
+      <Section
+        title="Active plans"
+        description="View your active plans and purchases."
+      >
+        <div className="flex flex-col gap-4 w-full md:w-[350px]">
+          <div className="flex items-center justify-between gap-4 p-3 bg-zinc-50/50 dark:bg-zinc-900/50 border border-black/[0.04] dark:border-white/[0.04] rounded-xl">
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-foreground">Pro</span>
+              <span className="text-xs text-muted-foreground/80 mt-0.5">Renews on Jan 1, 2030</span>
+            </div>
+            <Button disabled variant="outline" className="border-black/[0.08] dark:border-white/[0.08] text-xs rounded-xl">
+              Cancel
+            </Button>
+          </div>
+          <div className="flex items-center justify-between gap-4 p-3 bg-zinc-50/50 dark:bg-zinc-900/50 border border-black/[0.04] dark:border-white/[0.04] rounded-xl">
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-foreground">Credits pack</span>
+              <span className="text-xs text-muted-foreground/80 mt-0.5">One-time purchase</span>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+function RealPaymentsPanel(props: { title?: string, customer: CustomerLike, customerType: "user" | "team" }) {
+  const stackApp = useStackApp();
+  const billing = props.customer.useBilling();
+  const defaultPaymentMethod = billing.defaultPaymentMethod;
+  const products = props.customer.useProducts();
+  const invoices = props.customer.useInvoices({ limit: 10 });
+  const productsForCustomerType = products.filter(product => product.customerType === props.customerType);
+
+  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+  const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);
+  const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);
+  const [cancelTarget, setCancelTarget] = useState<{ productId: string, subscriptionId?: string } | null>(null);
+  const [switchFromProductId, setSwitchFromProductId] = useState<string | null>(null);
+  const [switchToProductId, setSwitchToProductId] = useState<string | null>(null);
+
+  const stripePromise = useMemo(() => {
+    if (!setupIntentStripeAccountId) return null;
+    const publishableKey = getPublicEnvVar("NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY");
+    if (!publishableKey) return null;
+    return loadStripe(publishableKey, { stripeAccount: setupIntentStripeAccountId });
+  }, [setupIntentStripeAccountId]);
+
+  const handleAsyncError = (error: unknown) => {
+    if (error instanceof KnownErrors.DefaultPaymentMethodRequired) {
+      alert("No default payment method added. Add a payment method before switching plans.");
+      return;
+    }
+    alert(`An unhandled error occurred. Please ${process.env.NODE_ENV === "development" ? "check the browser console for the full error." : "report this to the developer."}\n\n${error}`);
+  };
+
+  const openPaymentDialog = () => {
+    runAsynchronously(async () => {
+      setPaymentDialogOpen(true);
+      const res = await props.customer.createPaymentMethodSetupIntent();
+      setSetupIntentClientSecret(res.clientSecret);
+      setSetupIntentStripeAccountId(res.stripeAccountId);
+    }, { onError: handleAsyncError });
+  };
+
+  const closePaymentDialog = () => {
+    setPaymentDialogOpen(false);
+    setSetupIntentClientSecret(null);
+    setSetupIntentStripeAccountId(null);
+  };
+
+  const openSwitchDialog = (productId: string, firstOptionId: string | null) => {
+    setSwitchFromProductId(productId);
+    setSwitchToProductId(firstOptionId);
+  };
+
+  const closeSwitchDialog = () => {
+    setSwitchFromProductId(null);
+    setSwitchToProductId(null);
+  };
+
+  const switchSourceProduct = switchFromProductId
+    ? productsForCustomerType.find((product) => product.id === switchFromProductId) ?? null
+    : null;
+  const switchOptions = switchSourceProduct?.switchOptions ?? [];
+  const selectedSwitchOption = switchOptions.find((option) => option.productId === switchToProductId) ?? null;
+  const selectedPriceId = selectedSwitchOption ? (Object.keys(selectedSwitchOption.prices)[0] ?? null) : null;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {props.title && <h3 className="text-lg font-semibold text-foreground">{props.title}</h3>}
+
+      {defaultPaymentMethod && (
+        <Section
+          title="Payment method"
+          description="Manage the default payment method used for subscriptions and invoices."
+        >
+          <div className="flex items-center gap-3 w-full md:w-[350px]">
+            <div className="bg-zinc-100 dark:bg-zinc-900 p-2 rounded-xl border border-black/[0.04] dark:border-white/[0.04] text-foreground shrink-0">
+              <CreditCard className="h-5 w-5" />
+            </div>
+            <span className="text-sm font-semibold text-foreground flex-1">
+              {formatPaymentMethod(defaultPaymentMethod)}
+            </span>
+            <Button
+              onClick={openPaymentDialog}
+              variant="outline"
+              className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl text-xs font-semibold px-4 py-2 shrink-0"
+            >
+              Update
+            </Button>
+          </div>
+
+          <ActionDialog
+            open={paymentDialogOpen}
+            onOpenChange={(open) => {
+              if (!open) closePaymentDialog();
+            }}
+            title="Update payment method"
+          >
+            {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (
+              <div className="space-y-2 p-1">
+                <Skeleton className="h-10 w-full rounded-xl" />
+                <Skeleton className="h-[120px] w-full rounded-xl" />
+              </div>
+            ) : (
+              <Elements
+                stripe={stripePromise}
+                options={{
+                  clientSecret: setupIntentClientSecret,
+                }}
+              >
+                <SetDefaultPaymentMethodForm
+                  clientSecret={setupIntentClientSecret}
+                  onSetupIntentSucceeded={async (setupIntentId) => {
+                    await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
+                    closePaymentDialog();
+                  }}
+                />
+              </Elements>
+            )}
+          </ActionDialog>
+        </Section>
+      )}
+
+      {productsForCustomerType.length > 0 && (
+        <Section
+          title="Active plans"
+          description="View your active plans and purchases."
+        >
+          <div className="flex flex-col gap-3 w-full md:w-[350px]">
+            {productsForCustomerType.map((product, index) => {
+              const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
+              const isSubscription = product.type === "subscription";
+              const isCancelable = isSubscription && !!product.subscription?.isCancelable;
+              const canSwitchPlans = isSubscription && defaultPaymentMethod && !!product.id && (product.switchOptions?.length ?? 0) > 0;
+              const renewsAt = isSubscription ? (product.subscription?.currentPeriodEnd ?? null) : null;
+              const subtitle =
+                product.type === "one_time"
+                  ? "One-time purchase"
+                  : renewsAt
+                    ? `Renews on ${new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(renewsAt)}`
+                    : "Subscription";
+
+              return (
+                <div key={product.id ?? `${product.displayName}-${index}`} className="flex items-center justify-between gap-4 p-3 bg-zinc-50/50 dark:bg-zinc-900/50 border border-black/[0.04] dark:border-white/[0.04] rounded-xl">
+                  <div className="min-w-0 flex flex-col">
+                    <span className="text-sm font-semibold text-foreground truncate">{product.displayName}{quantitySuffix}</span>
+                    <span className="text-xs text-muted-foreground/80 mt-0.5">{subtitle}</span>
+                  </div>
+
+                  <div className="flex gap-2 shrink-0">
+                    {canSwitchPlans && (
+                      <Button
+                        variant="outline"
+                        onClick={() => openSwitchDialog(product.id!, product.switchOptions?.[0]?.productId ?? null)}
+                        className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl text-xs px-3 py-1.5"
+                      >
+                        Change
+                      </Button>
+                    )}
+                    {isCancelable && (
+                      <Button
+                        variant="outline"
+                        onClick={() => setCancelTarget({ productId: product.id ?? "_inline", subscriptionId: product.subscription?.subscriptionId ?? undefined })}
+                        className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl text-xs text-red-500 hover:text-red-600 px-3 py-1.5"
+                      >
+                        Cancel
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <ActionDialog
+            open={cancelTarget !== null}
+            onOpenChange={(open) => {
+              if (!open) setCancelTarget(null);
+            }}
+            title="Cancel subscription"
+            danger
+            cancelButton
+            okButton={{
+              label: "Cancel subscription",
+              onClick: async () => {
+                if (!cancelTarget) return;
+                const { productId, subscriptionId } = cancelTarget;
+                if (props.customerType === "team") {
+                  await stackApp.cancelSubscription({ teamId: props.customer.id, productId, subscriptionId });
+                } else {
+                  await stackApp.cancelSubscription({ productId, subscriptionId });
+                }
+                setCancelTarget(null);
+              },
+            }}
+          >
+            <span className="text-sm text-foreground/90 leading-relaxed">
+              Canceling will stop future renewals for this subscription. This action is safe and will take effect at the end of the billing period.
+            </span>
+          </ActionDialog>
+
+          <ActionDialog
+            open={switchFromProductId !== null}
+            onOpenChange={(open) => {
+              if (!open) closeSwitchDialog();
+            }}
+            title="Change plan"
+            cancelButton
+            okButton={{
+              label: "Switch plan",
+              onClick: async () => {
+                const fromProductId = switchFromProductId;
+                const toProductId = switchToProductId;
+                if (!fromProductId || !toProductId) return;
+                if (!selectedPriceId) return;
+                const result = await Result.fromThrowingAsync(() => props.customer.switchSubscription({
+                  fromProductId,
+                  toProductId,
+                  priceId: selectedPriceId,
+                }));
+                if (result.status === "error") {
+                  handleAsyncError(result.error);
+                  return "prevent-close";
+                }
+                closeSwitchDialog();
+              },
+              props: {
+                disabled: !switchFromProductId || !switchToProductId || !selectedPriceId,
+              },
+            }}
+          >
+            <div className="space-y-4">
+              {switchOptions.length === 0 ? (
+                <span className="text-sm text-muted-foreground">
+                  No other plans available for this subscription.
+                </span>
+              ) : (
+                <div className="flex flex-col gap-2">
+                  <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Choose a plan</label>
+                  <Select
+                    value={switchToProductId ?? undefined}
+                    onValueChange={(value) => setSwitchToProductId(value || null)}
+                  >
+                    <SelectTrigger className="w-full bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06]">
+                      <SelectValue placeholder="Choose a plan" />
+                    </SelectTrigger>
+                    <SelectContent className="rounded-xl border-black/[0.08] dark:border-white/[0.08] shadow-md">
+                      {switchOptions.map((option: any) => (
+                        <SelectItem key={option.productId} value={option.productId} className="rounded-lg">
+                          {option.displayName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+          </ActionDialog>
+        </Section>
+      )}
+
+      {invoices.length > 0 && (
+        <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-5">
+          <div>
+            <h3 className="font-semibold text-base text-foreground leading-snug">
+              Past Invoices
+            </h3>
+            <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+              Review your receipts and past billing logs.
+            </p>
+          </div>
+
+          <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+            <Table>
+              <TableHeader className="bg-zinc-50/50 dark:bg-zinc-900/50">
+                <TableRow className="border-b border-black/[0.06] dark:border-white/[0.06]">
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Date</TableHead>
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Status</TableHead>
+                  <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Amount</TableHead>
+                  <TableHead className="py-3 px-4 text-right w-[80px]"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {(invoices as any[]).map((invoice: any, index: number) => {
+                  const createdAtTime = new Date(invoice.createdAt).getTime();
+                  const invoiceKey = Number.isNaN(createdAtTime) ? `invoice-${index}` : `invoice-${createdAtTime}-${index}`;
+                  return (
+                    <TableRow key={invoiceKey} className="border-b border-black/[0.04] dark:border-white/[0.04] last:border-b-0 hover:bg-zinc-50/30 dark:hover:bg-zinc-900/30 transition-colors duration-150">
+                      <TableCell className="py-3.5 px-4 text-sm font-semibold text-foreground/90">
+                        {formatInvoiceDate(invoice.createdAt)}
+                      </TableCell>
+                      <TableCell className="py-3.5 px-4 text-xs font-semibold">
+                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold ${
+                          invoice.status === "paid"
+                            ? "bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-400 border border-green-200 dark:border-green-900/30"
+                            : "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400 border border-amber-200 dark:border-amber-900/30"
+                        }`}>
+                          {formatInvoiceStatus(invoice.status)}
+                        </span>
+                      </TableCell>
+                      <TableCell className="py-3.5 px-4 text-sm font-medium text-foreground/90">
+                        {formatInvoiceAmount(invoice.amountTotal)}
+                      </TableCell>
+                      <TableCell className="py-3.5 px-4 text-right">
+                        {invoice.hostedInvoiceUrl ? (
+                          <Button asChild variant="outline" className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl text-xs font-semibold px-3 py-1.5">
+                            <a href={invoice.hostedInvoiceUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1">
+                              View <CaretRight className="h-3 w-3" />
+                            </a>
+                          </Button>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">Unavailable</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/profile-image-editor.tsx b/apps/dashboard/src/components/dashboard-account-settings/profile-image-editor.tsx
new file mode 100644
index 0000000000..aeef9e7f53
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/profile-image-editor.tsx
@@ -0,0 +1,208 @@
+'use client';
+
+import { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';
+import { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import imageCompression from 'browser-image-compression';
+import { UploadSimple, User } from '@phosphor-icons/react';
+import { useCallback, useState } from 'react';
+import Cropper, { Area } from 'react-easy-crop';
+
+export async function checkImageUrl(url: string) {
+  try {
+    const res = await fetch(url, { method: 'HEAD' });
+    const buff = await res.blob();
+    return buff.type.startsWith('image/');
+  } catch {
+    return false;
+  }
+}
+
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous');
+    image.src = url;
+  });
+
+export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null> {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    return null;
+  }
+
+  const safeCrop = {
+    x: Math.max(0, pixelCrop.x),
+    y: Math.max(0, pixelCrop.y),
+    width: Math.max(1, pixelCrop.width),
+    height: Math.max(1, pixelCrop.height),
+  };
+
+  canvas.width = safeCrop.width;
+  canvas.height = safeCrop.height;
+
+  ctx.drawImage(
+    image,
+    safeCrop.x,
+    safeCrop.y,
+    safeCrop.width,
+    safeCrop.height,
+    0,
+    0,
+    safeCrop.width,
+    safeCrop.height
+  );
+
+  return canvas.toDataURL('image/jpeg');
+}
+
+export function ProfileImageEditor(props: {
+  user: {
+    profileImageUrl?: string | null;
+    displayName?: string | null;
+    primaryEmail?: string | null;
+  },
+  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,
+}) {
+  const [rawUrl, setRawUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+
+  function reset() {
+    setRawUrl(null);
+    setError(null);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+  }
+
+  const onCropChange = useCallback((crop: { x: number, y: number }) => {
+    setCrop(crop);
+  }, []);
+
+  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {
+    setCroppedAreaPixels(croppedAreaPixels);
+  }, []);
+
+  const onZoomChange = useCallback((zoom: number) => {
+    setZoom(zoom);
+  }, []);
+
+  function upload() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      runAsynchronouslyWithAlert(async () => {
+        const rawUrl = await fileToBase64(file);
+        if (await checkImageUrl(rawUrl)) {
+          setRawUrl(rawUrl);
+          setError(null);
+        } else {
+          setError('Invalid image');
+        }
+        input.remove();
+      });
+    };
+    input.click();
+  }
+
+  if (!rawUrl) {
+    const initials = (props.user.displayName || props.user.primaryEmail || '')
+      .slice(0, 2)
+      .toUpperCase();
+
+    return (
+      <div className='flex flex-col gap-2'>
+        <div className='cursor-pointer relative group' onClick={upload}>
+          <Avatar className="h-[60px] w-[60px] border border-black/[0.08] dark:border-white/[0.08] shadow-sm">
+            <AvatarImage src={props.user.profileImageUrl || undefined} />
+            <AvatarFallback className="bg-zinc-100 dark:bg-zinc-900 text-foreground font-semibold text-sm">
+              {initials || <User className="h-5 w-5 text-zinc-500" />}
+            </AvatarFallback>
+          </Avatar>
+          <div className='absolute top-0 left-0 h-[60px] w-[60px] bg-black/40 backdrop-blur-[2px] items-center justify-center rounded-full flex opacity-0 group-hover:opacity-100 transition-all duration-150'>
+            <div className='bg-white text-black p-1.5 rounded-full shadow-sm'>
+              <UploadSimple className='h-4 w-4 weight-bold' />
+            </div>
+          </div>
+        </div>
+        {error && <span className='text-red-500 dark:text-red-400 text-xs font-medium'>{error}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col items-center gap-4 w-full max-w-xs'>
+      <div className='relative w-64 h-64 border border-black/[0.08] dark:border-white/[0.08] rounded-2xl overflow-hidden shadow-sm'>
+        <Cropper
+          image={rawUrl || props.user.profileImageUrl || ""}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          cropShape="round"
+          showGrid={false}
+          onCropChange={onCropChange}
+          onCropComplete={onCropComplete}
+          onZoomChange={onZoomChange}
+        />
+      </div>
+
+      <div className="w-full px-2 flex flex-col gap-1.5">
+        <label className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">Zoom</label>
+        <input
+          type="range"
+          min={1}
+          max={3}
+          step={0.1}
+          value={zoom}
+          onChange={(e) => onZoomChange(parseFloat(e.target.value))}
+          className="w-full h-1 bg-zinc-200 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-black dark:accent-white"
+        />
+      </div>
+
+      <div className='flex flex-row gap-2 w-full'>
+        <Button
+          onClick={async () => {
+            if (rawUrl && croppedAreaPixels) {
+              const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
+              if (croppedImageUrl) {
+                const compressedFile = await imageCompression(
+                  await imageCompression.getFilefromDataUrl(croppedImageUrl, 'profile-image'),
+                  {
+                    maxSizeMB: 0.1,
+                    fileType: "image/jpeg",
+                  }
+                );
+                const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);
+                await props.onProfileImageUrlChange(compressedUrl);
+                reset();
+              } else {
+                setError('Could not crop image.');
+              }
+            }
+          }}
+          className="flex-1 bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl"
+        >
+          Save
+        </Button>
+        <Button
+          variant="outline"
+          onClick={reset}
+          className="flex-1 border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl"
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/profile-page/profile-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/profile-page/profile-page.tsx
new file mode 100644
index 0000000000..6991e20f4a
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/profile-page/profile-page.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useUser } from "@stackframe/stack";
+import { ProfileImageEditor } from "../profile-image-editor";
+import { EditableText } from "../editable-text";
+import { PageLayout } from "../page-layout";
+import { Section } from "../section";
+
+export function ProfilePage(props?: {
+  mockUser?: {
+    displayName?: string,
+    profileImageUrl?: string,
+  },
+}) {
+  const userFromHook = useUser({ or: props?.mockUser ? 'return-null' : 'redirect' });
+
+  // Use mock data if provided, otherwise use real user
+  const user = props?.mockUser ? {
+    displayName: props.mockUser.displayName || 'John Doe',
+    profileImageUrl: props.mockUser.profileImageUrl || null,
+    update: async (updates: any) => {
+      console.log('Mock update called with:', updates);
+    }
+  } : userFromHook;
+
+  if (!user) {
+    return null; // This shouldn't happen in practice
+  }
+
+  return (
+    <PageLayout>
+      <Section
+        title="User name"
+        description="This is a display name and is not used for authentication"
+      >
+        <EditableText
+          value={user.displayName || ''}
+          onSave={async (newDisplayName) => {
+            await user.update({ displayName: newDisplayName });
+          }}
+        />
+      </Section>
+
+      <Section
+        title="Profile image"
+        description="Upload your own image as your avatar"
+      >
+        <ProfileImageEditor
+          user={user as any}
+          onProfileImageUrlChange={async (profileImageUrl: string | null) => {
+            await user.update({ profileImageUrl });
+          }}
+        />
+      </Section>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/section.tsx b/apps/dashboard/src/components/dashboard-account-settings/section.tsx
new file mode 100644
index 0000000000..4f4b6e3c0d
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/section.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export function Section(props: { title: string, description?: string, children: React.ReactNode }) {
+  return (
+    <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col md:flex-row gap-4 items-start md:items-center justify-between transition-colors">
+      <div className="flex-1 flex flex-col justify-center min-w-0">
+        <h3 className="font-semibold text-base text-foreground leading-snug">
+          {props.title}
+        </h3>
+        {props.description && (
+          <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+            {props.description}
+          </p>
+        )}
+      </div>
+      <div className="w-full md:w-auto flex flex-col md:items-end justify-end shrink-0">
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/settings/delete-account-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/settings/delete-account-section.tsx
new file mode 100644
index 0000000000..463b77147c
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/settings/delete-account-section.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function DeleteAccountSection(props?: { mockMode?: boolean }) {
+  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });
+  const app = useStackApp();
+  const project = app.useProject();
+  const [deleting, setDeleting] = useState(false);
+
+  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;
+
+  if (!showDeleteSection) {
+    return null;
+  }
+
+  const handleDeleteAccount = async () => {
+    if (props?.mockMode) {
+      alert("Mock mode: Account deletion clicked");
+      setDeleting(false);
+      return;
+    }
+
+    if (user) {
+      await user.delete();
+      await app.redirectToHome();
+    }
+  };
+
+  return (
+    <Section
+      title="Delete Account"
+      description="Permanently remove your account and all associated data"
+    >
+      <div className="w-full md:w-[350px]">
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="danger-zone" className="border-b-0">
+            <AccordionTrigger className="text-red-500 hover:text-red-600 font-semibold py-2">
+              Danger zone
+            </AccordionTrigger>
+            <AccordionContent className="pt-2">
+              {!deleting ? (
+                <div className="flex flex-col gap-2">
+                  <p className="text-xs text-muted-foreground leading-normal mb-2">
+                    Once you delete your account, there is no going back. Please be certain.
+                  </p>
+                  <Button
+                    variant="destructive"
+                    onClick={() => setDeleting(true)}
+                    className="rounded-xl w-full"
+                  >
+                    Delete account
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex flex-col gap-3">
+                  <p className="text-xs font-semibold text-red-500 leading-relaxed">
+                    Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.
+                  </p>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="destructive"
+                      onClick={handleDeleteAccount}
+                      className="rounded-xl flex-1 text-xs"
+                    >
+                      Yes, delete account
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={() => setDeleting(false)}
+                      className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl flex-1 text-xs"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/settings/settings-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/settings/settings-page.tsx
new file mode 100644
index 0000000000..6d0570582f
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/settings/settings-page.tsx
@@ -0,0 +1,15 @@
+import { PageLayout } from "../page-layout";
+import { DeleteAccountSection } from "./delete-account-section";
+import { SignOutSection } from "./sign-out-section";
+
+
+export function SettingsPage(props?: {
+  mockMode?: boolean,
+}) {
+  return (
+    <PageLayout>
+      <DeleteAccountSection mockMode={props?.mockMode} />
+      <SignOutSection mockMode={props?.mockMode} />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/settings/sign-out-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/settings/sign-out-section.tsx
new file mode 100644
index 0000000000..652793ae78
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/settings/sign-out-section.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function SignOutSection(props?: { mockMode?: boolean }) {
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+
+  const handleSignOut = async () => {
+    if (props?.mockMode) {
+      alert("Mock mode: Sign out clicked");
+      return;
+    }
+    if (user) {
+      await user.signOut();
+    }
+  };
+
+  return (
+    <Section
+      title="Sign out"
+      description="End your current session"
+    >
+      <Button
+        variant='outline'
+        onClick={handleSignOut}
+        className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full md:w-auto transition-colors duration-150"
+      >
+        Sign out
+      </Button>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/sidebar-layout.tsx b/apps/dashboard/src/components/dashboard-account-settings/sidebar-layout.tsx
new file mode 100644
index 0000000000..ad905e9ac2
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/sidebar-layout.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { useHash } from '@stackframe/stack-shared/dist/hooks/use-hash';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { X } from '@phosphor-icons/react';
+import React, { ReactNode } from 'react';
+import { useStackApp } from '@stackframe/stack';
+
+export type SidebarItem = {
+  title: React.ReactNode,
+  type: 'item' | 'divider',
+  description?: React.ReactNode,
+  id?: string,
+  icon?: React.ReactNode,
+  content?: React.ReactNode,
+  contentTitle?: React.ReactNode,
+}
+
+export function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, className?: string }) {
+  const hash = useHash();
+  const selectedIndex = props.items.findIndex(item => item.id && (item.id === hash));
+  return (
+    <>
+      <div className={cn("hidden sm:flex h-full", props.className)}>
+        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />
+      </div>
+      <div className={cn("sm:hidden h-full", props.className)}>
+        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />
+      </div>
+    </>
+  );
+}
+
+function Items(props: { items: SidebarItem[], selectedIndex: number }) {
+  const app = useStackApp();
+  const navigate = app.useNavigate();
+
+  const activeItemIndex = props.selectedIndex === -1 ? 0 : props.selectedIndex;
+
+  return props.items.map((item, index) => (
+    item.type === 'item' ? (
+      <Button
+        key={index}
+        variant='ghost'
+        size='sm'
+        className={cn(
+          "justify-start px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 hover:transition-none text-foreground/85 hover:text-foreground hover:bg-zinc-100/60 dark:hover:bg-zinc-900/60 gap-2",
+          activeItemIndex === index ? "bg-white dark:bg-zinc-800/80 shadow-sm ring-1 ring-black/[0.04] text-foreground font-semibold" : ""
+        )}
+        onClick={() => {
+          if (item.id) {
+            navigate('#' + item.id);
+          }
+        }}
+      >
+        {item.icon}
+        {item.title}
+      </Button>
+    ) : (
+      <div key={index} className="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-widest mt-5 px-3 mb-1">
+        {item.title}
+      </div>
+    )
+  ));
+}
+
+function DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {
+  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
+
+  return (
+    <div className="flex w-full h-full max-w-full relative items-stretch">
+      <div className="flex flex-col items-stretch gap-1.5 p-2 overflow-y-auto shrink-0 max-w-[240px] min-w-[240px] border-r border-black/[0.06] dark:border-white/[0.06] bg-transparent py-4 pr-4">
+        {props.title && (
+          <div className="ml-3 mb-4">
+            <h2 className="font-semibold text-xl tracking-tight text-foreground">
+              {props.title}
+            </h2>
+          </div>
+        )}
+
+        <Items items={props.items} selectedIndex={props.selectedIndex} />
+      </div>
+      <div className="flex-1 w-0 flex justify-center gap-4 py-4 px-6 md:px-8">
+        <div className="flex flex-col max-w-[800px] w-full gap-6">
+          <div className="mb-2">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground">
+              {selectedItem.contentTitle || selectedItem.title}
+            </h1>
+            {selectedItem.description && (
+              <p className="text-muted-foreground text-sm mt-1">
+                {selectedItem.description}
+              </p>
+            )}
+          </div>
+          <div className="flex-1">
+            {selectedItem.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {
+  const selectedItem = props.items[props.selectedIndex];
+  const app = useStackApp();
+  const navigate = app.useNavigate();
+
+  if (props.selectedIndex === -1) {
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        {props.title && (
+          <div className="mb-2 ml-2">
+            <h2 className="text-lg font-semibold text-foreground">{props.title}</h2>
+          </div>
+        )}
+
+        <Items items={props.items} selectedIndex={props.selectedIndex} />
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex-1 flex flex-col gap-4 py-2 px-4">
+        <div className="flex flex-col">
+          <div className="flex justify-between">
+            <h4 className="font-semibold text-lg">{selectedItem.title}</h4>
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={() => { navigate('#'); }}
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+          {selectedItem.description && <p className="text-muted-foreground text-sm mt-1">{selectedItem.description}</p>}
+        </div>
+        <div className="flex-1">
+          {selectedItem.content}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-dialogs.tsx b/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-dialogs.tsx
new file mode 100644
index 0000000000..91b2a12068
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-dialogs.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';
+import { throwErr } from '@stackframe/stack-shared/dist/utils/errors';
+import { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';
+import { ActionDialog, Alert, AlertDescription, CopyField, Input, Label } from '@stackframe/stack-ui';
+import { useState } from "react";
+import { useForm } from 'react-hook-form';
+import * as yup from "yup";
+import { useUser } from "@stackframe/stack";
+import { ApiKey, ApiKeyCreationOptions, ApiKeyType } from "./types";
+
+// Constants for expiration options
+export const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;
+export const expiresInOptions = {
+  [1000 * 60 * 60 * 24 * 1]: "1 day",
+  [1000 * 60 * 60 * 24 * 7]: "7 days",
+  [1000 * 60 * 60 * 24 * 30]: "30 days",
+  [1000 * 60 * 60 * 24 * 90]: "90 days",
+  [1000 * 60 * 60 * 24 * 365]: "1 year",
+  [neverInMs]: "Never",
+} as const;
+const expiresInOptionValues = Object.keys(expiresInOptions);
+
+/**
+ * Dialog for creating a new API key
+ */
+export function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  onKeyCreated?: (key: ApiKey<Type, true>) => void,
+  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,
+  mockMode?: boolean,
+}) {
+  const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });
+  const [loading, setLoading] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const apiKeySchema = yupObject({
+    description: yupString().defined().nonEmpty('Description is required'),
+    expiresIn: yupString().oneOf(expiresInOptionValues, 'Select a valid expiration').defined(),
+  });
+
+  const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    resolver: yupResolver(apiKeySchema),
+    defaultValues: {
+      description: '',
+      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days
+    }
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {
+    setLoading(true);
+    setSubmitError(null);
+    try {
+      const expirationMs = Number.parseInt(data.expiresIn, 10);
+      if (Number.isNaN(expirationMs)) {
+        throwErr("API key expiration must be one of the predefined expiration options");
+      }
+      const expiresAt = expirationMs === neverInMs ? undefined : new Date(Date.now() + expirationMs);
+      const key = await props.createApiKey({
+        description: data.description,
+        expiresAt,
+      });
+      props.onOpenChange(false);
+      reset();
+      props.onKeyCreated?.(key);
+    } catch (error) {
+      setSubmitError("Could not create the API key. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ActionDialog
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      title="Create API Key"
+      cancelButton
+      okButton={{
+        label: "Create",
+        props: { loading, disabled: !user },
+        onClick: async () => {
+          runAsynchronouslyWithAlert(handleSubmit(onSubmit));
+          return "prevent-close";
+        }
+      }}
+    >
+      <form noValidate className='flex flex-col gap-4' onSubmit={(e) => {
+        e.preventDefault();
+        runAsynchronouslyWithAlert(handleSubmit(onSubmit));
+      }}>
+        <div className='flex flex-col gap-1.5'>
+          <Label htmlFor="description">Description</Label>
+          <Input id="description" placeholder="My key description" {...register("description")} />
+          {errors.description && <span className="text-red-500 text-xs font-medium mt-1">{errors.description.message}</span>}
+        </div>
+        {submitError && (
+          <Alert variant="destructive">
+            <AlertDescription>{submitError}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className='flex flex-col gap-1.5'>
+          <Label htmlFor="expiresIn">Expiration</Label>
+          <select
+            id="expiresIn"
+            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            {...register("expiresIn")}
+          >
+            {Object.entries(expiresInOptions).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+          {errors.expiresIn && <span className="text-red-500 text-xs font-medium mt-1">{errors.expiresIn.message}</span>}
+        </div>
+      </form>
+    </ActionDialog>
+  );
+}
+
+/**
+ * Dialog for showing the newly created API key
+ */
+export function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  apiKey: ApiKey<Type, true> | null,
+  onClose: () => void,
+}) {
+  return (
+    <ActionDialog
+      open={!!props.apiKey}
+      onOpenChange={() => props.onClose()}
+      title="API Key Created"
+      okButton={{
+        label: "Close",
+        onClick: async () => { props.onClose(); }
+      }}
+    >
+      <div className='flex flex-col gap-4'>
+        <span className="text-sm font-medium text-foreground">
+          Please copy your API key now. You will not be able to see it again.
+        </span>
+        <div className='flex flex-col gap-1.5'>
+          <Label htmlFor="apiKey">API Key</Label>
+          <CopyField type="input" value={props.apiKey?.value.secret || ''} />
+        </div>
+      </div>
+    </ActionDialog>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-table.tsx b/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-table.tsx
new file mode 100644
index 0000000000..400732a32c
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/supporting/api-key-table.tsx
@@ -0,0 +1,137 @@
+'use client';
+import { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from "@stackframe/stack-ui";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { ColumnDef, Row, Table } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { ApiKey } from "./types";
+
+type ExtendedApiKey = ApiKey & {
+  status: 'valid' | 'expired' | 'revoked',
+};
+
+const apiKeyStatusPriority = new Map<ExtendedApiKey["status"], number>([
+  ["valid", 0],
+  ["expired", 1],
+  ["revoked", 2],
+]);
+
+function getApiKeyStatusPriority(status: ExtendedApiKey["status"]) {
+  return apiKeyStatusPriority.get(status) ?? throwErr(`Missing sort priority for API key status ${status}`);
+}
+
+function toolbarRender<TData>(table: Table<TData>) {
+  return (
+    <>
+      <SearchToolbarItem table={table} placeholder="Search table" />
+      <DataTableFacetedFilter
+        column={table.getColumn("status")}
+        title="Status"
+        options={['valid', 'expired', 'revoked'].map((provider) => ({
+          value: provider,
+          label: provider,
+        }))}
+      />
+    </>
+  );
+}
+
+function RevokeDialog(props: {
+  apiKey: ExtendedApiKey,
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+}) {
+  return <ActionDialog
+    open={props.open}
+    onOpenChange={props.onOpenChange}
+    title="Revoke API Key"
+    danger
+    cancelButton
+    okButton={{ label: "Revoke Key", onClick: async () => { await props.apiKey.revoke(); } }}
+    confirmText="I understand this will unlink all the apps using this API key"
+  >
+    {`Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`}
+  </ActionDialog>;
+}
+
+function Actions({ row }: { row: Row<ExtendedApiKey> }) {
+  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
+  return (
+    <>
+      <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />
+      <ActionCell
+        invisible={row.original.status !== 'valid'}
+        items={[{
+          item: "Revoke",
+          danger: true,
+          onClick: () => setIsRevokeModalOpen(true),
+        }]}
+      />
+    </>
+  );
+}
+
+const columns: ColumnDef<ExtendedApiKey>[] =  [
+  {
+    accessorKey: "description",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Description" />,
+    cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Status" />,
+    cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,
+    filterFn: standardFilterFn,
+  },
+  {
+    id: "value",
+    accessorFn: (row) => row.value.lastFour,
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Client Key" />,
+    cell: ({ row }) => <TextCell>*******{row.original.value.lastFour}</TextCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "expiresAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Expires At" />,
+    cell: ({ row }) => {
+      if (row.original.status === 'revoked') return <TextCell>-</TextCell>;
+      return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Created At" />,
+    cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <Actions row={row} />,
+  },
+];
+
+export function ApiKeyTable(props: { apiKeys: ApiKey[] }) {
+  const extendedApiKeys = useMemo(() => {
+    const keys = props.apiKeys.map((apiKey) => {
+      const why = apiKey.whyInvalid();
+      const status = why === null ? "valid" : why === "manually-revoked" ? "revoked" : why;
+      return {
+        ...apiKey,
+        status,
+      } satisfies ExtendedApiKey;
+    });
+    // first sort based on status, then by createdAt
+    return keys.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.createdAt < b.createdAt ? 1 : a.createdAt > b.createdAt ? -1 : 0;
+      }
+      return getApiKeyStatusPriority(a.status) - getApiKeyStatusPriority(b.status);
+    });
+  }, [props.apiKeys]);
+
+  return <DataTable
+    data={extendedApiKeys}
+    columns={columns}
+    toolbarRender={toolbarRender}
+    defaultColumnFilters={[]}
+    defaultSorting={[]}
+  />;
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/supporting/dashboard-team-switcher.tsx b/apps/dashboard/src/components/dashboard-account-settings/supporting/dashboard-team-switcher.tsx
new file mode 100644
index 0000000000..f83c7a653f
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/supporting/dashboard-team-switcher.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import React, { Suspense, useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Team, useStackApp } from "@stackframe/stack";
+import { TeamIcon } from "./team-icon";
+import { Gear, Plus } from "@phosphor-icons/react";
+
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+
+type MockTeam = {
+  id: string;
+  displayName: string;
+  profileImageUrl?: string | null;
+};
+
+type DashboardTeamSwitcherProps<AllowNull extends boolean = false> = {
+  team?: Team;
+  teamId?: string;
+  teams?: Team[];
+  allowNull?: AllowNull;
+  nullLabel?: string;
+  triggerClassName?: string;
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>;
+  // Mock data props
+  mockUser?: {
+    team?: MockTeam;
+  };
+  mockTeams?: MockTeam[];
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean;
+    };
+  };
+};
+
+const emptyTeams: Team[] = [];
+
+export function DashboardTeamSwitcher<AllowNull extends boolean = false>(props: DashboardTeamSwitcherProps<AllowNull>) {
+  return (
+    <Suspense fallback={<Fallback />}>
+      <Inner {...props} />
+    </Suspense>
+  );
+}
+
+function Fallback() {
+  return <Skeleton className="h-9 w-full max-w-64 rounded-xl" />;
+}
+
+function Inner<AllowNull extends boolean>(props: DashboardTeamSwitcherProps<AllowNull>) {
+  const app = useStackApp();
+  const navigate = app.useNavigate();
+  const project = app.useProject();
+
+  const rawTeams = props.teams ?? emptyTeams;
+  const selectedTeam = props.team || rawTeams.find(team => team.id === props.teamId);
+  const teams = useMemo(() => [...rawTeams].sort((a, b) => (b.id === selectedTeam?.id ? 1 : -1)), [rawTeams, selectedTeam]);
+
+  return (
+    <Select
+      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}
+      onValueChange={(value) => {
+        runAsynchronouslyWithAlert(async () => {
+          let team: Team | null = null;
+          if (value !== 'null-sentinel') {
+            team = teams.find(team => team.id === value) || null;
+          }
+
+          if (props.onChange) {
+            await props.onChange(team as any);
+          }
+        });
+      }}
+    >
+      <SelectTrigger className={props.triggerClassName}>
+        <SelectValue placeholder="Select team" />
+      </SelectTrigger>
+      <SelectContent className="rounded-xl border-black/[0.08] dark:border-white/[0.08] shadow-md">
+        {selectedTeam && (
+          <SelectGroup>
+            <SelectLabel className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-2 py-1.5 flex items-center justify-between">
+              <span>Current Team</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 text-muted-foreground hover:text-foreground transition-colors"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate(`#team-${selectedTeam.id}`);
+                }}
+              >
+                <Gear className="h-3.5 w-3.5" />
+              </Button>
+            </SelectLabel>
+            <SelectItem value={selectedTeam.id} className="rounded-lg">
+              <div className="flex items-center gap-2">
+                <TeamIcon team={selectedTeam} />
+                <span className="max-w-[140px] truncate text-sm font-semibold text-foreground/90">{selectedTeam.displayName}</span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        )}
+
+        {props.allowNull && (
+          <SelectGroup>
+            <SelectItem value="null-sentinel" className="rounded-lg">
+              <div className="flex items-center gap-2">
+                <TeamIcon team="personal" />
+                <span className="max-w-[140px] truncate text-sm font-semibold text-foreground/90">{props.nullLabel || 'Personal Account'}</span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        )}
+
+        {teams.length > 0 && (
+          <SelectGroup>
+            <SelectLabel className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-2 py-1.5 mt-1 border-t border-black/[0.04] dark:border-white/[0.04]">Other Teams</SelectLabel>
+            {teams
+              .filter(team => team.id !== selectedTeam?.id)
+              .map(team => (
+                <SelectItem value={team.id} key={team.id} className="rounded-lg">
+                  <div className="flex items-center gap-2">
+                    <TeamIcon team={team} />
+                    <span className="max-w-[140px] truncate text-sm font-semibold text-foreground/90">{team.displayName}</span>
+                  </div>
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        )}
+
+        {project.config.clientTeamCreationEnabled && (
+          <>
+            <SelectSeparator className="bg-black/[0.04] dark:bg-white/[0.04]" />
+            <div className="p-1">
+              <Button
+                onClick={() => {
+                  navigate(`#team-creation`);
+                }}
+                className="w-full text-xs font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-lg justify-start py-1.5 px-2 h-auto text-left gap-1.5"
+                variant="ghost"
+              >
+                <Plus className="h-3.5 w-3.5" /> Create a team
+              </Button>
+            </div>
+          </>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/supporting/team-icon.tsx b/apps/dashboard/src/components/dashboard-account-settings/supporting/team-icon.tsx
new file mode 100644
index 0000000000..ebb6c2a048
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/supporting/team-icon.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { User } from "@phosphor-icons/react";
+import { Team } from "@stackframe/stack";
+
+export function TeamIcon(props: { team: Team | 'personal' }) {
+  if (props.team === 'personal') {
+    return (
+      <div className="flex items-center justify-center h-6 w-6 rounded-md bg-zinc-100 dark:bg-zinc-800 border border-black/[0.08] dark:border-white/[0.08] text-foreground/70 shadow-sm">
+        <User className="w-3.5 h-3.5" />
+      </div>
+    );
+  }
+  if (props.team.profileImageUrl) {
+    return (
+      <Avatar className="h-6 w-6 rounded-md border border-black/[0.08] dark:border-white/[0.08] shadow-sm">
+        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />
+        <AvatarFallback className="bg-zinc-100 dark:bg-zinc-800 text-[10px] font-bold text-foreground">
+          {props.team.displayName.slice(0, 1).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+    );
+  } else {
+    return (
+      <div className="flex items-center justify-center h-6 w-6 rounded-md bg-zinc-100 dark:bg-zinc-800 border border-black/[0.08] dark:border-white/[0.08] text-foreground shadow-sm">
+        <span className="text-[10px] font-bold">{props.team.displayName.slice(0, 1).toUpperCase()}</span>
+      </div>
+    );
+  }
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/supporting/types.ts b/apps/dashboard/src/components/dashboard-account-settings/supporting/types.ts
new file mode 100644
index 0000000000..46b633d6ab
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/supporting/types.ts
@@ -0,0 +1,36 @@
+export type ApiKeyType = "user" | "team";
+
+export type ApiKey<Type extends ApiKeyType = ApiKeyType, IsFirstView extends boolean = false> = {
+  id: string;
+  description: string;
+  createdAt: Date;
+  expiresAt?: Date | null;
+  manuallyRevokedAt?: Date | null;
+  value: {
+    lastFour: string;
+    secret?: string;
+  };
+  type: Type;
+  userId: string;
+  update: (options: { description?: string }) => Promise<void>;
+  revoke: () => Promise<void>;
+  isValid: () => boolean;
+  whyInvalid: () => 'manually-revoked' | 'expired' | null;
+}
+
+export type ApiKeyCreationOptions<Type extends ApiKeyType = ApiKeyType> = {
+  description: string;
+  expiresAt?: Date | null;
+}
+
+export type ActiveSession = {
+  id: string;
+  isCurrentSession: boolean;
+  isImpersonation?: boolean;
+  createdAt: string;
+  lastUsedAt?: string;
+  geoInfo?: {
+    ip?: string;
+    cityName?: string;
+  };
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/leave-team-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/leave-team-section.tsx
new file mode 100644
index 0000000000..edd30a598e
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/leave-team-section.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Team, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function LeaveTeamSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const [leaving, setLeaving] = useState(false);
+
+  return (
+    <Section
+      title="Leave Team"
+      description="Leave this team and remove your team profile"
+    >
+      <div className="w-full md:w-[350px] flex flex-col items-stretch md:items-end">
+        {!leaving ? (
+          <Button
+            variant="outline"
+            onClick={() => setLeaving(true)}
+            className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 py-2 w-full transition-colors duration-150 text-red-500 hover:text-red-600"
+          >
+            Leave team
+          </Button>
+        ) : (
+          <div className="flex flex-col gap-3 w-full">
+            <span className="text-xs font-semibold text-red-500 leading-relaxed text-left md:text-right">
+              Are you sure you want to leave the team? You will lose access to all of its resources.
+            </span>
+            <div className="flex gap-2 w-full">
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  await user.leaveTeam(props.team);
+                  window.location.reload();
+                }}
+                className="rounded-xl flex-1 text-xs"
+              >
+                Leave
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => setLeaving(false)}
+                className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl flex-1 text-xs"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-api-keys-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-api-keys-section.tsx
new file mode 100644
index 0000000000..452a77cb70
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-api-keys-section.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { HexclaveAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../supporting/api-key-dialogs";
+import { ApiKeyTable } from "../supporting/api-key-table";
+import { useStackApp, useUser, Team } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function TeamApiKeysSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const team = user.useTeam(props.team.id);
+  const stackApp = useStackApp();
+  const project = stackApp.useProject();
+  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');
+
+  if (!team) {
+    throw new HexclaveAssertionError("Team not found");
+  }
+
+  const teamApiKeysEnabled = project.config.allowTeamApiKeys;
+  if (!manageApiKeysPermission || !teamApiKeysEnabled) {
+    return null;
+  }
+
+  return <TeamApiKeysSectionInner team={props.team} />;
+}
+
+function TeamApiKeysSectionInner(props: { team: Team }) {
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState<any | null>(null);
+
+  const apiKeys = props.team.useApiKeys();
+
+  const CreateDialog = CreateApiKeyDialog<"team">;
+  const ShowDialog = ShowApiKeyDialog<"team">;
+
+  return (
+    <>
+      <Section
+        title="API Keys"
+        description="API keys grant programmatic access to your team."
+      >
+        <Button
+          onClick={() => setIsNewApiKeyDialogOpen(true)}
+          className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4 py-2 w-full md:w-auto transition-colors duration-150"
+        >
+          Create API Key
+        </Button>
+      </Section>
+      <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+        <ApiKeyTable apiKeys={apiKeys as any} />
+      </div>
+
+      <CreateDialog
+        open={isNewApiKeyDialogOpen}
+        onOpenChange={setIsNewApiKeyDialogOpen}
+        onKeyCreated={setReturnedApiKey}
+        createApiKey={async (data) => {
+          const apiKey = await props.team.createApiKey(data as any);
+          return apiKey as any;
+        }}
+      />
+      <ShowDialog
+        apiKey={returnedApiKey}
+        onClose={() => setReturnedApiKey(null)}
+      />
+    </>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-creation-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-creation-page.tsx
new file mode 100644
index 0000000000..237918e919
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-creation-page.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { PageLayout } from "../page-layout";
+import { Section } from "../section";
+import { Warning } from "@phosphor-icons/react";
+
+export function TeamCreationPage(props?: {
+  mockMode?: boolean,
+}) {
+  const teamCreationSchema = yupObject({
+    displayName: yupString().defined().nonEmpty("Please enter a team name"),
+  });
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(teamCreationSchema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });
+  const navigate = app.useNavigate();
+  const [loading, setLoading] = useState(false);
+
+  // In mock mode, show that team creation is disabled
+  if (props?.mockMode) {
+    return (
+      <PageLayout>
+        <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex gap-4 items-center">
+          <Warning className="h-5 w-5 text-zinc-500 shrink-0" />
+          <span className="text-sm text-muted-foreground font-medium">Team creation is disabled in demo mode.</span>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  if (!project.config.clientTeamCreationEnabled) {
+    return (
+      <PageLayout>
+        <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex gap-4 items-center">
+          <Warning className="h-5 w-5 text-zinc-500 shrink-0" />
+          <span className="text-sm text-muted-foreground font-medium">Team creation is not enabled for this project.</span>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {
+    setLoading(true);
+
+    let team;
+    try {
+      team = await user?.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+
+    if (team) {
+      navigate(`#team-${team.id}`);
+    }
+  };
+
+  return (
+    <PageLayout>
+      <Section title="Create a Team" description="Enter a display name for your new team">
+        <form
+          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+          noValidate
+          className="flex flex-col gap-2 w-full md:w-[350px]"
+        >
+          <div className="flex gap-2 w-full">
+            <Input
+              id="displayName"
+              type="text"
+              {...register("displayName")}
+              placeholder="Team name"
+              className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] flex-1"
+            />
+            <Button
+              type="submit"
+              loading={loading}
+              className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4"
+            >
+              Create
+            </Button>
+          </div>
+          {errors.displayName && (
+            <span className="text-red-500 text-xs font-medium">{errors.displayName.message?.toString()}</span>
+          )}
+        </form>
+      </Section>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-display-name-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-display-name-section.tsx
new file mode 100644
index 0000000000..1a95acb671
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-display-name-section.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Team, useUser } from "@stackframe/stack";
+import { EditableText } from "../editable-text";
+import { Section } from "../section";
+
+export function TeamDisplayNameSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const updateTeamPermission = user.usePermission(props.team, '$update_team');
+
+  if (!updateTeamPermission) {
+    return null;
+  }
+
+  return (
+    <Section
+      title="Team display name"
+      description="Change the display name of your team"
+    >
+      <EditableText
+        value={props.team.displayName}
+        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}
+      />
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-invitation-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-invitation-section.tsx
new file mode 100644
index 0000000000..6b7f57d884
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-invitation-section.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Trash } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { Team, useUser } from "@stackframe/stack";
+import { Section } from "../section";
+
+export function TeamMemberInvitationSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');
+
+  if (!inviteMemberPermission) {
+    return null;
+  }
+
+  return <MemberInvitationSectionInner team={props.team} />;
+}
+
+function MemberInvitationsSectionInvitationsList(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const invitationsToShow = props.team.useInvitations();
+  const removeMemberPermission = user.usePermission(props.team, '$remove_members');
+
+  return (
+    <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-5 mt-4">
+      <div>
+        <h3 className="font-semibold text-base text-foreground leading-snug">
+          Outstanding Invitations
+        </h3>
+        <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+          Sent invitations that are currently pending.
+        </p>
+      </div>
+
+      <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+        <Table>
+          <TableHeader className="bg-zinc-50/50 dark:bg-zinc-900/50">
+            <TableRow className="border-b border-black/[0.06] dark:border-white/[0.06]">
+              <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Email</TableHead>
+              <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Expires</TableHead>
+              <TableHead className="py-3 px-4 text-right w-[60px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invitationsToShow.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={3} className="text-center py-6 text-muted-foreground italic text-sm">
+                  No outstanding invitations
+                </TableCell>
+              </TableRow>
+            ) : (
+              invitationsToShow.map((invitation) => (
+                <TableRow key={invitation.id} className="border-b border-black/[0.04] dark:border-white/[0.04] last:border-b-0 hover:bg-zinc-50/30 dark:hover:bg-zinc-900/30 transition-colors duration-150">
+                  <TableCell className="py-3 px-4 text-sm font-medium text-foreground/90">
+                    {invitation.recipientEmail}
+                  </TableCell>
+                  <TableCell className="py-3 px-4 text-xs text-muted-foreground/80">
+                    {new Date(invitation.expiresAt).toLocaleString()}
+                  </TableCell>
+                  <TableCell className="py-3 px-4 text-right">
+                    {removeMemberPermission && (
+                      <Button
+                        onClick={async () => { await invitation.revoke(); }}
+                        size="icon"
+                        variant="ghost"
+                        className="h-8 w-8 text-muted-foreground hover:text-red-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded-lg transition-colors"
+                      >
+                        <Trash className="w-4 h-4" />
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+function MemberInvitationSectionInner(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const readMemberPermission = user.usePermission(props.team, '$read_members');
+
+  const invitationSchema = yupObject({
+    email: strictEmailSchema('Please enter a valid email address').defined().nonEmpty('Please enter an email address'),
+  });
+
+  const { register, handleSubmit, formState: { errors }, watch, reset } = useForm({
+    resolver: yupResolver(invitationSchema)
+  });
+  const [loading, setLoading] = useState(false);
+  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);
+  const watchedEmail = watch('email');
+
+  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {
+    setLoading(true);
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+      reset();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setInvitedEmail(null);
+  }, [watchedEmail]);
+
+  return (
+    <>
+      <Section
+        title="Invite member"
+        description="Invite a user to your team through email"
+      >
+        <form
+          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+          noValidate
+          className="flex flex-col gap-2 w-full md:w-[350px]"
+        >
+          <div className="flex gap-2 w-full">
+            <Input
+              placeholder="Email address"
+              {...register("email")}
+              className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] flex-1"
+            />
+            <Button
+              type="submit"
+              loading={loading}
+              className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4"
+            >
+              Invite
+            </Button>
+          </div>
+          {errors.email && (
+            <span className="text-red-500 text-xs font-medium">{errors.email.message?.toString()}</span>
+          )}
+          {invitedEmail && (
+            <span className="text-xs text-muted-foreground/80 font-medium">Successfully invited {invitedEmail}</span>
+          )}
+        </form>
+      </Section>
+      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}
+    </>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-list-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-list-section.tsx
new file mode 100644
index 0000000000..318e9a9648
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-member-list-section.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { Team, useUser } from "@stackframe/stack";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { User } from "@phosphor-icons/react";
+
+export function TeamMemberListSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const readMemberPermission = user.usePermission(props.team, '$read_members');
+  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');
+
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+
+  return <MemberListSectionInner team={props.team} />;
+}
+
+function MemberListSectionInner(props: { team: Team }) {
+  const users = props.team.useUsers();
+
+  return (
+    <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col gap-5">
+      <div>
+        <h3 className="font-semibold text-base text-foreground leading-snug">
+          Team Members
+        </h3>
+        <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+          The users who have access to this team.
+        </p>
+      </div>
+
+      <div className="border border-black/[0.06] dark:border-white/[0.06] rounded-xl overflow-hidden shadow-sm">
+        <Table>
+          <TableHeader className="bg-zinc-50/50 dark:bg-zinc-900/50">
+            <TableRow className="border-b border-black/[0.06] dark:border-white/[0.06]">
+              <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider w-[80px]">Avatar</TableHead>
+              <TableHead className="py-3 px-4 font-semibold text-xs text-muted-foreground uppercase tracking-wider">Name</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={2} className="text-center py-6 text-muted-foreground italic text-sm">
+                  No members found
+                </TableCell>
+              </TableRow>
+            ) : (
+              users.map(({ id, teamProfile }) => {
+                const initials = teamProfile.displayName?.slice(0, 2).toUpperCase() || '';
+                return (
+                  <TableRow key={id} className="border-b border-black/[0.04] dark:border-white/[0.04] last:border-b-0 hover:bg-zinc-50/30 dark:hover:bg-zinc-900/30 transition-colors duration-150">
+                    <TableCell className="py-3 px-4">
+                      <Avatar className="h-9 w-9 border border-black/[0.08] dark:border-white/[0.08] shadow-sm">
+                        <AvatarImage src={teamProfile.profileImageUrl || undefined} />
+                        <AvatarFallback className="bg-zinc-100 dark:bg-zinc-900 text-foreground font-semibold text-xs">
+                          {initials || <User className="h-4 w-4 text-zinc-500" />}
+                        </AvatarFallback>
+                      </Avatar>
+                    </TableCell>
+                    <TableCell className="py-3 px-4 text-sm font-semibold text-foreground/90">
+                      {teamProfile.displayName || (
+                        <span className="text-muted-foreground italic font-normal text-xs">No display name set</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-page.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-page.tsx
new file mode 100644
index 0000000000..5e605c350e
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-page.tsx
@@ -0,0 +1,24 @@
+import { Team } from "@stackframe/stack";
+import { PageLayout } from "../page-layout";
+import { LeaveTeamSection } from "./leave-team-section";
+import { TeamApiKeysSection } from "./team-api-keys-section";
+import { TeamDisplayNameSection } from "./team-display-name-section";
+import { TeamMemberInvitationSection } from "./team-member-invitation-section";
+import { TeamMemberListSection } from "./team-member-list-section";
+import { TeamProfileImageSection } from "./team-profile-image-section";
+import { TeamUserProfileSection } from "./team-profile-user-section";
+
+
+export function TeamPage(props: { team: Team }) {
+  return (
+    <PageLayout>
+      <TeamUserProfileSection key={`user-profile-${props.team.id}`} team={props.team} />
+      <TeamProfileImageSection key={`profile-image-${props.team.id}`} team={props.team} />
+      <TeamDisplayNameSection key={`display-name-${props.team.id}`} team={props.team} />
+      <TeamMemberListSection key={`member-list-${props.team.id}`} team={props.team} />
+      <TeamMemberInvitationSection key={`member-invitation-${props.team.id}`} team={props.team} />
+      <TeamApiKeysSection key={`api-keys-${props.team.id}`} team={props.team} />
+      <LeaveTeamSection key={`leave-team-${props.team.id}`} team={props.team} />
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-image-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-image-section.tsx
new file mode 100644
index 0000000000..06b9801e5b
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-image-section.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { Team, useUser } from "@stackframe/stack";
+import { ProfileImageEditor } from "../profile-image-editor";
+import { Section } from "../section";
+
+export function TeamProfileImageSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const updateTeamPermission = user.usePermission(props.team, '$update_team');
+
+  if (!updateTeamPermission) {
+    return null;
+  }
+
+  return (
+    <Section
+      title="Team profile image"
+      description="Upload an image for your team"
+    >
+      <ProfileImageEditor
+        user={props.team as any}
+        onProfileImageUrlChange={async (profileImageUrl) => {
+          await props.team.update({ profileImageUrl });
+        }}
+      />
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-user-section.tsx b/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-user-section.tsx
new file mode 100644
index 0000000000..fb654f7c89
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/teams/team-profile-user-section.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Team, useUser } from "@stackframe/stack";
+import { EditableText } from "../editable-text";
+import { Section } from "../section";
+
+export function TeamUserProfileSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const profile = user.useTeamProfile(props.team);
+
+  return (
+    <Section
+      title="Team user name"
+      description="Overwrite your user display name in this team"
+    >
+      <EditableText
+        value={profile.displayName || ''}
+        onSave={async (newDisplayName) => {
+          await profile.update({ displayName: newDisplayName });
+        }}
+      />
+    </Section>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-user-button.tsx b/apps/dashboard/src/components/dashboard-user-button.tsx
new file mode 100644
index 0000000000..8152e6ffed
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-user-button.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Skeleton,
+  cn,
+} from "@/components/ui";
+import { SignInIcon, SignOutIcon, SunIcon, UserCircleIcon, UserPlusIcon } from "@phosphor-icons/react";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Suspense } from "react";
+
+type DashboardUserButtonProps = {
+  showUserInfo?: boolean,
+  colorModeToggle?: () => void | Promise<void>,
+  extraItems?: {
+    text: string,
+    icon: React.ReactNode,
+    onClick: () => void | Promise<void>,
+  }[],
+};
+
+type DashboardMenuItemProps = {
+  text: string,
+  icon: React.ReactNode,
+  onClick: () => void | Promise<void>,
+  variant?: "default" | "destructive",
+};
+
+const menuIconClassName = "h-4 w-4 shrink-0 text-muted-foreground";
+const destructiveItemClasses =
+  "text-red-600 dark:text-red-400 focus:bg-red-500/10 data-[highlighted]:bg-red-500/10 dark:focus:bg-red-500/15 dark:data-[highlighted]:bg-red-500/15";
+
+function DashboardUserAvatar(props: {
+  size?: number,
+  user: ReturnType<typeof useUser>,
+}) {
+  const size = props.size ?? 34;
+  const user = props.user;
+  const label = user?.displayName ?? user?.primaryEmail ?? "User";
+  const initials = label.slice(0, 2).toUpperCase();
+
+  return (
+    <Avatar
+      className="bg-zinc-100 text-foreground ring-1 ring-black/[0.06] dark:bg-foreground/[0.08] dark:ring-white/[0.08]"
+      style={{ height: size, width: size }}
+    >
+      <AvatarImage src={user?.profileImageUrl ?? ""} />
+      <AvatarFallback>
+        <span className="font-medium" style={{ fontSize: size * 0.4 }}>
+          {initials}
+        </span>
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+function DashboardMenuItem(props: DashboardMenuItemProps) {
+  return (
+    <DropdownMenuItem
+      icon={props.icon}
+      onClick={props.onClick}
+      className={props.variant === "destructive" ? destructiveItemClasses : undefined}
+    >
+      {props.text}
+    </DropdownMenuItem>
+  );
+}
+
+export function DashboardUserButton(props: DashboardUserButtonProps) {
+  return (
+    <Suspense fallback={<Skeleton className="h-[34px] w-[34px] rounded-full stack-scope" />}>
+      <DashboardUserButtonInner {...props} />
+    </Suspense>
+  );
+}
+
+function DashboardUserButtonInner(props: DashboardUserButtonProps) {
+  const user = useUser();
+  const app = useStackApp();
+  const showUserInfo = props.showUserInfo === true;
+  const displayName = user?.displayName ?? user?.primaryEmail ?? "Account";
+  const iconProps = { size: 16, className: menuIconClassName };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(
+          "outline-none stack-scope border-0 bg-transparent shadow-none transition-colors duration-150 hover:transition-none",
+          "hover:bg-zinc-100/80 dark:hover:bg-foreground/[0.06]",
+          "data-[state=open]:bg-zinc-100/90 dark:data-[state=open]:bg-foreground/[0.08]",
+          "focus-visible:outline-none focus-visible:ring-0",
+          showUserInfo
+            ? "w-full overflow-hidden rounded-lg p-2"
+            : "rounded-xl p-1.5 focus-visible:ring-2 focus-visible:ring-black/[0.08] dark:focus-visible:ring-white/[0.12]",
+        )}
+      >
+        <div className={cn("flex min-w-0 items-center gap-2", showUserInfo && "w-full")}>
+          <DashboardUserAvatar user={user} size={showUserInfo ? 32 : 34} />
+          {user && showUserInfo && (
+            <div className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden text-left">
+              <div className="truncate text-sm font-medium text-foreground">{displayName}</div>
+              {user.primaryEmail != null && user.primaryEmail !== displayName && (
+                <div className="truncate text-xs text-muted-foreground">{user.primaryEmail}</div>
+              )}
+            </div>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="stack-scope w-[240px] p-1.5"
+        align={showUserInfo ? "start" : "end"}
+        side={showUserInfo ? "top" : "bottom"}
+        sideOffset={showUserInfo ? 8 : 6}
+      >
+        <DropdownMenuLabel className="cursor-default px-3 py-2.5 font-normal">
+          <div className="flex min-w-0 items-center gap-3">
+            <DashboardUserAvatar user={user} size={40} />
+            <div className="min-w-0 flex-1">
+              {user ? (
+                <>
+                  <p className="truncate text-sm font-semibold text-foreground">{displayName}</p>
+                  <p className="truncate text-xs text-muted-foreground">{user.primaryEmail}</p>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">Not signed in</p>
+              )}
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator className="mx-0 my-1 bg-black/[0.06] dark:bg-border/60" />
+        {user && (
+          <DashboardMenuItem
+            text="Account settings"
+            onClick={async () => await app.redirectToAccountSettings()}
+            icon={<UserCircleIcon {...iconProps} />}
+          />
+        )}
+        {!user && (
+          <DashboardMenuItem
+            text="Sign in"
+            onClick={async () => await app.redirectToSignIn()}
+            icon={<SignInIcon {...iconProps} />}
+          />
+        )}
+        {!user && (
+          <DashboardMenuItem
+            text="Sign up"
+            onClick={async () => await app.redirectToSignUp()}
+            icon={<UserPlusIcon {...iconProps} />}
+          />
+        )}
+        {user && props.extraItems?.map((item, index) => (
+          <DashboardMenuItem key={index} text={item.text} onClick={item.onClick} icon={item.icon} />
+        ))}
+        {props.colorModeToggle && (
+          <DashboardMenuItem
+            text="Toggle theme"
+            onClick={props.colorModeToggle}
+            icon={<SunIcon {...iconProps} />}
+          />
+        )}
+        {user && (
+          <>
+            <DropdownMenuSeparator className="mx-0 my-1 bg-black/[0.06] dark:bg-border/60" />
+            <DashboardMenuItem
+              text="Sign out"
+              variant="destructive"
+              onClick={async () => await user.signOut()}
+              icon={<SignOutIcon {...iconProps} className={cn(menuIconClassName, "text-red-500/80 dark:text-red-400/80")} />}
+            />
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/design-components/menu.tsx b/apps/dashboard/src/components/design-components/menu.tsx
index ffb26267a7..846106ad5c 100644
--- a/apps/dashboard/src/components/design-components/menu.tsx
+++ b/apps/dashboard/src/components/design-components/menu.tsx
@@ -71,7 +71,8 @@ export type DesignMenuProps =
   | DesignMenuSelectorProps
   | DesignMenuTogglesProps;
 
-const destructiveItemClasses = "text-red-600 dark:text-red-400 focus:bg-red-500/10";
+const destructiveItemClasses =
+  "text-red-600 dark:text-red-400 focus:bg-red-500/10 data-[highlighted]:bg-red-500/10 dark:focus:bg-red-500/15 dark:data-[highlighted]:bg-red-500/15";
 
 export function DesignMenu(props: DesignMenuProps) {
   const align = props.align ?? (props.variant === "toggles" ? "end" : "start");
diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
index 5e1561c4e3..087587c720 100644
--- a/apps/dashboard/src/components/navbar.tsx
+++ b/apps/dashboard/src/components/navbar.tsx
@@ -2,8 +2,8 @@
 
 import { Typography } from "@/components/ui";
 import { getPublicEnvVar } from "@/lib/env";
-import { UserButton } from "@stackframe/stack";
 
+import { DashboardUserButton } from "./dashboard-user-button";
 import { Link } from "./link";
 import { Logo } from "./logo";
 import ThemeToggle from "./theme-toggle";
@@ -26,7 +26,7 @@ export function Navbar({ ...props }) {
           </Link>
           <ThemeToggle />
         </div>
-        {!isRemoteDevelopmentEnvironment && <UserButton />}
+        {!isRemoteDevelopmentEnvironment && <DashboardUserButton />}
       </div>
     </header>
   );
diff --git a/apps/dashboard/src/components/rule-builder/condition-builder.tsx b/apps/dashboard/src/components/rule-builder/condition-builder.tsx
index 24a92e5b1f..bb6fc412b5 100644
--- a/apps/dashboard/src/components/rule-builder/condition-builder.tsx
+++ b/apps/dashboard/src/components/rule-builder/condition-builder.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui";
+import { DesignInput, DesignSelectorDropdown } from "@/components/design-components";
 import {
   type ConditionNode,
   createEmptyCondition,
@@ -15,6 +16,13 @@ import { validateCountryCode } from "@stackframe/stack-shared/dist/utils/country
 import { type ConditionField, type ConditionOperator, conditionFields, fieldMetadata, getOperatorsForField, isNumericField, validateNumericFieldValue } from "@stackframe/stack-shared/dist/utils/cel-fields";
 import React from "react";
 
+const conditionRowSurfaceClass =
+  "bg-white/90 dark:bg-background/60 shadow-sm ring-1 ring-black/[0.06] dark:ring-white/[0.06]";
+const conditionFieldClass = "h-8 min-w-[120px]";
+const conditionValueClass = "h-8 w-full";
+
+const UNSET_SELECT_VALUE = "__unset__";
+
 /**
  * Validates whether a string is a valid regular expression.
  * Returns null if valid, or an error message if invalid.
@@ -183,28 +191,24 @@ function ConditionRow({
   };
 
   return (
-    <div className="flex items-center gap-2 p-2 rounded-lg bg-background/40 ring-1 ring-foreground/[0.04]">
-      {/* Field selector */}
-      <select
+    <div className={cn("flex items-center gap-2 p-2 rounded-lg", conditionRowSurfaceClass)}>
+      <DesignSelectorDropdown
         value={condition.field}
-        onChange={(e) => handleFieldChange(e.target.value as ConditionField)}
-        className="h-8 px-2 text-sm bg-background/60 border border-border/50 rounded-md min-w-[120px]"
-      >
-        {FIELD_OPTIONS.map((opt) => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
-        ))}
-      </select>
+        onValueChange={(value) => handleFieldChange(value as ConditionField)}
+        options={FIELD_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
+        size="sm"
+        className={conditionFieldClass}
+        triggerClassName={conditionFieldClass}
+      />
 
-      {/* Operator selector */}
-      <select
+      <DesignSelectorDropdown
         value={condition.operator}
-        onChange={(e) => handleOperatorChange(e.target.value as ConditionOperator)}
-        className="h-8 px-2 text-sm bg-background/60 border border-border/50 rounded-md min-w-[120px]"
-      >
-        {availableOperators.map((op) => (
-          <option key={op} value={op}>{OPERATOR_LABELS[op]}</option>
-        ))}
-      </select>
+        onValueChange={(value) => handleOperatorChange(value as ConditionOperator)}
+        options={availableOperators.map((op) => ({ value: op, label: OPERATOR_LABELS[op] }))}
+        size="sm"
+        className={conditionFieldClass}
+        triggerClassName={conditionFieldClass}
+      />
 
       {/* Value input */}
       <div className="flex-1 min-w-0 space-y-1">
@@ -216,7 +220,7 @@ function ConditionRow({
                   value={countryCode || null}
                   onChange={(val) => handleCountryCodeListItemChange(index, val ?? "")}
                   className={cn(
-                    "h-8 text-sm flex-1",
+                    conditionValueClass,
                     countryCodeError !== null && "border-destructive ring-1 ring-destructive/30",
                   )}
                 />
@@ -244,19 +248,20 @@ function ConditionRow({
             </Button>
           </div>
         ) : condition.operator === 'in_list' ? (
-          <input
+          <DesignInput
             type="text"
-            value={Array.isArray(condition.value) ? condition.value.join(', ') : condition.value}
+            size="sm"
+            value={Array.isArray(condition.value) ? condition.value.join(', ') : String(condition.value)}
             onChange={(e) => {
               const items = e.target.value.split(',').map(s => s.trim()).filter(Boolean);
               handleValueChange(items);
             }}
             placeholder="value1, value2, ... (values cannot contain commas)"
             className={cn(
-              "h-8 px-2 text-sm bg-background/60 border rounded-md w-full",
+              conditionValueClass,
               countryCodeError !== null
                 ? "border-destructive ring-1 ring-destructive/30"
-                : "border-border/50",
+                : undefined,
             )}
           />
         ) : isCountryCodeField ? (
@@ -264,36 +269,39 @@ function ConditionRow({
             value={typeof condition.value === 'string' && condition.value ? condition.value : null}
             onChange={(val) => handleValueChange(val ?? "")}
             className={cn(
-              "h-8 text-sm w-full",
+              conditionValueClass,
               countryCodeError !== null && "border-destructive ring-1 ring-destructive/30",
             )}
           />
         ) : predefinedValues ? (
-          <select
-            value={String(condition.value)}
-            onChange={(e) => handleValueChange(e.target.value)}
-            className="h-8 px-2 text-sm bg-background/60 border border-border/50 rounded-md w-full"
-          >
-            <option value="">Select...</option>
-            {predefinedValues.map((val) => (
-              <option key={val} value={val}>{val}</option>
-            ))}
-          </select>
+          <DesignSelectorDropdown
+            value={String(condition.value) || UNSET_SELECT_VALUE}
+            onValueChange={(value) => handleValueChange(value === UNSET_SELECT_VALUE ? "" : value)}
+            options={[
+              { value: UNSET_SELECT_VALUE, label: "Select..." },
+              ...predefinedValues.map((val) => ({ value: val, label: val })),
+            ]}
+            size="sm"
+            className="w-full"
+            triggerClassName={conditionValueClass}
+          />
         ) : isNumericField(condition.field) ? (
-          <input
+          <DesignInput
             type="number"
+            size="sm"
             min={0}
             max={100}
-            step="1"
+            step={1}
             value={String(condition.value)}
             onChange={(e) => handleValueChange(e.target.value === '' ? 0 : Number(e.target.value))}
             placeholder="0-100"
-            className="h-8 px-2 text-sm bg-background/60 border border-border/50 rounded-md w-full"
+            className={conditionValueClass}
           />
         ) : (
           <div className="flex items-center gap-1">
-            <input
+            <DesignInput
               type="text"
+              size="sm"
               value={String(condition.value)}
               onChange={(e) => handleValueChange(e.target.value)}
               placeholder={
@@ -302,10 +310,10 @@ function ConditionRow({
                   : "Enter value..."
               }
               className={cn(
-                "h-8 px-2 text-sm bg-background/60 border rounded-md flex-1",
+                conditionValueClass,
                 regexError !== null || countryCodeError !== null
                   ? "border-destructive ring-1 ring-destructive/30"
-                  : "border-border/50"
+                  : undefined,
               )}
             />
             {(regexError !== null || countryCodeError !== null) && (
diff --git a/apps/dashboard/src/components/settings.tsx b/apps/dashboard/src/components/settings.tsx
index 13e2e62f4f..bc516f4a4a 100644
--- a/apps/dashboard/src/components/settings.tsx
+++ b/apps/dashboard/src/components/settings.tsx
@@ -69,8 +69,8 @@ export const SettingSwitch = React.memo(function SettingSwitch(props: {
   }, [propOnCheckedChange]);
 
   return (
-    <div className="flex items-start gap-3 rounded-lg border border-border/70 bg-background/80 px-3 py-3">
-      <div className="flex flex-1 flex-col gap-2">
+    <div className="flex items-center gap-3 rounded-xl border border-black/[0.08] bg-white/90 px-4 py-3 shadow-sm ring-1 ring-black/[0.06] dark:border-white/[0.06] dark:bg-background/60 dark:ring-white/[0.06]">
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
         <div className="flex items-center gap-3">
           <Switch
             id={id}
@@ -79,13 +79,13 @@ export const SettingSwitch = React.memo(function SettingSwitch(props: {
             disabled={props.disabled}
           />
           <Label className="cursor-pointer" htmlFor={id}>
-            <Typography type="div" className="text-sm font-medium leading-none">
+            <Typography type="div" className="text-sm font-medium leading-snug">
               {props.label}
             </Typography>
           </Label>
         </div>
         {props.hint && (
-          <Typography variant="secondary" className="text-xs pl-9">
+          <Typography variant="secondary" className="pl-11 text-xs leading-relaxed">
             {props.hint}
           </Typography>
         )}
diff --git a/apps/dashboard/src/components/ui/action-dialog.tsx b/apps/dashboard/src/components/ui/action-dialog.tsx
index c002a3591a..683cf8ec46 100644
--- a/apps/dashboard/src/components/ui/action-dialog.tsx
+++ b/apps/dashboard/src/components/ui/action-dialog.tsx
@@ -2,11 +2,15 @@
 
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { InfoIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import {
+  DesignButton,
+  DesignDialog,
+  type DesignDialogSize,
+} from "@stackframe/dashboard-ui-components";
 import React, { Suspense, useId } from "react";
 import { Alert } from "./alert";
-import { Button } from "./button";
 import { Checkbox } from "./checkbox";
-import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog";
 import { Label } from "./label";
 import { Skeleton } from "./skeleton";
 
@@ -22,12 +26,12 @@ export type ActionDialogProps = {
   okButton?: boolean | Readonly<{
     label?: string,
     onClick?: () => Promise<"prevent-close" | undefined | void>,
-    props?: Partial<React.ComponentProps<typeof Button>>,
+    props?: Partial<React.ComponentProps<typeof DesignButton>>,
   }>,
   cancelButton?: boolean | Readonly<{
     label?: string,
     onClick?: () => Promise<"prevent-close" | undefined | void>,
-    props?: Partial<React.ComponentProps<typeof Button>>,
+    props?: Partial<React.ComponentProps<typeof DesignButton>>,
   }>,
   confirmText?: string,
   children?: React.ReactNode,
@@ -43,6 +47,7 @@ export type ActionDialogProps = {
    * (border, ring, bg, shadow, padding, rounded, etc.).
    */
   contentClassName?: string,
+  size?: DesignDialogSize,
 };
 
 export function ActionDialog(props: ActionDialogProps) {
@@ -62,75 +67,45 @@ export function ActionDialog(props: ActionDialogProps) {
 
   const blockDismissOnOutside = !!(props.preventClose || props.keepOpenOnOutsideInteraction);
 
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
+  const onOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
       props.onClose?.();
       setConfirmed(false);
     } else {
       setInvalidationCount(invalidationCount + 1);
     }
-    setOpenState(open);
-    props.onOpenChange?.(open);
+    setOpenState(nextOpen);
+    props.onOpenChange?.(nextOpen);
   };
 
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange} key={invalidationCount}>
-      {props.trigger && <DialogTrigger asChild>
-        {props.trigger}
-      </DialogTrigger>}
-
-      <DialogContent
-        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">
-            <TitleIcon className="h-4 w-4 mr-2"/>
-            {title}
-          </DialogTitle>
-          <DialogDescription>
-            {props.description}
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogBody className="pb-2">
-          <div>
-            <Suspense fallback={
-              <>
-                <Skeleton className='h-9 w-2/3 self-center' />
-
-                <Skeleton className='h-3 w-16 mt-8' />
-                <Skeleton className='h-9 w-full mt-1' />
-
-                <Skeleton className='h-3 w-24 mt-2' />
-                <Skeleton className='h-9 w-full mt-1' />
-
-                <Skeleton className='h-9 w-full mt-6' />
-              </>
-            }>
-              {props.children}
-            </Suspense>
-          </div>
-
-          {props.confirmText && <Alert>
-            <Label className="flex gap-4 items-center">
-              <Checkbox id={confirmId} checked={confirmed} onCheckedChange={(v) => setConfirmed(!!v)}/>
-              {props.confirmText}
-            </Label>
-          </Alert>}
-        </DialogBody>
+  const trigger = props.trigger == null
+    ? undefined
+    : React.isValidElement(props.trigger)
+      ? props.trigger
+      : throwErr("ActionDialog trigger must be a React element because DesignDialog renders it with asChild");
 
-
-        {anyButton && <DialogFooter className="gap-2">
+  return (
+    <DesignDialog
+      key={invalidationCount}
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      size={props.size ?? "lg"}
+      icon={TitleIcon}
+      title={title}
+      description={props.description}
+      hideTopCloseButton={props.preventClose}
+      className={props.contentClassName}
+      contentProps={{
+        onInteractOutside: blockDismissOnOutside ? (e) => e.preventDefault() : undefined,
+        onPointerDownOutside: blockDismissOnOutside ? (e) => e.preventDefault() : undefined,
+        onFocusOutside: blockDismissOnOutside ? (e) => e.preventDefault() : undefined,
+      }}
+      footer={anyButton ? (
+        <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
           {cancelButton && (
-            <Button
+            <DesignButton
               variant="secondary"
-              color="neutral"
               onClick={async () => {
                 if (await cancelButton.onClick?.() !== "prevent-close") {
                   onOpenChange(false);
@@ -139,10 +114,10 @@ export function ActionDialog(props: ActionDialogProps) {
               {...cancelButton.props}
             >
               {cancelButton.label ?? "Cancel"}
-            </Button>
+            </DesignButton>
           )}
           {okButton && (
-            <Button
+            <DesignButton
               disabled={okButtonDisabled}
               variant={props.danger ? "destructive" : "default"}
               onClick={async () => {
@@ -153,10 +128,35 @@ export function ActionDialog(props: ActionDialogProps) {
               {...okButtonProps}
             >
               {okButton.label ?? "OK"}
-            </Button>
+            </DesignButton>
           )}
-        </DialogFooter>}
-      </DialogContent>
-    </Dialog>
+        </div>
+      ) : undefined}
+    >
+      <Suspense fallback={
+        <>
+          <Skeleton className='h-9 w-2/3 self-center' />
+
+          <Skeleton className='h-3 w-16 mt-8' />
+          <Skeleton className='h-9 w-full mt-1' />
+
+          <Skeleton className='h-3 w-24 mt-2' />
+          <Skeleton className='h-9 w-full mt-1' />
+
+          <Skeleton className='h-9 w-full mt-6' />
+        </>
+      }>
+        {props.children}
+      </Suspense>
+
+      {props.confirmText && (
+        <Alert className="mt-4">
+          <Label className="flex gap-4 items-center">
+            <Checkbox id={confirmId} checked={confirmed} onCheckedChange={(v) => setConfirmed(!!v)}/>
+            {props.confirmText}
+          </Label>
+        </Alert>
+      )}
+    </DesignDialog>
   );
 }
diff --git a/apps/dashboard/src/components/ui/alert.tsx b/apps/dashboard/src/components/ui/alert.tsx
index 38a2fa1595..4e2157482c 100644
--- a/apps/dashboard/src/components/ui/alert.tsx
+++ b/apps/dashboard/src/components/ui/alert.tsx
@@ -9,7 +9,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "border-black/[0.08] bg-white/90 text-foreground shadow-sm ring-1 ring-black/[0.06] dark:border-border dark:bg-background dark:shadow-none dark:ring-0",
         destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/5",
         success: "border-success/50 text-success dark:border-success [&>svg]:text-success bg-success/5",
       },
diff --git a/apps/dashboard/src/components/ui/button.tsx b/apps/dashboard/src/components/ui/button.tsx
index ada6116a31..80df36d8a4 100644
--- a/apps/dashboard/src/components/ui/button.tsx
+++ b/apps/dashboard/src/components/ui/button.tsx
@@ -18,10 +18,10 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-white/85 dark:bg-background hover:bg-zinc-50 dark:hover:bg-accent dark:hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-white dark:bg-secondary text-secondary-foreground hover:bg-zinc-50 dark:hover:bg-secondary/80",
+        ghost: "hover:bg-zinc-100 dark:hover:bg-accent dark:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         plain: "",
       },
diff --git a/apps/dashboard/src/components/ui/dialog.tsx b/apps/dashboard/src/components/ui/dialog.tsx
index 8ce902cd10..01c94fa8f7 100644
--- a/apps/dashboard/src/components/ui/dialog.tsx
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -6,6 +6,10 @@ import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import React from "react";
 
 import { cn } from "@/lib/utils";
+import {
+  designDialogGlassmorphicOverlayClass,
+  designDialogGlassmorphicSurfaceClass,
+} from "@stackframe/dashboard-ui-components";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -22,7 +26,7 @@ const DialogOverlay = forwardRefIfNeeded<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "stack-scope fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "stack-scope fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -42,7 +46,8 @@ const DialogContent = forwardRefIfNeeded<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "stack-scope fixed left-[50%] top-[50%] max-h-screen z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "stack-scope fixed left-[50%] top-[50%] max-h-screen z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] p-6 duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        designDialogGlassmorphicSurfaceClass,
         className
       )}
       {...props}
diff --git a/apps/dashboard/src/components/ui/dropdown-menu.tsx b/apps/dashboard/src/components/ui/dropdown-menu.tsx
index b200fed73d..062b91ad82 100644
--- a/apps/dashboard/src/components/ui/dropdown-menu.tsx
+++ b/apps/dashboard/src/components/ui/dropdown-menu.tsx
@@ -10,6 +10,9 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { Spinner } from "./spinner";
 
+const dropdownMenuItemHighlightClasses =
+  "rounded-lg transition-colors duration-150 hover:transition-none focus:bg-zinc-100 dark:focus:bg-accent dark:focus:text-accent-foreground data-[highlighted]:bg-zinc-100 dark:data-[highlighted]:bg-accent dark:data-[highlighted]:text-accent-foreground";
+
 const DropdownMenuContext = React.createContext<{
   open: boolean,
   setOpen: (open: boolean) => void,
@@ -61,7 +64,9 @@ const DropdownMenuSubTrigger = forwardRefIfNeeded<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "stack-scope flex cursor-default select-none items-center rounded-sm px-3 py-2 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "stack-scope flex cursor-default select-none items-center px-3 py-2 text-sm outline-none",
+      dropdownMenuItemHighlightClasses,
+      "data-[state=open]:bg-zinc-100 dark:data-[state=open]:bg-accent dark:data-[state=open]:text-accent-foreground",
       inset && "pl-9",
       className
     )}
@@ -143,10 +148,9 @@ const DropdownMenuItem = forwardRefIfNeeded<
   return <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "stack-scope relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none transition-all duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "hover:bg-foreground/[0.05] hover:text-accent-foreground",
-      "focus:bg-foreground/[0.05] focus:text-accent-foreground",
-      "data-[highlighted]:bg-foreground/[0.05] data-[highlighted]:text-accent-foreground",
+      "stack-scope relative flex cursor-default select-none items-center py-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
+      "hover:text-foreground",
       paddingClasses,
       className
     )}
@@ -176,7 +180,8 @@ const DropdownMenuCheckboxItem = forwardRefIfNeeded<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-2 pl-9 pr-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center py-2 pl-9 pr-3 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
       className
     )}
     checked={checked}
@@ -200,7 +205,8 @@ const DropdownMenuRadioItem = forwardRefIfNeeded<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-2 pl-9 pr-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center py-2 pl-9 pr-3 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
       className
     )}
     {...props}
diff --git a/apps/dashboard/src/components/ui/select.tsx b/apps/dashboard/src/components/ui/select.tsx
index 864a0c6ccc..47ff8e664b 100644
--- a/apps/dashboard/src/components/ui/select.tsx
+++ b/apps/dashboard/src/components/ui/select.tsx
@@ -129,10 +129,9 @@ const SelectItem = forwardRefIfNeeded<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none text-muted-foreground transition-all duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "hover:bg-foreground/[0.05] hover:text-foreground",
-      "focus:bg-foreground/[0.05] focus:text-foreground",
-      "data-[highlighted]:bg-foreground/[0.05] data-[highlighted]:text-foreground",
+      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none text-muted-foreground transition-colors duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-zinc-100 focus:text-foreground dark:focus:bg-accent dark:focus:text-accent-foreground",
+      "data-[highlighted]:bg-zinc-100 data-[highlighted]:text-foreground dark:data-[highlighted]:bg-accent dark:data-[highlighted]:text-accent-foreground",
       className
     )}
     {...props}
diff --git a/apps/dashboard/src/components/ui/switch.tsx b/apps/dashboard/src/components/ui/switch.tsx
index 50f3d64af2..fd1ea29074 100644
--- a/apps/dashboard/src/components/ui/switch.tsx
+++ b/apps/dashboard/src/components/ui/switch.tsx
@@ -17,7 +17,7 @@ const OriginalSwitch = forwardRefIfNeeded<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "stack-scope peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "stack-scope peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-zinc-200 dark:data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const OriginalSwitch = forwardRefIfNeeded<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-white dark:bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/apps/dashboard/src/components/ui/tabs.tsx b/apps/dashboard/src/components/ui/tabs.tsx
index 0bc7df5a5c..b5ec453fc4 100644
--- a/apps/dashboard/src/components/ui/tabs.tsx
+++ b/apps/dashboard/src/components/ui/tabs.tsx
@@ -15,7 +15,7 @@ const TabsList = forwardRefIfNeeded<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "stack-scope inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "stack-scope inline-flex h-9 items-center justify-center rounded-lg bg-black/[0.08] dark:bg-white/[0.04] p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -30,7 +30,7 @@ const TabsTrigger = forwardRefIfNeeded<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white dark:data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:ring-1 data-[state=active]:ring-black/[0.12] dark:data-[state=active]:ring-white/[0.06]",
       className
     )}
     {...props}
diff --git a/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx b/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
index 50a44144a8..bafa052acf 100644
--- a/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
+++ b/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
@@ -127,7 +127,11 @@ export default function VibeCodeLayout({
     });
   };
 
-  const lightModeChromeBackgroundClass = useOffWhiteLightChrome ? "bg-slate-50/90" : "bg-background/60";
+  const lightModeChromeBackgroundClass = useOffWhiteLightChrome ? "bg-white/90" : "bg-white/80";
+  const activeViewportButtonClass =
+    "bg-white text-foreground shadow-sm ring-1 ring-black/[0.06] dark:bg-background dark:ring-foreground/[0.06]";
+  const inactiveViewportButtonClass =
+    "text-muted-foreground hover:text-foreground hover:bg-zinc-100 dark:hover:bg-background/50";
 
   return (
     <TooltipProvider delayDuration={300}>
@@ -154,8 +158,8 @@ export default function VibeCodeLayout({
                       className={cn(
                         "p-1 rounded transition-all duration-150 hover:transition-none",
                         currentViewport === 'edit'
-                          ? "bg-background text-foreground shadow-sm"
-                          : "text-muted-foreground"
+                          ? activeViewportButtonClass
+                          : inactiveViewportButtonClass
                       )}
                       aria-label="Edit mode"
                     >
@@ -169,8 +173,8 @@ export default function VibeCodeLayout({
                   className={cn(
                     "p-1 rounded transition-all duration-150 hover:transition-none",
                     currentViewport === 'desktop'
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground"
+                      ? activeViewportButtonClass
+                      : inactiveViewportButtonClass
                   )}
                   aria-label="Desktop view"
                 >
@@ -181,8 +185,8 @@ export default function VibeCodeLayout({
                   className={cn(
                     "p-1 rounded transition-all duration-150 hover:transition-none",
                     currentViewport === 'tablet'
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground"
+                      ? activeViewportButtonClass
+                      : inactiveViewportButtonClass
                   )}
                   aria-label="Tablet view"
                 >
@@ -193,8 +197,8 @@ export default function VibeCodeLayout({
                   className={cn(
                     "p-1 rounded transition-all duration-150 hover:transition-none",
                     currentViewport === 'phone'
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground"
+                      ? activeViewportButtonClass
+                      : inactiveViewportButtonClass
                   )}
                   aria-label="Phone view"
                 >
@@ -379,8 +383,8 @@ export default function VibeCodeLayout({
                           className={cn(
                             "p-1.5 rounded-md transition-all duration-150 hover:transition-none",
                             currentViewport === 'edit'
-                              ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                              : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                              ? activeViewportButtonClass
+                              : inactiveViewportButtonClass
                           )}
                         >
                           <PencilSimple size={16} weight={currentViewport === 'edit' ? 'fill' : 'regular'} />
@@ -398,8 +402,8 @@ export default function VibeCodeLayout({
                       className={cn(
                         "p-1.5 rounded-md transition-all duration-150 hover:transition-none",
                         currentViewport === 'desktop'
-                          ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                          : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                          ? activeViewportButtonClass
+                          : inactiveViewportButtonClass
                       )}
                     >
                       <Laptop size={16} weight={currentViewport === 'desktop' ? 'fill' : 'regular'} />
@@ -414,8 +418,8 @@ export default function VibeCodeLayout({
                       className={cn(
                         "p-1.5 rounded-md transition-all duration-150 hover:transition-none",
                         currentViewport === 'tablet'
-                          ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                          : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                          ? activeViewportButtonClass
+                          : inactiveViewportButtonClass
                       )}
                     >
                       <DeviceTablet size={16} weight={currentViewport === 'tablet' ? 'fill' : 'regular'} />
@@ -430,8 +434,8 @@ export default function VibeCodeLayout({
                       className={cn(
                         "p-1.5 rounded-md transition-all duration-150 hover:transition-none",
                         currentViewport === 'phone'
-                          ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                          : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                          ? activeViewportButtonClass
+                          : inactiveViewportButtonClass
                       )}
                     >
                       <DeviceMobile size={16} weight={currentViewport === 'phone' ? 'fill' : 'regular'} />
diff --git a/packages/dashboard-ui-components/src/components/alert.tsx b/packages/dashboard-ui-components/src/components/alert.tsx
index c6c0b461df..52a26947b2 100644
--- a/packages/dashboard-ui-components/src/components/alert.tsx
+++ b/packages/dashboard-ui-components/src/components/alert.tsx
@@ -23,7 +23,7 @@ const variantStyles = new Map<DesignAlertVariant, VariantStyles>([
   [
     "default",
     {
-      container: "bg-background border-border",
+      container: "border-black/[0.08] bg-white/90 ring-1 ring-black/[0.06] dark:border-border dark:bg-background dark:ring-0",
       icon: "text-foreground",
       title: "text-foreground",
     },
@@ -55,9 +55,9 @@ const variantStyles = new Map<DesignAlertVariant, VariantStyles>([
   [
     "info",
     {
-      container: "bg-blue-500/[0.06] border-blue-500/30",
-      icon: "text-blue-500",
-      title: "text-blue-600 dark:text-blue-400",
+      container: "border-blue-500/20 bg-blue-50/90 ring-1 ring-blue-500/10 dark:border-blue-500/30 dark:bg-blue-500/[0.06] dark:ring-0",
+      icon: "text-blue-600 dark:text-blue-400",
+      title: "text-blue-700 dark:text-blue-400",
     },
   ],
 ]);
diff --git a/packages/dashboard-ui-components/src/components/badge.tsx b/packages/dashboard-ui-components/src/components/badge.tsx
index 73bd6d3bac..83731dc252 100644
--- a/packages/dashboard-ui-components/src/components/badge.tsx
+++ b/packages/dashboard-ui-components/src/components/badge.tsx
@@ -94,7 +94,7 @@ export function DesignBadge({
   return (
     <div
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full font-medium",
+        "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none",
         colorClasses,
         sizeClasses
       )}
diff --git a/packages/dashboard-ui-components/src/components/button.tsx b/packages/dashboard-ui-components/src/components/button.tsx
index e60483eaa8..67ec8017c9 100644
--- a/packages/dashboard-ui-components/src/components/button.tsx
+++ b/packages/dashboard-ui-components/src/components/button.tsx
@@ -17,10 +17,10 @@ const designButtonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-white/85 dark:bg-background hover:bg-zinc-50 dark:hover:bg-accent dark:hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-white dark:bg-secondary text-secondary-foreground hover:bg-zinc-50 dark:hover:bg-secondary/80",
+        ghost: "hover:bg-zinc-100 dark:hover:bg-accent dark:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         plain: "",
       },
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.test.ts b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.test.ts
new file mode 100644
index 0000000000..1338d59661
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { fitColumnsToContainer } from "./data-grid-sizing";
+import type { DataGridColumnDef } from "./types";
+
+type Row = { id: string };
+
+describe("fitColumnsToContainer", () => {
+  const columns: DataGridColumnDef<Row>[] = [
+    { id: "name", header: "Name", width: 320, minWidth: 80, type: "string", accessor: () => "" },
+    { id: "email", header: "Email", width: 420, minWidth: 80, type: "string", accessor: () => "" },
+  ];
+
+  it("shrinks fixed columns to fit a narrow container", () => {
+    const sizes = { name: 320, email: 420 };
+    fitColumnsToContainer(sizes, columns, 320, 0);
+    expect(sizes.name + sizes.email).toBe(320);
+    expect(sizes.name).toBeGreaterThanOrEqual(80);
+    expect(sizes.email).toBeGreaterThanOrEqual(80);
+  });
+
+  it("does not treat total column width as chrome width", () => {
+    const sizes = { name: 200, email: 200 };
+    const buggySizes = { name: 200, email: 200 };
+    fitColumnsToContainer(sizes, columns, 500, 0);
+    // Buggy call passed pre-summed column total as chrome, double-counting widths.
+    fitColumnsToContainer(buggySizes, columns, 500, 400);
+    expect(sizes.name + sizes.email).toBe(400);
+    expect(buggySizes.name + buggySizes.email).toBeLessThan(400);
+  });
+
+  it("grows flex columns when the container is wider than the base total", () => {
+    const flexColumns: DataGridColumnDef<Row>[] = [
+      { id: "name", header: "Name", width: 100, minWidth: 80, flex: 1, type: "string", accessor: () => "" },
+      { id: "email", header: "Email", width: 100, minWidth: 80, type: "string", accessor: () => "" },
+    ];
+    const sizes = { name: 100, email: 100 };
+    fitColumnsToContainer(sizes, flexColumns, 400, 0);
+    expect(sizes.name + sizes.email).toBe(400);
+    expect(sizes.name).toBeGreaterThan(100);
+  });
+});
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts
index 9db4f8f23b..21a4edf769 100644
--- a/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts
@@ -49,3 +49,79 @@ export function getEffectiveMaxWidth<TRow>(col: DataGridColumnDef<TRow>): number
 export function clampColumnWidth<TRow>(col: DataGridColumnDef<TRow>, width: number): number {
   return Math.max(getEffectiveMinWidth(col), Math.min(getEffectiveMaxWidth(col), width));
 }
+
+function distributeFlexWidths<TRow>(
+  sizes: Record<string, number>,
+  visibleColumns: readonly DataGridColumnDef<TRow>[],
+  available: number,
+): void {
+  const flexCols = visibleColumns.filter((c) => c.flex != null && c.flex > 0);
+  if (flexCols.length === 0 || available <= 0) return;
+  const totalFlex = flexCols.reduce((acc, c) => acc + (c.flex ?? 0), 0);
+  let remaining = available;
+  flexCols.forEach((col, i) => {
+    const isLast = i === flexCols.length - 1;
+    const share = isLast
+      ? remaining
+      : Math.floor(available * ((col.flex ?? 0) / totalFlex));
+    const max = getEffectiveMaxWidth(col);
+    const add = Math.max(0, Math.min(share, max - sizes[col.id]));
+    sizes[col.id] += add;
+    remaining -= add;
+  });
+}
+
+/** Grow flex columns when there is extra space; shrink flex (then fixed) columns when overflowing. */
+export function fitColumnsToContainer<TRow>(
+  sizes: Record<string, number>,
+  visibleColumns: readonly DataGridColumnDef<TRow>[],
+  containerWidth: number,
+  chromeWidth: number,
+): void {
+  const getTotal = () =>
+    chromeWidth + visibleColumns.reduce((sum, col) => sum + sizes[col.id], 0);
+
+  if (containerWidth <= 0) return;
+
+  const total = getTotal();
+  if (total <= containerWidth) {
+    distributeFlexWidths(sizes, visibleColumns, containerWidth - total);
+    return;
+  }
+
+  let overflow = total - containerWidth;
+  const flexCols = visibleColumns.filter((c) => (c.flex ?? 0) > 0);
+
+  for (const col of flexCols) {
+    if (overflow <= 0) break;
+    const min = getEffectiveMinWidth(col);
+    const reducible = sizes[col.id] - min;
+    if (reducible <= 0) continue;
+    const delta = Math.min(overflow, reducible);
+    sizes[col.id] -= delta;
+    overflow -= delta;
+  }
+
+  if (overflow <= 0) return;
+
+  const shrinkable = visibleColumns
+    .map((col) => ({
+      col,
+      reducible: sizes[col.id] - getEffectiveMinWidth(col),
+    }))
+    .filter((entry) => entry.reducible > 0);
+
+  const totalReducible = shrinkable.reduce((sum, entry) => sum + entry.reducible, 0);
+  if (totalReducible <= 0) return;
+
+  let remaining = overflow;
+  shrinkable.forEach((entry, index) => {
+    const isLast = index === shrinkable.length - 1;
+    const share = isLast
+      ? remaining
+      : Math.floor(overflow * (entry.reducible / totalReducible));
+    const delta = Math.min(remaining, share, entry.reducible);
+    sizes[entry.col.id] -= delta;
+    remaining -= delta;
+  });
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx
index f0ba55ed98..e3975843ad 100644
--- a/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx
@@ -84,16 +84,16 @@ function QuickSearch({
 }) {
   return (
     <div className="relative flex min-w-0 flex-1 items-center sm:flex-initial">
-      <MagnifyingGlass className="absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
+      <MagnifyingGlass className="absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none" />
       <input
         type="text"
         className={cn(
           "h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs",
-          "bg-background",
-          "border border-black/[0.08] dark:border-white/[0.08]",
-          "placeholder:text-muted-foreground/40",
+          "border border-black/[0.08] dark:border-white/[0.06]",
+          "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
+          "placeholder:text-muted-foreground/50",
           "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
-          "transition-all duration-150",
+          "transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]",
         )}
         placeholder={placeholder}
         value={value}
@@ -234,13 +234,13 @@ function ColumnManager<TRow>({
             <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
               {strings.dateFormat}
             </span>
-            <div className="inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5">
+            <div className="inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]">
               <button
                 className={cn(
-                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
+                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
                   dateDisplay === "relative"
-                    ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                    : "text-muted-foreground hover:text-foreground",
+                    ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
+                    : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]",
                 )}
                 onClick={() => onDateDisplayChange("relative")}
               >
@@ -248,10 +248,10 @@ function ColumnManager<TRow>({
               </button>
               <button
                 className={cn(
-                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
+                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
                   dateDisplay === "absolute"
-                    ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
-                    : "text-muted-foreground hover:text-foreground",
+                    ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
+                    : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]",
                 )}
                 onClick={() => onDateDisplayChange("absolute")}
               >
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
index f973ef70f7..308355a3c6 100644
--- a/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
@@ -101,8 +101,43 @@ class MockIntersectionObserver implements IntersectionObserver {
 }
 
 class MockResizeObserver implements ResizeObserver {
+  private readonly callback: ResizeObserverCallback;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
   disconnect() {}
-  observe() {}
+  observe(target: Element) {
+    const el = target instanceof HTMLElement ? target : null;
+    const parentWidth = el?.parentElement instanceof HTMLElement ? el.parentElement.clientWidth : 0;
+    const width = (el?.clientWidth ?? 0) > 0 ? (el?.clientWidth ?? 320) : parentWidth > 0 ? parentWidth : 320;
+    const height = (el?.clientHeight ?? 0) > 0 ? (el?.clientHeight ?? 400) : 400;
+    this.callback(
+      [
+        {
+          target,
+          contentRect: {
+            x: 0,
+            y: 0,
+            width,
+            height,
+            top: 0,
+            left: 0,
+            right: width,
+            bottom: height,
+            toJSON() {
+              return this;
+            },
+          } as DOMRectReadOnly,
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: [],
+        },
+      ],
+      this,
+    );
+  }
   unobserve() {}
 }
 
@@ -307,6 +342,12 @@ describe("DataGrid controlled callbacks", () => {
 describe("DataGrid horizontal scrolling", () => {
   beforeEach(() => {
     vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+      configurable: true,
+      get() {
+        return 320;
+      },
+    });
     vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
       function getBoundingClientRect() {
         return {
@@ -344,13 +385,17 @@ describe("DataGrid horizontal scrolling", () => {
     vi.unstubAllGlobals();
   });
 
-  it("sizes the sticky clipping layer to the full row width", () => {
+  it("does not keep the full unscaled column width in a narrow container", async () => {
     const { container } = render(<WideDataGridHarness />);
 
     const rowsClip = container.querySelector("[data-data-grid-rows-clip]");
 
     expect(rowsClip).toBeInstanceOf(HTMLElement);
-    expect((rowsClip as HTMLElement).style.minWidth).toBe("740px");
+    await waitFor(() => {
+      const widthPx = Number.parseInt((rowsClip as HTMLElement).style.minWidth, 10);
+      expect(widthPx).toBeLessThan(740);
+      expect(widthPx).toBeLessThanOrEqual(320);
+    });
   });
 
   it("lets the columns popover escape the sticky toolbar bounds", () => {
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx
index 6dc55f9de6..54ec583832 100644
--- a/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx
@@ -36,7 +36,7 @@ import React, {
 } from "react";
 
 import { DesignSkeleton } from "../skeleton";
-import { DEFAULT_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing";
+import { DEFAULT_COL_WIDTH, clampColumnWidth, fitColumnsToContainer, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing";
 import { DataGridToolbar } from "./data-grid-toolbar";
 import { exportToCsv, formatGridDate, resolveColumnValue } from "./state";
 import { resolveDataGridStrings } from "./strings";
@@ -104,29 +104,6 @@ function resolveUpdater<T>(updater: Updater<T>, current: T): T {
   return typeof updater === "function" ? (updater as (old: T) => T)(current) : updater;
 }
 
-// ─── Flex column width distribution ──────────────────────────────────
-
-function distributeFlexWidths<TRow>(
-  sizes: Record<string, number>,
-  visibleColumns: readonly DataGridColumnDef<TRow>[],
-  available: number,
-): void {
-  const flexCols = visibleColumns.filter((c) => c.flex != null && c.flex > 0);
-  if (flexCols.length === 0 || available <= 0) return;
-  const totalFlex = flexCols.reduce((acc, c) => acc + (c.flex ?? 0), 0);
-  let remaining = available;
-  flexCols.forEach((col, i) => {
-    const isLast = i === flexCols.length - 1;
-    const share = isLast
-      ? remaining
-      : Math.floor(available * ((col.flex ?? 0) / totalFlex));
-    const max = col.maxWidth ?? Infinity;
-    const add = Math.max(0, Math.min(share, max - sizes[col.id]));
-    sizes[col.id] += add;
-    remaining -= add;
-  });
-}
-
 // ─── Selection logic (with shift-range anchor) ───────────────────────
 
 type SelectionInput = {
@@ -512,9 +489,10 @@ function DefaultFooter<TRow>({
             <span>{strings.rowsPerPage}</span>
             <select
               className={cn(
-                "h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.08] bg-background px-1.5",
+                "h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.06] px-1.5",
+                "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
                 "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
-                "cursor-pointer",
+                "cursor-pointer transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]",
               )}
               value={state.pagination.pageSize}
               onChange={(e) => setPageSize(Number(e.target.value))}
@@ -798,12 +776,22 @@ export function DataGrid<TRow>(props: DataGridProps<TRow>) {
     const grid = gridRef.current;
     const scroller = scrollContainerRef.current;
     if (!grid) return;
-    const update = () => {
-      const w = scroller?.clientWidth ?? grid.clientWidth;
-      if (w > 0) setContainerWidth(w);
+    const update = (entries?: ResizeObserverEntry[]) => {
+      let measured = 0;
+      if (entries != null) {
+        for (const entry of entries) {
+          measured = Math.max(measured, entry.contentRect.width);
+        }
+      }
+      if (measured <= 0) {
+        const scrollerWidth = scroller?.clientWidth ?? 0;
+        const gridWidth = grid.clientWidth;
+        measured = scrollerWidth > 0 ? scrollerWidth : gridWidth;
+      }
+      if (measured > 0) setContainerWidth(measured);
     };
     update();
-    const observer = new ResizeObserver(update);
+    const observer = new ResizeObserver((entries) => update(entries));
     observer.observe(grid);
     if (scroller) observer.observe(scroller);
     return () => observer.disconnect();
@@ -814,7 +802,7 @@ export function DataGrid<TRow>(props: DataGridProps<TRow>) {
   const columnSizingInfo = table.getState().columnSizingInfo;
   const columnSizes = useMemo<Record<string, number>>(() => {
     const sizes: Record<string, number> = {};
-    let baseTotal = selectionMode !== "none" ? 44 : 0;
+    const selectionChromeWidth = selectionMode !== "none" ? 44 : 0;
     const resizingId = columnSizingInfo.isResizingColumn || null;
     const deltaOffset = columnSizingInfo.deltaOffset ?? 0;
     for (const col of visibleColumns) {
@@ -824,9 +812,8 @@ export function DataGrid<TRow>(props: DataGridProps<TRow>) {
         ? clampColumnWidth(col, baseSize + deltaOffset)
         : baseSize;
       sizes[col.id] = liveSize;
-      baseTotal += liveSize;
     }
-    distributeFlexWidths(sizes, visibleColumns, containerWidth - baseTotal);
+    fitColumnsToContainer(sizes, visibleColumns, containerWidth, selectionChromeWidth);
     return sizes;
   }, [visibleColumns, table, columnSizingInfo, state.columnWidths, containerWidth, selectionMode]);
 
diff --git a/packages/dashboard-ui-components/src/components/dialog.tsx b/packages/dashboard-ui-components/src/components/dialog.tsx
index b7dc51782f..4a2ca68411 100644
--- a/packages/dashboard-ui-components/src/components/dialog.tsx
+++ b/packages/dashboard-ui-components/src/components/dialog.tsx
@@ -44,14 +44,12 @@ const dialogSizeClasses = new Map<DesignDialogSize, string>([
 ]);
 
 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"],
+  ["glassmorphic", "border-0 sm:rounded-2xl bg-white/95 backdrop-blur-2xl ring-1 ring-black/[0.08] 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 border-black/[0.08] bg-white shadow-lg sm:rounded-lg dark:border-white/[0.06] dark:bg-background"],
 ]);
 
-const dialogOverlayClasses = new Map<DesignDialogVariant, string | undefined>([
-  ["glassmorphic", "bg-black/50 backdrop-blur-sm"],
-  ["plain", undefined],
-]);
+export const designDialogGlassmorphicSurfaceClass = dialogSurfaceClasses.get("glassmorphic") ?? "";
+export const designDialogGlassmorphicOverlayClass = "bg-black/50 backdrop-blur-sm";
 
 type DesignDialogIcon = React.ElementType<{ className?: string }>;
 
@@ -75,6 +73,10 @@ export type DesignDialogProps = {
   bodyClassName?: string,
   footerClassName?: string,
   children?: React.ReactNode,
+  contentProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof DialogContent>,
+    "className" | "children" | "overlayProps" | "noCloseButton"
+  >,
 } & DesignDialogRootProps;
 
 /**
@@ -98,12 +100,16 @@ export function DesignDialog({
   headerClassName,
   bodyClassName,
   footerClassName,
+  contentProps,
   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 resolvedOverlayClass = cn(
+    variant === "glassmorphic" ? designDialogGlassmorphicOverlayClass : undefined,
+    overlayClassName,
+  );
   const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
   const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
   // Use toArray + filter(Boolean) instead of Children.count so that
@@ -129,23 +135,28 @@ export function DesignDialog({
 
       <DialogContent
         className={cn(
-          "gap-0 p-0 overflow-hidden",
+          "gap-0 h-auto max-h-[min(100dvh-2rem,36rem)] overflow-hidden p-0",
           resolvedSizeClass,
           resolvedSurfaceClass,
           className
         )}
         overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}
         noCloseButton={hideTopCloseButton}
+        {...contentProps}
       >
         {needsAccessibleTitleFallback && (
           <DialogTitle className="sr-only">Dialog</DialogTitle>
         )}
         {shouldRenderHeader && (
-          <DialogHeader className={cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
+          <DialogHeader className={cn("shrink-0 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")}>
+                  <div className={cn(
+                    "flex gap-3",
+                    description != null ? "items-start" : "items-center",
+                    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" />
@@ -154,7 +165,7 @@ export function DesignDialog({
                     {(title != null || description != null) && (
                       <div className="flex-1 min-w-0 space-y-1">
                         {title != null ? (
-                          <DialogTitle className="text-base">
+                          <DialogTitle className="text-base font-semibold leading-snug">
                             {title}
                           </DialogTitle>
                         ) : null}
@@ -181,7 +192,7 @@ export function DesignDialog({
         {shouldRenderBody && (
           <DialogBody
             className={cn(
-              "mx-0 my-0 w-auto",
+              "mx-0 my-0 w-auto min-h-0 overflow-y-auto",
               noBodyPadding ? "px-0 py-0" : "px-6 py-4",
               bodyClassName
             )}
@@ -191,7 +202,7 @@ export function DesignDialog({
         )}
 
         {footer != null ? (
-          <DialogFooter className={cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
+          <DialogFooter className={cn("shrink-0 px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
             {footer}
           </DialogFooter>
         ) : null}
diff --git a/packages/dashboard-ui-components/src/components/input.tsx b/packages/dashboard-ui-components/src/components/input.tsx
index 3b61bc5297..7dcd67311e 100644
--- a/packages/dashboard-ui-components/src/components/input.tsx
+++ b/packages/dashboard-ui-components/src/components/input.tsx
@@ -13,23 +13,31 @@ export type DesignInputProps = {
 
 export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(
   ({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
-    const sizeClasses = size === "sm"
-      ? "h-7 px-2 text-xs"
+    const heightTextClasses = size === "sm"
+      ? "h-7 text-xs"
       : size === "lg"
-        ? "h-10 px-4 text-sm"
-        : "h-9 px-3 text-sm";
+        ? "h-10 text-sm"
+        : "h-9 text-sm";
+    const horizontalPaddingClasses = size === "sm" ? "px-2" : size === "lg" ? "px-4" : "px-3";
     const baseClasses = cn(
       "stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
       "file:border-0 file:bg-transparent file:text-sm file:font-medium",
       "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]",
-      sizeClasses
+      heightTextClasses
     );
 
+    const leadingIconClasses = size === "sm"
+      ? "left-2.5 [&_svg]:size-3"
+      : size === "lg"
+        ? "left-3.5 [&_svg]:size-4"
+        : "left-3 [&_svg]:size-3.5";
+    const leadingIconPadding = size === "sm" ? "pl-8" : size === "lg" ? "pl-10" : "pl-9";
+
     if (prefixItem) {
       return (
-        <div className="flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]">
+        <div className="flex w-full flex-row items-center overflow-hidden rounded-xl border border-black/[0.08] bg-white/80 shadow-sm ring-1 ring-black/[0.08] transition-all duration-150 hover:bg-white hover:transition-none dark:border-white/[0.06] dark:bg-foreground/[0.03] dark:ring-white/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1] dark:hover:bg-foreground/[0.06]">
           <div className={cn(
             "flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]",
             size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"
@@ -43,7 +51,8 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
               "file:border-0 file:bg-transparent file:text-sm file:font-medium",
               "placeholder:text-muted-foreground/50 focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              sizeClasses,
+              heightTextClasses,
+              horizontalPaddingClasses,
               "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
               className
             )}
@@ -56,13 +65,16 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
 
     if (leadingIcon) {
       return (
-        <div className="relative flex flex-row items-center flex-1">
-          <div className="pointer-events-none absolute left-2.5 flex items-center text-muted-foreground">
+        <div className={cn("relative w-full", className)}>
+          <div className={cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:block",
+            leadingIconClasses,
+          )}>
             {leadingIcon}
           </div>
           <input
             type={type}
-            className={cn(baseClasses, "pl-8", className)}
+            className={cn(baseClasses, leadingIconPadding)}
             ref={ref}
             {...props}
           />
@@ -71,10 +83,10 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
     }
 
     return (
-      <div className="flex flex-row items-center flex-1">
+      <div className="w-full">
         <input
           type={type}
-          className={cn(baseClasses, className)}
+          className={cn(baseClasses, horizontalPaddingClasses, className)}
           ref={ref}
           {...props}
         />
diff --git a/packages/dashboard-ui-components/src/components/pill-toggle.tsx b/packages/dashboard-ui-components/src/components/pill-toggle.tsx
index 0abae2b2e7..6691e31b85 100644
--- a/packages/dashboard-ui-components/src/components/pill-toggle.tsx
+++ b/packages/dashboard-ui-components/src/components/pill-toggle.tsx
@@ -105,7 +105,7 @@ export function DesignPillToggle({
               sizeClass.button,
               isActive
                 ? cn(
-                  "bg-background text-foreground shadow-sm ring-1",
+                  "bg-white dark:bg-background text-foreground shadow-sm ring-1",
                   glassmorphic
                     ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20"
                     : activeRingClass
diff --git a/packages/dashboard-ui-components/src/components/tabs.tsx b/packages/dashboard-ui-components/src/components/tabs.tsx
index 15cced2410..ed11f90cc8 100644
--- a/packages/dashboard-ui-components/src/components/tabs.tsx
+++ b/packages/dashboard-ui-components/src/components/tabs.tsx
@@ -135,7 +135,7 @@ export function DesignCategoryTabs({
       className={cn(
         "flex w-full min-w-0 items-center gap-2",
         glassmorphic
-          ? "rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm"
+          ? "rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]"
           : "border-b border-gray-300 dark:border-gray-800",
         className
       )}
@@ -164,9 +164,12 @@ export function DesignCategoryTabs({
                 isActive
                   ? cn(
                     gradientClass.activeText,
-                    glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]"
+                    glassmorphic && "bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
+                  )
+                  : cn(
+                    "text-gray-700 dark:text-gray-400",
+                    glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]",
                   )
-                  : "text-gray-700 dark:text-gray-400"
               )}
             >
               {loadingCategoryId === category.id && (
diff --git a/packages/dashboard-ui-components/src/index.ts b/packages/dashboard-ui-components/src/index.ts
index 4e3d82bf19..cf8f5d36d5 100644
--- a/packages/dashboard-ui-components/src/index.ts
+++ b/packages/dashboard-ui-components/src/index.ts
@@ -20,6 +20,8 @@ export {
   DesignDialogRoot,
   DesignDialogTitle,
   DesignDialogTrigger,
+  designDialogGlassmorphicOverlayClass,
+  designDialogGlassmorphicSurfaceClass,
 } from "./components/dialog";
 export type { DesignDialogProps, DesignDialogSize, DesignDialogVariant } from "./components/dialog";
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 970a64a2f3..0e2b2e3216 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -388,6 +388,9 @@ importers:
       '@monaco-editor/react':
         specifier: 4.7.0
         version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@oslojs/otp':
+        specifier: ^1.1.0
+        version: 1.1.0
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -493,6 +496,9 @@ importers:
       '@stackframe/stack-shared':
         specifier: workspace:*
         version: link:../../packages/stack-shared
+      '@stackframe/stack-ui':
+        specifier: workspace:*
+        version: link:../../packages/stack-ui
       '@stripe/connect-js':
         specifier: ^3.3.27
         version: 3.3.27
@@ -568,6 +574,9 @@ importers:
       posthog-js:
         specifier: ^1.336.1
         version: 1.336.1
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
       react:
         specifier: 19.2.3
         version: 19.2.3
@@ -577,6 +586,9 @@ importers:
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      react-easy-crop:
+        specifier: ^5.5.6
+        version: 5.5.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-globe.gl:
         specifier: ^2.28.2
         version: 2.28.2(react@19.2.3)
@@ -638,6 +650,9 @@ importers:
       '@types/node':
         specifier: 20.17.6
         version: 20.17.6
+      '@types/qrcode':
+        specifier: ^1.5.5
+        version: 1.5.5
       '@types/react':
         specifier: ^18.2.0
         version: 18.3.12