diff --git a/apps/desktop/e2e/smoke.spec.ts b/apps/desktop/e2e/smoke.spec.ts
index 7867c67d108..3d2f6e5bdb7 100644
--- a/apps/desktop/e2e/smoke.spec.ts
+++ b/apps/desktop/e2e/smoke.spec.ts
@@ -178,23 +178,20 @@ test.describe('desktop shell smoke', () => {
     const window = await app.firstWindow()
     await window.waitForSelector('#retry', { timeout: 30_000 })
     expect(window.url()).toMatch(/^sim-shell:\/\/pages\/offline\.html\?/)
-    await expect(window.getByRole('img', { name: 'Sim', exact: true })).toBeVisible()
-    await expect(window.getByRole('img', { name: 'Sim', exact: true })).toHaveAttribute(
-      'aria-label',
-      'Sim'
-    )
+    const home = window.getByRole('link', { name: 'Home', exact: true })
+    await expect(home).toBeVisible()
+    await expect(home).toHaveAttribute('href', 'https://sim.ai')
     await expect(window.locator('#title')).toHaveText('Can’t connect to Sim')
-    // The recovery path for a self-hosted shell pointed at a server it cannot
-    // reach. Exercised end to end here because it is the only coverage of the
-    // `server:` local-page IPC gate: the bundled page reads the configuration
-    // over the real preload bridge, and status.sim.ai is withheld because this
-    // origin is not one of Sim's own. `toBeHidden` is load-bearing — the page's
-    // own `button { display: inline-flex }` outranks the UA `[hidden]` rule, so
-    // the attribute alone does not hide it.
+    // The real preload bridge must retain server recovery while hiding cloud-only status.
     await expect(window.locator('#server')).toBeVisible()
     await expect(window.locator('#status')).toBeHidden()
     await expect
-      .poll(() => window.evaluate(() => document.fonts.check('16px "Season Sans"')))
+      .poll(() =>
+        window.evaluate(async () => {
+          const fonts = await document.fonts.load('14px "Sim Auth Geist"')
+          return fonts.length > 0 && fonts.every((font) => font.status === 'loaded')
+        })
+      )
       .toBe(true)
     await expect(window.locator('#detail')).toHaveAttribute('role', 'status')
   })
@@ -205,6 +202,10 @@ test.describe('desktop shell smoke', () => {
     const window = await app.firstWindow()
     await expect(window.locator('#server')).toBeVisible()
     await expect(window.locator('html')).toHaveAttribute('data-sim-desktop-title-bar', 'inset')
+    const titlebar = window.locator('[data-auth-titlebar]')
+    await expect
+      .poll(() => titlebar.evaluate((element) => element.getBoundingClientRect().height))
+      .toBeGreaterThanOrEqual(38)
     await app.evaluate(({ BrowserWindow }) => {
       BrowserWindow.getAllWindows()[0].setFullScreen(true)
     })
@@ -212,11 +213,14 @@ test.describe('desktop shell smoke', () => {
     await window.reload()
     await expect(window.locator('#server')).toBeVisible()
     await expect(window.locator('html')).toHaveAttribute('data-sim-desktop-title-bar', 'fullscreen')
-    await expect(window.locator('.desktop-title-bar-page')).toHaveCSS('padding-top', '0px')
+    await expect(titlebar).toHaveCSS('height', '0px')
     await app.evaluate(({ BrowserWindow }) => {
       BrowserWindow.getAllWindows()[0].setFullScreen(false)
     })
     await expect(window.locator('html')).toHaveAttribute('data-sim-desktop-title-bar', 'inset')
+    await expect
+      .poll(() => titlebar.evaluate((element) => element.getBoundingClientRect().height))
+      .toBeGreaterThanOrEqual(38)
   })
 
   test('bundled dialogs follow the app theme independently of the system theme', async () => {
@@ -310,7 +314,7 @@ test.describe('desktop shell smoke', () => {
   // Its page, the pre-filled value (which crosses the local-page IPC gate) and
   // Escape are asserted together because the packaged build once opened it as
   // a blank sheet with no way out.
-  test('the offline server picker renders EMCN controls and handles validation and dismissal', async () => {
+  test('the offline server picker handles validation and dismissal', async () => {
     const testInfo = test.info()
     app = await launchApp('http://127.0.0.1:1')
     const window = await app.firstWindow()
@@ -333,17 +337,21 @@ test.describe('desktop shell smoke', () => {
       .toBe(true)
     await picker.getByLabel('Server URL').fill('http://example.com')
     await picker.getByLabel('Server URL').press('Enter')
-    await expect(picker.getByRole('alert')).toBeVisible()
+    await expect(picker.locator('#server-origin-errors')).toBeVisible()
+    await expect(picker.getByLabel('Server URL')).toHaveAccessibleDescription(
+      /Server URL must use HTTPS/
+    )
     await expect(picker.getByLabel('Server URL')).toHaveAttribute('aria-invalid', 'true')
     await picker.getByLabel('Server URL').fill('http://127.0.0.1:1')
-    await expect(picker.getByRole('alert')).toHaveCount(0)
+    await expect(picker.locator('#server-origin-errors')).toHaveCount(0)
+    await expect(picker.getByLabel('Server URL')).not.toHaveAttribute('aria-invalid', 'true')
     await picker.getByRole('button', { name: 'Connect', exact: true }).click()
     await expect(picker.getByRole('status')).toHaveText('Already connected to this server.')
     await expect
       .poll(() =>
         picker
-          .locator('[data-chip-modal-body]')
-          .evaluate((element) => element.scrollHeight <= element.clientHeight)
+          .getByRole('dialog')
+          .evaluate((element) => element.scrollHeight <= globalThis.innerHeight)
       )
       .toBe(true)
     await picker.emulateMedia({ colorScheme: 'light' })
@@ -352,7 +360,7 @@ test.describe('desktop shell smoke', () => {
       animations: 'disabled',
     })
     await picker.emulateMedia({ colorScheme: 'dark' })
-    await expect(picker.locator('html')).toHaveClass('dark')
+    await expect(picker.locator('[data-auth-root]')).toHaveCSS('color-scheme', 'light')
     await picker.screenshot({
       path: testInfo.outputPath('server-modal-dark.png'),
       animations: 'disabled',
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 303f47a78f4..92826c3aec4 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -43,7 +43,8 @@
     "electron-updater": "6.8.9",
     "micromatch": "4.0.8",
     "safe-regex2": "5.1.2",
-    "pdf-lib": "1.17.1"
+    "pdf-lib": "1.17.1",
+    "@sim/auth-ui": "workspace:*"
   },
   "devDependencies": {
     "@electron/fuses": "1.8.0",
diff --git a/apps/desktop/scripts/build.ts b/apps/desktop/scripts/build.ts
index c87f64c0e00..73dff48279f 100644
--- a/apps/desktop/scripts/build.ts
+++ b/apps/desktop/scripts/build.ts
@@ -108,14 +108,17 @@ const renderer: BuildOptions = {
     {
       name: 'desktop-tailwind',
       setup(builder) {
-        builder.onLoad({ filter: /shell\.css$/ }, async ({ path }) => {
+        builder.onLoad({ filter: /(?:shell|utilities|styles\.module)\.css$/ }, async ({ path }) => {
           const config = await loadPostcssConfig({}, resolve('../sim'))
           const result = await postcss(config.plugins).process(readFileSync(path, 'utf8'), {
             from: path,
           })
           return {
-            contents: result.css,
-            loader: 'css',
+            contents: result.css.replace(
+              /url\(["']?\.\/assets\/(geist[^)"']+)["']?\)/g,
+              'url(./$1)'
+            ),
+            loader: path.endsWith('.module.css') ? 'local-css' : 'css',
             resolveDir: dirname(path),
             watchFiles: result.messages.flatMap((message) =>
               message.type === 'dependency' ? [message.file as string] : []
@@ -130,6 +133,10 @@ const renderer: BuildOptions = {
 async function run(): Promise<void> {
   execFileSync(process.execPath, ['run', 'scripts/build-native.ts'], { stdio: 'inherit' })
   compileComputerUse()
+  mkdirSync('dist/renderer', { recursive: true })
+  for (const font of ['geist-variable.woff2', 'geist-mono-variable.woff2']) {
+    cpSync(resolve('../../packages/auth-ui/src/assets', font), join('dist/renderer', font))
+  }
   if (watch) {
     const { context } = await import('esbuild')
     const rendererCtx = await context(renderer)
diff --git a/apps/desktop/src/main/local-pages.ts b/apps/desktop/src/main/local-pages.ts
index 42e80f6b2ad..1d871eacef6 100644
--- a/apps/desktop/src/main/local-pages.ts
+++ b/apps/desktop/src/main/local-pages.ts
@@ -37,6 +37,8 @@ const LOCAL_PAGES: ReadonlySet<string> = new Set<LocalPage>(['offline.html', 'se
 const SERVABLE_FILES: ReadonlySet<string> = new Set([
   ...LOCAL_PAGES,
   'SeasonSansUprightsVF.woff2',
+  'geist-variable.woff2',
+  'geist-mono-variable.woff2',
   'server.js',
   'server.css',
   'offline.js',
diff --git a/apps/desktop/src/renderer/auth.css b/apps/desktop/src/renderer/auth.css
new file mode 100644
index 00000000000..6b42c572ca9
--- /dev/null
+++ b/apps/desktop/src/renderer/auth.css
@@ -0,0 +1,15 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: white;
+  color-scheme: light;
+}
+
+html {
+  --desktop-title-bar-height: 0px;
+}
+
+html[data-sim-desktop-title-bar="inset"] {
+  --desktop-title-bar-height: max(env(titlebar-area-height, 38px), 38px);
+}
diff --git a/apps/desktop/src/renderer/offline/index.tsx b/apps/desktop/src/renderer/offline/index.tsx
index 2797d496129..45141ccba49 100644
--- a/apps/desktop/src/renderer/offline/index.tsx
+++ b/apps/desktop/src/renderer/offline/index.tsx
@@ -1,9 +1,15 @@
 import { useState } from 'react'
+import {
+  AuthRoot,
+  AuthShellView,
+  AuthTextLink,
+  AuthWordmark,
+  AuthButton as Chip,
+  AuthStatusContent as StatusPageContent,
+} from '@sim/auth-ui'
 import { observeDesktopTitleBar, type SimDesktopApi } from '@sim/desktop-bridge'
-import { Chip, LogoPage, SimWordmark, StatusPageContent } from '@sim/emcn'
 import { createRoot } from 'react-dom/client'
-import { initializeShellPage } from '@/renderer/shell'
-import '@/renderer/shell.css'
+import '@/renderer/auth.css'
 
 const ERROR_COPY = {
   offline: {
@@ -57,51 +63,55 @@ function OfflinePage({ isSimCloud }: OfflinePageProps) {
   }
 
   return (
-    <LogoPage
-      center
-      className='desktop-title-bar-page'
-      titleBar={
-        <div aria-hidden className='desktop-login-window-drag-region desktop-window-drag-region' />
-      }
-      logo={
-        <span role='img' aria-label='Sim' className='flex h-[30px] items-center'>
-          <SimWordmark />
-        </span>
-      }
-    >
-      <StatusPageContent
-        titleId='title'
-        title={copy.title}
-        description={copy.message}
-        detail={
-          <p
-            id='detail'
-            role='status'
-            className='max-w-full break-words text-[var(--text-muted)] text-caption'
+    <AuthRoot>
+      <AuthShellView
+        homeHref='https://sim.ai'
+        logo={<AuthWordmark />}
+        titlebar={<div data-auth-titlebar='' aria-hidden='true' />}
+        footer={
+          <AuthTextLink
+            onClick={() => {
+              void bridge?.openExternal('mailto:support@sim.ai')
+            }}
           >
-            {actionError || detail}
-          </p>
+            Contact support
+          </AuthTextLink>
         }
       >
-        <Chip id='retry' variant='primary' onClick={() => bridge?.offlineRetry()}>
-          Retry
-        </Chip>
-        {isSimCloud ? (
-          <Chip id='status' onClick={checkStatus}>
-            Check status
+        <StatusPageContent
+          titleId='title'
+          title={copy.title}
+          description={copy.message}
+          detail={
+            <p
+              id='detail'
+              role='status'
+              className='au:max-w-full au:break-words au:text-[var(--auth-secondary)] au:text-caption'
+            >
+              {actionError || detail}
+            </p>
+          }
+        >
+          <Chip fullWidth id='retry' variant='primary' onClick={() => bridge?.offlineRetry()}>
+            Retry
           </Chip>
-        ) : null}
-        <Chip id='server' onClick={() => bridge?.server?.open()}>
-          Change server
-        </Chip>
-      </StatusPageContent>
-    </LogoPage>
+          {isSimCloud ? (
+            <Chip fullWidth id='status' onClick={checkStatus}>
+              Check status
+            </Chip>
+          ) : null}
+          <Chip fullWidth variant='ghost' id='server' onClick={() => bridge?.server?.open()}>
+            Change server
+          </Chip>
+        </StatusPageContent>
+      </AuthShellView>
+    </AuthRoot>
   )
 }
 
 const container = document.getElementById('root')
 if (!container) throw new Error('Offline page root is missing')
-void initializeShellPage().then(() => {
+{
   observeDesktopTitleBar(document.documentElement, navigator.userAgent, bridge)
   const root = createRoot(container)
   root.render(<OfflinePage isSimCloud={false} />)
@@ -111,4 +121,4 @@ void initializeShellPage().then(() => {
       root.render(<OfflinePage isSimCloud={isSimCloud} />)
     })
     .catch(() => {})
-})
+}
diff --git a/apps/desktop/src/renderer/server/index.tsx b/apps/desktop/src/renderer/server/index.tsx
index d4431319936..78993b6b866 100644
--- a/apps/desktop/src/renderer/server/index.tsx
+++ b/apps/desktop/src/renderer/server/index.tsx
@@ -1,7 +1,9 @@
 import { createRoot } from 'react-dom/client'
 import { ServerModal } from '@/renderer/server/server-modal'
-import { initializeShellPage, shellWindow } from '@/renderer/shell'
-import '@/renderer/shell.css'
+import type { ShellWindowApi } from '@/shared/shell'
+
+const shellWindow = (window as Window & { simShell?: ShellWindowApi }).simShell
+import '@/renderer/auth.css'
 
 const container = document.getElementById('root')
 if (!container || !shellWindow) throw new Error('Server modal host is unavailable')
@@ -17,4 +19,4 @@ async function renderServerModal() {
   }
 }
 
-void initializeShellPage().then(renderServerModal)
+void renderServerModal()
diff --git a/apps/desktop/src/renderer/server/server-modal.tsx b/apps/desktop/src/renderer/server/server-modal.tsx
index 66ce047470b..2019b199986 100644
--- a/apps/desktop/src/renderer/server/server-modal.tsx
+++ b/apps/desktop/src/renderer/server/server-modal.tsx
@@ -1,14 +1,6 @@
 import { useRef, useState } from 'react'
+import { AuthButton, AuthField, AuthHeader, AuthInput, AuthRoot, AuthStack } from '@sim/auth-ui'
 import type { DesktopServerConfiguration } from '@sim/desktop-bridge'
-import {
-  ChipModalBody,
-  ChipModalDescription,
-  ChipModalField,
-  ChipModalFooter,
-  ChipModalHeader,
-  ChipModalSurface,
-} from '@sim/emcn'
-import { mountShellModal } from '@/renderer/shell'
 import type { ShellWindowApi } from '@/shared/shell'
 
 interface ServerModalProps {
@@ -22,7 +14,24 @@ function closeWindow() {
 }
 
 function mountServerModal(element: HTMLDivElement | null) {
-  return mountShellModal(element, closeWindow)
+  if (!element) return
+  element.querySelector<HTMLInputElement>('input')?.focus()
+  const host = (window as Window & { simShell?: ShellWindowApi }).simShell
+  const resize = () => host?.resizeContent(Math.ceil(element.scrollHeight))
+  const observer = new ResizeObserver(resize)
+  observer.observe(element)
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      closeWindow()
+    }
+  }
+  document.addEventListener('keydown', onKey)
+  resize()
+  return () => {
+    observer.disconnect()
+    document.removeEventListener('keydown', onKey)
+  }
 }
 
 export function ServerModal({ server, configuration, initialError }: ServerModalProps) {
@@ -58,50 +67,73 @@ export function ServerModal({ server, configuration, initialError }: ServerModal
   }
 
   return (
-    <ChipModalSurface
-      ref={mountServerModal}
-      role='dialog'
-      aria-modal='true'
-      aria-labelledby='server-title'
-      aria-describedby='server-description'
-      className='max-h-screen'
-    >
-      <ChipModalHeader
-        onClose={closeWindow}
-        className='[-webkit-app-region:drag] [&_button]:[-webkit-app-region:no-drag]'
+    <AuthRoot>
+      <div
+        ref={mountServerModal}
+        role='dialog'
+        aria-modal='true'
+        aria-label='Sim server'
+        className='au:p-6'
       >
-        <span id='server-title'>Sim server</span>
-      </ChipModalHeader>
-      <ChipModalBody>
-        <ChipModalDescription id='server-description'>
-          Point this app at your own Sim deployment. Self-hosted servers must use HTTPS; localhost
-          may use HTTP.
-        </ChipModalDescription>
-        <ChipModalField
-          type='input'
-          inputType='url'
-          title='Server URL'
-          value={origin}
-          onChange={(value) => {
-            setOrigin(value)
-            setError(undefined)
-            setMessage('')
-          }}
-          autoComplete='off'
-          placeholder='https://sim.example.com'
-          disabled={pending}
-          error={error}
-          hint={<span role='status'>{pending ? 'Connecting…' : message}</span>}
-        />
-      </ChipModalBody>
-      <ChipModalFooter
-        onCancel={closeWindow}
-        primaryAction={{
-          label: pending ? 'Connecting…' : 'Connect',
-          onClick: connect,
-          disabled: pending || !origin.trim(),
-        }}
-      />
-    </ChipModalSurface>
+        <AuthStack>
+          <div className='au:[-webkit-app-region:drag]'>
+            <AuthHeader
+              title='Sim server'
+              description='Connect to your organization’s Sim deployment.'
+            />
+          </div>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              void connect()
+            }}
+            className='au:space-y-5'
+          >
+            <AuthField
+              htmlFor='server-origin'
+              label='Server URL'
+              errors={error ? [error] : undefined}
+              hint={
+                <>
+                  <span>Use HTTPS for self-hosted servers. Localhost may use HTTP.</span>
+                  <span role='status'>{message && ` ${message}`}</span>
+                </>
+              }
+            >
+              <AuthInput
+                id='server-origin'
+                type='url'
+                value={origin}
+                onChange={(event) => {
+                  setOrigin(event.target.value)
+                  setError(undefined)
+                  setMessage('')
+                }}
+                autoComplete='off'
+                placeholder='https://sim.example.com'
+                disabled={pending}
+                error={Boolean(error)}
+                aria-describedby='server-origin-hint'
+              />
+            </AuthField>
+            <div className='au:grid au:grid-cols-2 au:gap-2'>
+              <AuthButton onClick={closeWindow} fullWidth>
+                Cancel
+              </AuthButton>
+              <AuthButton
+                type='submit'
+                variant='primary'
+                disabled={!origin.trim()}
+                loading={pending}
+                loadingLabel='Connecting…'
+                fullWidth
+              >
+                Connect
+              </AuthButton>
+            </div>
+          </form>
+        </AuthStack>
+      </div>
+    </AuthRoot>
   )
 }
diff --git a/apps/sim/app/(auth)/components/auth-divider.tsx b/apps/sim/app/(auth)/components/auth-divider.tsx
deleted file mode 100644
index f995280a4f0..00000000000
--- a/apps/sim/app/(auth)/components/auth-divider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-interface AuthDividerProps {
-  label: string
-}
-
-/**
- * The "Or continue with" rule separating the email/password form from the
- * social/SSO options. Light tokens only: a `--border` hairline with the label
- * knocked out over the `--bg` canvas in `--text-muted`.
- */
-export function AuthDivider({ label }: AuthDividerProps) {
-  return (
-    <div className='relative'>
-      <div className='absolute inset-0 flex items-center'>
-        <div className='w-full border-[var(--border)] border-t' />
-      </div>
-      <div className='relative flex justify-center'>
-        <span className='bg-[var(--bg)] px-4 text-[var(--text-muted)] text-sm'>{label}</span>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/auth-field.tsx b/apps/sim/app/(auth)/components/auth-field.tsx
deleted file mode 100644
index e6b53d0edae..00000000000
--- a/apps/sim/app/(auth)/components/auth-field.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ReactNode } from 'react'
-import { Label } from '@sim/emcn'
-
-interface AuthFieldProps {
-  /** Matches the `id` set on the control rendered as {@link children}. */
-  htmlFor: string
-  label: string
-  /** Validation messages to render beneath the control. */
-  errors?: string[]
-  /** Optional right-aligned action shown next to the label (e.g. Forgot password). */
-  action?: ReactNode
-  /** The field control — a {@link ChipInput}/{@link PasswordInput}. */
-  children: ReactNode
-}
-
-/**
- * A labeled form field row: canonical {@link Label}, an optional inline label
- * action, the control, and a validation-message list in the error token. The
- * control drives its own invalid chrome through its `error` prop — this wrapper
- * only owns the label row and the message list, so every auth field reads and
- * spaces identically.
- */
-export function AuthField({ htmlFor, label, errors, action, children }: AuthFieldProps) {
-  const hasErrors = Boolean(errors && errors.length > 0)
-  return (
-    <div className='space-y-2'>
-      <div className='flex items-center justify-between'>
-        <Label htmlFor={htmlFor}>{label}</Label>
-        {action}
-      </div>
-      {children}
-      {hasErrors && (
-        <div className='space-y-1 text-[var(--text-error)] text-caption' aria-live='polite'>
-          {errors?.map((error) => (
-            <p key={error}>{error}</p>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/auth-form-message.tsx b/apps/sim/app/(auth)/components/auth-form-message.tsx
deleted file mode 100644
index 11e4930968c..00000000000
--- a/apps/sim/app/(auth)/components/auth-form-message.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react'
-import { cn } from '@sim/emcn'
-
-interface AuthFormMessageProps {
-  type: 'error' | 'success'
-  align?: 'left' | 'center'
-  children: ReactNode
-}
-
-/**
- * Form-level status copy (not tied to a single field) in the canonical tokens:
- * errors in `--text-error`, success in `--brand-accent`. One place owns the
- * auth message chrome so success/error states never drift to ad-hoc hex or
- * `text-red-*`/`#4CAF50` colors.
- */
-export function AuthFormMessage({ type, align = 'left', children }: AuthFormMessageProps) {
-  return (
-    <div
-      className={cn(
-        'space-y-1 text-caption',
-        align === 'center' && 'text-center',
-        type === 'error' ? 'text-[var(--text-error)]' : 'text-[var(--brand-accent)]'
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/auth-header.tsx b/apps/sim/app/(auth)/components/auth-header.tsx
deleted file mode 100644
index 803e1b0ec57..00000000000
--- a/apps/sim/app/(auth)/components/auth-header.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react'
-
-interface AuthHeaderProps {
-  title: string
-  description?: ReactNode
-}
-
-/**
- * The centered heading + subcopy block shared by every auth page and status
- * page. One source of truth for auth heading typography (light tokens, normal
- * weight, no bespoke tracking — aligned with the landing scale, sized down for
- * the single-column form).
- */
-export function AuthHeader({ title, description }: AuthHeaderProps) {
-  return (
-    <div className='space-y-1 text-center'>
-      <h1 className='text-balance text-[32px] text-[var(--text-primary)] leading-[1.2]'>{title}</h1>
-      {description != null && (
-        <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
-      )}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx
deleted file mode 100644
index 396bae64cf8..00000000000
--- a/apps/sim/app/(auth)/components/auth-input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
-
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
-)
-
-AuthInput.displayName = 'AuthInput'
diff --git a/apps/sim/app/(auth)/components/auth-legal-footer.tsx b/apps/sim/app/(auth)/components/auth-legal-footer.tsx
index a5a80e698f1..e271ba3acd6 100644
--- a/apps/sim/app/(auth)/components/auth-legal-footer.tsx
+++ b/apps/sim/app/(auth)/components/auth-legal-footer.tsx
@@ -1,26 +1,16 @@
-import { AuthTextLink } from '@/app/(auth)/components/auth-text-link'
+import { AuthLegal } from '@sim/auth-ui'
+import { getBrandConfig } from '@/ee/whitelabeling'
 
 interface AuthLegalFooterProps {
-  /** The gerund describing the consent action, e.g. "signing in". */
   action: string
 }
-
-/**
- * The "By {action}, you agree to our Terms / Privacy" fine print shared by the
- * login and signup pages. Restyled to muted light tokens with the legal links
- * routed through {@link AuthTextLink}, so the consent copy has one source.
- */
 export function AuthLegalFooter({ action }: AuthLegalFooterProps) {
+  const brand = getBrandConfig()
   return (
-    <p className='text-center text-[var(--text-muted)] text-caption leading-relaxed'>
-      By {action}, you agree to our{' '}
-      <AuthTextLink href='/terms' external>
-        Terms of Service
-      </AuthTextLink>{' '}
-      and{' '}
-      <AuthTextLink href='/privacy' external>
-        Privacy Policy
-      </AuthTextLink>
-    </p>
+    <AuthLegal
+      action={action}
+      termsHref={brand.termsUrl || '/terms'}
+      privacyHref={brand.privacyUrl || '/privacy'}
+    />
   )
 }
diff --git a/apps/sim/app/(auth)/components/auth-loading-skeleton.tsx b/apps/sim/app/(auth)/components/auth-loading-skeleton.tsx
index be5968cec46..87a6d5102a8 100644
--- a/apps/sim/app/(auth)/components/auth-loading-skeleton.tsx
+++ b/apps/sim/app/(auth)/components/auth-loading-skeleton.tsx
@@ -1,58 +1,39 @@
 import type { ReactNode } from 'react'
-import { cn, Skeleton } from '@sim/emcn'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { AuthProviderGroup, AuthSkeleton, AuthStack, cn } from '@sim/auth-ui'
 
-const authLoadingSkeletonVariants = cva('', {
-  variants: {
-    shape: {
-      title: 'h-[38px] rounded-[4px]',
-      label: 'h-[14px] rounded-[4px]',
-      control: 'h-[44px] rounded-[10px]',
-      divider: 'h-[1px] rounded-[1px]',
-    },
-  },
-})
-
-interface AuthLoadingSkeletonProps extends VariantProps<typeof authLoadingSkeletonVariants> {
+interface AuthLoadingSkeletonProps {
+  shape?: 'title' | 'label' | 'control' | 'divider'
   className?: string
 }
-
-/** Placeholder geometry shared by the auth route loading states. */
-export function AuthLoadingSkeleton({ shape, className }: AuthLoadingSkeletonProps) {
-  return <Skeleton className={cn(authLoadingSkeletonVariants({ shape }), className)} />
+export function AuthLoadingSkeleton(props: AuthLoadingSkeletonProps) {
+  return <AuthSkeleton {...props} />
 }
-
 interface AuthLoadingFrameProps {
   children: ReactNode
 }
-
 export function AuthLoadingFrame({ children }: AuthLoadingFrameProps) {
-  return <div className='flex flex-col items-center'>{children}</div>
+  return <AuthStack>{children}</AuthStack>
 }
-
 interface AuthLoadingFieldProps {
   labelWidthClassName: string
   className?: string
 }
-
 export function AuthLoadingField({ labelWidthClassName, className }: AuthLoadingFieldProps) {
   return (
-    <div className={cn('w-full space-y-2', className)}>
-      <AuthLoadingSkeleton shape='label' className={labelWidthClassName} />
-      <AuthLoadingSkeleton shape='control' className='w-full' />
+    <div className={cn('au:w-full au:space-y-2', className)}>
+      <AuthSkeleton shape='label' className={labelWidthClassName} />
+      <AuthSkeleton shape='control' className='au:w-full' />
     </div>
   )
 }
-
-/** The divider and paired provider-action placeholders on login and signup. */
 export function AuthLoadingAlternateActions() {
   return (
     <>
-      <AuthLoadingSkeleton shape='divider' className='mt-6 w-full' />
-      <div className='mt-6 flex w-full gap-3'>
-        <AuthLoadingSkeleton shape='control' className='flex-1' />
-        <AuthLoadingSkeleton shape='control' className='flex-1' />
-      </div>
+      <AuthSkeleton shape='divider' className='au:w-full' />
+      <AuthProviderGroup>
+        <AuthSkeleton />
+        <AuthSkeleton />
+      </AuthProviderGroup>
     </>
   )
 }
diff --git a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
deleted file mode 100644
index d479a273b4a..00000000000
--- a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ChipLink } from '@sim/emcn'
-
-interface AuthNavPromptProps {
-  /** Muted lead text before the link (e.g. "Don't have an account?"). */
-  prompt?: string
-  href: string
-  linkLabel: string
-  /** Side effect to run before navigation (e.g. clearing verification state). */
-  onNavigate?: () => void
-}
-
-/**
- * The cross-page navigation row (Sign up / Sign in / Back to login) — an
- * optional muted prompt followed by an outline {@link ChipLink} pill, matching
- * the landing's secondary chip CTAs. Centralizes the auth nav affordance so the
- * pill chrome is described by props, never restyled per page.
- */
-export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPromptProps) {
-  return (
-    <div className='flex items-center justify-center gap-1 text-sm'>
-      {prompt && <span className='text-[var(--text-muted)]'>{prompt}</span>}
-      <ChipLink href={href} onClick={onNavigate} className='border border-[var(--border-1)]'>
-        {linkLabel}
-      </ChipLink>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/auth-navigation.tsx b/apps/sim/app/(auth)/components/auth-navigation.tsx
new file mode 100644
index 00000000000..f97a377175e
--- /dev/null
+++ b/apps/sim/app/(auth)/components/auth-navigation.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { AuthLinkButton } from '@sim/auth-ui'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { validateCallbackUrl } from '@/lib/core/security/input-validation'
+import { buildAuthCrossLink, resolveAuthRedirect } from '@/app/(auth)/auth-redirect'
+
+interface AuthNavigationProps {
+  registrationDisabled: boolean
+}
+
+/** Preserves return and invitation context in the Auth header cross-link. */
+export function AuthNavigation({ registrationDisabled }: AuthNavigationProps) {
+  const pathname = usePathname()
+  const params = useSearchParams()
+  if (pathname !== '/login' && pathname !== '/signup') return null
+  if (pathname === '/login' && registrationDisabled) return null
+  const { rawCallbackUrl: callback, isInviteFlow } = resolveAuthRedirect({
+    redirect: params.get('redirect'),
+    callbackUrl: params.get('callbackUrl'),
+    inviteFlow: params.get('invite_flow'),
+  })
+  const href = buildAuthCrossLink(pathname === '/login' ? '/signup' : '/login', {
+    callbackUrl: callback && validateCallbackUrl(callback) ? callback : null,
+    isInviteFlow,
+  })
+  return (
+    <AuthLinkButton href={href} variant='navigation'>
+      {pathname === '/login' ? 'Sign up' : 'Sign in'}
+    </AuthLinkButton>
+  )
+}
diff --git a/apps/sim/app/(auth)/components/auth-shell.tsx b/apps/sim/app/(auth)/components/auth-shell.tsx
index 1b8cb741c0b..a3126be1a9f 100644
--- a/apps/sim/app/(auth)/components/auth-shell.tsx
+++ b/apps/sim/app/(auth)/components/auth-shell.tsx
@@ -1,52 +1,45 @@
-import type { ReactNode } from 'react'
-import { SimWordmark } from '@sim/emcn'
-import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
-import { LogoMark } from '@/app/(landing)/components/navbar/components'
+import { type ReactNode, Suspense } from 'react'
+import { AuthRoot, AuthShellView, AuthWordmark } from '@sim/auth-ui'
+import { DesktopTitleBarController } from '@/app/_shell/desktop-title-bar'
+import { AuthNavigation } from '@/app/(auth)/components/auth-navigation'
+import { SupportFooter } from '@/app/(auth)/components/support-footer'
+import { getBrandConfig } from '@/ee/whitelabeling'
 
 interface AuthShellProps {
-  /** Centered content column (the form, status copy, etc.). */
   children: ReactNode
-  /** Optional element pinned to the bottom of the shell (e.g. the support footer). */
   footer?: ReactNode
+  registrationDisabled?: boolean
 }
 
-/**
- * The light auth/status page frame — the single source of truth for the shell
- * every auth page and standalone status page wears.
- *
- * Mirrors the landing chrome: it pins the `light` token layer (so the platform's
- * light-mode `var(--*)` tokens resolve regardless of the visitor's theme), uses
- * the canvas/`--text-primary` surface, and renders a logo-only header that reuses
- * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
- * single content column is centered and capped for a calm single-form layout.
- * The home link starts a document navigation so the marketing theme default is
- * initialized independently of auth's forced-light context.
- *
- * The shell also owns the macOS traffic-light lane, unconditionally — every surface that
- * wears it (the `(auth)` routes, the CLI auth handoff, the invite pages) sits outside
- * workspace chrome and draws its logo where the lights are. Gating this per route left
- * whichever surface was overlooked drawing underneath them, and a route list could not
- * cover a dynamic segment like `/invite/[id]` anyway. Off the desktop shell
- * `--desktop-title-bar-height` is `0px`, so the reservation and the drag strip both
- * collapse to nothing and `.desktop-title-bar-page` is exactly `min-h-screen`.
- */
-export function AuthShell({ children, footer }: AuthShellProps) {
+/** Application adapter for identity and native chrome; all visual rules belong to Auth. */
+export function AuthShell({ children, footer, registrationDisabled = false }: AuthShellProps) {
+  const brand = getBrandConfig()
   return (
-    <div className='light desktop-title-bar-page relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
-      <DesktopTitleBarLane />
-      <header>
-        <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
-          <a href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
-            <LogoMark>
-              <SimWordmark />
-            </LogoMark>
-          </a>
-        </nav>
-      </header>
-      <div className='flex flex-1 items-center justify-center px-4 pb-16'>
-        <div className='w-full max-w-[400px]'>{children}</div>
-      </div>
-      {footer}
-    </div>
+    <AuthRoot>
+      <AuthShellView
+        homeHref='/'
+        logo={
+          brand.isWhitelabeled && (brand.wordmarkUrl || brand.logoUrl) ? (
+            <img src={brand.wordmarkUrl || brand.logoUrl || undefined} alt={brand.name} />
+          ) : (
+            <AuthWordmark />
+          )
+        }
+        navigation={
+          <Suspense>
+            <AuthNavigation registrationDisabled={registrationDisabled} />
+          </Suspense>
+        }
+        footer={footer ?? <SupportFooter />}
+        titlebar={
+          <>
+            <DesktopTitleBarController />
+            <div data-auth-titlebar='' aria-hidden='true' />
+          </>
+        }
+      >
+        {children}
+      </AuthShellView>
+    </AuthRoot>
   )
 }
diff --git a/apps/sim/app/(auth)/components/auth-submit-button.tsx b/apps/sim/app/(auth)/components/auth-submit-button.tsx
index 5d37ecb12ea..81ba39e813b 100644
--- a/apps/sim/app/(auth)/components/auth-submit-button.tsx
+++ b/apps/sim/app/(auth)/components/auth-submit-button.tsx
@@ -1,47 +1,8 @@
-import type { ReactNode } from 'react'
-import { Chip, Loader } from '@sim/emcn'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+import { AuthButton, type AuthButtonProps } from '@sim/auth-ui'
 
-interface AuthSubmitButtonProps {
-  children: ReactNode
-  /** Label shown beside the spinner while the action is in flight. */
+interface AuthSubmitButtonProps extends AuthButtonProps {
   loadingLabel: string
-  loading?: boolean
-  disabled?: boolean
-  type?: 'submit' | 'button'
-  onClick?: () => void
 }
-
-/**
- * The canonical full-width primary auth action — a `primary`-variant {@link Chip}
- * with the shared in-flight spinner, so the primary CTA chrome lives in
- * exactly one place.
- */
-export function AuthSubmitButton({
-  children,
-  loadingLabel,
-  loading = false,
-  disabled = false,
-  type = 'submit',
-  onClick,
-}: AuthSubmitButtonProps) {
-  return (
-    <Chip
-      variant='primary'
-      type={type}
-      onClick={onClick}
-      disabled={disabled || loading}
-      fullWidth
-      className={AUTH_BUTTON_CLASS}
-    >
-      {loading ? (
-        <span className='flex items-center gap-2'>
-          <Loader className='size-4' animate />
-          {loadingLabel}
-        </span>
-      ) : (
-        children
-      )}
-    </Chip>
-  )
+export function AuthSubmitButton({ type = 'submit', ...props }: AuthSubmitButtonProps) {
+  return <AuthButton {...props} type={type} variant='primary' fullWidth />
 }
diff --git a/apps/sim/app/(auth)/components/auth-text-link.tsx b/apps/sim/app/(auth)/components/auth-text-link.tsx
deleted file mode 100644
index ea464c71269..00000000000
--- a/apps/sim/app/(auth)/components/auth-text-link.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { cn } from '@sim/emcn'
-import Link from 'next/link'
-
-const AUTH_TEXT_LINK_CLASS =
-  'text-[var(--text-secondary)] underline-offset-4 transition-colors hover:text-[var(--text-primary)] hover:underline disabled:cursor-not-allowed disabled:opacity-50'
-
-interface AuthTextLinkProps {
-  children: ReactNode
-  /** Renders a navigation link when set; otherwise renders an action button. */
-  href?: string
-  onClick?: () => void
-  /** Opens the link in a new tab with safe `rel` (e.g. Terms/Privacy). */
-  external?: boolean
-  disabled?: boolean
-  className?: string
-}
-
-/**
- * The canonical inline text affordance for the auth pages — forgot-password,
- * resend, and the legal links. Renders a {@link Link} when `href` is set and a
- * `<button>` otherwise, both using the shared neutral text tokens.
- */
-export function AuthTextLink({
-  children,
-  href,
-  onClick,
-  external = false,
-  disabled = false,
-  className,
-}: AuthTextLinkProps) {
-  if (href) {
-    return (
-      <Link
-        href={href}
-        onClick={onClick}
-        className={cn(AUTH_TEXT_LINK_CLASS, className)}
-        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      >
-        {children}
-      </Link>
-    )
-  }
-
-  return (
-    <button
-      type='button'
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(AUTH_TEXT_LINK_CLASS, className)}
-    >
-      {children}
-    </button>
-  )
-}
diff --git a/apps/sim/app/(auth)/components/constants.ts b/apps/sim/app/(auth)/components/constants.ts
index beb515c525d..474979d64ac 100644
--- a/apps/sim/app/(auth)/components/constants.ts
+++ b/apps/sim/app/(auth)/components/constants.ts
@@ -1,17 +1,2 @@
-/**
- * Auth and invite surfaces use a slightly taller control than the 30px chip
- * default, matching the landing `HeroCta` field family (the landing's own
- * auth-adjacent CTA renders taller fields than in-app chips). Applied as the
- * single source of truth for every auth field and button height so the inputs,
- * submit, social, SSO, and invite action buttons stay on one line.
- */
-export const AUTH_CONTROL_HEIGHT = 'h-9'
-
-/**
- * Shared layout for full-width auth/invite chip buttons (submit, social, SSO,
- * invite actions). `[&>span]:flex-none` collapses the chip's stretching label
- * span — which carries `flex-1` — so the icon + label cluster truly centers
- * under `justify-center` (the landing `HeroCta` idiom). Height-only inputs use
- * {@link AUTH_CONTROL_HEIGHT}; buttons compose this on top of it.
- */
-export const AUTH_BUTTON_CLASS = `${AUTH_CONTROL_HEIGHT} justify-center [&>span]:flex-none`
+/** Layout-only compatibility for existing consumers; controls own their geometry. */
+export const AUTH_BUTTON_CLASS = 'au:w-full'
diff --git a/apps/sim/app/(auth)/components/index.ts b/apps/sim/app/(auth)/components/index.ts
index f559ddd54b8..d2d15fcebbc 100644
--- a/apps/sim/app/(auth)/components/index.ts
+++ b/apps/sim/app/(auth)/components/index.ts
@@ -1,14 +1,17 @@
-export { AuthDivider } from './auth-divider'
-export { AuthField } from './auth-field'
-export { AuthFormMessage } from './auth-form-message'
-export { AuthHeader } from './auth-header'
-export { AuthInput } from './auth-input'
+export {
+  AuthDivider,
+  AuthEmailInput,
+  AuthField,
+  AuthFormMessage,
+  AuthHeader,
+  AuthInput,
+  AuthNavPrompt,
+  AuthTextLink,
+  PasswordInput,
+} from '@sim/auth-ui'
 export { AuthLegalFooter } from './auth-legal-footer'
-export { AuthNavPrompt } from './auth-nav-prompt'
 export { AuthShell } from './auth-shell'
 export { AuthSubmitButton } from './auth-submit-button'
-export { AuthTextLink } from './auth-text-link'
-export { PasswordInput } from './password-input'
 export { SocialLoginButtons } from './social-login-buttons'
 export { SSOLoginButton } from './sso-login-button'
 export { SupportFooter } from './support-footer'
diff --git a/apps/sim/app/(auth)/components/password-input.tsx b/apps/sim/app/(auth)/components/password-input.tsx
deleted file mode 100644
index f62e9c23ad3..00000000000
--- a/apps/sim/app/(auth)/components/password-input.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
-
-type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment'>
-
-/**
- * A {@link ChipInput} that owns the password reveal toggle — the eye button is
- * driven through the canonical `endAdornment` slot and the field's invalid state
- * through the `error` prop, so no consumer hand-rolls the relative wrapper +
- * absolutely positioned button the auth forms previously duplicated four times.
- */
-export function PasswordInput({ error, className, ...props }: PasswordInputProps) {
-  const [visible, setVisible] = useState(false)
-
-  return (
-    <ChipInput
-      {...props}
-      className={cn(AUTH_CONTROL_HEIGHT, className)}
-      type={visible ? 'text' : 'password'}
-      error={error}
-      endAdornment={
-        <button
-          type='button'
-          onClick={() => setVisible((v) => !v)}
-          aria-label={visible ? 'Hide password' : 'Show password'}
-          className='flex shrink-0 text-[var(--text-icon)] transition-colors hover:text-[var(--text-primary)]'
-        >
-          {visible ? <EyeOff className='size-[14px]' /> : <Eye className='size-[14px]' />}
-        </button>
-      }
-    />
-  )
-}
diff --git a/apps/sim/app/(auth)/components/social-login-buttons.tsx b/apps/sim/app/(auth)/components/social-login-buttons.tsx
index 235a57f2c3d..fa7cffde1bf 100644
--- a/apps/sim/app/(auth)/components/social-login-buttons.tsx
+++ b/apps/sim/app/(auth)/components/social-login-buttons.tsx
@@ -1,13 +1,19 @@
 'use client'
 
-import { type ReactNode, useState } from 'react'
-import { Chip, cn } from '@sim/emcn'
+import { useState } from 'react'
+import {
+  AuthFormMessage,
+  AuthGithubIcon,
+  AuthGoogleIcon,
+  AuthMicrosoftIcon,
+  AuthProviderGroup,
+  AuthButton as Chip,
+} from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
 import { type SocialSignInProvider, startSocialSignIn } from '@/lib/auth/social-sign-in'
 import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
 
 const logger = createLogger('SocialLoginButtons')
 
@@ -17,14 +23,15 @@ interface SocialLoginButtonsProps {
   microsoftAvailable: boolean
   view: 'login' | 'signup'
   callbackURL?: string
-  children?: ReactNode
+  ssoEnabled?: boolean
+  disabled?: boolean
 }
 
 /** Display order of the provider buttons. */
 const PROVIDERS = [
-  { provider: 'google', label: 'Google', icon: GoogleIcon },
-  { provider: 'microsoft', label: 'Microsoft', icon: MicrosoftIcon },
-  { provider: 'github', label: 'GitHub', icon: GithubIcon },
+  { provider: 'google', label: 'Google', icon: AuthGoogleIcon },
+  { provider: 'microsoft', label: 'Microsoft', icon: AuthMicrosoftIcon },
+  { provider: 'github', label: 'GitHub', icon: AuthGithubIcon },
 ] as const
 
 export function SocialLoginButtons({
@@ -33,10 +40,13 @@ export function SocialLoginButtons({
   microsoftAvailable,
   view,
   callbackURL = DEFAULT_POST_AUTH_ROUTE,
-  children,
+  ssoEnabled,
+  disabled,
 }: SocialLoginButtonsProps) {
   const [loadingProvider, setLoadingProvider] = useState<SocialSignInProvider | null>(null)
 
+  const [error, setError] = useState<string | null>(null)
+
   const available: Record<SocialSignInProvider, boolean> = {
     github: githubAvailable,
     google: googleAvailable,
@@ -44,35 +54,57 @@ export function SocialLoginButtons({
   }
 
   async function signIn(provider: SocialSignInProvider, label: string) {
+    if (loadingProvider || disabled) return
+    setError(null)
     setLoadingProvider(provider)
     try {
-      await startSocialSignIn({ provider, view, surface: 'auth_page', callbackURL })
+      const result = await startSocialSignIn({
+        provider,
+        view,
+        surface: 'auth_page',
+        callbackURL,
+      })
+      if (result.error) {
+        throw new Error(
+          result.error.message || `Could not start ${label} sign-in. Please try again.`
+        )
+      }
     } catch (err) {
       logger.error(`${label} sign-in failed`, { error: getErrorMessage(err) })
+      setError(getErrorMessage(err, `Could not start ${label} sign-in. Please try again.`))
     } finally {
       setLoadingProvider(null)
     }
   }
 
-  if (!githubAvailable && !googleAvailable && !microsoftAvailable && !children) {
+  if (!githubAvailable && !googleAvailable && !microsoftAvailable && !ssoEnabled) {
     return null
   }
 
   return (
-    <div className='grid gap-3'>
-      {PROVIDERS.filter(({ provider }) => available[provider]).map(({ provider, label, icon }) => (
-        <Chip
-          key={provider}
-          fullWidth
-          leftIcon={icon}
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
-          disabled={loadingProvider !== null}
-          onClick={() => signIn(provider, label)}
-        >
-          {loadingProvider === provider ? 'Connecting…' : label}
-        </Chip>
-      ))}
-      {children}
+    <div className='au:space-y-2'>
+      <AuthProviderGroup>
+        {PROVIDERS.filter(({ provider }) => available[provider]).map(
+          ({ provider, label, icon }) => (
+            <Chip
+              key={provider}
+              fullWidth
+              leftIcon={icon}
+              disabled={disabled || loadingProvider !== null}
+              onClick={() => signIn(provider, label)}
+            >
+              {loadingProvider === provider ? 'Connecting…' : label}
+            </Chip>
+          )
+        )}
+        {ssoEnabled && (
+          <SSOLoginButton
+            callbackURL={callbackURL}
+            disabled={disabled || loadingProvider !== null}
+          />
+        )}
+      </AuthProviderGroup>
+      {error && <AuthFormMessage type='error'>{error}</AuthFormMessage>}
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
index 1bbd06d5591..bf0e710ef0a 100644
--- a/apps/sim/app/(auth)/components/sso-login-button.tsx
+++ b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -1,16 +1,17 @@
 'use client'
-import { Chip, cn } from '@sim/emcn'
+import { AuthIcon, AuthButton as Chip } from '@sim/auth-ui'
 import { useRouter } from 'next/navigation'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface SSOLoginButtonProps {
+  disabled?: boolean
   callbackURL?: string
   className?: string
   variant?: 'primary' | 'outline'
 }
 
 export function SSOLoginButton({
+  disabled,
   callbackURL,
   className,
   variant = 'outline',
@@ -30,14 +31,12 @@ export function SSOLoginButton({
     <Chip
       variant={variant === 'primary' ? 'primary' : undefined}
       fullWidth
+      disabled={disabled}
       onClick={handleSSOClick}
-      className={cn(
-        AUTH_BUTTON_CLASS,
-        variant === 'outline' && 'border border-[var(--border-1)]',
-        className
-      )}
+      className={className}
+      leftIcon={() => <AuthIcon name='lock' />}
     >
-      Sign in with SSO
+      {variant === 'primary' ? 'Continue with SSO' : 'SSO'}
     </Chip>
   )
 }
diff --git a/apps/sim/app/(auth)/components/support-footer.tsx b/apps/sim/app/(auth)/components/support-footer.tsx
index 6b21046388d..ed36968e03d 100644
--- a/apps/sim/app/(auth)/components/support-footer.tsx
+++ b/apps/sim/app/(auth)/components/support-footer.tsx
@@ -1,39 +1,9 @@
 'use client'
 
-import { cn } from '@sim/emcn'
+import { AuthTextLink } from '@sim/auth-ui'
 import { useBrandConfig } from '@/ee/whitelabeling'
 
-export interface SupportFooterProps {
-  /**
-   * `fixed`/`absolute` pin the footer over the page (short, centered forms
-   * only — content must never render underneath it). `static` renders it in
-   * normal document flow after the content, which is required for pages with
-   * unbounded content height (e.g. the resume gate's HITL form): an
-   * absolutely-positioned footer with no reserved space is not pushed down by
-   * flow content, so it silently overlaps and eats clicks on whatever content
-   * ends up in its footprint.
-   */
-  position?: 'fixed' | 'absolute' | 'static'
-}
-
-export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {
-  const brandConfig = useBrandConfig()
-
-  return (
-    <div
-      className={cn(
-        'pb-8 text-center text-[var(--text-muted)] text-caption leading-relaxed',
-        position !== 'static' && 'right-0 bottom-0 left-0 z-50',
-        position
-      )}
-    >
-      Need help?{' '}
-      <a
-        href={`mailto:${brandConfig.supportEmail}`}
-        className='text-[var(--text-muted)] underline-offset-4 transition-colors hover:text-[var(--text-body)] hover:underline'
-      >
-        Contact support
-      </a>
-    </div>
-  )
+export function SupportFooter() {
+  const brand = useBrandConfig()
+  return <AuthTextLink href={`mailto:${brand.supportEmail}`}>Contact support</AuthTextLink>
 }
diff --git a/apps/sim/app/(auth)/layout.tsx b/apps/sim/app/(auth)/layout.tsx
index d4a9dddb977..5afc2e400a2 100644
--- a/apps/sim/app/(auth)/layout.tsx
+++ b/apps/sim/app/(auth)/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import { isRegistrationDisabled } from '@/lib/core/config/env-flags'
 import { AttributionCapture } from '@/app/_shell/consent/attribution-capture'
 import { AuthShell } from '@/app/(auth)/components'
 
@@ -8,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
-    <AuthShell>
+    <AuthShell registrationDisabled={isRegistrationDisabled}>
       {children}
       <AttributionCapture />
     </AuthShell>
diff --git a/apps/sim/app/(auth)/login/loading.tsx b/apps/sim/app/(auth)/login/loading.tsx
index 5ed074044be..41ef1c29dac 100644
--- a/apps/sim/app/(auth)/login/loading.tsx
+++ b/apps/sim/app/(auth)/login/loading.tsx
@@ -8,12 +8,12 @@ import {
 export default function LoginLoading() {
   return (
     <AuthLoadingFrame>
-      <AuthLoadingSkeleton shape='title' className='w-[80px]' />
-      <AuthLoadingField labelWidthClassName='w-[40px]' className='mt-8' />
-      <AuthLoadingField labelWidthClassName='w-[64px]' className='mt-4' />
-      <AuthLoadingSkeleton shape='control' className='mt-6 w-full' />
+      <AuthLoadingSkeleton shape='title' className='au:w-[80px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[40px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[64px]' />
+      <AuthLoadingSkeleton shape='control' className='au:w-full' />
       <AuthLoadingAlternateActions />
-      <AuthLoadingSkeleton shape='label' className='mt-6 w-[200px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[200px]' />
     </AuthLoadingFrame>
   )
 }
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 6a90ef7053f..b14e3867741 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -1,14 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import {
-  ChipModal,
-  ChipModalBody,
-  ChipModalError,
-  ChipModalField,
-  ChipModalFooter,
-  ChipModalHeader,
-} from '@sim/emcn'
+import { AuthStack } from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
@@ -21,15 +14,14 @@ import { isSsoEnabled } from '@/lib/core/config/env-flags'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { buildAuthCrossLink, DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
+import { DEFAULT_POST_AUTH_ROUTE, POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
 import {
   AuthDivider,
+  AuthEmailInput,
   AuthField,
   AuthFormMessage,
   AuthHeader,
-  AuthInput,
   AuthLegalFooter,
-  AuthNavPrompt,
   AuthSubmitButton,
   AuthTextLink,
   PasswordInput,
@@ -87,13 +79,10 @@ export default function LoginPage({
   githubAvailable,
   googleAvailable,
   microsoftAvailable,
-  registrationDisabled,
 }: {
   githubAvailable: boolean
   googleAvailable: boolean
   microsoftAvailable: boolean
-  /** DISABLE_REGISTRATION. Hides the signup cross-link, which `/signup` blocks. */
-  registrationDisabled: boolean
 }) {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -112,11 +101,6 @@ export default function LoginPage({
     logger.warn('Invalid callback URL detected and blocked:', { url: callbackUrlParam })
   }
   const callbackUrl = isValidCallbackUrl ? callbackUrlParam! : DEFAULT_POST_AUTH_ROUTE
-  const isInviteFlow = searchParams?.get('invite_flow') === 'true'
-  const signupHref = buildAuthCrossLink('/signup', {
-    callbackUrl: isValidCallbackUrl ? callbackUrl : null,
-    isInviteFlow,
-  })
 
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
@@ -155,12 +139,14 @@ export default function LoginPage({
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
+    if (isLoading) return
     setIsLoading(true)
     setPolicyError(null)
 
     const redirectToVerify = (emailToVerify: string) => {
       if (typeof window !== 'undefined') {
         sessionStorage.setItem('verificationEmail', emailToVerify)
+        sessionStorage.setItem(POST_AUTH_REDIRECT_STORAGE_KEY, callbackUrl)
       }
       router.push('/verify')
     }
@@ -291,6 +277,7 @@ export default function LoginPage({
   }
 
   const handleForgotPassword = async () => {
+    if (isSubmittingReset) return
     if (!forgotPasswordEmail) {
       setResetStatus({
         type: 'error',
@@ -333,7 +320,11 @@ export default function LoginPage({
           errorMessage.includes('user not found') ||
           errorMessage.includes('User not found')
         ) {
-          errorMessage = 'No account found with this email address'
+          setResetStatus({
+            type: 'success',
+            message: 'If an account exists for this email, you will receive a password reset link.',
+          })
+          return
         }
 
         throw new Error(errorMessage)
@@ -341,13 +332,8 @@ export default function LoginPage({
 
       setResetStatus({
         type: 'success',
-        message: 'Password reset link sent to your email',
+        message: 'If an account exists for this email, you will receive a password reset link.',
       })
-
-      setTimeout(() => {
-        setForgotPasswordOpen(false)
-        setResetStatus({ type: null, message: '' })
-      }, 2000)
     } catch (error) {
       logger.error('Error requesting password reset:', { error })
       setResetStatus({
@@ -371,25 +357,83 @@ export default function LoginPage({
   const passwordFieldErrors = showValidationError && passwordErrors.length > 0 ? passwordErrors : []
   const canSubmit = email.trim().length > 0 && password.length > 0
 
+  if (!emailEnabled && !ssoEnabled && !hasSocial)
+    return (
+      <AuthHeader
+        title='Sign-in is unavailable'
+        description='No sign-in methods are available on this deployment. Ask your administrator to enable a sign-in method.'
+      />
+    )
+
+  if (forgotPasswordOpen)
+    return (
+      <AuthStack>
+        <AuthHeader
+          title='Reset your password'
+          description='Enter your email and we’ll send you a reset link if an account exists.'
+        />
+        <form
+          className='au:space-y-5'
+          onSubmit={(event) => {
+            event.preventDefault()
+            void handleForgotPassword()
+          }}
+        >
+          <AuthField htmlFor='recovery-email' label='Email'>
+            <AuthEmailInput
+              id='recovery-email'
+              name='email'
+              type='email'
+              autoFocus
+              value={forgotPasswordEmail}
+              disabled={isSubmittingReset}
+              onChange={(event) => {
+                setForgotPasswordEmail(event.target.value)
+                setResetStatus({ type: null, message: '' })
+              }}
+            />
+          </AuthField>
+          {resetStatus.type && (
+            <AuthFormMessage type={resetStatus.type}>{resetStatus.message}</AuthFormMessage>
+          )}
+          <AuthSubmitButton
+            loading={isSubmittingReset}
+            loadingLabel='Sending…'
+            disabled={!forgotPasswordEmail.trim()}
+          >
+            Send reset link
+          </AuthSubmitButton>
+        </form>
+        <AuthTextLink
+          disabled={isSubmittingReset}
+          onClick={() => {
+            setEmail(forgotPasswordEmail)
+            setForgotPasswordOpen(false)
+          }}
+        >
+          Back to sign in
+        </AuthTextLink>
+      </AuthStack>
+    )
+
   return (
     <>
-      <div className='space-y-6'>
-        <AuthHeader title='Sign in' description='Enter your details' />
+      <div className='au:space-y-[var(--auth-group-gap)]'>
+        <AuthHeader title='Sign in' description='Welcome back to Sim.' />
 
-        {showTopSSO && <SSOLoginButton callbackURL={callbackUrl} variant='primary' />}
+        {showTopSSO && (
+          <SSOLoginButton callbackURL={callbackUrl} variant='primary' disabled={isLoading} />
+        )}
 
         {emailEnabled && (
-          <form onSubmit={onSubmit} className='space-y-6'>
-            <div className='space-y-5'>
+          <form onSubmit={onSubmit} className='au:space-y-[var(--auth-group-gap)]'>
+            <div className='au:space-y-5'>
               <AuthField htmlFor='email' label='Email' errors={emailFieldErrors}>
-                <AuthInput
+                <AuthEmailInput
                   id='email'
                   name='email'
-                  placeholder='Enter your email'
                   required
-                  autoCapitalize='none'
-                  autoComplete='email'
-                  autoCorrect='off'
+                  disabled={isLoading}
                   value={email}
                   onChange={handleEmailChange}
                   error={emailFieldErrors.length > 0}
@@ -401,8 +445,13 @@ export default function LoginPage({
                 errors={passwordFieldErrors}
                 action={
                   <AuthTextLink
-                    onClick={() => setForgotPasswordOpen(true)}
-                    className='text-caption'
+                    disabled={isLoading}
+                    onClick={() => {
+                      setForgotPasswordEmail(email)
+                      setResetStatus({ type: null, message: '' })
+                      setForgotPasswordOpen(true)
+                    }}
+                    className='au:text-caption'
                   >
                     Forgot password?
                   </AuthTextLink>
@@ -415,7 +464,7 @@ export default function LoginPage({
                   autoCapitalize='none'
                   autoComplete='current-password'
                   autoCorrect='off'
-                  placeholder='Enter your password'
+                  disabled={isLoading}
                   value={password}
                   onChange={handlePasswordChange}
                   error={passwordFieldErrors.length > 0}
@@ -450,58 +499,13 @@ export default function LoginPage({
             githubAvailable={githubAvailable}
             microsoftAvailable={microsoftAvailable}
             callbackURL={callbackUrl}
-          >
-            {ssoEnabled && !hasOnlySSO && (
-              <SSOLoginButton callbackURL={callbackUrl} variant='outline' />
-            )}
-          </SocialLoginButtons>
-        )}
-
-        {emailEnabled && !registrationDisabled && (
-          <AuthNavPrompt prompt="Don't have an account?" href={signupHref} linkLabel='Sign up' />
+            ssoEnabled={ssoEnabled && !hasOnlySSO}
+            disabled={isLoading}
+          />
         )}
 
         <AuthLegalFooter action='signing in' />
       </div>
-
-      <ChipModal
-        open={forgotPasswordOpen}
-        onOpenChange={setForgotPasswordOpen}
-        srTitle='Reset Password'
-      >
-        <ChipModalHeader onClose={() => setForgotPasswordOpen(false)}>
-          Reset Password
-        </ChipModalHeader>
-        <ChipModalBody>
-          <p className='px-2 text-[var(--text-secondary)] text-sm'>
-            Enter your email address and we'll send you a link to reset your password if your
-            account exists.
-          </p>
-          <ChipModalField
-            type='email'
-            title='Email'
-            value={forgotPasswordEmail}
-            onChange={(value) => setForgotPasswordEmail(value)}
-            required
-            placeholder='you@example.com'
-          />
-          {resetStatus.type === 'success' && (
-            <p className='px-2 text-[var(--text-secondary)] text-sm'>{resetStatus.message}</p>
-          )}
-          <ChipModalError>
-            {resetStatus.type === 'error' ? resetStatus.message : null}
-          </ChipModalError>
-        </ChipModalBody>
-        <ChipModalFooter
-          onCancel={() => setForgotPasswordOpen(false)}
-          cancelDisabled={isSubmittingReset}
-          primaryAction={{
-            label: isSubmittingReset ? 'Sending…' : 'Send Reset Link',
-            onClick: handleForgotPassword,
-            disabled: !forgotPasswordEmail || isSubmittingReset,
-          }}
-        />
-      </ChipModal>
     </>
   )
 }
diff --git a/apps/sim/app/(auth)/login/page.tsx b/apps/sim/app/(auth)/login/page.tsx
index 726727b1435..4e2223d3af4 100644
--- a/apps/sim/app/(auth)/login/page.tsx
+++ b/apps/sim/app/(auth)/login/page.tsx
@@ -1,6 +1,5 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
-import { isRegistrationDisabled } from '@/lib/core/config/env-flags'
 import { getOAuthProviderStatus } from '@/app/(auth)/components/oauth-provider-checker'
 import LoginLoading from '@/app/(auth)/login/loading'
 import LoginForm from '@/app/(auth)/login/login-form'
@@ -20,7 +19,6 @@ export default async function LoginPage() {
         githubAvailable={githubAvailable}
         googleAvailable={googleAvailable}
         microsoftAvailable={microsoftAvailable}
-        registrationDisabled={isRegistrationDisabled}
       />
     </Suspense>
   )
diff --git a/apps/sim/app/(auth)/oauth/consent/consent-view.test.tsx b/apps/sim/app/(auth)/oauth/consent/consent-view.test.tsx
index 41711bd2f6a..85c9bde3b94 100644
--- a/apps/sim/app/(auth)/oauth/consent/consent-view.test.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/consent-view.test.tsx
@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 import { act } from 'react'
+import { AuthRoot } from '@sim/auth-ui'
 import { authClientMock, authClientMockFns } from '@sim/testing/mocks/auth-client.mock'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
@@ -29,11 +30,10 @@ function button(label: string): HTMLButtonElement {
   return found
 }
 
-async function click(label: string) {
-  await act(async () => {
-    button(label).click()
-    await vi.advanceTimersByTimeAsync(1)
-  })
+function accountButton(): HTMLButtonElement {
+  const found = container.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')
+  if (!found) throw new Error('Missing account menu')
+  return found
 }
 
 describe('OAuth consent view', () => {
@@ -46,18 +46,21 @@ describe('OAuth consent view', () => {
       name: 'Sim CLI',
     })
     container = document.createElement('div')
+    document.body.appendChild(container)
     root = createRoot(container)
     act(() =>
       root.render(
         <QueryClientProvider client={queryClient}>
-          <OAuthConsentView
-            refusal={null}
-            clientId='sim-cli'
-            authorizationRequestKey='request'
-            scope='offline_access api:read api:write'
-            redirectUri='http://127.0.0.1:1234/callback'
-            email='test@example.com'
-          />
+          <AuthRoot>
+            <OAuthConsentView
+              refusal={null}
+              clientId='sim-cli'
+              authorizationRequestKey='request'
+              scope='offline_access api:read api:write'
+              redirectUri='http://127.0.0.1:1234/callback'
+              email='test@example.com'
+            />
+          </AuthRoot>
         </QueryClientProvider>
       )
     )
@@ -65,6 +68,7 @@ describe('OAuth consent view', () => {
 
   afterEach(() => {
     act(() => root.unmount())
+    container.remove()
     queryClient.clear()
     vi.useRealTimers()
   })
@@ -76,10 +80,20 @@ describe('OAuth consent view', () => {
         finish = resolve
       })
     )
-    await click('Use another account')
+    await act(async () => {
+      accountButton().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      await vi.advanceTimersByTimeAsync(20)
+    })
+    const switchAccount = container.querySelector<HTMLElement>('[role="menuitem"]')
+    expect(switchAccount?.textContent).toBe('Use another account')
+    await act(async () => {
+      switchAccount?.click()
+      await vi.advanceTimersByTimeAsync(1)
+    })
     expect(button('Allow').disabled).toBe(true)
     expect(button('Deny').disabled).toBe(true)
-    expect(button('Signing out…').disabled).toBe(true)
+    expect(accountButton().disabled).toBe(true)
+    expect(accountButton().textContent).toContain('Signing out…')
     await act(async () => {
       finish({ error: { message: 'Unable to end this session.' } })
       await vi.advanceTimersByTimeAsync(1)
@@ -87,7 +101,8 @@ describe('OAuth consent view', () => {
     expect(container.querySelector('[role="alert"]')?.textContent).toBe(
       'Unable to end this session.'
     )
-    expect(container.textContent).toContain('Continuing as test@example.com.')
+    expect(accountButton().textContent).toContain('Signed in as')
+    expect(accountButton().textContent).toContain('test@example.com')
     expect(button('Allow').disabled).toBe(false)
     expect(mocks.consent).not.toHaveBeenCalled()
   })
diff --git a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
index b083ef34f92..042899bdb6d 100644
--- a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
@@ -1,19 +1,13 @@
 'use client'
 
-import { Chip } from '@sim/emcn'
-import { Check } from '@sim/emcn/icons'
+import { AuthAccountMenu, AuthIcon, AuthButton as Chip } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import {
   OAUTH_SCOPE_DESCRIPTIONS,
   SIM_CLI_CLIENT_ID,
   visibleOAuthScopes,
 } from '@/lib/auth/oauth-provider'
-import {
-  AuthFormMessage,
-  AuthHeader,
-  AuthSubmitButton,
-  AuthTextLink,
-} from '@/app/(auth)/components'
+import { AuthFormMessage, AuthHeader, AuthSubmitButton } from '@/app/(auth)/components'
 import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading'
 import {
@@ -113,6 +107,7 @@ export function OAuthConsentView({
     consent.isPending || consent.isSuccess || switchAccount.isPending || switchAccount.isSuccess
 
   const decide = (accept: boolean) => {
+    if (isPending) return
     switchAccount.reset()
     consent.mutate(accept, {
       onSuccess: (url) => {
@@ -122,6 +117,7 @@ export function OAuthConsentView({
   }
 
   const changeAccount = () => {
+    if (isPending) return
     consent.reset()
     switchAccount.mutate(undefined, {
       onSuccess: () => {
@@ -133,49 +129,60 @@ export function OAuthConsentView({
   }
 
   return (
-    <div className='space-y-6'>
+    <div className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader
         title={`Authorize ${appName}`}
         description={isCli ? undefined : 'Only continue if you started this yourself.'}
       />
-      <div className='space-y-4'>
+      <AuthAccountMenu
+        email={email}
+        disabled={isPending}
+        pending={switchAccount.isPending}
+        onSwitch={changeAccount}
+      />
+      <div className='au:space-y-[var(--auth-group-gap)]'>
         {scopes.length > 0 && (
-          <ul className='space-y-2 px-2'>
+          <ul className='au:space-y-2 au:px-2'>
             {scopes.map((item) => (
-              <li key={item} className='flex items-start gap-2 text-[var(--text-body)] text-sm'>
-                <Check
-                  aria-hidden='true'
-                  className='mt-[3px] size-[14px] shrink-0 text-[var(--text-icon)]'
+              <li
+                key={item}
+                className='au:flex au:items-start au:gap-2 au:text-[var(--auth-primary)] au:text-body'
+              >
+                <AuthIcon
+                  name='check'
+                  className='au:mt-[3px] au:size-4 au:shrink-0 au:text-[var(--auth-secondary)]'
                 />
                 <span>{OAUTH_SCOPE_DESCRIPTIONS[item]}</span>
               </li>
             ))}
           </ul>
         )}
-        <AuthSubmitButton
-          type='button'
-          loading={consent.isPending && consent.variables === true}
-          disabled={isPending}
-          loadingLabel='Authorizing'
-          onClick={() => decide(true)}
-        >
-          Allow
-        </AuthSubmitButton>
-        <Chip
-          type='button'
-          variant='border'
-          fullWidth
-          disabled={isPending}
-          className={AUTH_BUTTON_CLASS}
-          onClick={() => decide(false)}
-        >
-          {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'}
-        </Chip>
         {!isCli && destination && (
-          <p className='break-words text-center text-[var(--text-muted)] text-caption'>
+          <p className='au:break-words au:text-[var(--auth-secondary)] au:text-caption'>
             Returns to {destination}.
           </p>
         )}
+        <div className='au:space-y-2'>
+          <AuthSubmitButton
+            type='button'
+            loading={consent.isPending && consent.variables === true}
+            disabled={isPending}
+            loadingLabel='Authorizing'
+            onClick={() => decide(true)}
+          >
+            Allow
+          </AuthSubmitButton>
+          <Chip
+            type='button'
+            variant='border'
+            fullWidth
+            disabled={isPending}
+            className={AUTH_BUTTON_CLASS}
+            onClick={() => decide(false)}
+          >
+            {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'}
+          </Chip>
+        </div>
         {(consent.isError || switchAccount.isError) && (
           <div role='alert'>
             <AuthFormMessage type='error' align='center'>
@@ -186,12 +193,6 @@ export function OAuthConsentView({
             </AuthFormMessage>
           </div>
         )}
-        <p className='break-words text-center text-[var(--text-muted)] text-caption'>
-          Continuing as {email}.{' '}
-          <AuthTextLink onClick={changeAccount} disabled={isPending}>
-            {switchAccount.isPending ? 'Signing out…' : 'Use another account'}
-          </AuthTextLink>
-        </p>
       </div>
     </div>
   )
diff --git a/apps/sim/app/(auth)/oauth/consent/loading.tsx b/apps/sim/app/(auth)/oauth/consent/loading.tsx
index ec26b7da3e8..96b9dc3031c 100644
--- a/apps/sim/app/(auth)/oauth/consent/loading.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/loading.tsx
@@ -1,12 +1,12 @@
-import { Loader } from '@sim/emcn'
+import { AuthLoader as Loader } from '@sim/auth-ui'
 import { AuthHeader } from '@/app/(auth)/components'
 
 export function OAuthConsentLoading() {
   return (
-    <div role='status' className='space-y-6'>
+    <div role='status' className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader title='Review app access' description='Loading the authorization request…' />
-      <div className='flex justify-center'>
-        <Loader aria-hidden='true' className='size-5' animate />
+      <div className='au:flex au:justify-center'>
+        <Loader aria-hidden='true' className='au:size-5' animate />
       </div>
     </div>
   )
diff --git a/apps/sim/app/(auth)/oauth/consent/page.tsx b/apps/sim/app/(auth)/oauth/consent/page.tsx
index 50956b2fc3d..807fbb8cbd8 100644
--- a/apps/sim/app/(auth)/oauth/consent/page.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/page.tsx
@@ -49,7 +49,7 @@ export default async function OAuthConsentPage({
   const authorizationRequestKey = refusal ? null : JSON.stringify(raw)
 
   return (
-    <div className='[overflow-wrap:anywhere]'>
+    <div className='au:[overflow-wrap:anywhere]'>
       <OAuthConsentView
         refusal={refusal}
         clientId={params?.client_id ?? null}
diff --git a/apps/sim/app/(auth)/reset-password/loading.tsx b/apps/sim/app/(auth)/reset-password/loading.tsx
index 6535a7e6e86..6d745c8f97e 100644
--- a/apps/sim/app/(auth)/reset-password/loading.tsx
+++ b/apps/sim/app/(auth)/reset-password/loading.tsx
@@ -7,11 +7,11 @@ import {
 export default function ResetPasswordLoading() {
   return (
     <AuthLoadingFrame>
-      <AuthLoadingSkeleton shape='title' className='w-[160px]' />
-      <AuthLoadingSkeleton shape='label' className='mt-3 w-[280px]' />
-      <AuthLoadingField labelWidthClassName='w-[40px]' className='mt-8' />
-      <AuthLoadingSkeleton shape='control' className='mt-6 w-full' />
-      <AuthLoadingSkeleton shape='label' className='mt-6 w-[120px]' />
+      <AuthLoadingSkeleton shape='title' className='au:w-[160px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[280px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[40px]' />
+      <AuthLoadingSkeleton shape='control' className='au:w-full' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[120px]' />
     </AuthLoadingFrame>
   )
 }
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
index e459ed070a3..521d48631d4 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
@@ -62,7 +62,7 @@ function ResetPasswordContent() {
   }
 
   return (
-    <div className='space-y-6'>
+    <div className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader title='Reset your password' description='Enter a new password for your account' />
 
       <SetNewPasswordForm
@@ -81,7 +81,9 @@ function ResetPasswordContent() {
 export default function ResetPasswordPage() {
   return (
     <Suspense
-      fallback={<div className='flex min-h-[320px] items-center justify-center'>Loading…</div>}
+      fallback={
+        <div className='au:flex au:min-h-[320px] au:items-center au:justify-center'>Loading…</div>
+      }
     >
       <ResetPasswordContent />
     </Suspense>
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
index f2825665766..d7b08975e96 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { cn } from '@sim/emcn'
+import { cn } from '@sim/auth-ui'
 import {
   AuthField,
   AuthFormMessage,
@@ -32,6 +32,7 @@ export function SetNewPasswordForm({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (isSubmitting || !token) return
 
     const errors: string[] = []
 
@@ -72,14 +73,26 @@ export function SetNewPasswordForm({
     onSubmit(password)
   }
 
-  const hasValidationErrors = validationMessages.length > 0
+  const passwordErrors = validationMessages.filter(
+    (message) => message !== 'Passwords do not match'
+  )
+  const confirmationErrors = validationMessages.filter(
+    (message) => message === 'Passwords do not match'
+  )
 
   return (
-    <form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
-      <div className='space-y-5'>
-        <AuthField htmlFor='password' label='New Password'>
+    <form onSubmit={handleSubmit} className={cn('au:space-y-[var(--auth-group-gap)]', className)}>
+      <div className='au:space-y-5'>
+        <AuthField
+          htmlFor='password'
+          label='New password'
+          errors={passwordErrors}
+          hint='8+ characters, upper/lowercase, number and symbol.'
+        >
           <PasswordInput
             id='password'
+            name='password'
+            aria-describedby='password-hint'
             autoCapitalize='none'
             autoComplete='new-password'
             autoCorrect='off'
@@ -88,12 +101,13 @@ export function SetNewPasswordForm({
             onChange={(e) => setPassword(e.target.value)}
             required
             placeholder='Enter new password'
-            error={hasValidationErrors}
+            error={passwordErrors.length > 0}
           />
         </AuthField>
-        <AuthField htmlFor='confirmPassword' label='Confirm Password'>
+        <AuthField htmlFor='confirmPassword' label='Confirm password' errors={confirmationErrors}>
           <PasswordInput
             id='confirmPassword'
+            name='confirmPassword'
             autoCapitalize='none'
             autoComplete='new-password'
             autoCorrect='off'
@@ -102,18 +116,10 @@ export function SetNewPasswordForm({
             onChange={(e) => setConfirmPassword(e.target.value)}
             required
             placeholder='Confirm new password'
-            error={hasValidationErrors}
+            error={confirmationErrors.length > 0}
           />
         </AuthField>
 
-        {hasValidationErrors && (
-          <AuthFormMessage type='error'>
-            {validationMessages.map((error) => (
-              <p key={error}>{error}</p>
-            ))}
-          </AuthFormMessage>
-        )}
-
         {statusType && statusMessage && (
           <AuthFormMessage type={statusType === 'success' ? 'success' : 'error'}>
             <p>{statusMessage}</p>
diff --git a/apps/sim/app/(auth)/signup/loading.tsx b/apps/sim/app/(auth)/signup/loading.tsx
index bb16f3cd39d..82c1a91efec 100644
--- a/apps/sim/app/(auth)/signup/loading.tsx
+++ b/apps/sim/app/(auth)/signup/loading.tsx
@@ -8,13 +8,13 @@ import {
 export default function SignupLoading() {
   return (
     <AuthLoadingFrame>
-      <AuthLoadingSkeleton shape='title' className='w-[100px]' />
-      <AuthLoadingField labelWidthClassName='w-[40px]' className='mt-8' />
-      <AuthLoadingField labelWidthClassName='w-[40px]' className='mt-4' />
-      <AuthLoadingField labelWidthClassName='w-[64px]' className='mt-4' />
-      <AuthLoadingSkeleton shape='control' className='mt-6 w-full' />
+      <AuthLoadingSkeleton shape='title' className='au:w-[100px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[40px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[40px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[64px]' />
+      <AuthLoadingSkeleton shape='control' className='au:w-full' />
       <AuthLoadingAlternateActions />
-      <AuthLoadingSkeleton shape='label' className='mt-6 w-[220px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[220px]' />
     </AuthLoadingFrame>
   )
 }
diff --git a/apps/sim/app/(auth)/signup/registration-disabled.tsx b/apps/sim/app/(auth)/signup/registration-disabled.tsx
index 2096c056506..e9dd550423d 100644
--- a/apps/sim/app/(auth)/signup/registration-disabled.tsx
+++ b/apps/sim/app/(auth)/signup/registration-disabled.tsx
@@ -16,7 +16,7 @@ interface RegistrationDisabledProps {
  */
 export function RegistrationDisabled({ callbackUrl, isInviteFlow }: RegistrationDisabledProps) {
   return (
-    <div className='space-y-6'>
+    <div className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader
         title='Account creation is disabled'
         description='Ask your admin to create an account for you.'
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 8eedc7f0d91..b025d30fa4e 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -15,7 +15,6 @@ import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { captureEvent } from '@/lib/posthog/client'
 import {
-  buildAuthCrossLink,
   DEFAULT_POST_AUTH_ROUTE,
   POST_AUTH_REDIRECT_STORAGE_KEY,
   resolveAuthRedirect,
@@ -24,17 +23,18 @@ import {
 } from '@/app/(auth)/auth-redirect'
 import {
   AuthDivider,
+  AuthEmailInput,
   AuthField,
   AuthFormMessage,
   AuthHeader,
   AuthInput,
   AuthLegalFooter,
-  AuthNavPrompt,
   AuthSubmitButton,
   PasswordInput,
   SocialLoginButtons,
   SSOLoginButton,
 } from '@/app/(auth)/components'
+import SignupLoading from '@/app/(auth)/signup/loading'
 import { useCaptureWhenReady } from '@/hooks/use-capture-when-ready'
 
 const logger = createLogger('SignupForm')
@@ -125,7 +125,7 @@ function SignupFormContent({
   const [formError, setFormError] = useState<string | null>(null)
   const turnstileRef = useRef<TurnstileInstance>(null)
   const [turnstileSiteKey] = useState(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
-  const { rawCallbackUrl: rawRedirectUrl, isInviteFlow } = resolveAuthRedirect({
+  const { rawCallbackUrl: rawRedirectUrl } = resolveAuthRedirect({
     redirect: searchParams.get('redirect'),
     callbackUrl: searchParams.get('callbackUrl'),
     inviteFlow: searchParams.get('invite_flow'),
@@ -404,16 +404,22 @@ function SignupFormContent({
   const canSubmit = name.trim().length > 0 && email.trim().length > 0 && password.length > 0
 
   return (
-    <div className='space-y-6'>
-      <AuthHeader title='Create an account' description='Create an account or log in' />
+    <div className='au:space-y-[var(--auth-group-gap)]'>
+      <AuthHeader title='Create an account' description='Get started with Sim.' />
+
+      {!emailEnabled && !hasSocial && !ssoEnabled && (
+        <AuthFormMessage type='error'>
+          No sign-in methods are enabled. Contact your administrator for access.
+        </AuthFormMessage>
+      )}
 
       {hasOnlySSO && (
         <SSOLoginButton callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE} variant='primary' />
       )}
 
       {emailEnabled && (
-        <form onSubmit={onSubmit} className='space-y-6'>
-          <div className='space-y-5'>
+        <form onSubmit={onSubmit} className='au:space-y-[var(--auth-group-gap)]'>
+          <div className='au:space-y-5'>
             <AuthField htmlFor='name' label='Full name' errors={nameFieldErrors}>
               <AuthInput
                 id='name'
@@ -423,32 +429,36 @@ function SignupFormContent({
                 autoCapitalize='words'
                 autoComplete='name'
                 title='Name can only contain letters, spaces, hyphens, and apostrophes'
+                disabled={isLoading}
                 value={name}
                 onChange={handleNameChange}
                 error={nameFieldErrors.length > 0}
               />
             </AuthField>
             <AuthField htmlFor='email' label='Email' errors={emailFieldErrors}>
-              <AuthInput
+              <AuthEmailInput
                 id='email'
                 name='email'
-                placeholder='Enter your email'
-                autoCapitalize='none'
-                autoComplete='email'
-                autoCorrect='off'
+                disabled={isLoading}
                 value={email}
                 onChange={handleEmailChange}
                 error={emailHasError}
               />
             </AuthField>
-            <AuthField htmlFor='password' label='Password' errors={passwordFieldErrors}>
+            <AuthField
+              htmlFor='password'
+              label='Password'
+              errors={passwordFieldErrors}
+              hint='8+ characters, upper/lowercase, number and symbol.'
+            >
               <PasswordInput
                 id='password'
                 name='password'
                 autoCapitalize='none'
                 autoComplete='new-password'
-                placeholder='Enter your password'
+                aria-describedby='password-hint'
                 autoCorrect='off'
+                disabled={isLoading}
                 value={password}
                 onChange={handlePasswordChange}
                 error={passwordFieldErrors.length > 0}
@@ -489,22 +499,11 @@ function SignupFormContent({
           googleAvailable={googleAvailable}
           microsoftAvailable={microsoftAvailable}
           callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE}
-        >
-          {ssoEnabled && !hasOnlySSO && (
-            <SSOLoginButton
-              callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE}
-              variant='outline'
-            />
-          )}
-        </SocialLoginButtons>
+          ssoEnabled={ssoEnabled && !hasOnlySSO}
+          disabled={isLoading}
+        />
       )}
 
-      <AuthNavPrompt
-        prompt='Already have an account?'
-        href={buildAuthCrossLink('/login', { callbackUrl: redirectUrl || null, isInviteFlow })}
-        linkLabel='Sign in'
-      />
-
       <AuthLegalFooter action='creating an account' />
     </div>
   )
@@ -518,9 +517,7 @@ export default function SignupPage({
   emailVerificationEnabled,
 }: SignupFormProps) {
   return (
-    <Suspense
-      fallback={<div className='flex min-h-[320px] items-center justify-center'>Loading…</div>}
-    >
+    <Suspense fallback={<SignupLoading />}>
       <SignupFormContent
         githubAvailable={githubAvailable}
         googleAvailable={googleAvailable}
diff --git a/apps/sim/app/(auth)/sso/loading.tsx b/apps/sim/app/(auth)/sso/loading.tsx
index fc36d8d1835..fddf1321272 100644
--- a/apps/sim/app/(auth)/sso/loading.tsx
+++ b/apps/sim/app/(auth)/sso/loading.tsx
@@ -7,11 +7,11 @@ import {
 export default function SSOLoading() {
   return (
     <AuthLoadingFrame>
-      <AuthLoadingSkeleton shape='title' className='w-[120px]' />
-      <AuthLoadingSkeleton shape='label' className='mt-3 w-[260px]' />
-      <AuthLoadingField labelWidthClassName='w-[80px]' className='mt-8' />
-      <AuthLoadingSkeleton shape='control' className='mt-6 w-full' />
-      <AuthLoadingSkeleton shape='label' className='mt-6 w-[120px]' />
+      <AuthLoadingSkeleton shape='title' className='au:w-[120px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[260px]' />
+      <AuthLoadingField labelWidthClassName='au:w-[80px]' />
+      <AuthLoadingSkeleton shape='control' className='au:w-full' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[120px]' />
     </AuthLoadingFrame>
   )
 }
diff --git a/apps/sim/app/(auth)/verify/loading.tsx b/apps/sim/app/(auth)/verify/loading.tsx
index 4fa87a42400..16fd565ad0f 100644
--- a/apps/sim/app/(auth)/verify/loading.tsx
+++ b/apps/sim/app/(auth)/verify/loading.tsx
@@ -6,10 +6,10 @@ import {
 export default function VerifyLoading() {
   return (
     <AuthLoadingFrame>
-      <AuthLoadingSkeleton shape='title' className='w-[180px]' />
-      <AuthLoadingSkeleton shape='label' className='mt-3 w-[300px]' />
-      <AuthLoadingSkeleton shape='label' className='mt-1 w-[240px]' />
-      <AuthLoadingSkeleton shape='control' className='mt-8 w-full' />
+      <AuthLoadingSkeleton shape='title' className='au:w-[180px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[300px]' />
+      <AuthLoadingSkeleton shape='label' className='au:w-[240px]' />
+      <AuthLoadingSkeleton shape='control' className='au:w-full' />
     </AuthLoadingFrame>
   )
 }
diff --git a/apps/sim/app/(auth)/verify/use-verification.ts b/apps/sim/app/(auth)/verify/use-verification.ts
index 1c52d52ebf3..4592c81a734 100644
--- a/apps/sim/app/(auth)/verify/use-verification.ts
+++ b/apps/sim/app/(auth)/verify/use-verification.ts
@@ -92,7 +92,7 @@ export function useVerification({
   const isOtpComplete = otp.length === 6
 
   async function verifyCode() {
-    if (!isOtpComplete || !email) return
+    if (!isOtpComplete || !email || status === 'verifying' || isResending) return
 
     setStatus('verifying')
     setErrorMessage('')
@@ -157,7 +157,14 @@ export function useVerification({
   }
 
   function resendCode() {
-    if (!email || !hasEmailService || !isEmailVerificationEnabled) return
+    if (
+      !email ||
+      !hasEmailService ||
+      !isEmailVerificationEnabled ||
+      isResending ||
+      status === 'verifying'
+    )
+      return
 
     setIsResending(true)
     setErrorMessage('')
@@ -168,7 +175,11 @@ export function useVerification({
         email: normalizedEmail,
         type: 'email-verification',
       })
-      .then(() => {})
+      .then((response) => {
+        if (response.error) {
+          setErrorMessage('Failed to resend verification code. Please try again later.')
+        }
+      })
       .catch(() => {
         setErrorMessage('Failed to resend verification code. Please try again later.')
       })
diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx
index 88d1c2e9d67..042285c4aa1 100644
--- a/apps/sim/app/(auth)/verify/verify-content.tsx
+++ b/apps/sim/app/(auth)/verify/verify-content.tsx
@@ -1,15 +1,10 @@
 'use client'
 
 import { Suspense, useEffect, useState } from 'react'
-import { cn, InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn'
+import { AuthCodeEntry } from '@sim/auth-ui'
 import { POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
-import {
-  AuthFormMessage,
-  AuthHeader,
-  AuthNavPrompt,
-  AuthSubmitButton,
-  AuthTextLink,
-} from '@/app/(auth)/components'
+import { AuthHeader, AuthNavPrompt } from '@/app/(auth)/components'
+import VerifyLoading from '@/app/(auth)/verify/loading'
 import { useVerification } from '@/app/(auth)/verify/use-verification'
 
 interface VerifyContentProps {
@@ -18,8 +13,6 @@ interface VerifyContentProps {
   isEmailVerificationEnabled: boolean
 }
 
-const OTP_SLOTS = [0, 1, 2, 3, 4, 5] as const
-
 function VerificationForm({
   hasEmailService,
   isProduction,
@@ -29,21 +22,10 @@ function VerificationForm({
   isProduction: boolean
   isEmailVerificationEnabled: boolean
 }) {
-  const {
-    otp,
-    email,
-    status,
-    isResending,
-    errorMessage,
-    isOtpComplete,
-    verifyCode,
-    resendCode,
-    handleOtpChange,
-  } = useVerification({ hasEmailService, isProduction, isEmailVerificationEnabled })
+  const { otp, email, status, isResending, errorMessage, verifyCode, resendCode, handleOtpChange } =
+    useVerification({ hasEmailService, isProduction, isEmailVerificationEnabled })
 
   const isVerified = status === 'verified'
-  const isLoading = status === 'verifying' || isResending
-  const isInvalidOtp = status === 'error'
 
   const [countdown, setCountdown] = useState(0)
 
@@ -59,7 +41,7 @@ function VerificationForm({
   }
 
   return (
-    <div className='space-y-6'>
+    <div className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader
         title={isVerified ? 'Email Verified' : 'Verify your email'}
         description={
@@ -70,64 +52,30 @@ function VerificationForm({
               : hasEmailService
                 ? `A verification code has been sent to ${email || 'your email'}`
                 : !isProduction
-                  ? 'Development mode: Check your console logs for the verification code'
+                  ? 'Email delivery is not configured on this development deployment.'
                   : 'Error: Email verification is enabled but no email service is configured'
         }
       />
 
       {!isVerified && isEmailVerificationEnabled && (
-        <div className='space-y-6'>
-          <div className='space-y-5'>
-            <p className='text-center text-[var(--text-muted)] text-sm'>
-              Enter the 6-digit code to verify your account.
-              {hasEmailService ? " If you don't see it in your inbox, check your spam folder." : ''}
-            </p>
-
-            <div className='flex justify-center'>
-              <InputOTP maxLength={6} value={otp} onChange={handleOtpChange} disabled={isLoading}>
-                <InputOTPGroup>
-                  {OTP_SLOTS.map((index) => (
-                    <InputOTPSlot
-                      key={index}
-                      index={index}
-                      className={cn(isInvalidOtp && 'border-[var(--text-error)]')}
-                    />
-                  ))}
-                </InputOTPGroup>
-              </InputOTP>
-            </div>
-
-            {errorMessage && (
-              <AuthFormMessage type='error' align='center'>
-                <p>{errorMessage}</p>
-              </AuthFormMessage>
-            )}
-          </div>
-
-          <AuthSubmitButton
-            type='button'
-            onClick={verifyCode}
-            loading={isLoading}
-            loadingLabel='Verifying…'
-            disabled={!isOtpComplete}
-          >
-            Verify Email
-          </AuthSubmitButton>
-
-          {hasEmailService && (
-            <p className='text-center text-[var(--text-muted)] text-sm'>
-              Didn't receive a code?{' '}
-              {countdown > 0 ? (
-                <span>
-                  Resend in <span className='text-[var(--text-primary)]'>{countdown}s</span>
-                </span>
-              ) : (
-                <AuthTextLink onClick={handleResend} disabled={isLoading}>
-                  Resend
-                </AuthTextLink>
-              )}
-            </p>
-          )}
+        <div className='au:space-y-[var(--auth-group-gap)]'>
+          <AuthCodeEntry
+            value={otp}
+            onChange={handleOtpChange}
+            onVerify={() => {
+              void verifyCode()
+            }}
+            onResend={hasEmailService ? handleResend : undefined}
+            verifying={status === 'verifying'}
+            resending={isResending}
+            countdown={countdown}
+            error={errorMessage}
+            help={
+              hasEmailService
+                ? 'Check your spam folder, or return to signup to use a different email address.'
+                : undefined
+            }
+          />
 
           <AuthNavPrompt
             href='/signup'
@@ -145,24 +93,13 @@ function VerificationForm({
   )
 }
 
-function VerificationFormFallback() {
-  return (
-    <div className='text-center'>
-      <div className='animate-pulse'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
-        <div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
-      </div>
-    </div>
-  )
-}
-
 export function VerifyContent({
   hasEmailService,
   isProduction,
   isEmailVerificationEnabled,
 }: VerifyContentProps) {
   return (
-    <Suspense fallback={<VerificationFormFallback />}>
+    <Suspense fallback={<VerifyLoading />}>
       <VerificationForm
         hasEmailService={hasEmailService}
         isProduction={isProduction}
diff --git a/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx b/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx
index 3a1b15e4f7e..2ef0786964d 100644
--- a/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx
+++ b/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/app/(interfaces)/chat/components'
 import { CHAT_ERROR_MESSAGES, CHAT_REQUEST_TIMEOUT_MS } from '@/app/(interfaces)/chat/constants'
 import { useChatStreaming } from '@/app/(interfaces)/chat/hooks'
+import { InterfacesShell } from '@/app/(interfaces)/components'
 import SSOAuth from '@/ee/sso/components/sso-auth'
 import { useDeployedChatConfig } from '@/hooks/queries/chats'
 import { useGitHubStars } from '@/hooks/queries/github-stars'
@@ -309,7 +310,11 @@ export default function ChatClient({ identifier }: { identifier: string }) {
 
   if (chatConfigError) {
     logger.error('Error fetching chat config:', chatConfigError)
-    return <ChatErrorState error={CHAT_ERROR_MESSAGES.CHAT_UNAVAILABLE} />
+    return (
+      <InterfacesShell>
+        <ChatErrorState error={CHAT_ERROR_MESSAGES.CHAT_UNAVAILABLE} />
+      </InterfacesShell>
+    )
   }
 
   if (authRequired) {
@@ -325,7 +330,11 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   }
 
   if (!chatConfig) {
-    return <ChatLoadingState />
+    return (
+      <InterfacesShell>
+        <ChatLoadingState />
+      </InterfacesShell>
+    )
   }
 
   return (
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
index 685f833aa33..930f8000feb 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { AuthCodeEntry, AuthEmailInput, AuthField, AuthHeader, AuthStack } from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { AuthSubmitButton, AuthTextLink } from '@/app/(auth)/components'
+import { AuthShell, AuthSubmitButton } from '@/app/(auth)/components'
 import { useChatEmailOtpRequest, useChatEmailOtpVerify } from '@/hooks/queries/chats'
 
 const logger = createLogger('EmailAuth')
@@ -56,6 +56,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
   }
 
   const handleSendOtp = async () => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     const emailValidationErrors = validateEmailField(email)
     setEmailErrors(emailValidationErrors)
 
@@ -75,6 +76,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
   }
 
   const handleVerifyOtp = async (otp?: string) => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     const codeToVerify = otp || otpValue
 
     if (!codeToVerify || codeToVerify.length !== 6) {
@@ -92,6 +94,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
   }
 
   const handleResendOtp = async () => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     setAuthError(null)
     setCountdown(30)
 
@@ -106,145 +109,66 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
   }
 
   return (
-    <div className='flex flex-1 items-center justify-center px-4 py-16'>
-      <div className='w-full max-w-[410px]'>
-        <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              {showOtpVerification
-                ? `A verification code has been sent to ${email}`
-                : 'This chat requires email verification'}
-            </p>
-          </div>
-
-          <div className='mt-8 w-full max-w-[410px]'>
-            {!showOtpVerification ? (
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault()
-                  handleSendOtp()
-                }}
-                className='space-y-6'
-              >
-                <div className='space-y-2'>
-                  <div className='flex items-center justify-between'>
-                    <Label htmlFor='email'>Email</Label>
-                  </div>
-                  <Input
-                    id='email'
-                    name='email'
-                    placeholder='Enter your email'
-                    required
-                    autoCapitalize='none'
-                    autoComplete='email'
-                    autoCorrect='off'
-                    value={email}
-                    onChange={handleEmailChange}
-                    className={cn(
-                      hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
-                  />
-                  {hasEmailError && (
-                    <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
-                      {emailErrors.map((error) => (
-                        <p key={error}>{error}</p>
-                      ))}
-                    </div>
-                  )}
-                </div>
-
-                <AuthSubmitButton
-                  type='submit'
-                  loading={requestOtp.isPending}
-                  loadingLabel='Sending Code…'
-                >
-                  Continue
-                </AuthSubmitButton>
-              </form>
-            ) : (
-              <div className='space-y-6'>
-                <p className='text-center text-[var(--text-muted)] text-sm'>
-                  Enter the 6-digit code to verify your account. If you don't see it in your inbox,
-                  check your spam folder.
-                </p>
-
-                <div className='flex justify-center'>
-                  <InputOTP
-                    maxLength={6}
-                    value={otpValue}
-                    onChange={(value) => {
-                      setOtpValue(value)
-                      if (value.length === 6) {
-                        handleVerifyOtp(value)
-                      }
-                    }}
-                    disabled={verifyOtp.isPending}
-                    className={cn('gap-2', authError && 'otp-error')}
-                  >
-                    <InputOTPGroup>
-                      {[0, 1, 2, 3, 4, 5].map((index) => (
-                        <InputOTPSlot
-                          key={index}
-                          index={index}
-                          className={cn(authError && 'border-[var(--text-error)]')}
-                        />
-                      ))}
-                    </InputOTPGroup>
-                  </InputOTP>
-                </div>
-
-                {authError && (
-                  <div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
-                    <p>{authError}</p>
-                  </div>
-                )}
-
-                <AuthSubmitButton
-                  onClick={() => handleVerifyOtp()}
-                  disabled={otpValue.length !== 6}
-                  loading={verifyOtp.isPending}
-                  loadingLabel='Verifying…'
-                >
-                  Verify Email
-                </AuthSubmitButton>
-
-                <div className='text-center'>
-                  <p className='text-[var(--text-muted)] text-sm'>
-                    Didn't receive a code?{' '}
-                    {countdown > 0 ? (
-                      <span>
-                        Resend in <span className='text-[var(--text-primary)]'>{countdown}s</span>
-                      </span>
-                    ) : (
-                      <AuthTextLink
-                        onClick={handleResendOtp}
-                        disabled={verifyOtp.isPending || requestOtp.isPending}
-                      >
-                        Resend
-                      </AuthTextLink>
-                    )}
-                  </p>
-                </div>
-
-                <div className='text-center font-light text-sm'>
-                  <AuthTextLink
-                    onClick={() => {
-                      setShowOtpVerification(false)
-                      setOtpValue('')
-                      setAuthError(null)
-                    }}
-                  >
-                    Change email
-                  </AuthTextLink>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
+    <AuthShell>
+      <AuthStack>
+        <AuthHeader
+          title={showOtpVerification ? 'Verify your email' : 'Email verification'}
+          description={
+            showOtpVerification
+              ? `A verification code has been sent to ${email}`
+              : 'This chat requires email verification'
+          }
+        />
+        {!showOtpVerification ? (
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              void handleSendOtp()
+            }}
+            className='au:space-y-5'
+          >
+            <AuthField htmlFor='email' label='Email' errors={emailErrors}>
+              <AuthEmailInput
+                id='email'
+                name='email'
+                type='email'
+                required
+                value={email}
+                onChange={handleEmailChange}
+                error={hasEmailError}
+                disabled={requestOtp.isPending}
+              />
+            </AuthField>
+            <AuthSubmitButton loading={requestOtp.isPending} loadingLabel='Sending code…'>
+              Continue
+            </AuthSubmitButton>
+          </form>
+        ) : (
+          <AuthCodeEntry
+            value={otpValue}
+            onChange={(value) => {
+              setOtpValue(value)
+              if (value.length === 6) void handleVerifyOtp(value)
+            }}
+            onVerify={() => {
+              void handleVerifyOtp()
+            }}
+            onResend={() => {
+              void handleResendOtp()
+            }}
+            onChangeEmail={() => {
+              setShowOtpVerification(false)
+              setOtpValue('')
+              setAuthError(null)
+            }}
+            verifying={verifyOtp.isPending}
+            resending={requestOtp.isPending}
+            countdown={countdown}
+            error={authError}
+            help="Enter the six-digit code to verify your access. If you don't see it in your inbox, check your spam folder."
+          />
+        )}
+      </AuthStack>
+    </AuthShell>
   )
 }
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
index 378fba15cdc..2cf83fb3367 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { AuthField, AuthHeader, AuthStack, PasswordInput } from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthShell, AuthSubmitButton } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
 const logger = createLogger('PasswordAuth')
@@ -16,7 +15,6 @@ interface PasswordAuthProps {
 
 export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const hasPasswordError = passwordErrors.length > 0
   const authenticate = useChatPasswordAuth(identifier)
@@ -28,6 +26,7 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   }
 
   const handleAuthenticate = async () => {
+    if (authenticate.isPending) return
     if (!password.trim()) {
       setPasswordErrors(['Password is required'])
       return
@@ -43,90 +42,40 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   }
 
   return (
-    <div className='flex flex-1 items-center justify-center px-4 py-16'>
-      <div className='w-full max-w-[410px]'>
-        <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              Password Required
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat is password-protected
-            </p>
-          </div>
-
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              handleAuthenticate()
-            }}
-            className='mt-8 w-full max-w-[410px] space-y-6'
+    <AuthShell>
+      <AuthStack>
+        <AuthHeader title='Password required' description='This chat is password-protected' />
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            void handleAuthenticate()
+          }}
+          className='au:space-y-5'
+        >
+          <AuthField htmlFor='password' label='Password' errors={passwordErrors}>
+            <PasswordInput
+              id='password'
+              name='password'
+              required
+              autoComplete='current-password'
+              autoCapitalize='none'
+              autoCorrect='off'
+              placeholder='Enter password'
+              value={password}
+              disabled={authenticate.isPending}
+              error={hasPasswordError}
+              onChange={handlePasswordChange}
+            />
+          </AuthField>
+          <AuthSubmitButton
+            disabled={!password.trim()}
+            loading={authenticate.isPending}
+            loadingLabel='Authenticating…'
           >
-            <div className='space-y-6'>
-              <div className='flex items-center justify-between'>
-                <Label htmlFor='password'>Password</Label>
-              </div>
-              <div className='relative'>
-                <div className='relative'>
-                  <Input
-                    id='password'
-                    name='password'
-                    required
-                    type={showPassword ? 'text' : 'password'}
-                    autoCapitalize='none'
-                    autoComplete='new-password'
-                    autoCorrect='off'
-                    placeholder='Enter password'
-                    value={password}
-                    onChange={handlePasswordChange}
-                    className={cn(
-                      'pr-10',
-                      hasPasswordError &&
-                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
-                  />
-                  <button
-                    type='button'
-                    onClick={() => setShowPassword(!showPassword)}
-                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
-                  >
-                    {showPassword ? (
-                      <EyeOff className='size-[18px]' />
-                    ) : (
-                      <Eye className='size-[18px]' />
-                    )}
-                  </button>
-                </div>
-                <div
-                  className={cn(
-                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
-                    hasPasswordError ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                  )}
-                  aria-live='polite'
-                >
-                  <div className='overflow-hidden'>
-                    <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
-                      {passwordErrors.map((error) => (
-                        <p key={error}>{error}</p>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <AuthSubmitButton
-              type='submit'
-              disabled={!password.trim()}
-              loading={authenticate.isPending}
-              loadingLabel='Authenticating…'
-            >
-              Continue
-            </AuthSubmitButton>
-          </form>
-        </div>
-      </div>
-    </div>
+            Continue
+          </AuthSubmitButton>
+        </form>
+      </AuthStack>
+    </AuthShell>
   )
 }
diff --git a/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
index e7488618390..af97c56d103 100644
--- a/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
+++ b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
@@ -1,22 +1,15 @@
 import type { ReactNode } from 'react'
-import { SupportFooter } from '@/app/(auth)/components'
+import { InterfacesSupportFooter } from '@/app/(interfaces)/components/interfaces-shell/interfaces-support-footer'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 /**
- * Chrome for the `(interfaces)` route group (chat + resume) — the lightweight,
- * logo-only frame their entry/gate screens wear (chat email / password auth, the
- * embedded SSO gate, the "chat unavailable" message, and the resume gate).
- *
- * It is the shared {@link LogoShell} (light, logo-only header) plus a
- * {@link SupportFooter}. Content is full-width — gate forms center themselves;
- * the live chat UI renders a `fixed inset-0` overlay that covers this frame, and
- * voice mode is full-screen — so the frame is only ever visible on the
- * gate/message states, giving chat and resume the same chrome as the auth pages.
+ * Existing interface chrome for resume and chat availability states.
+ * Resource authentication gates use the independent AuthShell instead.
  */
 interface InterfacesShellProps {
   children: ReactNode
 }
 
 export function InterfacesShell({ children }: InterfacesShellProps) {
-  return <LogoShell footer={<SupportFooter position='static' />}>{children}</LogoShell>
+  return <LogoShell footer={<InterfacesSupportFooter />}>{children}</LogoShell>
 }
diff --git a/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-support-footer.tsx b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-support-footer.tsx
new file mode 100644
index 00000000000..eab0f931aa0
--- /dev/null
+++ b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-support-footer.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useBrandConfig } from '@/ee/whitelabeling'
+
+export function InterfacesSupportFooter() {
+  const brand = useBrandConfig()
+  return (
+    <div className='pb-8 text-center text-[var(--text-muted)] text-caption leading-relaxed'>
+      Need help?{' '}
+      <a
+        href={`mailto:${brand.supportEmail}`}
+        className='text-[var(--text-muted)] underline-offset-4 transition-colors hover:text-[var(--text-body)] hover:underline'
+      >
+        Contact support
+      </a>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(interfaces)/layout.tsx b/apps/sim/app/(interfaces)/layout.tsx
index 91516d93702..bb028e5ec73 100644
--- a/apps/sim/app/(interfaces)/layout.tsx
+++ b/apps/sim/app/(interfaces)/layout.tsx
@@ -1,13 +1,8 @@
 import type { ReactNode } from 'react'
-import { InterfacesShell } from '@/app/(interfaces)/components'
 
-/**
- * Route-group layout for runtime interfaces — chat (`/chat/:identifier`) and
- * resume (`/resume/...`). It renders the shared {@link InterfacesShell} (light,
- * logo-only chrome) around every interface page, so their entry/gate screens get
- * the same frame as the auth sign-in pages. Immersive states (the live chat
- * overlay, voice mode) render full-screen on top of this frame.
- */
-export default function InterfacesLayout({ children }: { children: ReactNode }) {
-  return <InterfacesShell>{children}</InterfacesShell>
+interface InterfacesLayoutProps {
+  children: ReactNode
+}
+export default function InterfacesLayout({ children }: InterfacesLayoutProps) {
+  return children
 }
diff --git a/apps/sim/app/(interfaces)/resume/layout.tsx b/apps/sim/app/(interfaces)/resume/layout.tsx
new file mode 100644
index 00000000000..a95ad1bdba4
--- /dev/null
+++ b/apps/sim/app/(interfaces)/resume/layout.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+import { InterfacesShell } from '@/app/(interfaces)/components'
+
+/**
+ * Route-group layout for runtime interfaces — chat (`/chat/:identifier`) and
+ * resume (`/resume/...`). It renders the shared {@link InterfacesShell} (light,
+ * logo-only chrome) around every interface page, so their entry/gate screens get
+ * the same frame as the auth sign-in pages. Immersive states (the live chat
+ * overlay, voice mode) render full-screen on top of this frame.
+ */
+export default function ResumeLayout({ children }: { children: ReactNode }) {
+  return <InterfacesShell>{children}</InterfacesShell>
+}
diff --git a/apps/sim/app/cli/auth/cli-auth-view.tsx b/apps/sim/app/cli/auth/cli-auth-view.tsx
index f7865af95da..d96486d4296 100644
--- a/apps/sim/app/cli/auth/cli-auth-view.tsx
+++ b/apps/sim/app/cli/auth/cli-auth-view.tsx
@@ -1,7 +1,12 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ChipSelect, type ChipSelectOption, Label } from '@sim/emcn'
+import {
+  AuthReadonlyInput,
+  AuthSelect as ChipSelect,
+  type AuthSelectOption as ChipSelectOption,
+  AuthLabel as Label,
+} from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
@@ -45,7 +50,7 @@ export function CliAuthView() {
 
   if (!resolution.valid) {
     return (
-      <div className='space-y-6'>
+      <div className='au:space-y-[var(--auth-group-gap)]'>
         <AuthHeader
           title='Invalid request'
           description='This page can only be opened by the Sim CLI.'
@@ -84,41 +89,53 @@ export function CliAuthView() {
   const suggested = workspaces.data?.workspaces.some((w) => w.id === request.suggestedWorkspaceId)
     ? request.suggestedWorkspaceId
     : null
-  const workspaceId = selected ?? suggested ?? workspaces.data?.lastActiveWorkspaceId ?? null
+  const workspaceId = workspaces.isError
+    ? null
+    : (selected ?? suggested ?? workspaces.data?.lastActiveWorkspaceId ?? null)
   const chosen = workspaces.data?.workspaces.find((w) => w.id === workspaceId)
 
   return (
-    <div className='space-y-6'>
+    <div className='au:space-y-[var(--auth-group-gap)]'>
       <AuthHeader
         title='Connect your terminal'
         description='Approve only if the code below matches the one in your terminal.'
       />
-      <div className='space-y-4'>
-        <div className='flex items-center justify-center rounded-[10px] border border-[var(--border-1)] py-5'>
-          {/* `pl` offsets the trailing letter-space `tracking` adds after the last glyph, which would otherwise pull the code left of optical center. */}
-          <code className='pl-[0.2em] font-mono text-[28px] text-[var(--text-primary)] leading-none tracking-[0.2em]'>
-            {request.pairing}
-          </code>
-        </div>
+      <div className='au:space-y-[var(--auth-group-gap)]'>
+        <AuthReadonlyInput value={request.pairing} />
         {isPlatform && (
-          <div className='flex flex-col gap-[9px]'>
-            <Label className='text-[var(--text-muted)] text-small'>Default workspace</Label>
+          <div className='au:flex au:flex-col au:gap-2'>
+            <Label
+              htmlFor='terminal-workspace'
+              className='au:text-[var(--auth-secondary)] au:text-control'
+            >
+              Default workspace
+            </Label>
             <ChipSelect
+              id='terminal-workspace'
+              aria-label='Default workspace'
               options={options}
               value={workspaceId ?? NO_DEFAULT_WORKSPACE_VALUE}
               onChange={setSelected}
-              disabled={loadingWorkspaces || workspaces.isError}
+              disabled={
+                loadingWorkspaces || workspaces.isError || approve.isPending || approve.isSuccess
+              }
               // A placeholder only shows when nothing is selected, and the
               // fallback value always counts as a selection — so the loading
               // state has to override the rendered label outright.
-              displayLabel={loadingWorkspaces ? 'Loading workspaces…' : undefined}
+              displayLabel={
+                loadingWorkspaces
+                  ? 'Loading workspaces…'
+                  : workspaces.isError
+                    ? 'Workspaces unavailable'
+                    : undefined
+              }
               placeholder='Select a workspace'
               searchable={options.length > 8}
               searchPlaceholder='Search workspaces'
               fullWidth
               dropdownWidth='trigger'
             />
-            <p className='text-[var(--text-muted)] text-caption'>
+            <p className='au:text-[var(--auth-secondary)] au:text-caption'>
               {loadingWorkspaces
                 ? 'Loading your workspace options…'
                 : workspaces.isError
@@ -137,7 +154,9 @@ export function CliAuthView() {
           loading={approve.isPending || approve.isSuccess}
           disabled={loadingWorkspaces}
           loadingLabel='Connecting'
-          onClick={() =>
+          onClick={() => {
+            if (approve.isPending || approve.isSuccess || loadingWorkspaces) return
+            setSelected(workspaceId ?? NO_DEFAULT_WORKSPACE_VALUE)
             approve.mutate(
               {
                 request: request.request,
@@ -150,7 +169,7 @@ export function CliAuthView() {
               },
               { onSuccess: () => router.push('/cli/auth/done') }
             )
-          }
+          }}
         >
           Connect
         </AuthSubmitButton>
diff --git a/apps/sim/app/cli/auth/loading.tsx b/apps/sim/app/cli/auth/loading.tsx
index e6a96d20127..3edd8533581 100644
--- a/apps/sim/app/cli/auth/loading.tsx
+++ b/apps/sim/app/cli/auth/loading.tsx
@@ -1,22 +1,18 @@
-import { Skeleton } from '@sim/emcn'
+import { AuthStack, AuthSkeleton as Skeleton } from '@sim/auth-ui'
 import { AuthShell } from '@/app/(auth)/components'
 
-/**
- * Consent-card skeleton, shared by the route fallback and `page.tsx`'s Suspense.
- *
- * Bars mirror the card's boxes so hydration doesn't shift the layout: a
- * one-line heading, a description that wraps to two in the 400px column, then
- * the 70px pairing panel (28px type + `py-5` + 1px border) and the `h-9` button.
- */
+/** Mirrors the terminal consent header, pairing code, and approval control. */
 export function CliAuthLoading() {
   return (
-    <div className='flex w-full flex-col items-center'>
-      <Skeleton className='h-[38px] w-[280px] rounded-[4px]' />
-      <Skeleton className='mt-1 h-[23px] w-[360px] rounded-[4px]' />
-      <Skeleton className='h-[23px] w-[240px] rounded-[4px]' />
-      <Skeleton className='mt-6 h-[70px] w-full rounded-[10px]' />
-      <Skeleton className='mt-4 h-9 w-full rounded-[10px]' />
-    </div>
+    <AuthStack>
+      <div className='au:space-y-1'>
+        <Skeleton shape='title' className='au:w-[280px]' />
+        <Skeleton shape='label' className='au:w-[360px]' />
+        <Skeleton shape='label' className='au:w-[240px]' />
+      </div>
+      <Skeleton />
+      <Skeleton />
+    </AuthStack>
   )
 }
 
diff --git a/apps/sim/app/credential-groups/complete/page.tsx b/apps/sim/app/credential-groups/complete/page.tsx
index e9a8243794b..773882918e0 100644
--- a/apps/sim/app/credential-groups/complete/page.tsx
+++ b/apps/sim/app/credential-groups/complete/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { AuthLinkButton as ChipLink } from '@sim/auth-ui'
 import { isValidUuid } from '@sim/utils/id'
 import type { Metadata } from 'next'
 import {
@@ -50,7 +50,7 @@ export default async function CredentialGroupCompletePage({
         }
       />
       {(error || returnHref) && (
-        <div className='mt-6 flex justify-center'>
+        <div className='au:mt-6 au:flex au:justify-center'>
           <ChipLink href={returnHref ?? APP_ENTRY_PATH}>
             {returnHref ? 'Return to Integrations' : 'Open Sim'}
           </ChipLink>
diff --git a/apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx b/apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx
index 24c77bee3cb..71f20bd19e9 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx
@@ -1,16 +1,14 @@
 'use client'
+import { AuthLinkButton, type AuthLinkButtonProps } from '@sim/auth-ui'
 
-import { type ChipLinkProps, chipVariants } from '@sim/emcn'
-
-interface OAuthConnectLinkProps extends Pick<ChipLinkProps, 'variant'> {
+interface OAuthConnectLinkProps extends Pick<AuthLinkButtonProps, 'variant'> {
   href: string
   reconnect?: boolean
 }
-
 export function OAuthConnectLink({ href, reconnect = false, variant }: OAuthConnectLinkProps) {
   return (
-    <a href={href} className={chipVariants({ variant })}>
+    <AuthLinkButton href={href} variant={variant}>
       {reconnect ? 'Reconnect' : 'Connect'}
-    </a>
+    </AuthLinkButton>
   )
 }
diff --git a/apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx b/apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx
index 66e946c987a..f79f298caff 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { useToast } from '@sim/emcn'
+import { AuthNotification } from '@sim/auth-ui'
 import { useQueryStates } from 'nuqs'
 import {
   credentialGroupEnrollmentStatusParsers,
@@ -14,7 +14,6 @@ interface CredentialGroupOAuthToastProps {
 }
 
 export function CredentialGroupOAuthToast({ message, variant }: CredentialGroupOAuthToastProps) {
-  const { toast } = useToast()
   const [, setOAuthStatus] = useQueryStates(
     credentialGroupEnrollmentStatusParsers,
     credentialGroupEnrollmentStatusUrlKeys
@@ -25,14 +24,11 @@ export function CredentialGroupOAuthToast({ message, variant }: CredentialGroupO
     if (shownRef.current) return
     shownRef.current = true
 
-    if (variant === 'success') toast.success(message)
-    else toast.error(message)
-
     void setOAuthStatus(
       { connected: null, mcp: null, mcpServerId: null, oauth: null, submitted: null },
       { history: 'replace', scroll: false }
     )
-  }, [message, setOAuthStatus, toast, variant])
+  }, [setOAuthStatus])
 
-  return null
+  return <AuthNotification type={variant}>{message}</AuthNotification>
 }
diff --git a/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx b/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
index b1529e516b6..058bc67a24a 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
@@ -34,6 +34,7 @@ vi.mock('@/lib/credential-groups/managed-mcp-connector-icons', () => ({
   getManagedMcpConnectorIcon: () => () => null,
 }))
 vi.mock('@/app/(auth)/components', () => ({
+  AuthShell: ({ children }: { children: ReactNode }) => <main>{children}</main>,
   AuthHeader: ({ title, description }: { title: string; description: string }) => (
     <header>
       <h1>{title}</h1>
@@ -42,9 +43,6 @@ vi.mock('@/app/(auth)/components', () => ({
   ),
   SupportFooter: () => null,
 }))
-vi.mock('@/app/(landing)/components/logo-shell', () => ({
-  LogoShell: ({ children }: { children: ReactNode }) => <main>{children}</main>,
-}))
 vi.mock('@/app/credential-groups/enroll/[token]/oauth-toast', () => ({
   CredentialGroupOAuthToast: ({ message }: { message: string }) => (
     <div role='status'>{message}</div>
diff --git a/apps/sim/app/credential-groups/enroll/[token]/page.tsx b/apps/sim/app/credential-groups/enroll/[token]/page.tsx
index 23695eb6b85..9a207a92130 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/page.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/page.tsx
@@ -1,5 +1,10 @@
 import { type ReactNode, Suspense } from 'react'
-import { Chip, ChipLink } from '@sim/emcn'
+import {
+  AuthButton as Chip,
+  AuthLinkButton as ChipLink,
+  AuthResourceRow as SettingsResourceRow,
+  AuthSection as SettingsSection,
+} from '@sim/auth-ui'
 import type { Metadata } from 'next'
 import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
@@ -16,16 +21,10 @@ import { CredentialGroupProviderConfigurationError } from '@/lib/credential-grou
 import { getCredentialGroupProviderService } from '@/lib/credential-groups/providers'
 import { enforcePublicCredentialGroupIpRateLimit } from '@/lib/credential-groups/rate-limit'
 import { APP_ENTRY_PATH, organizationRoutes } from '@/lib/navigation/paths'
-import { AuthHeader, SupportFooter } from '@/app/(auth)/components'
-import { LogoShell } from '@/app/(landing)/components/logo-shell'
+import { AuthHeader, AuthShell as LogoShell, SupportFooter } from '@/app/(auth)/components'
 import { OAuthConnectLink } from '@/app/credential-groups/enroll/[token]/oauth-reconnect-link'
 import { CredentialGroupOAuthToast } from '@/app/credential-groups/enroll/[token]/oauth-toast'
 import { SourceCompletion } from '@/app/desktop/connect/source-completion'
-import {
-  RESOURCE_LIST_STACK,
-  SettingsResourceRow,
-} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
-import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 export const metadata: Metadata = {
   title: 'Connect accounts',
@@ -45,10 +44,8 @@ interface PageShellProps {
 
 function PageShell({ children }: PageShellProps) {
   return (
-    <LogoShell footer={<SupportFooter position='static' />}>
-      <div className='mx-auto flex w-full max-w-[640px] flex-1 flex-col px-5 pt-16 pb-20 max-sm:pt-10'>
-        {children}
-      </div>
+    <LogoShell footer={<SupportFooter />}>
+      <div>{children}</div>
     </LogoShell>
   )
 }
@@ -71,7 +68,7 @@ function UnavailableInvitation({
   return (
     <PageShell>
       {token && <SourceCompletion kind='enrollment' id={token} error='unavailable' />}
-      <div className='my-auto py-16 text-center'>
+      <div className='au:my-auto au:py-16 au:text-center'>
         <AuthHeader
           title={rateLimited ? 'Too many requests' : 'Invitation unavailable'}
           description={
@@ -81,7 +78,7 @@ function UnavailableInvitation({
               : 'Sign in with the account this invitation was sent to. If the link has expired, ask an organization admin for a new invitation.')
           }
         />
-        <div className='mt-6 flex justify-center'>
+        <div className='au:mt-6 au:flex au:justify-center'>
           <ChipLink href={recoveryHref}>{recoveryLabel}</ChipLink>
         </div>
       </div>
@@ -107,7 +104,7 @@ function UnavailableSearchConnection({
         title='Connection unavailable'
         description='Ask an admin to check this source’s connected account settings, then start a new connection.'
       />
-      <div className='mt-6 flex justify-end'>
+      <div className='au:mt-[var(--auth-group-gap)] au:flex au:justify-end'>
         <ChipLink href={returnHref}>{returnLabel}</ChipLink>
       </div>
     </PageShell>
@@ -284,9 +281,9 @@ export default async function CredentialGroupEnrollmentPage({
         }
       />
 
-      <div className='mt-8'>
-        <SettingsSection label='Accounts'>
-          <div className={RESOURCE_LIST_STACK}>
+      <div className='au:mt-[var(--auth-group-gap)]'>
+        <SettingsSection title='Accounts'>
+          <div className='au:space-y-2'>
             {visibleOptions.map((option) => {
               const ProviderIcon = getCredentialGroupProviderService(option.provider).icon
               const connection = option.connections[0]
@@ -296,11 +293,18 @@ export default async function CredentialGroupEnrollmentPage({
                   icon={<ProviderIcon />}
                   title={option.label}
                   description={
-                    focused && connection?.status === 'connected'
-                      ? `${connection.email} · Connected`
-                      : (connection?.email ?? 'Not connected')
+                    option.connections.length > 0
+                      ? option.connections.map((account) => (
+                          <span key={account.email} className='au:block'>
+                            {account.email}
+                            {account.status === 'connected'
+                              ? ' — Connected'
+                              : ' — Reconnect required'}
+                          </span>
+                        ))
+                      : 'Not connected'
                   }
-                  trailing={
+                  actions={
                     focusedConnected ? undefined : (
                       <OAuthConnectLink
                         href={`/api/credential-groups/enroll/${encodeURIComponent(token)}/oauth/${encodeURIComponent(option.id)}${focused ? `?returnTo=${returnToSearch ? 'search' : 'accounts'}` : ''}`}
@@ -327,7 +331,7 @@ export default async function CredentialGroupEnrollmentPage({
                           ? 'Reconnect required'
                           : server.description || 'Not connected'
                     }
-                    trailing={
+                    actions={
                       <OAuthConnectLink
                         href={`/api/credential-groups/enroll/${token}/mcp/${server.id}`}
                         reconnect={Boolean(server.connection)}
@@ -339,7 +343,7 @@ export default async function CredentialGroupEnrollmentPage({
           </div>
         </SettingsSection>
         {focused ? (
-          <div className='mt-6 flex justify-end'>
+          <div className='au:mt-[var(--auth-group-gap)] au:flex au:justify-end'>
             <ChipLink href={returnHref} variant={focusedConnected ? 'primary' : undefined}>
               {returnLabel}
             </ChipLink>
@@ -348,7 +352,7 @@ export default async function CredentialGroupEnrollmentPage({
           <form
             action={`/api/credential-groups/enroll/${token}/complete`}
             method='post'
-            className='mt-6 flex justify-end'
+            className='au:mt-[var(--auth-group-gap)] au:flex au:justify-end'
           >
             <Chip type='submit' variant='primary' disabled={enrollment.status === 'completed'}>
               {enrollment.status === 'completed' ? 'Submitted' : 'Submit'}
diff --git a/apps/sim/app/credential-groups/slack-complete/page.tsx b/apps/sim/app/credential-groups/slack-complete/page.tsx
index 7dc492e13fb..65c66b4f6fa 100644
--- a/apps/sim/app/credential-groups/slack-complete/page.tsx
+++ b/apps/sim/app/credential-groups/slack-complete/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { AuthLinkButton as ChipLink } from '@sim/auth-ui'
 import type { Metadata } from 'next'
 import { APP_ENTRY_PATH, organizationRoutes } from '@/lib/navigation/paths'
 import { SlackCompletion } from '@/app/credential-groups/slack-complete/slack-completion'
diff --git a/apps/sim/app/desktop/auth/authorize-handoff.tsx b/apps/sim/app/desktop/auth/authorize-handoff.tsx
index 6dd608aeca8..c76dbecf6e1 100644
--- a/apps/sim/app/desktop/auth/authorize-handoff.tsx
+++ b/apps/sim/app/desktop/auth/authorize-handoff.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Chip } from '@sim/emcn'
+import { AuthIdentity, AuthButton as Chip } from '@sim/auth-ui'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { createDesktopHandoffTokenContract } from '@/lib/api/contracts/desktop-auth'
@@ -26,6 +26,7 @@ export function AuthorizeHandoff({ state, port, email }: AuthorizeHandoffProps)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const authorize = async () => {
+    if (status === 'working') return
     setStatus('working')
     setErrorMessage(null)
     try {
@@ -52,6 +53,7 @@ export function AuthorizeHandoff({ state, port, email }: AuthorizeHandoffProps)
 
   return (
     <DesktopHandoffShell
+      detail={<AuthIdentity email={email} />}
       title='Sign in to Sim Desktop'
       description={
         status === 'error'
@@ -59,9 +61,16 @@ export function AuthorizeHandoff({ state, port, email }: AuthorizeHandoffProps)
           : `The Sim desktop app on this computer will be signed in as ${email}.`
       }
     >
-      <Chip variant='primary' disabled={status === 'working'} onClick={() => void authorize()}>
-        {status === 'working' ? 'Signing in…' : status === 'error' ? 'Try again' : 'Continue'}
-      </Chip>
+      {
+        <Chip
+          fullWidth
+          variant='primary'
+          disabled={status === 'working'}
+          onClick={() => void authorize()}
+        >
+          {status === 'working' ? 'Signing in…' : status === 'error' ? 'Try again' : 'Continue'}
+        </Chip>
+      }
     </DesktopHandoffShell>
   )
 }
diff --git a/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx b/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
index bf65d74d382..24a72ce8425 100644
--- a/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
+++ b/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
@@ -1,32 +1,24 @@
 import type { ReactNode } from 'react'
-import { LogoShell } from '@/app/(landing)/components/logo-shell'
+import { AuthStatusContent } from '@sim/auth-ui'
+import { AuthShell } from '@/app/(auth)/components'
 
 interface DesktopHandoffShellProps {
   title: string
   description: ReactNode
-  /** Optional action row (a Chip CTA). Omitted on terminal, no-action screens. */
   children?: ReactNode
+  detail?: ReactNode
 }
-
-/**
- * The one frame for every browser-side page in the desktop handoffs — sign-in
- * confirm, connect interstitial, the invalid-link and finished screens.
- *
- * These are public, minimal-chrome gates shown in the visitor's own browser, so
- * they use the same {@link LogoShell} frame and type scale as the global 404 and
- * the public file-share gates rather than styling of their own. Handoff screens
- * are the first thing a new desktop user sees; they should read as Sim.
- */
-export function DesktopHandoffShell({ title, description, children }: DesktopHandoffShellProps) {
+export function DesktopHandoffShell({
+  title,
+  description,
+  children,
+  detail,
+}: DesktopHandoffShellProps) {
   return (
-    <LogoShell center>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3 text-center'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          {title}
-        </h1>
-        <p className='text-[var(--text-muted)] text-lg'>{description}</p>
-        {children ? <div className='mt-3 flex items-center gap-2'>{children}</div> : null}
-      </div>
-    </LogoShell>
+    <AuthShell>
+      <AuthStatusContent title={title} description={description} detail={detail}>
+        {children}
+      </AuthStatusContent>
+    </AuthShell>
   )
 }
diff --git a/apps/sim/app/desktop/connect/connect-launcher.tsx b/apps/sim/app/desktop/connect/connect-launcher.tsx
index df2f07d48b2..cfc37875d80 100644
--- a/apps/sim/app/desktop/connect/connect-launcher.tsx
+++ b/apps/sim/app/desktop/connect/connect-launcher.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Chip } from '@sim/emcn'
+import { AuthButton as Chip } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { client } from '@/lib/auth/client'
 import { getPerRequestOAuthLinkScopes } from '@/lib/oauth/utils'
diff --git a/apps/sim/app/desktop/connect/source-connect-launcher.tsx b/apps/sim/app/desktop/connect/source-connect-launcher.tsx
index b12cd7ad3ff..92aa4b4e817 100644
--- a/apps/sim/app/desktop/connect/source-connect-launcher.tsx
+++ b/apps/sim/app/desktop/connect/source-connect-launcher.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { Chip } from '@sim/emcn'
+import { AuthButton as Chip } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { startDesktopSourceBrowser } from '@/lib/desktop/source-browser'
 import { DesktopHandoffShell } from '@/app/desktop/components/desktop-handoff-shell'
diff --git a/apps/sim/app/desktop/connect/switch-account.tsx b/apps/sim/app/desktop/connect/switch-account.tsx
index bdf33f8cd5d..90f2e13ccde 100644
--- a/apps/sim/app/desktop/connect/switch-account.tsx
+++ b/apps/sim/app/desktop/connect/switch-account.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Chip } from '@sim/emcn'
+import { AuthButton as Chip } from '@sim/auth-ui'
 import { signOut } from '@/lib/auth/client'
 
 interface SwitchAccountProps {
diff --git a/apps/sim/app/f/[token]/public-file-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
index 24da9e8d470..879f84e9899 100644
--- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
@@ -1,32 +1,19 @@
 import type { ReactNode } from 'react'
-import { SupportFooter } from '@/app/(auth)/components/support-footer'
-import { LogoShell } from '@/app/(landing)/components/logo-shell'
+import { AuthStack } from '@sim/auth-ui'
+import { AuthHeader, AuthShell } from '@/app/(auth)/components'
 
 interface PublicFileAuthShellProps {
   title: string
   subtitle: string
   children: ReactNode
 }
-
-/**
- * Light, logo-only shell shared by the public file-share auth gates (password,
- * email OTP, SSO), matching the deployed-chat auth screens. Renders no file
- * metadata — the name/provenance are withheld until the visitor authenticates.
- */
 export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAuthShellProps) {
   return (
-    <LogoShell center footer={<SupportFooter position='static' />}>
-      <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-            {title}
-          </h1>
-          <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-            {subtitle}
-          </p>
-        </div>
-        <div className='mt-8 w-full max-w-[410px]'>{children}</div>
-      </div>
-    </LogoShell>
+    <AuthShell>
+      <AuthStack>
+        <AuthHeader title={title} description={subtitle} />
+        {children}
+      </AuthStack>
+    </AuthShell>
   )
 }
diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx
index c0682b0d123..b081c6e342d 100644
--- a/apps/sim/app/f/[token]/public-file-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { AuthField, PasswordInput } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
 import { AuthSubmitButton } from '@/app/(auth)/components'
@@ -21,10 +20,10 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
   const router = useRouter()
   const authenticate = usePublicFileAuth(token)
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleAuthenticate = async () => {
+    if (authenticate.isPending) return
     if (!password.trim()) {
       setError('Password is required.')
       return
@@ -39,48 +38,32 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
   }
 
   return (
-    <PublicFileAuthShell title='Password Required' subtitle='This file is password-protected'>
+    <PublicFileAuthShell title='Password required' subtitle='This file is password-protected'>
       <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          handleAuthenticate()
+        onSubmit={(event) => {
+          event.preventDefault()
+          void handleAuthenticate()
         }}
-        className='space-y-6'
+        className='au:space-y-5'
       >
-        <div className='space-y-2'>
-          <Label htmlFor='password'>Password</Label>
-          <div className='relative'>
-            <Input
-              id='password'
-              name='password'
-              required
-              type={showPassword ? 'text' : 'password'}
-              autoCapitalize='none'
-              autoComplete='current-password'
-              autoCorrect='off'
-              placeholder='Enter password'
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value)
-                setError(null)
-              }}
-              className={cn(
-                'pr-10',
-                error && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
-            />
-            <button
-              type='button'
-              onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-              aria-label={showPassword ? 'Hide password' : 'Show password'}
-            >
-              {showPassword ? <EyeOff className='size-[18px]' /> : <Eye className='size-[18px]' />}
-            </button>
-          </div>
-          {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
-        </div>
-
+        <AuthField htmlFor='password' label='Password' errors={error ? [error] : undefined}>
+          <PasswordInput
+            id='password'
+            name='password'
+            required
+            autoComplete='current-password'
+            autoCapitalize='none'
+            autoCorrect='off'
+            placeholder='Enter password'
+            value={password}
+            disabled={authenticate.isPending}
+            error={Boolean(error)}
+            onChange={(event) => {
+              setPassword(event.target.value)
+              setError(null)
+            }}
+          />
+        </AuthField>
         <AuthSubmitButton
           disabled={!password.trim()}
           loading={authenticate.isPending}
diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx
index 8839f44f4a7..745846f9e4a 100644
--- a/apps/sim/app/f/[token]/public-file-email-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { AuthCodeEntry, AuthEmailInput, AuthField } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { AuthSubmitButton, AuthTextLink } from '@/app/(auth)/components'
+import { AuthSubmitButton } from '@/app/(auth)/components'
 import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell'
 import { usePublicFileOtpRequest, usePublicFileOtpVerify } from '@/hooks/queries/public-shares'
 
@@ -37,6 +37,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
   }, [countdown])
 
   const sendCode = async () => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     if (!quickValidateEmail(normalizeEmail(email)).isValid) {
       setError('Please enter a valid email address.')
       return
@@ -52,6 +53,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
   }
 
   const verifyCode = async (code: string) => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     if (code.length !== 6) return
     setError(null)
     try {
@@ -63,6 +65,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
   }
 
   const resend = async () => {
+    if (requestOtp.isPending || verifyOtp.isPending) return
     setCountdown(30)
     try {
       await requestOtp.mutateAsync({ email: normalizeEmail(email) })
@@ -74,126 +77,72 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
     }
   }
 
-  if (!sent) {
-    return (
-      <PublicFileAuthShell
-        title='Email Verification'
-        subtitle='This file requires email verification'
-      >
+  return (
+    <PublicFileAuthShell
+      title={sent ? 'Verify your email' : 'Email verification'}
+      subtitle={
+        sent
+          ? `A verification code has been sent to ${email}`
+          : 'This file requires email verification'
+      }
+    >
+      {!sent ? (
         <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            sendCode()
+          onSubmit={(event) => {
+            event.preventDefault()
+            void sendCode()
           }}
-          className='space-y-6'
+          className='au:space-y-5'
         >
-          <div className='space-y-2'>
-            <Label htmlFor='email'>Email</Label>
-            <Input
+          <AuthField htmlFor='email' label='Email' errors={error ? [error] : undefined}>
+            <AuthEmailInput
               id='email'
               name='email'
               type='email'
               required
-              autoCapitalize='none'
-              autoComplete='email'
-              autoCorrect='off'
-              placeholder='Enter your email'
               value={email}
-              onChange={(e) => {
-                setEmail(e.target.value)
+              onChange={(event) => {
+                setEmail(event.target.value)
                 setError(null)
               }}
-              className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+              error={Boolean(error)}
+              disabled={requestOtp.isPending}
             />
-            {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
-          </div>
-
+          </AuthField>
           <AuthSubmitButton
             disabled={!email.trim()}
             loading={requestOtp.isPending}
-            loadingLabel='Sending Code…'
+            loadingLabel='Sending code…'
           >
             Continue
           </AuthSubmitButton>
         </form>
-      </PublicFileAuthShell>
-    )
-  }
-
-  return (
-    <PublicFileAuthShell
-      title='Verify Your Email'
-      subtitle={`A verification code has been sent to ${email}`}
-    >
-      <div className='space-y-6'>
-        <p className='text-center text-[var(--text-muted)] text-sm'>
-          Enter the 6-digit code to verify your access. If you don't see it in your inbox, check
-          your spam folder.
-        </p>
-
-        <div className='flex justify-center'>
-          <InputOTP
-            maxLength={6}
-            value={otp}
-            onChange={(value) => {
-              setOtp(value)
-              setError(null)
-              if (value.length === 6) verifyCode(value)
-            }}
-            disabled={verifyOtp.isPending}
-            className={cn('gap-2', error && 'otp-error')}
-          >
-            <InputOTPGroup>
-              {[0, 1, 2, 3, 4, 5].map((i) => (
-                <InputOTPSlot
-                  key={i}
-                  index={i}
-                  className={cn(error && 'border-[var(--text-error)]')}
-                />
-              ))}
-            </InputOTPGroup>
-          </InputOTP>
-        </div>
-
-        {error ? <p className='text-center text-[var(--text-error)] text-xs'>{error}</p> : null}
-
-        <AuthSubmitButton
-          type='button'
-          onClick={() => verifyCode(otp)}
-          disabled={otp.length !== 6}
-          loading={verifyOtp.isPending}
-          loadingLabel='Verifying…'
-        >
-          Verify Email
-        </AuthSubmitButton>
-
-        <div className='text-center'>
-          <p className='text-[var(--text-muted)] text-sm'>
-            Didn't receive a code?{' '}
-            {countdown > 0 ? (
-              <span>
-                Resend in <span className='text-[var(--text-primary)]'>{countdown}s</span>
-              </span>
-            ) : (
-              <AuthTextLink onClick={resend} disabled={requestOtp.isPending || verifyOtp.isPending}>
-                Resend
-              </AuthTextLink>
-            )}
-          </p>
-        </div>
-
-        <div className='text-center font-light text-sm'>
-          <AuthTextLink
-            onClick={() => {
-              setSent(false)
-              setOtp('')
-              setError(null)
-            }}
-          >
-            Change email
-          </AuthTextLink>
-        </div>
-      </div>
+      ) : (
+        <AuthCodeEntry
+          value={otp}
+          onChange={(value) => {
+            setOtp(value)
+            setError(null)
+            if (value.length === 6) void verifyCode(value)
+          }}
+          onVerify={() => {
+            void verifyCode(otp)
+          }}
+          onResend={() => {
+            void resend()
+          }}
+          onChangeEmail={() => {
+            setSent(false)
+            setOtp('')
+            setError(null)
+          }}
+          verifying={verifyOtp.isPending}
+          resending={requestOtp.isPending}
+          countdown={countdown}
+          error={error}
+          help="Enter the six-digit code to verify your access. If you don't see it in your inbox, check your spam folder."
+        />
+      )}
     </PublicFileAuthShell>
   )
 }
diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
index 3e73581f715..147ce2a1738 100644
--- a/apps/sim/app/f/[token]/public-file-sso-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { AuthEmailInput, AuthField } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
@@ -64,28 +64,24 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
           e.preventDefault()
           handleAuthenticate()
         }}
-        className='space-y-6'
+        className='au:space-y-[var(--auth-group-gap)]'
       >
-        <div className='space-y-2'>
-          <Label htmlFor='email'>Work Email</Label>
-          <Input
+        <AuthField htmlFor='email' label='Work email' errors={error ? [error] : undefined}>
+          <AuthEmailInput
             id='email'
             name='email'
             required
             type='email'
-            autoCapitalize='none'
-            autoComplete='email'
-            autoCorrect='off'
             placeholder='Enter your work email'
             value={email}
             onChange={(e) => {
               setEmail(e.target.value)
               setError(null)
             }}
-            className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+            error={Boolean(error)}
+            disabled={isLoading}
           />
-          {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
-        </div>
+        </AuthField>
 
         <AuthSubmitButton
           disabled={!email.trim()}
diff --git a/apps/sim/app/invite/[id]/invite.tsx b/apps/sim/app/invite/[id]/invite.tsx
index ccd018a101f..9ab24f12d3a 100644
--- a/apps/sim/app/invite/[id]/invite.tsx
+++ b/apps/sim/app/invite/[id]/invite.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { AuthIdentity, AuthStack } from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { formatQuotedNameList, normalizeEmail } from '@sim/utils/string'
@@ -581,7 +582,18 @@ export default function Invite({ registrationDisabled }: InviteProps) {
         title={isOrg ? 'Organization Invitation' : 'Workspace Invitation'}
         description={`You've been invited to join ${displayName}.`}
         details={
-          invitation && <InvitationDisclosure invitation={invitation} joinPreview={joinPreview} />
+          <AuthStack>
+            {session?.user?.email && (
+              <AuthIdentity email={session.user.email} name={session.user.name ?? undefined} />
+            )}
+            {invitation && (
+              <InvitationDisclosure
+                invitation={invitation}
+                joinPreview={joinPreview}
+                appearance='auth'
+              />
+            )}
+          </AuthStack>
         }
         icon={isOrg ? 'users' : 'mail'}
         actions={[
diff --git a/apps/sim/app/invite/[id]/loading.tsx b/apps/sim/app/invite/[id]/loading.tsx
index b26abbbaf59..747b31123f1 100644
--- a/apps/sim/app/invite/[id]/loading.tsx
+++ b/apps/sim/app/invite/[id]/loading.tsx
@@ -1,13 +1,17 @@
-import { Skeleton } from '@sim/emcn'
+import { AuthStack, AuthSkeleton as Skeleton } from '@sim/auth-ui'
+import { InviteLayout } from '@/app/invite/components'
 
 export default function InviteLoading() {
   return (
-    <div className='flex flex-col items-center justify-center'>
-      <Skeleton className='size-[48px] rounded-[12px]' />
-      <Skeleton className='mt-[16px] h-[24px] w-[200px] rounded-[4px]' />
-      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
-      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
-      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
-    </div>
+    <InviteLayout>
+      <AuthStack>
+        <div className='au:space-y-1'>
+          <Skeleton shape='title' className='au:w-[200px]' />
+          <Skeleton shape='label' className='au:w-[280px]' />
+          <Skeleton shape='label' className='au:w-[240px]' />
+        </div>
+        <Skeleton />
+      </AuthStack>
+    </InviteLayout>
   )
 }
diff --git a/apps/sim/app/invite/components/invitation-disclosure.tsx b/apps/sim/app/invite/components/invitation-disclosure.tsx
index 83d773db68b..44a378fb623 100644
--- a/apps/sim/app/invite/components/invitation-disclosure.tsx
+++ b/apps/sim/app/invite/components/invitation-disclosure.tsx
@@ -1,3 +1,4 @@
+import { AuthResourceIdentity, AuthResourceRow } from '@sim/auth-ui'
 import type { InvitationDetails, MyInvitation } from '@/lib/api/contracts/invitations'
 import { InvitationWorkspaceAccess } from '@/app/invite/components/invitation-workspace-access'
 
@@ -5,13 +6,16 @@ interface InvitationDisclosureProps {
   invitation: InvitationDetails
   joinPreview: MyInvitation['joinPreview']
   showWorkspaceAccess?: boolean
+  appearance?: 'app' | 'auth'
 }
 
 export function InvitationDisclosure({
   invitation,
   joinPreview,
   showWorkspaceAccess = true,
+  appearance = 'app',
 }: InvitationDisclosureProps) {
+  const auth = appearance === 'auth'
   const outcome =
     joinPreview?.outcome ?? (invitation.membershipIntent === 'external' ? 'external' : null)
   const organizationName =
@@ -20,13 +24,21 @@ export function InvitationDisclosure({
     'the workspace’s organization'
 
   return (
-    <div className='space-y-3 text-left text-[var(--text-body)] text-small'>
+    <div
+      className={
+        auth
+          ? 'au:space-y-3 au:text-left au:text-[var(--auth-primary)] au:text-control'
+          : 'space-y-3 text-left text-[var(--text-body)] text-small'
+      }
+    >
       {outcome === 'will-join' && (
         <>
           <p>
-            You will join <strong className='font-medium'>{organizationName}</strong> as an
-            organization <strong className='font-medium'>{invitation.role}</strong>. This uses one
-            organization seat.
+            You will join{' '}
+            <strong className={auth ? 'au:font-medium' : 'font-medium'}>{organizationName}</strong>{' '}
+            as an organization{' '}
+            <strong className={auth ? 'au:font-medium' : 'font-medium'}>{invitation.role}</strong>.
+            This uses one organization seat.
           </p>
           {joinPreview && joinPreview.workspaceIdsToMove.length > 0 ? (
             <div>
@@ -35,12 +47,25 @@ export function InvitationDisclosure({
                 organization. Its administrators will be able to manage them:
               </p>
               <ul
-                className='mt-1 list-disc space-y-1 pl-5'
+                className={auth ? 'au:mt-2 au:list-none' : 'mt-1 list-disc space-y-1 pl-5'}
                 aria-label='Workspaces moving into the organization'
               >
                 {joinPreview.workspaceIdsToMove.map((id, index) => (
-                  <li key={id} className='break-words'>
-                    {joinPreview.workspacesToMove[index] || 'Unnamed workspace'}
+                  <li key={id} className={auth ? 'au:break-words' : 'break-words'}>
+                    {auth ? (
+                      <AuthResourceRow
+                        icon={
+                          <AuthResourceIdentity
+                            initial={(joinPreview.workspacesToMove[index] || 'W')
+                              .slice(0, 1)
+                              .toUpperCase()}
+                          />
+                        }
+                        title={joinPreview.workspacesToMove[index] || 'Unnamed workspace'}
+                      />
+                    ) : (
+                      joinPreview.workspacesToMove[index] || 'Unnamed workspace'
+                    )}
                   </li>
                 ))}
               </ul>
@@ -69,9 +94,17 @@ export function InvitationDisclosure({
         </p>
       )}
       {showWorkspaceAccess && invitation.grants.length > 0 && (
-        <div className='space-y-2'>
-          <p className='text-[var(--text-muted)] text-caption'>Workspace access</p>
-          <InvitationWorkspaceAccess grants={invitation.grants} />
+        <div className={auth ? 'au:space-y-2' : 'space-y-2'}>
+          <p
+            className={
+              auth
+                ? 'au:text-[var(--auth-secondary)] au:text-caption'
+                : 'text-[var(--text-muted)] text-caption'
+            }
+          >
+            Workspace access
+          </p>
+          <InvitationWorkspaceAccess grants={invitation.grants} appearance={appearance} />
         </div>
       )}
     </div>
diff --git a/apps/sim/app/invite/components/invitation-workspace-access.tsx b/apps/sim/app/invite/components/invitation-workspace-access.tsx
index b9bd00c9b05..17654872216 100644
--- a/apps/sim/app/invite/components/invitation-workspace-access.tsx
+++ b/apps/sim/app/invite/components/invitation-workspace-access.tsx
@@ -1,3 +1,4 @@
+import { AuthResourceIdentity, AuthResourceRow, AuthTag } from '@sim/auth-ui'
 import { ChipTag } from '@sim/emcn'
 import { IdentityTile } from '@/components/identity-tile/identity-tile'
 import type { InvitationDetails } from '@/lib/api/contracts/invitations'
@@ -6,25 +7,45 @@ import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/comp
 
 interface InvitationWorkspaceAccessProps {
   grants: InvitationDetails['grants']
+  appearance?: 'app' | 'auth'
 }
 
-export function InvitationWorkspaceAccess({ grants }: InvitationWorkspaceAccessProps) {
+export function InvitationWorkspaceAccess({
+  grants,
+  appearance = 'app',
+}: InvitationWorkspaceAccessProps) {
   return (
-    <ul className='space-y-2' aria-label='Invited workspace access'>
+    <ul
+      className={appearance === 'auth' ? 'au:list-none au:space-y-2' : 'space-y-2'}
+      aria-label='Invited workspace access'
+    >
       {grants.map((grant) => (
         <li key={grant.workspaceId}>
-          <SettingsResourceRow
-            flush
-            icon={
-              <IdentityTile
-                initial={getWorkspaceInitial(grant.workspaceName ?? undefined)}
-                logoUrl={grant.workspaceLogoUrl}
-              />
-            }
-            iconVariant='custom'
-            title={grant.workspaceName || 'Unnamed workspace'}
-            badge={<ChipTag variant='gray'>{grant.permission} access</ChipTag>}
-          />
+          {appearance === 'auth' ? (
+            <AuthResourceRow
+              icon={
+                <AuthResourceIdentity
+                  initial={getWorkspaceInitial(grant.workspaceName ?? undefined)}
+                  logoUrl={grant.workspaceLogoUrl}
+                />
+              }
+              title={grant.workspaceName || 'Unnamed workspace'}
+              actions={<AuthTag>{grant.permission} access</AuthTag>}
+            />
+          ) : (
+            <SettingsResourceRow
+              flush
+              icon={
+                <IdentityTile
+                  initial={getWorkspaceInitial(grant.workspaceName ?? undefined)}
+                  logoUrl={grant.workspaceLogoUrl}
+                />
+              }
+              iconVariant='custom'
+              title={grant.workspaceName || 'Unnamed workspace'}
+              badge={<ChipTag variant='gray'>{grant.permission} access</ChipTag>}
+            />
+          )}
         </li>
       ))}
     </ul>
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
index 614e7c69356..812df195305 100644
--- a/apps/sim/app/invite/components/layout.tsx
+++ b/apps/sim/app/invite/components/layout.tsx
@@ -10,5 +10,5 @@ interface InviteLayoutProps {
  * so the invite-to-workspace flow is visually aligned with the rest of auth.
  */
 export default function InviteLayout({ children }: InviteLayoutProps) {
-  return <AuthShell footer={<SupportFooter position='static' />}>{children}</AuthShell>
+  return <AuthShell footer={<SupportFooter />}>{children}</AuthShell>
 }
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index f137111f4c1..449605941f0 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { Chip, cn, Loader } from '@sim/emcn'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthStack, AuthButton as Chip, cn, AuthLoader as Loader } from '@sim/auth-ui'
+import { AuthHeader, AuthSubmitButton } from '@/app/(auth)/components'
 import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 /** A document navigation, so the marketing surface initializes its own theme store. */
@@ -37,26 +37,20 @@ export function InviteStatusCard({
   if (type === 'loading') {
     return (
       <>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>Loading</h1>
-          <p className='text-[var(--text-muted)]'>{description}</p>
-        </div>
-        <div className='mt-8 flex w-full items-center justify-center py-8'>
-          <Loader className='size-8 text-[var(--text-muted)]' animate />
+        <AuthHeader title='Loading' description={description} />
+        <div className='au:mt-[var(--auth-group-gap)] au:flex au:w-full au:items-center au:justify-center au:py-8'>
+          <Loader className='au:size-8 au:text-[var(--auth-secondary)]' animate />
         </div>
       </>
     )
   }
 
   return (
-    <>
-      <div className='space-y-1 text-center'>
-        <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>{title}</h1>
-        <p className='text-[var(--text-muted)]'>{description}</p>
-      </div>
+    <AuthStack>
+      <AuthHeader title={title} description={description} />
 
-      <div className='mt-8 w-full max-w-[410px] space-y-3'>
-        {details}
+      {details}
+      <div className='au:w-full au:space-y-2'>
         {isExpiredError && (
           <AuthSubmitButton type='button' onClick={returnHome} loadingLabel=''>
             Request New Invitation
@@ -81,11 +75,11 @@ export function InviteStatusCard({
               fullWidth
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
-              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
+              className={cn(AUTH_BUTTON_CLASS, 'au:border au:border-[var(--auth-border)]')}
             >
               {action.loading ? (
-                <span className='flex items-center gap-2'>
-                  <Loader className='size-4' animate />
+                <span className='au:flex au:items-center au:gap-2'>
+                  <Loader className='au:size-4' animate />
                   {action.label}...
                 </span>
               ) : (
@@ -95,6 +89,6 @@ export function InviteStatusCard({
           )
         )}
       </div>
-    </>
+    </AuthStack>
   )
 }
diff --git a/apps/sim/app/knowledge/github/setup/setup.tsx b/apps/sim/app/knowledge/github/setup/setup.tsx
index f47cda034a1..6c98e19ed13 100644
--- a/apps/sim/app/knowledge/github/setup/setup.tsx
+++ b/apps/sim/app/knowledge/github/setup/setup.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Chip, ChipCombobox } from '@sim/emcn'
+import { AuthButton as Chip, AuthSelect as ChipCombobox } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import type {
   GitHubSearchSetupScope,
@@ -66,7 +66,7 @@ export function GitHubSetup({ scope }: GitHubSetupProps) {
   return (
     <>
       <AuthHeader title='Choose GitHub account' />
-      <div className='mt-6 flex flex-col gap-3'>
+      <div className='au:mt-6 au:flex au:flex-col au:gap-3'>
         <ChipCombobox
           aria-label='GitHub account'
           options={result.installations.map((installation) => ({
@@ -81,7 +81,7 @@ export function GitHubSetup({ scope }: GitHubSetupProps) {
           Connect another organization
         </Chip>
         {error && (
-          <p role='alert' className='text-[var(--text-error)] text-sm'>
+          <p role='alert' className='au:text-[var(--auth-error)] au:text-body'>
             {error}
           </p>
         )}
diff --git a/apps/sim/app/oauth/credential-connected/page.tsx b/apps/sim/app/oauth/credential-connected/page.tsx
index df4fe94a113..135514232b3 100644
--- a/apps/sim/app/oauth/credential-connected/page.tsx
+++ b/apps/sim/app/oauth/credential-connected/page.tsx
@@ -1,7 +1,7 @@
-import { ChipLink, StatusPageContent } from '@sim/emcn'
+import { AuthLinkButton as ChipLink, AuthStatusContent as StatusPageContent } from '@sim/auth-ui'
 import type { Metadata } from 'next'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
-import { LogoShell } from '@/app/(landing)/components/logo-shell'
+import { AuthShell as LogoShell } from '@/app/(auth)/components'
 
 export const metadata: Metadata = {
   title: 'Credential connected',
@@ -21,7 +21,7 @@ export default async function CredentialConnectedPage({
   const connected = result === 'connected' && !error
 
   return (
-    <LogoShell center>
+    <LogoShell>
       <StatusPageContent
         title={connected ? 'Credential connected' : 'Connection failed'}
         description={
diff --git a/apps/sim/app/slack-search/connect/[token]/page.tsx b/apps/sim/app/slack-search/connect/[token]/page.tsx
index 288e0c420f0..4bd41d5af50 100644
--- a/apps/sim/app/slack-search/connect/[token]/page.tsx
+++ b/apps/sim/app/slack-search/connect/[token]/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { AuthLinkButton as ChipLink } from '@sim/auth-ui'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { getSession } from '@/lib/auth'
@@ -30,13 +30,13 @@ export default async function SlackSearchOnboardingPage({
       {session?.user?.id ? (
         <SlackSearchOnboarding token={token} userId={session.user.id} />
       ) : (
-        <div className='flex flex-col gap-5'>
-          <h1 className='text-2xl'>Get started with Sim in Slack</h1>
-          <p className='text-[var(--text-secondary)] text-sm'>
+        <div className='au:flex au:flex-col au:gap-5'>
+          <h1 className='au:text-2xl'>Get started with Sim in Slack</h1>
+          <p className='au:text-[var(--auth-secondary)] au:text-body'>
             Sign in or create an account using your Slack email. After setup, you can retry your
             question in the same Slack thread.
           </p>
-          <div className='flex gap-2'>
+          <div className='au:flex au:gap-2'>
             <ChipLink
               variant='primary'
               href={buildAuthCrossLink('/signup', { callbackUrl, isInviteFlow: false })}
@@ -47,7 +47,7 @@ export default async function SlackSearchOnboardingPage({
               Sign in
             </ChipLink>
           </div>
-          <p className='text-[var(--text-tertiary)] text-sm'>
+          <p className='au:text-[var(--auth-secondary)] au:text-body'>
             Your organization’s invitation and SSO requirements still apply.
           </p>
         </div>
diff --git a/apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx b/apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx
index 317de335372..6bbe6810aa6 100644
--- a/apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx
+++ b/apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipLink } from '@sim/emcn'
+import { AuthButton as Chip, AuthLinkButton as ChipLink } from '@sim/auth-ui'
 import { redirect } from 'next/navigation'
 import {
   slackSearchIntegrationsPath,
@@ -36,22 +36,24 @@ export function SlackSearchOnboarding({ token, userId }: SlackSearchOnboardingPr
     </Chip>
   )
   if (status.isPending)
-    return <p className='text-[var(--text-secondary)] text-sm'>Checking your connection…</p>
+    return <p className='au:text-[var(--auth-secondary)] au:text-body'>Checking your connection…</p>
   if (status.isError)
     return (
-      <div className='flex flex-col gap-4'>
-        <h1 className='text-2xl'>Couldn’t open this question</h1>
-        <p className='text-[var(--text-error)] text-sm'>{status.error.message}</p>
+      <div className='au:flex au:flex-col au:gap-4'>
+        <h1 className='au:text-2xl'>Couldn’t open this question</h1>
+        <p className='au:text-[var(--auth-error)] au:text-body'>{status.error.message}</p>
         {refresh}
       </div>
     )
   const data = status.data
   if (!('organizationId' in data))
     return (
-      <div className='flex flex-col gap-4'>
-        <h1 className='text-2xl'>Finish your Sim account setup</h1>
-        <p className='text-[var(--text-secondary)] text-sm'>{ACCOUNT_STATUS_COPY[data.status]}</p>
-        <div className='flex flex-wrap gap-2'>
+      <div className='au:flex au:flex-col au:gap-4'>
+        <h1 className='au:text-2xl'>Finish your Sim account setup</h1>
+        <p className='au:text-[var(--auth-secondary)] au:text-body'>
+          {ACCOUNT_STATUS_COPY[data.status]}
+        </p>
+        <div className='au:flex au:flex-wrap au:gap-2'>
           <Chip
             disabled={switchAccount.isPending}
             onClick={() =>
@@ -73,7 +75,7 @@ export function SlackSearchOnboarding({ token, userId }: SlackSearchOnboardingPr
           {refresh}
         </div>
         {switchAccount.isError && (
-          <p className='text-[var(--text-error)] text-sm'>{switchAccount.error.message}</p>
+          <p className='au:text-[var(--auth-error)] au:text-body'>{switchAccount.error.message}</p>
         )}
       </div>
     )
diff --git a/apps/sim/app/slack-search/install/[teamId]/page.tsx b/apps/sim/app/slack-search/install/[teamId]/page.tsx
index 98b4cd34894..2054262f8d1 100644
--- a/apps/sim/app/slack-search/install/[teamId]/page.tsx
+++ b/apps/sim/app/slack-search/install/[teamId]/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { AuthLinkButton as ChipLink } from '@sim/auth-ui'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { isHosted } from '@/lib/core/config/env-flags'
@@ -24,13 +24,13 @@ export default async function SlackInstallPage({ params }: SlackInstallPageProps
   slackUrl.search = new URLSearchParams({ app: app.id, team: teamId }).toString()
   return (
     <AuthShell>
-      <div className='flex flex-col gap-5'>
-        <h1 className='text-2xl'>Sim Search in Slack</h1>
-        <p className='text-[var(--text-muted)] text-sm'>
+      <div className='au:flex au:flex-col au:gap-5'>
+        <h1 className='au:text-2xl'>Sim Search in Slack</h1>
+        <p className='au:text-[var(--auth-secondary)] au:text-body'>
           To start searching, an admin can connect this workspace later from Settings → Sim Search
           in Slack in their Sim organization.
         </p>
-        <div className='flex gap-2'>
+        <div className='au:flex au:gap-2'>
           <ChipLink variant='primary' href={slackUrl.href}>
             Open Slack
           </ChipLink>
diff --git a/apps/sim/app/unsubscribe/loading.tsx b/apps/sim/app/unsubscribe/loading.tsx
index 5f625c75bbd..9645181074a 100644
--- a/apps/sim/app/unsubscribe/loading.tsx
+++ b/apps/sim/app/unsubscribe/loading.tsx
@@ -1,13 +1,16 @@
-import { Skeleton } from '@sim/emcn'
+import { AuthSkeleton, AuthStack } from '@sim/auth-ui'
+import { InviteLayout } from '@/app/invite/components'
 
 export default function UnsubscribeLoading() {
   return (
-    <div className='flex flex-col items-center justify-center'>
-      <Skeleton className='size-[48px] rounded-[12px]' />
-      <Skeleton className='mt-[16px] h-[24px] w-[180px] rounded-[4px]' />
-      <Skeleton className='mt-[8px] h-[14px] w-[300px] rounded-[4px]' />
-      <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px]' />
-      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
-    </div>
+    <InviteLayout>
+      <AuthStack>
+        <div className='au:space-y-1'>
+          <AuthSkeleton shape='title' className='au:w-[180px]' />
+          <AuthSkeleton shape='label' className='au:w-[300px]' />
+        </div>
+        <AuthSkeleton />
+      </AuthStack>
+    </InviteLayout>
   )
 }
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index b5f265fd18e..9c01b42546d 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -1,12 +1,11 @@
 'use client'
 
 import { Suspense } from 'react'
-import { Chip, cn, Loader } from '@sim/emcn'
+import { AuthHeader, AuthButton as Chip, AuthLoader as Loader } from '@sim/auth-ui'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useSearchParams } from 'next/navigation'
 import type { UnsubscribeType } from '@/lib/api/contracts/user'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { InviteLayout } from '@/app/invite/components'
 import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe'
 
@@ -39,12 +38,9 @@ function UnsubscribeContent() {
   if (loading) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
-          <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
-        </div>
-        <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-          <Loader className='size-8 text-[var(--text-muted)]' animate />
+        <AuthHeader title='Loading' description='Validating your unsubscribe link…' />
+        <div className='au:mt-[var(--auth-group-gap)] au:flex au:w-full au:items-center au:justify-center au:py-8'>
+          <Loader className='au:size-8 au:text-[var(--auth-secondary)]' animate />
         </div>
       </InviteLayout>
     )
@@ -53,16 +49,11 @@ function UnsubscribeContent() {
   if (error) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Invalid Unsubscribe Link
-          </h1>
-          <p className={'text-[var(--text-muted)] text-md'}>{error}</p>
-        </div>
+        <AuthHeader title='Invalid unsubscribe link' description={error} />
 
-        <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
+        <div className='au:mt-[var(--auth-group-gap)] au:w-full au:space-y-3'>
           <AuthSubmitButton type='button' onClick={() => window.history.back()} loadingLabel=''>
-            Go Back
+            Go back
           </AuthSubmitButton>
         </div>
       </InviteLayout>
@@ -72,17 +63,12 @@ function UnsubscribeContent() {
   if (data?.isTransactional) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Important Account Emails
-          </h1>
-          <p className={'text-[var(--text-muted)] text-md'}>
-            Transactional emails like password resets, account confirmations, and security alerts
-            cannot be unsubscribed from as they contain essential information for your account.
-          </p>
-        </div>
+        <AuthHeader
+          title='Important account emails'
+          description='Transactional emails like password resets, account confirmations, and security alerts cannot be unsubscribed from as they contain essential information for your account.'
+        />
 
-        <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
+        <div className='au:mt-[var(--auth-group-gap)] au:w-full au:space-y-3'>
           <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
             Close
           </AuthSubmitButton>
@@ -94,17 +80,12 @@ function UnsubscribeContent() {
   if (unsubscribed) {
     return (
       <InviteLayout>
-        <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-            Successfully Unsubscribed
-          </h1>
-          <p className={'text-[var(--text-muted)] text-md'}>
-            You have been unsubscribed from our emails. You will stop receiving emails within 48
-            hours.
-          </p>
-        </div>
+        <AuthHeader
+          title='Successfully unsubscribed'
+          description='You have been unsubscribed from our emails. You will stop receiving emails within 48 hours.'
+        />
 
-        <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
+        <div className='au:mt-[var(--auth-group-gap)] au:w-full au:space-y-3'>
           <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
             Close
           </AuthSubmitButton>
@@ -117,17 +98,17 @@ function UnsubscribeContent() {
 
   return (
     <InviteLayout>
-      <div className='space-y-1 text-center'>
-        <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
-          Email Preferences
-        </h1>
-        <p className={'text-[var(--text-muted)] text-md'}>
-          Choose which emails you'd like to stop receiving.
+      <div className='au:space-y-1'>
+        <AuthHeader
+          title='Email preferences'
+          description="Choose which emails you'd like to stop receiving."
+        />
+        <p className='au:break-all au:text-[var(--auth-secondary)] au:text-control'>
+          {data?.email}
         </p>
-        <p className={'text-[var(--text-muted)] text-sm'}>{data?.email}</p>
       </div>
 
-      <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
+      <div className='au:mt-[var(--auth-group-gap)] au:w-full au:space-y-3'>
         <AuthSubmitButton
           type='button'
           onClick={() => handleUnsubscribe('all')}
@@ -140,8 +121,10 @@ function UnsubscribeContent() {
             : 'Unsubscribe from All Marketing Emails'}
         </AuthSubmitButton>
 
-        <div className='py-2 text-center'>
-          <span className={'text-[var(--text-muted)] text-sm'}>or choose specific types</span>
+        <div className='au:py-2 au:text-center'>
+          <span className='au:text-[var(--auth-secondary)] au:text-caption'>
+            or choose specific types
+          </span>
         </div>
 
         <Chip
@@ -152,7 +135,7 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeMarketing
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
         >
           {data?.currentPreferences.unsubscribeMarketing
             ? 'Unsubscribed from Marketing'
@@ -167,7 +150,7 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeUpdates
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
         >
           {data?.currentPreferences.unsubscribeUpdates
             ? 'Unsubscribed from Updates'
@@ -182,7 +165,7 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeNotifications
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
         >
           {data?.currentPreferences.unsubscribeNotifications
             ? 'Unsubscribed from Notifications'
@@ -190,8 +173,8 @@ function UnsubscribeContent() {
         </Chip>
       </div>
 
-      <div className={'mt-6 max-w-[410px] text-center'}>
-        <p className='text-[var(--text-muted)] text-small'>
+      <div className='au:mt-[var(--auth-group-gap)]'>
+        <p className='au:text-[var(--auth-secondary)] au:text-caption'>
           You'll continue receiving important account emails like password resets and security
           alerts.
         </p>
@@ -205,12 +188,9 @@ export default function Unsubscribe() {
     <Suspense
       fallback={
         <InviteLayout>
-          <div className='space-y-1 text-center'>
-            <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
-            <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
-          </div>
-          <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-            <Loader className='size-8 text-[var(--text-muted)]' animate />
+          <AuthHeader title='Loading' description='Validating your unsubscribe link…' />
+          <div className='au:mt-[var(--auth-group-gap)] au:flex au:w-full au:items-center au:justify-center au:py-8'>
+            <Loader className='au:size-8 au:text-[var(--auth-secondary)]' animate />
           </div>
         </InviteLayout>
       }
diff --git a/apps/sim/auth-migration/baseline.json b/apps/sim/auth-migration/baseline.json
new file mode 100644
index 00000000000..f606519dec0
--- /dev/null
+++ b/apps/sim/auth-migration/baseline.json
@@ -0,0 +1,254 @@
+{
+  "base": "9c571fbcea10ed2001ea81fc967830e33dadcbf4",
+  "routes": [
+    {
+      "file": "apps/sim/app/(auth)/login/page.tsx",
+      "url": "/login",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(auth)/oauth/consent/page.tsx",
+      "url": "/oauth/consent",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(auth)/oauth/sign-in/route.ts",
+      "url": "/oauth/sign-in",
+      "entry": "route.ts"
+    },
+    {
+      "file": "apps/sim/app/(auth)/reset-password/page.tsx",
+      "url": "/reset-password",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(auth)/signup/page.tsx",
+      "url": "/signup",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(auth)/sso/launch/[providerId]/route.ts",
+      "url": "/sso/launch/[providerId]",
+      "entry": "route.ts"
+    },
+    {
+      "file": "apps/sim/app/(auth)/sso/page.tsx",
+      "url": "/sso",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(auth)/verify/page.tsx",
+      "url": "/verify",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/(interfaces)/chat/[identifier]/page.tsx",
+      "url": "/chat/[identifier]",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/cli/auth/done/page.tsx",
+      "url": "/cli/auth/done",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/cli/auth/page.tsx",
+      "url": "/cli/auth",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/credential-groups/complete/page.tsx",
+      "url": "/credential-groups/complete",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/credential-groups/enroll/[token]/page.tsx",
+      "url": "/credential-groups/enroll/[token]",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/credential-groups/slack-complete/page.tsx",
+      "url": "/credential-groups/slack-complete",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/desktop/auth/page.tsx",
+      "url": "/desktop/auth",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/desktop/connect/complete/page.tsx",
+      "url": "/desktop/connect/complete",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/desktop/connect/page.tsx",
+      "url": "/desktop/connect",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/desktop/done/page.tsx",
+      "url": "/desktop/done",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/f/[token]/page.tsx",
+      "url": "/f/[token]",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/invite/[id]/page.tsx",
+      "url": "/invite/[id]",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/knowledge/github/setup/page.tsx",
+      "url": "/knowledge/github/setup",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/oauth-error/page.tsx",
+      "url": "/oauth-error",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/oauth/chat-complete/page.tsx",
+      "url": "/oauth/chat-complete",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/oauth/credential-connected/page.tsx",
+      "url": "/oauth/credential-connected",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/slack-search/connect/[token]/page.tsx",
+      "url": "/slack-search/connect/[token]",
+      "entry": "page.tsx"
+    },
+    {
+      "file": "apps/sim/app/slack-search/install/[teamId]/page.tsx",
+      "url": "/slack-search/install/[teamId]",
+      "entry": "page.tsx"
+    }
+  ],
+  "files": {
+    "apps/sim/app/oauth-error/page.tsx": "1a5fa4e8748cbf416060acb0873f2e4d0ff1a7660d387d1f3ba264ab9ccbe7bd",
+    "apps/sim/app/(auth)/auth-redirect.ts": "2066538d0c022ac73868865ea27099f372b95069fe0bed62cc9d46f4c9f6a009",
+    "apps/sim/app/(auth)/layout.tsx": "dcaf0830bae5f5505f427cd34498cfcb89b05c35b8b55c227d3ce2395674db75",
+    "apps/sim/app/oauth/credential-connected/page.tsx": "e7ec5197c99bbc101bbe506b0fe3d5d2dd69701e571932a1a073474123daf114",
+    "apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx": "0283caf4e4cd9be7e2457c4bba479e98415c10c62f8ce697d2bcb19c7624288e",
+    "apps/sim/app/oauth/chat-complete/page.tsx": "edb31812ddc4a5609bfa43016c1e432869950e2030e1404166f0db07404e66f7",
+    "apps/sim/app/(interfaces)/chat/constants.ts": "487236115f9c4747dfc209a529729c149a868833b1701fd81bd209b5169076a1",
+    "apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx": "45c3bd015b1291da7cb3d2022eeb4d581796d06eb92bd8d576c4152f289fad06",
+    "apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx": "13406e032408585d436a7269ea2a48f48a3d22bc3ec8b198d0d193abcf26cd77",
+    "apps/sim/app/(interfaces)/chat/[identifier]/office-embed-init.tsx": "a1d7ecb4eff0c967ad823a266cd2cebab1b347a79bbeba7b5063a2d5fe01f144",
+    "apps/sim/app/(interfaces)/chat/[identifier]/page.tsx": "d638860ed9225fdda9a8d8306604dbaed81cc0ec07dcee9213c4cb4011290762",
+    "apps/sim/app/(interfaces)/chat/components/index.ts": "b7d60efb8122e1429d1ab3baca379d9f6affce9df69521ae21212ddbe30233f2",
+    "apps/sim/app/(interfaces)/chat/hooks/use-chat-streaming.ts": "6394629fb8e17e9f8f72ae377687b56f5bea945498781b31cc536641200e1d4a",
+    "apps/sim/app/(interfaces)/chat/hooks/index.ts": "32c8d5c582c99e5546fe7e2f65d3307ced18427e5762ad5647ca26ebd1427375",
+    "apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx": "9c1bcd1888e02c38e261961d6b2a11a6b101a1755fb52e2373ced85a75a63a0e",
+    "apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx": "ec3739499c3bed580b3215928bc697066710f61bce07a16de212001df39c4c70",
+    "apps/sim/app/(interfaces)/chat/components/input/input.tsx": "3fef462f1d50088960a3c15052492f3adcde404739d84b13d83e4643a2a98c3c",
+    "apps/sim/app/(interfaces)/chat/components/message/message.tsx": "9850c64457e992a221c98cb0517e9a10e6909f9d46312a2473503b4b3c422cad",
+    "apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx": "cec6ab662cd3ea6ecea214ff080e40d5bc88df7e37b6ed8628f5f53de048a0f3",
+    "apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx": "f03a0a0717f3dfa2735c7238c3c13ff76cd4cd767488e707da16b1a657431cb7",
+    "apps/sim/app/(interfaces)/chat/components/header/header.tsx": "f1ef8593a60f5dc37dded4fc3527a42854c164bab45b663a2ac289ac4ce04ff1",
+    "apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx": "83e1570c272817e4b770cbc4fffa55c2d48e6e1e0952627bf2fee81bae872222",
+    "apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx": "4b58d5fb519829368c026489d563357428cd2bf369b909a4c700839d0c3a7a54",
+    "apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx": "6407200c17ea871832fa9ffba60509504afcfece11b8fc9902e1e35f1aacf6dc",
+    "apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx": "f0bba0f3e2e3c06d8c3f35c754652f6dfa318e598ae088884d475e184b8c0716",
+    "apps/sim/app/slack-search/install/[teamId]/page.tsx": "96999ba5e81fa49b5e7502c4c4a4f777e270d324a79e144528b71ad0bd6c7a19",
+    "apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx": "0ce711a67dec76cb515c13ee2837388d35d3d7765c24c94f26dc8d38798bceaf",
+    "apps/sim/app/slack-search/connect/[token]/page.tsx": "99e6bfc7731eb33eb4fed5be67702937f01571a4af14f315aa3a310d3116e024",
+    "apps/sim/app/desktop/auth/validation.ts": "db171a6a1e4067a2d43b33fab60ece29b9d8a17d5def63f75cbfb6dddbbc77b1",
+    "apps/sim/app/desktop/auth/authorize-handoff.tsx": "c4b756f1e144df8021d00160daa218ef0bb89fb57d4c8f34b57078b407c6d935",
+    "apps/sim/app/desktop/auth/page.tsx": "1070f9218a544d6d0e3071da1669d3d948482a4612ca5fbd56c185537180d0f2",
+    "apps/sim/app/desktop/done/page.tsx": "5b522f3e0c17c26775a154a4e64b3d13b47aa689e4964d5779fa2fe6b46608f0",
+    "apps/sim/app/desktop/connect/validation.ts": "4354fe3d629bddc11e3b9532d0b77064a430dc19d50570caf0af7023bc89f635",
+    "apps/sim/app/desktop/connect/source-connect-launcher.tsx": "6a1df65d848ac6bf789237f9c6402ca8e2c325a4c4df504865d0a51be0701244",
+    "apps/sim/app/desktop/connect/source-completion.tsx": "c04b9971ed3cbc4ac629b68b63052cbf37d51d2c5432efe2a49d6c412eac39d0",
+    "apps/sim/app/desktop/connect/switch-account.tsx": "3bb07d508a5249038b83b9769f84af30bbcddb3162f301703a59e4f3c49c19cc",
+    "apps/sim/app/desktop/connect/page.tsx": "207969389b8ba5ac280e83eefa3ac37790039f8f58e207ea76909b6913a7afc3",
+    "apps/sim/app/desktop/connect/connect-launcher.tsx": "44b5acff28880b2c33cd3ddca8a00b7ddfb56c1f91029bd7ff9683e9d867d267",
+    "apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx": "c815106b3dd496ab8b0dc592da143f5420f3599eb762bc155b10f750a242fa17",
+    "apps/sim/app/desktop/components/desktop-handoff-shell/index.ts": "a96be859afb28fa3b1ce526deb28ecd7fd6ade07a798dfbb4ba9913446e90e4d",
+    "apps/sim/app/desktop/connect/complete/page.tsx": "5d8b8c144aa52d943595c447a4e2960a6b255457ab6a988951037e23865b574c",
+    "apps/sim/app/cli/auth/search-params.ts": "2566cfdd3422e28b5db036f3dfb0088678537c4668caac627af34f0a574ed59d",
+    "apps/sim/app/cli/auth/cli-auth-request.ts": "38a8749efd7748e9d2d5693522b15a0758282da1272aee5b9f245e93e4ecca74",
+    "apps/sim/app/cli/auth/cli-auth-view.tsx": "83e3243cab31de927928e9bb9a93775035c5950db0819fabd11c02f6ab6ab89d",
+    "apps/sim/app/cli/auth/loading.tsx": "5c7911bfe083244640dbac30d697d63c60f630e1c1d110cef988c562c5b220a9",
+    "apps/sim/app/cli/auth/page.tsx": "bdf0b30e9dcff7539d4e1b27b9c0a399fe1103da23ad85244ccf5b8187d8b090",
+    "apps/sim/app/cli/auth/done/search-params.ts": "c4a6671548e58162081b632c9d78c3a62f4d110b66e63b12e70c16209c4664fc",
+    "apps/sim/app/cli/auth/done/page.tsx": "8a8b713f29217004245a77f180796d4f3e77cf97e1ade9ec3b27b712071c6ea1",
+    "apps/sim/app/cli/auth/done/cli-auth-done-view.tsx": "d2662ec83b79096b5d4e37e93e67e5cfc098f531198d45751b8cca93ee9505a9",
+    "apps/sim/app/f/[token]/public-file-sso-auth.tsx": "1164e4fb43bc59128c8699d1584724c28fbe3815e811cf9ce7e5352022f57ac0",
+    "apps/sim/app/f/[token]/opengraph-image.tsx": "69cdebce026fd8990d5254269bdac67f232086e0dc0d9e81739ee31e12543475",
+    "apps/sim/app/f/[token]/utils.ts": "6f7c5031ef57897b40853ff7bd8262891af683af907fa18d71c2f022e53d42a5",
+    "apps/sim/app/f/[token]/public-file-view.tsx": "9ecc7163d4cf50aebd9d59fda89d5b7b2e1376f09cee6462662b9eb4f04c7f80",
+    "apps/sim/app/f/[token]/public-file-email-auth.tsx": "379223ecfd034371eeae2da3069ea98c83283c6f238f853d78686b13184878b5",
+    "apps/sim/app/f/[token]/page.tsx": "07fcb3522344413ef0a0bd5fde977901294415ec3e0cb90287ff6b3df0cb696a",
+    "apps/sim/app/f/[token]/public-file-auth-shell.tsx": "2820fc9902729473a88186caa3b5b556ead07cb367a769c328972ba929eae33c",
+    "apps/sim/app/f/[token]/public-file-auth.tsx": "9b406e4938cc7ba1bfbca4504b45b4238445fe1bf4371038744904a7f27970aa",
+    "apps/sim/app/invite/components/invitation-workspace-access.tsx": "875d28aa2761b3c9a40193f55bd4fca7ca2e7f8986f8d3675a79c0a1cfe8a92b",
+    "apps/sim/app/invite/components/invitation-disclosure.tsx": "800e58ce7872bfc41b95d8a67904ada2a3a0d1bef40fdf4a4053576bae902953",
+    "apps/sim/app/invite/components/status-card.tsx": "2df446ebf42162e3f221709bcd6909854b5346515c7016a3ffcffe90f6df88f3",
+    "apps/sim/app/invite/components/layout.tsx": "e74dfa769b8a4415032ff99610a4847409c6545d781ddb11f9a58b8a79be6341",
+    "apps/sim/app/invite/components/index.ts": "f0a304ce772d771da821f18e6999db589d537aa06f7d6d75e613050d0cc935a3",
+    "apps/sim/app/invite/[id]/invite.tsx": "eabd903e206e44664988d5620ec3c53eb8b280f3ebbf1021579c508a2d2cfbca",
+    "apps/sim/app/invite/[id]/loading.tsx": "22f10935589df6c151f790f2eba1414537be4d34c66b8d896bcb7074c5a7ded1",
+    "apps/sim/app/invite/[id]/page.tsx": "db659e839b5f8aa5b5e649cbdebc4e88dc726e62ca913fe57e5fee5b2ba5fe23",
+    "apps/sim/app/knowledge/github/setup/setup.tsx": "f41741ce6c1d0d89ca13d89502415174212c046b2c0bdf4a8cf5d8bf9ec66a47",
+    "apps/sim/app/knowledge/github/setup/page.tsx": "d68fd20792fc06311568b1820643ffcce16eae31ac68510af8d926768b8e4b70",
+    "apps/sim/app/credential-groups/slack-complete/slack-completion.tsx": "86d25bd0ecfa893b1b621ee8637405bd48222711132a88e4da1cc0e0a5164115",
+    "apps/sim/app/credential-groups/slack-complete/page.tsx": "293ddb3def11db2d97f08bbb1431e0d31aa52360b2382e72ce09cd26cbed500c",
+    "apps/sim/app/credential-groups/complete/completion-handoff.tsx": "544edefe79cf7b3dbb966f9ba4aeb2911b8c4dd2b4f363738caa3897197cd907",
+    "apps/sim/app/credential-groups/complete/page.tsx": "345c7d36b1513df311c00a9e91d0034ec446d63bbea9cce0dd51d1a501880f5f",
+    "apps/sim/app/credential-groups/enroll/[token]/search-params.ts": "69addc3f9a90c9bb4da58ef468ebf1e39b16187508ac922441dcaddd22f0742f",
+    "apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx": "7fadd3a5542b1308dadeed29e27d4959d0d42c5dc37f6de37d6e04cb4226a7ce",
+    "apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx": "4ea38497e5bbd6c4eac152573f37c0b02e7b6a355636b97b7543e9b65afd18ac",
+    "apps/sim/app/credential-groups/enroll/[token]/page.tsx": "6a313f7a7e2fcf75c543fd62098f32575b6f57458641f2740bfb8f54ce6d665b",
+    "apps/sim/app/(auth)/verify/use-verification.ts": "92a1ea22661f1268c2ee826728cd3979082d6a16016f83d70a6b9a209ead91ef",
+    "apps/sim/app/(auth)/verify/verify-content.tsx": "57c2534e8dcc1faf0b0c8a0c976f0ebecfeef60840ac986bf8d0cc6b25cb9529",
+    "apps/sim/app/(auth)/verify/loading.tsx": "a3f80de1f6a97ecd94a9b090edeb71c807bea9a3b53103d91737ff2fecdfeda2",
+    "apps/sim/app/(auth)/verify/page.tsx": "b0a53fc84f03a8d3fc06b4b396ea726fb57070c0017642abaece747453050c4a",
+    "apps/sim/app/(auth)/signup/search-params.ts": "824ab478bb22311eb98a8edc384826498f42f2c98f3ecdd3af01a7edeb16cdc0",
+    "apps/sim/app/(auth)/signup/registration-disabled.tsx": "4dd7cf7640fa6eb6ef376c01e346208e2265cfa7405e905712c203eaf33d792d",
+    "apps/sim/app/(auth)/signup/loading.tsx": "c50b6797c33ec5b9ddc33775f6dca1271634211e2727e18d4b7da6a204790ef0",
+    "apps/sim/app/(auth)/signup/signup-form.tsx": "0f367f32f12af869fbb754646146922698a9c2b8cd09ae52520e0e488fd31603",
+    "apps/sim/app/(auth)/signup/page.tsx": "d55744d1f9341e76a2c94e6e0ea81268e4000de5e16d19b2d431f2a17801f042",
+    "apps/sim/app/(auth)/components/social-login-buttons.tsx": "f5367bc0f43d264e761102391d7e8545c6d06e7d050443013e28df68d359d97e",
+    "apps/sim/app/(auth)/components/auth-field.tsx": "302a8fb1a7336e2c868ffeed7c9e357649915d13eeee5b4d1d28a3b38ae45457",
+    "apps/sim/app/(auth)/components/auth-text-link.tsx": "a89b88257e64633c1c401c1deda9fe24926fea44de1a173a4da62f29ad88a50c",
+    "apps/sim/app/(auth)/components/auth-shell.tsx": "21b7e9eb214754a187c1aefc378ab8451684e46b73265a7fa376b8e8225f012b",
+    "apps/sim/app/(auth)/components/auth-legal-footer.tsx": "6214e8fc00177b8f47833ea5a1d06204a936579a53adc0f3e025d39c0a94fe05",
+    "apps/sim/app/(auth)/components/auth-nav-prompt.tsx": "037772a5a5017e18dec6665ffd2476341055cb0e6266eca367bd945f784c02c0",
+    "apps/sim/app/(auth)/components/auth-submit-button.tsx": "16f535ecfcb888296947bc11dad6ca00ad67897011c53c83deb85e4db51e23bd",
+    "apps/sim/app/(auth)/components/auth-loading-skeleton.tsx": "a42e64528f81aee40f56da4571f871682cb403eebbea2044963b9f610a7a9c47",
+    "apps/sim/app/(auth)/components/oauth-provider-checker.tsx": "ea5ba223887cbf90e9175e5d7e59a1d23b8f16804cb99d0802f7da54ed503dea",
+    "apps/sim/app/(auth)/components/auth-divider.tsx": "384918b4f425581f47833198c2fc532467715192303dd0676064ab8090895949",
+    "apps/sim/app/(auth)/components/password-input.tsx": "8e86414021d3eaa1d5bacce8fdd5ed49a1268bd6784c3428774e6012e892e336",
+    "apps/sim/app/(auth)/components/constants.ts": "64a9bf8f3fdb8fce5e96f5def9939a1f520a842f02d23dd111948f0c89a4c3a3",
+    "apps/sim/app/(auth)/components/auth-input.tsx": "12a175523d140b15a8eef45ee3ab709f64b8603ac4f2bed264dfb5b69af06209",
+    "apps/sim/app/(auth)/components/auth-header.tsx": "39bb7c86bb70d07adb3bd8e44ff2b7a0c25151b11c2993b23bbb49b61583d16d",
+    "apps/sim/app/(auth)/components/sso-login-button.tsx": "c06c62a419af92d9c3c3eb624e927447e636e9b8ffb1c2e30451c20ec299ece0",
+    "apps/sim/app/(auth)/components/index.ts": "f0d2af59924b323a846d2fbb16dbf8367c4bae1e91afb8e40d4d39ea8d185bd2",
+    "apps/sim/app/(auth)/components/auth-form-message.tsx": "19688a09af97fd41113157486de4b03835f01217f9ab9b611ddd9284f8e9a5f1",
+    "apps/sim/app/(auth)/components/support-footer.tsx": "5122b11949594d2812eb92f20f8d18cda90b214bcebe8ac745e7448d660550da",
+    "apps/sim/app/(auth)/sso/loading.tsx": "cebab4d6de272d4d4b055ee0091453a71d7158a37124bf2053434593f58fb94d",
+    "apps/sim/app/(auth)/sso/page.tsx": "b917cd70a259229f1d0a3cc8346d21f673810f245467cf3aafe5121d7707fd1e",
+    "apps/sim/app/(auth)/reset-password/reset-password-form.tsx": "74f0b8aba88b70342be18bd2ee64f53a229c14755569392e2250f0b59fa1e8f5",
+    "apps/sim/app/(auth)/reset-password/reset-password-content.tsx": "fbd1b53ea8c4a5c86c8a9a3d1ced414feafbb8a756be428d24d9f34252a61fca",
+    "apps/sim/app/(auth)/reset-password/loading.tsx": "33475f75b4f3cae9f53b4482b119c53fcfb8c899b437c8468411aed28380fc66",
+    "apps/sim/app/(auth)/reset-password/page.tsx": "b9dd840603e49ed1926a0944d04a3bf2e2cb30656f817587689250503b4546e8",
+    "apps/sim/app/(auth)/login/loading.tsx": "be903941ac9953b609b268e7d63b6506004eafb10e6ebdcb3ba767fa3c186dff",
+    "apps/sim/app/(auth)/login/login-form.tsx": "f6294c9a6401ca8c64b2d1211ebaef5923aeefa6689712cc60ac470d303b567c",
+    "apps/sim/app/(auth)/login/page.tsx": "265df71867021458275fe5dad2e58f66ea81cf8b5c8ba98caf5c73fc9039ee5e",
+    "apps/sim/app/(auth)/oauth/consent/search-params.ts": "febb15167ebda615cc0bb54c0b2c587921eb4ea52c0198313952451659a8e74f",
+    "apps/sim/app/(auth)/oauth/consent/loading.tsx": "8794dcadbbccf1b05943a22d1aea22190a7520c82f1ad08f1e4747ae410da066",
+    "apps/sim/app/(auth)/oauth/consent/page.tsx": "3fd5d9ad77386745df773a251f5f4d0da02224b8f5a59f92e103a9ec7e51f8cb",
+    "apps/sim/app/(auth)/oauth/consent/consent-view.tsx": "4a3b7dee52d87038de070890226a9ad6fdd81158c879cbbe41ee560d0ae7caea",
+    "apps/sim/app/(auth)/oauth/sign-in/route.ts": "d6b46c7f0cd4fe54ab90dfbc786d6a5fe165c5a5b48d5dedb17e119fc2569a22",
+    "apps/sim/app/(auth)/sso/launch/[providerId]/route.ts": "7737458be1a0e0a10df8e3859441f37d8953c3cc256c8ed83f846d2cf4ee6301"
+  }
+}
diff --git a/apps/sim/auth-migration/coverage.json b/apps/sim/auth-migration/coverage.json
new file mode 100644
index 00000000000..1d7e4346089
--- /dev/null
+++ b/apps/sim/auth-migration/coverage.json
@@ -0,0 +1,322 @@
+{
+  "scope": "Auth presentation only; existing authentication handlers, resource authorization, cookies, redirects and external providers remain authoritative.",
+  "routes": [
+    {
+      "file": "apps/sim/app/(auth)/login/page.tsx",
+      "url": "/login",
+      "entry": "page.tsx",
+      "states": [
+        "email-password",
+        "recovery",
+        "invalid credentials",
+        "policy refusal",
+        "pending",
+        "email disabled",
+        "SSO only",
+        "no methods"
+      ],
+      "actions": [
+        "credential submit",
+        "forgot password",
+        "recovery back",
+        "signup cross-link",
+        "provider sign-in"
+      ]
+    },
+    {
+      "file": "apps/sim/app/(auth)/oauth/consent/page.tsx",
+      "url": "/oauth/consent",
+      "entry": "page.tsx",
+      "states": [
+        "loading",
+        "trusted client",
+        "missing/unsigned/tampered/expired refusal",
+        "allow pending",
+        "deny pending",
+        "switch pending",
+        "error"
+      ],
+      "actions": ["allow", "deny", "use another account"]
+    },
+    {
+      "file": "apps/sim/app/(auth)/oauth/sign-in/route.ts",
+      "url": "/oauth/sign-in",
+      "entry": "route.ts",
+      "states": ["signed OAuth request redirect"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/(auth)/reset-password/page.tsx",
+      "url": "/reset-password",
+      "entry": "page.tsx",
+      "states": [
+        "missing token",
+        "invalid token",
+        "password policy",
+        "confirmation mismatch",
+        "pending",
+        "success"
+      ],
+      "actions": ["reset password", "back to login"]
+    },
+    {
+      "file": "apps/sim/app/(auth)/signup/page.tsx",
+      "url": "/signup",
+      "entry": "page.tsx",
+      "states": [
+        "default",
+        "all validation messages",
+        "pending",
+        "registration disabled",
+        "invite-only",
+        "email disabled"
+      ],
+      "actions": ["create account", "signin cross-link", "provider sign-in"]
+    },
+    {
+      "file": "apps/sim/app/(auth)/sso/launch/[providerId]/route.ts",
+      "url": "/sso/launch/[providerId]",
+      "entry": "route.ts",
+      "states": ["SSO provider redirect"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/(auth)/sso/page.tsx",
+      "url": "/sso",
+      "entry": "page.tsx",
+      "states": [
+        "idle",
+        "invalid email",
+        "provider discovery",
+        "provider missing",
+        "expired test link",
+        "pending",
+        "provider failure"
+      ],
+      "actions": ["discover provider", "SSO redirect", "login back link"]
+    },
+    {
+      "file": "apps/sim/app/(auth)/verify/page.tsx",
+      "url": "/verify",
+      "entry": "page.tsx",
+      "states": [
+        "idle",
+        "auto-submit",
+        "verifying",
+        "invalid code",
+        "resend cooldown",
+        "resend failure",
+        "verified",
+        "email unavailable"
+      ],
+      "actions": ["verify email", "resend code", "back to signup"]
+    },
+    {
+      "file": "apps/sim/app/(interfaces)/chat/[identifier]/page.tsx",
+      "url": "/chat/[identifier]",
+      "entry": "page.tsx",
+      "states": [
+        "password gate",
+        "email entry",
+        "OTP",
+        "resend cooldown",
+        "email change",
+        "SSO",
+        "unavailable",
+        "unlocked chat"
+      ],
+      "actions": ["unlock chat", "send/verify/resend code", "change email", "SSO"]
+    },
+    {
+      "file": "apps/sim/app/cli/auth/done/page.tsx",
+      "url": "/cli/auth/done",
+      "entry": "page.tsx",
+      "states": ["complete", "cancelled", "invalid outcome"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/cli/auth/page.tsx",
+      "url": "/cli/auth",
+      "entry": "page.tsx",
+      "states": [
+        "invalid request",
+        "signed out redirect",
+        "platform and runtime scopes",
+        "workspace loading",
+        "workspace failure",
+        "no default workspace",
+        "pending",
+        "approval failure"
+      ],
+      "actions": ["copy pairing code", "select workspace", "connect"]
+    },
+    {
+      "file": "apps/sim/app/credential-groups/complete/page.tsx",
+      "url": "/credential-groups/complete",
+      "entry": "page.tsx",
+      "states": ["complete"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/credential-groups/enroll/[token]/page.tsx",
+      "url": "/credential-groups/enroll/[token]",
+      "entry": "page.tsx",
+      "states": [
+        "full enrollment",
+        "focused reconnect",
+        "all connection identities",
+        "managed connectors",
+        "expired/unavailable",
+        "provider failure",
+        "submitted"
+      ],
+      "actions": ["connect", "reconnect", "submit", "return to accounts/search"]
+    },
+    {
+      "file": "apps/sim/app/credential-groups/slack-complete/page.tsx",
+      "url": "/credential-groups/slack-complete",
+      "entry": "page.tsx",
+      "states": ["complete", "failure"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/desktop/auth/page.tsx",
+      "url": "/desktop/auth",
+      "entry": "page.tsx",
+      "states": ["signed out redirect", "approval", "pending", "refused", "failure", "handoff"],
+      "actions": ["continue to desktop", "retry"]
+    },
+    {
+      "file": "apps/sim/app/desktop/connect/complete/page.tsx",
+      "url": "/desktop/connect/complete",
+      "entry": "page.tsx",
+      "states": ["complete", "failure"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/desktop/connect/page.tsx",
+      "url": "/desktop/connect",
+      "entry": "page.tsx",
+      "states": [
+        "browser waiting",
+        "authenticated launch",
+        "source connect",
+        "account switch",
+        "retry"
+      ],
+      "actions": ["open browser", "retry", "switch account"]
+    },
+    {
+      "file": "apps/sim/app/desktop/done/page.tsx",
+      "url": "/desktop/done",
+      "entry": "page.tsx",
+      "states": ["complete"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/f/[token]/page.tsx",
+      "url": "/f/[token]",
+      "entry": "page.tsx",
+      "states": [
+        "password gate",
+        "email entry",
+        "OTP",
+        "resend cooldown",
+        "email change",
+        "SSO",
+        "failure",
+        "unlocked viewer"
+      ],
+      "actions": ["unlock resource", "send/verify/resend code", "change email", "SSO"]
+    },
+    {
+      "file": "apps/sim/app/invite/[id]/page.tsx",
+      "url": "/invite/[id]",
+      "entry": "page.tsx",
+      "states": [
+        "signed out",
+        "registration disabled",
+        "loading",
+        "expired",
+        "wrong account",
+        "accept pending",
+        "accept failure",
+        "success",
+        "missing disclosure",
+        "will join",
+        "already member",
+        "blocked"
+      ],
+      "actions": [
+        "sign in",
+        "create account",
+        "accept invitation",
+        "switch account",
+        "refresh invitation",
+        "return home"
+      ]
+    },
+    {
+      "file": "apps/sim/app/knowledge/github/setup/page.tsx",
+      "url": "/knowledge/github/setup",
+      "entry": "page.tsx",
+      "states": ["loading", "available accounts", "pending", "error", "complete"],
+      "actions": ["select installation", "connect"]
+    },
+    {
+      "file": "apps/sim/app/oauth-error/page.tsx",
+      "url": "/oauth-error",
+      "entry": "page.tsx",
+      "states": ["callback failure"],
+      "actions": ["close window"]
+    },
+    {
+      "file": "apps/sim/app/oauth/chat-complete/page.tsx",
+      "url": "/oauth/chat-complete",
+      "entry": "page.tsx",
+      "states": ["callback processing", "handoff"],
+      "actions": []
+    },
+    {
+      "file": "apps/sim/app/oauth/credential-connected/page.tsx",
+      "url": "/oauth/credential-connected",
+      "entry": "page.tsx",
+      "states": ["connected"],
+      "actions": ["close window"]
+    },
+    {
+      "file": "apps/sim/app/slack-search/connect/[token]/page.tsx",
+      "url": "/slack-search/connect/[token]",
+      "entry": "page.tsx",
+      "states": ["invitation unavailable", "workspace choice", "connecting", "error", "complete"],
+      "actions": ["connect Slack", "choose workspace"]
+    },
+    {
+      "file": "apps/sim/app/slack-search/install/[teamId]/page.tsx",
+      "url": "/slack-search/install/[teamId]",
+      "entry": "page.tsx",
+      "states": ["signed out", "unavailable", "install confirmation"],
+      "actions": ["install Slack", "return"]
+    }
+  ],
+  "native": [
+    {
+      "surface": "offline",
+      "states": ["offline", "DNS", "TLS", "timeout", "unreachable", "cloud status", "self-hosted"],
+      "actions": ["retry", "check status on Sim Cloud", "change server", "support"]
+    },
+    {
+      "surface": "server",
+      "states": ["current server", "invalid URL", "pending", "unchanged server", "failure"],
+      "actions": ["connect", "cancel", "Escape/window close"]
+    }
+  ],
+  "externalBoundaries": [
+    "Google, Microsoft and GitHub provider pages",
+    "SSO identity providers",
+    "CAPTCHA and password-manager UI",
+    "OS window chrome",
+    "resource authorization and account session cookies"
+  ],
+  "validationNotes": "State inventory records the retained surface contract; it is not a claim that every external provider or organization policy was exercised locally."
+}
diff --git a/apps/sim/auth-migration/route-parity.json b/apps/sim/auth-migration/route-parity.json
new file mode 100644
index 00000000000..83a328f7fc2
--- /dev/null
+++ b/apps/sim/auth-migration/route-parity.json
@@ -0,0 +1,12 @@
+{
+  "baseline": "a0f47b1e87b0a26d9071cad1ce592666b7e7de07",
+  "originalInventoryBase": "9c571fbcea10ed2001ea81fc967830e33dadcbf4",
+  "checkedRoutes": 1061,
+  "authEntries": 26,
+  "authPages": 24,
+  "authRedirects": 2,
+  "nativeAuthPages": 2,
+  "missing": [],
+  "removed": [],
+  "added": []
+}
diff --git a/apps/sim/auth-migration/surfaces.json b/apps/sim/auth-migration/surfaces.json
new file mode 100644
index 00000000000..bfcbd5c2348
--- /dev/null
+++ b/apps/sim/auth-migration/surfaces.json
@@ -0,0 +1,84 @@
+[
+  "apps/sim/app/(auth)/components/auth-legal-footer.tsx",
+  "apps/sim/app/(auth)/components/auth-loading-skeleton.tsx",
+  "apps/sim/app/(auth)/components/auth-navigation.tsx",
+  "apps/sim/app/(auth)/components/auth-shell.tsx",
+  "apps/sim/app/(auth)/components/auth-submit-button.tsx",
+  "apps/sim/app/(auth)/components/oauth-provider-checker.tsx",
+  "apps/sim/app/(auth)/components/social-login-buttons.tsx",
+  "apps/sim/app/(auth)/components/sso-login-button.tsx",
+  "apps/sim/app/(auth)/components/support-footer.tsx",
+  "apps/sim/app/(auth)/layout.tsx",
+  "apps/sim/app/(auth)/login/loading.tsx",
+  "apps/sim/app/(auth)/login/login-form.tsx",
+  "apps/sim/app/(auth)/login/page.tsx",
+  "apps/sim/app/(auth)/oauth/consent/consent-view.tsx",
+  "apps/sim/app/(auth)/oauth/consent/loading.tsx",
+  "apps/sim/app/(auth)/oauth/consent/page.tsx",
+  "apps/sim/app/(auth)/reset-password/loading.tsx",
+  "apps/sim/app/(auth)/reset-password/page.tsx",
+  "apps/sim/app/(auth)/reset-password/reset-password-content.tsx",
+  "apps/sim/app/(auth)/reset-password/reset-password-form.tsx",
+  "apps/sim/app/(auth)/signup/loading.tsx",
+  "apps/sim/app/(auth)/signup/page.tsx",
+  "apps/sim/app/(auth)/signup/registration-disabled.tsx",
+  "apps/sim/app/(auth)/signup/signup-form.tsx",
+  "apps/sim/app/(auth)/sso/loading.tsx",
+  "apps/sim/app/(auth)/sso/page.tsx",
+  "apps/sim/app/(auth)/verify/loading.tsx",
+  "apps/sim/app/(auth)/verify/page.tsx",
+  "apps/sim/app/(auth)/verify/verify-content.tsx",
+  "apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx",
+  "apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx",
+  "apps/sim/app/cli/auth/cli-auth-view.tsx",
+  "apps/sim/app/cli/auth/done/cli-auth-done-view.tsx",
+  "apps/sim/app/cli/auth/done/page.tsx",
+  "apps/sim/app/cli/auth/loading.tsx",
+  "apps/sim/app/cli/auth/page.tsx",
+  "apps/sim/app/credential-groups/complete/completion-handoff.tsx",
+  "apps/sim/app/credential-groups/complete/page.tsx",
+  "apps/sim/app/credential-groups/enroll/[token]/oauth-reconnect-link.tsx",
+  "apps/sim/app/credential-groups/enroll/[token]/oauth-toast.tsx",
+  "apps/sim/app/credential-groups/enroll/[token]/page.test.tsx",
+  "apps/sim/app/credential-groups/enroll/[token]/page.tsx",
+  "apps/sim/app/credential-groups/slack-complete/page.tsx",
+  "apps/sim/app/credential-groups/slack-complete/slack-completion.tsx",
+  "apps/sim/app/desktop/auth/authorize-handoff.tsx",
+  "apps/sim/app/desktop/auth/page.tsx",
+  "apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx",
+  "apps/sim/app/desktop/connect/complete/page.tsx",
+  "apps/sim/app/desktop/connect/connect-launcher.tsx",
+  "apps/sim/app/desktop/connect/page.tsx",
+  "apps/sim/app/desktop/connect/source-completion.tsx",
+  "apps/sim/app/desktop/connect/source-connect-launcher.tsx",
+  "apps/sim/app/desktop/connect/switch-account.tsx",
+  "apps/sim/app/desktop/done/page.tsx",
+  "apps/sim/app/f/[token]/opengraph-image.tsx",
+  "apps/sim/app/f/[token]/page.tsx",
+  "apps/sim/app/f/[token]/public-file-auth-shell.tsx",
+  "apps/sim/app/f/[token]/public-file-auth.tsx",
+  "apps/sim/app/f/[token]/public-file-email-auth.tsx",
+  "apps/sim/app/f/[token]/public-file-sso-auth.tsx",
+  "apps/sim/app/invite/[id]/invite.tsx",
+  "apps/sim/app/invite/[id]/loading.tsx",
+  "apps/sim/app/invite/[id]/page.tsx",
+  "apps/sim/app/invite/components/invitation-disclosure.tsx",
+  "apps/sim/app/invite/components/invitation-workspace-access.tsx",
+  "apps/sim/app/invite/components/layout.tsx",
+  "apps/sim/app/invite/components/status-card.tsx",
+  "apps/sim/app/knowledge/github/setup/page.tsx",
+  "apps/sim/app/knowledge/github/setup/setup.tsx",
+  "apps/sim/app/oauth-error/page.tsx",
+  "apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx",
+  "apps/sim/app/oauth/chat-complete/page.tsx",
+  "apps/sim/app/oauth/credential-connected/page.tsx",
+  "apps/sim/app/slack-search/connect/[token]/page.test.tsx",
+  "apps/sim/app/slack-search/connect/[token]/page.tsx",
+  "apps/sim/app/slack-search/connect/[token]/slack-search-onboarding.tsx",
+  "apps/sim/app/slack-search/install/[teamId]/page.test.tsx",
+  "apps/sim/app/slack-search/install/[teamId]/page.tsx",
+  "apps/sim/app/unsubscribe/unsubscribe.tsx",
+  "apps/sim/ee/sso/components/sso-auth.tsx",
+  "apps/sim/ee/sso/components/sso-form.test.tsx",
+  "apps/sim/ee/sso/components/sso-form.tsx"
+]
diff --git a/apps/sim/auth-migration/validation.json b/apps/sim/auth-migration/validation.json
new file mode 100644
index 00000000000..4084e3043d9
--- /dev/null
+++ b/apps/sim/auth-migration/validation.json
@@ -0,0 +1,380 @@
+{
+  "date": "2026-10-29",
+  "controlCleanup": {
+    "changes": [
+      "Centralized email placeholders, keyboard hints and autocomplete defaults in AuthEmailInput.",
+      "Centralized the default password placeholder in PasswordInput.",
+      "Refined the local visibility glyphs and localized provider logos and the consent checkmark.",
+      "Consolidated public-file SSO validation into AuthField."
+    ],
+    "validation": {
+      "lint": "pass across 27 workspaces",
+      "typeCheck": "pass across 27 workspaces",
+      "audits": "61 passed",
+      "desktopBuild": "pass",
+      "blockRegistry": "pass",
+      "focusedTests": "7 files and 24 tests passed, including the assistant-execution file",
+      "browser": [
+        "Recovery email placeholder and email input defaults verified in the running app.",
+        "Mouse and keyboard visibility controls switch the input type and accessible label.",
+        "Desktop and 390px mobile sign-in and recovery layouts visually verified.",
+        "Signup renders the shared email and password controls."
+      ],
+      "fullSuite": "Run before the final provider-logo and consent-icon import changes: 19/20 workspace tasks passed; App had 38,753 passing tests, 4 failures and 8 skips. Two failures were the previously documented executor timeouts; two were in unchanged tools/assistant-execution.test.ts, which passed in the final focused run. No unrelated test or timeout changes were made."
+    }
+  },
+  "base": "a0f47b1e87b0a26d9071cad1ce592666b7e7de07",
+  "runtime": {
+    "bun": "1.4.1",
+    "node": "24.19.0",
+    "next": "16.4.1"
+  },
+  "gates": [
+    {
+      "command": "bun run lint",
+      "status": "pass",
+      "workspaces": 27
+    },
+    {
+      "command": "bun run type-check",
+      "status": "pass",
+      "workspaces": 27
+    },
+    {
+      "command": "bun run check:audits",
+      "status": "pass",
+      "audits": 61
+    },
+    {
+      "command": "bun run build",
+      "cwd": "apps/sim",
+      "status": "pass",
+      "note": "Full production build passed before the final two-selector navigation-hover correction. That CSS correction was compiled through the same PostCSS pipeline, verified in the real shared-component browser fixture, and included in a fresh desktop build."
+    },
+    {
+      "command": "bun run build",
+      "cwd": "apps/desktop",
+      "status": "pass"
+    },
+    {
+      "command": "bun run apps/sim/scripts/check-block-registry.ts origin/staging",
+      "status": "pass"
+    },
+    {
+      "command": "git diff --check",
+      "status": "pass"
+    },
+    {
+      "command": "Focused Auth and shared invitation regressions",
+      "status": "pass",
+      "files": 10,
+      "tests": 65
+    },
+    {
+      "command": "bun run test",
+      "status": "failed",
+      "scriptTests": {
+        "filesPassed": 41,
+        "testsPassed": 634
+      },
+      "workspaceTasks": {
+        "passed": 19,
+        "total": 20
+      },
+      "appTests": {
+        "filesPassed": 3430,
+        "filesFailed": 2,
+        "testsPassed": 38755,
+        "testsFailed": 2,
+        "testsSkipped": 8
+      },
+      "failures": [
+        {
+          "file": "apps/sim/executor/execution/executor.test.ts",
+          "test": "does not run a stale branch inside a loop",
+          "result": "10000ms timeout"
+        },
+        {
+          "file": "apps/sim/executor/execution/test-hooks.test.ts",
+          "test": "delivers one call per loop iteration, in order",
+          "result": "10000ms timeout"
+        }
+      ],
+      "investigation": "These executor files and their production owners are unchanged. Both failures reproduce with bundled and official Node 24.19.0, including with the Vitest filesystem cache disabled. Both files pass all 22 tests under Node 23.10.0. No executor or test-timeout workaround was added to the Auth redesign."
+    }
+  ],
+  "routeParity": {
+    "baseline": "a0f47b1e87b0a26d9071cad1ce592666b7e7de07",
+    "originalInventoryBase": "9c571fbcea10ed2001ea81fc967830e33dadcbf4",
+    "checkedRoutes": 1061,
+    "authEntries": 26,
+    "authPages": 24,
+    "authRedirects": 2,
+    "nativeAuthPages": 2,
+    "missing": [],
+    "removed": [],
+    "added": []
+  },
+  "checks": {
+    "productionBrowser": [
+      {
+        "name": "Header preserves nested callback and invitation context",
+        "status": "pass",
+        "durationMs": 795
+      },
+      {
+        "name": "Password visibility preserves input and does not submit",
+        "status": "pass",
+        "durationMs": 95
+      },
+      {
+        "name": "Recovery keeps the email and original return URL",
+        "status": "pass",
+        "durationMs": 42
+      },
+      {
+        "name": "Real invalid sign-in response remains visible and associated",
+        "status": "pass",
+        "durationMs": 125
+      },
+      {
+        "name": "Auth is noindex over real HTTP",
+        "status": "pass",
+        "durationMs": 627
+      },
+      {
+        "name": "Login responsive 320",
+        "status": "pass",
+        "durationMs": 643
+      },
+      {
+        "name": "Login responsive 390",
+        "status": "pass",
+        "durationMs": 619
+      },
+      {
+        "name": "Login responsive 768",
+        "status": "pass",
+        "durationMs": 663
+      },
+      {
+        "name": "Login responsive 1280",
+        "status": "pass",
+        "durationMs": 611
+      },
+      {
+        "name": "Login responsive 1440",
+        "status": "pass",
+        "durationMs": 634
+      },
+      {
+        "name": "Signup retains the legacy redirect parameter in its header",
+        "status": "pass",
+        "durationMs": 586
+      },
+      {
+        "name": "Signup validation messages wrap without overlay at 320px",
+        "status": "pass",
+        "durationMs": 60
+      },
+      {
+        "name": "Public status route /reset-password",
+        "status": "pass",
+        "durationMs": 614
+      },
+      {
+        "name": "Public status route /oauth/consent",
+        "status": "pass",
+        "durationMs": 646
+      },
+      {
+        "name": "Public status route /desktop/auth",
+        "status": "pass",
+        "durationMs": 552
+      },
+      {
+        "name": "Public status route /desktop/done",
+        "status": "pass",
+        "durationMs": 553
+      },
+      {
+        "name": "Public status route /desktop/connect",
+        "status": "pass",
+        "durationMs": 552
+      },
+      {
+        "name": "Public status route /cli/auth/done",
+        "status": "pass",
+        "durationMs": 549
+      },
+      {
+        "name": "Public status route /oauth-error?error=access_denied",
+        "status": "pass",
+        "durationMs": 662
+      },
+      {
+        "name": "Public status route /oauth/credential-connected",
+        "status": "pass",
+        "durationMs": 655
+      },
+      {
+        "name": "Public status route /credential-groups/complete",
+        "status": "pass",
+        "durationMs": 695
+      },
+      {
+        "name": "Public status route /credential-groups/slack-complete",
+        "status": "pass",
+        "durationMs": 620
+      }
+    ],
+    "productionVisualAndIsolation": [
+      {
+        "name": "Mobile uses text navigation and support follows the form",
+        "status": "pass",
+        "durationMs": 759
+      },
+      {
+        "name": "Desktop uses pill navigation, 400px form and flow footer",
+        "status": "pass",
+        "durationMs": 653
+      },
+      {
+        "name": "App dark mode and brand variables do not change Auth typography or control colors",
+        "status": "pass",
+        "durationMs": 4
+      },
+      {
+        "name": "Auth suppresses configured deployment custom CSS",
+        "status": "pass",
+        "durationMs": 796
+      },
+      {
+        "name": "Auth content and robots metadata are server rendered without JavaScript",
+        "status": "pass",
+        "durationMs": 82
+      }
+    ],
+    "deploymentConfigurations": [
+      {
+        "name": "Server-only registration policy hides signup after hydration",
+        "status": "pass",
+        "durationMs": 6160
+      },
+      {
+        "name": "SSO-only policy keeps its primary action and removes email/recovery/signup controls",
+        "status": "pass",
+        "durationMs": 4543
+      },
+      {
+        "name": "No-methods deployment provides an explicit unavailable state",
+        "status": "pass",
+        "durationMs": 4535
+      },
+      {
+        "name": "All-provider configuration matches the specified ordering and mobile two-column layout",
+        "status": "pass",
+        "durationMs": 4603
+      }
+    ],
+    "realAccountLifecycle": [
+      {
+        "name": "Real signup reaches verification with callback retained",
+        "status": "pass"
+      },
+      {
+        "name": "Invalid OTP has visible associated feedback",
+        "status": "pass"
+      },
+      {
+        "name": "Mail-delivered OTP verifies once and returns to the requested page",
+        "status": "pass"
+      },
+      {
+        "name": "Recovery sends a real reset email and retains its neutral acknowledgement",
+        "status": "pass"
+      },
+      {
+        "name": "Reset validates mismatch, changes password, and returns to login",
+        "status": "pass"
+      },
+      {
+        "name": "New password signs in through the existing session handler",
+        "status": "pass"
+      }
+    ],
+    "sharedControls": [
+      {
+        "name": "Select keyboard skips disabled options and returns focus",
+        "status": "pass"
+      },
+      {
+        "name": "Search filters options and keeps keyboard selection",
+        "status": "pass"
+      },
+      {
+        "name": "Copy announces success then returns to Copy",
+        "status": "pass"
+      },
+      {
+        "name": "Account menu executes only its existing switch action",
+        "status": "pass"
+      },
+      {
+        "name": "OTP paste fills six slots and pending prevents duplicate actions",
+        "status": "pass"
+      },
+      {
+        "name": "Long menu and controls fit viewport 320",
+        "status": "pass"
+      },
+      {
+        "name": "Long menu and controls fit viewport 390",
+        "status": "pass"
+      },
+      {
+        "name": "Long menu and controls fit viewport 768",
+        "status": "pass"
+      },
+      {
+        "name": "Long menu and controls fit viewport 1440",
+        "status": "pass"
+      }
+    ],
+    "nativeElectron": [
+      {
+        "name": "Actual Electron loads the isolated offline screen and bundled fonts",
+        "status": "pass"
+      },
+      {
+        "name": "Native Change server opens the existing dialog with current URL",
+        "status": "pass"
+      },
+      {
+        "name": "Native server validation retains input and fits resized content",
+        "status": "pass"
+      },
+      {
+        "name": "Native Escape dismisses the existing server window",
+        "status": "pass"
+      }
+    ],
+    "navigationInteractionColors": [
+      {
+        "name": "Desktop navigation keeps dark fill and readable white text during hover and press",
+        "status": "pass"
+      },
+      {
+        "name": "Mobile navigation remains quiet text during hover",
+        "status": "pass"
+      }
+    ]
+  },
+  "liveInfrastructure": "Disposable local PostgreSQL, Mailpit SMTP, production Next server and actual Electron; no production accounts or external provider credentials used.",
+  "limitations": [
+    "The full monorepo test gate is not green because of the two Node 24 executor timeouts listed above.",
+    "Live external-provider and enterprise-tenant flows were not exercised. The route/state inventory is not an assertion that every provider or policy branch was executed.",
+    "Bun 1.4.1 is installed locally; the repository declares Bun 1.4.4. The Node 24 runtime used for validation was isolated without changing the global installation.",
+    "Browser screenshots and raw execution logs are local review artifacts; the checks and outcomes are recorded here without credentials, OTPs or handoff tokens."
+  ]
+}
diff --git a/apps/sim/components/branded-layout.tsx b/apps/sim/components/branded-layout.tsx
index a42e712f3d9..6aaa3d7d4ba 100644
--- a/apps/sim/components/branded-layout.tsx
+++ b/apps/sim/components/branded-layout.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import { isAuthSurfacePath } from '@/lib/navigation/auth-surfaces'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
 interface BrandedLayoutProps {
@@ -8,28 +10,37 @@ interface BrandedLayoutProps {
 }
 
 export function BrandedLayout({ children }: BrandedLayoutProps) {
+  const pathname = usePathname()
+  const authSurface = isAuthSurfacePath(pathname)
+
   useEffect(() => {
     const config = getBrandConfig()
 
-    // Update document title
     if (config.name !== 'Sim') {
       document.title = config.name
     }
 
-    // Update favicon
     if (config.faviconUrl) {
       const faviconLink = document.querySelector("link[rel*='icon']") as HTMLLinkElement
       if (faviconLink) {
         faviconLink.href = config.faviconUrl
       }
     }
+  }, [])
 
-    // Load custom CSS if provided
-    if (config.customCssUrl) {
+  useEffect(() => {
+    const config = getBrandConfig()
+    // Public resource routes can move between an Auth gate and their branded viewer.
+    const resourceRoute = pathname.startsWith('/f/') || pathname.startsWith('/chat/')
+    const syncCustomCss = () => {
       const customCssId = 'custom-brand-css'
       let customCssLink = document.getElementById(customCssId) as HTMLLinkElement
-
-      if (!customCssLink) {
+      const authVisible = resourceRoute
+        ? Boolean(document.querySelector('[data-auth-root]'))
+        : authSurface
+      if (authVisible) {
+        customCssLink?.remove()
+      } else if (config.customCssUrl && !customCssLink) {
         customCssLink = document.createElement('link')
         customCssLink.id = customCssId
         customCssLink.rel = 'stylesheet'
@@ -37,7 +48,12 @@ export function BrandedLayout({ children }: BrandedLayoutProps) {
         document.head.appendChild(customCssLink)
       }
     }
-  }, [])
+    syncCustomCss()
+    if (!resourceRoute) return
+    const observer = new MutationObserver(syncCustomCss)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [authSurface, pathname])
 
   return <>{children}</>
 }
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index 0af36c8de01..d032166d261 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -1,14 +1,14 @@
 'use client'
 
-import { type KeyboardEvent, useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { useState } from 'react'
+import { AuthEmailInput, AuthField, AuthHeader, AuthStack } from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { chatSSOContract } from '@/lib/api/contracts/chats'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthShell, AuthSubmitButton } from '@/app/(auth)/components'
 
 const logger = createLogger('SSOAuth')
 
@@ -39,13 +39,6 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleAuthenticate()
-    }
-  }
-
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEmail = e.target.value
     setEmail(newEmail)
@@ -54,6 +47,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
   }
 
   const handleAuthenticate = async () => {
+    if (isLoading) return
     const emailValidationErrors = validateEmailField(email)
     setEmailErrors(emailValidationErrors)
     setShowEmailValidationError(emailValidationErrors.length > 0)
@@ -95,62 +89,41 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
   }
 
   return (
-    <div className='flex flex-1 items-center justify-center px-4 py-16'>
-      <div className='w-full max-w-[410px]'>
-        <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              SSO Authentication
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat requires SSO authentication
-            </p>
-          </div>
-
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              handleAuthenticate()
-            }}
-            className='mt-8 w-full max-w-[410px] space-y-6'
+    <AuthShell>
+      <AuthStack>
+        <AuthHeader
+          title='SSO authentication'
+          description='This chat requires SSO authentication'
+        />
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            void handleAuthenticate()
+          }}
+          className='au:space-y-5'
+        >
+          <AuthField
+            htmlFor='email'
+            label='Work email'
+            errors={showEmailValidationError ? emailErrors : undefined}
           >
-            <div className='space-y-2'>
-              <div className='flex items-center justify-between'>
-                <Label htmlFor='email'>Work Email</Label>
-              </div>
-              <Input
-                id='email'
-                name='email'
-                required
-                type='email'
-                autoCapitalize='none'
-                autoComplete='email'
-                autoCorrect='off'
-                placeholder='Enter your work email'
-                value={email}
-                onChange={handleEmailChange}
-                onKeyDown={handleKeyDown}
-                className={cn(
-                  showEmailValidationError &&
-                    emailErrors.length > 0 &&
-                    'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                )}
-              />
-              {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-[var(--text-error)] text-caption'>
-                  {emailErrors.map((error) => (
-                    <p key={error}>{error}</p>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO…'>
-              Continue with SSO
-            </AuthSubmitButton>
-          </form>
-        </div>
-      </div>
-    </div>
+            <AuthEmailInput
+              id='email'
+              name='email'
+              required
+              type='email'
+              placeholder='Enter your work email'
+              value={email}
+              onChange={handleEmailChange}
+              disabled={isLoading}
+              error={showEmailValidationError && emailErrors.length > 0}
+            />
+          </AuthField>
+          <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO…'>
+            Continue with SSO
+          </AuthSubmitButton>
+        </form>
+      </AuthStack>
+    </AuthShell>
   )
 }
diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx
index b9c833c56e5..66bc64fea87 100644
--- a/apps/sim/ee/sso/components/sso-form.test.tsx
+++ b/apps/sim/ee/sso/components/sso-form.test.tsx
@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { apiClientRequestMock } from '@sim/testing/mocks/api-client-request.mock'
 import { authClientMock } from '@sim/testing/mocks/auth-client.mock'
 import { envMockFns, resetEnvMock } from '@sim/testing/mocks/env.mock'
@@ -13,26 +13,10 @@ vi.mock('@/lib/api/client/request', () => apiClientRequestMock)
 
 vi.mock('next/navigation', () => nextNavigationMock)
 
-vi.mock('next/link', () => ({
-  default: ({ href, children }: { href: string; children?: ReactNode }) => (
-    <a href={href}>{children}</a>
-  ),
-}))
-
-vi.mock('@sim/emcn', () => ({
-  Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button type='button' {...props}>
-      {children}
-    </button>
-  ),
-  Input: (props: InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
-  Label: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
-  cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
-}))
-
 vi.mock('@/lib/auth/client', () => authClientMock)
 
 vi.mock('@/app/(auth)/components', () => ({
+  AuthLegalFooter: () => null,
   AuthFormMessage: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
   AuthSubmitButton: ({
     children,
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 86e6c88efb0..9e17c3e81c7 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -1,9 +1,16 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Button, cn, Input, Label } from '@sim/emcn'
+import {
+  AuthDivider,
+  AuthEmailInput,
+  AuthField,
+  AuthHeader,
+  AuthLinkButton,
+  AuthNavPrompt,
+  AuthStack,
+} from '@sim/auth-ui'
 import { createLogger } from '@sim/logger'
-import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
@@ -14,7 +21,7 @@ import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { captureClientEvent } from '@/lib/posthog/client'
 import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
-import { AuthFormMessage, AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthFormMessage, AuthLegalFooter, AuthSubmitButton } from '@/app/(auth)/components'
 
 const logger = createLogger('SSOForm')
 const SSO_SIGN_IN_ERROR = 'Unable to start SSO. Check your email and try again.'
@@ -128,6 +135,7 @@ function SSOFormContent({
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
+    if (isLoading) return
     setIsLoading(true)
     setFormError(null)
 
@@ -187,126 +195,47 @@ function SSOFormContent({
   }
 
   return (
-    <>
-      <div className='space-y-1 text-center'>
-        <h1
-          className={
-            'text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'
-          }
+    <AuthStack>
+      <AuthHeader title='Sign in with SSO' description='Enter your work email to continue' />
+      <form onSubmit={onSubmit} className='au:space-y-5'>
+        {formError && <AuthFormMessage type='error'>{formError}</AuthFormMessage>}
+        <AuthField
+          htmlFor='email'
+          label='Work email'
+          errors={showEmailValidationError ? emailErrors : undefined}
         >
-          Sign in with SSO
-        </h1>
-        <p
-          className={
-            'text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'
-          }
-        >
-          Enter your work email to continue
-        </p>
-      </div>
-
-      <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
-        {formError && (
-          <div role='alert'>
-            <AuthFormMessage type='error'>{formError}</AuthFormMessage>
-          </div>
-        )}
-
-        <div className='space-y-6'>
-          <div className='space-y-2'>
-            <div className='flex items-center justify-between'>
-              <Label htmlFor='email'>Work email</Label>
-            </div>
-            <Input
-              id='email'
-              name='email'
-              placeholder='Enter your work email'
-              required
-              autoCapitalize='none'
-              autoComplete='email'
-              autoCorrect='off'
-              value={email}
-              onChange={handleEmailChange}
-              aria-invalid={hasEmailError || undefined}
-              aria-describedby={hasEmailError ? 'sso-email-errors' : undefined}
-              className={cn(
-                hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
-            />
-            {hasEmailError && (
-              <div
-                id='sso-email-errors'
-                role='alert'
-                className='mt-1 space-y-1 text-[var(--text-error)] text-caption'
-              >
-                {emailErrors.map((error) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
+          <AuthEmailInput
+            id='email'
+            name='email'
+            type='email'
+            required
+            placeholder='Enter your work email'
+            value={email}
+            onChange={handleEmailChange}
+            error={hasEmailError}
+            disabled={isLoading}
+          />
+        </AuthField>
         <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO provider…'>
           Continue with SSO
         </AuthSubmitButton>
       </form>
-
       {emailEnabled && (
         <>
-          <div className='relative my-6 font-light'>
-            <div className='absolute inset-0 flex items-center'>
-              <div className='w-full border-[var(--border)] border-t' />
-            </div>
-            <div className='relative flex justify-center text-sm'>
-              <span className='bg-[var(--bg)] px-4 font-normal text-[var(--text-muted)]'>Or</span>
-            </div>
-          </div>
-
-          <div className='space-y-3'>
-            <Link
-              href={`/login${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
-            >
-              <Button variant='outline' className='w-full rounded-[10px]' type='button'>
-                Sign in with email
-              </Button>
-            </Link>
-          </div>
+          <AuthDivider label='Or' />
+          <AuthLinkButton href={`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`} fullWidth>
+            Sign in with email
+          </AuthLinkButton>
         </>
       )}
-
       {emailEnabled && !registrationDisabled && (
-        <div className='pt-6 text-center font-light text-base'>
-          <span className='font-normal'>Don't have an account? </span>
-          <Link
-            href={`/signup${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
-            className='text-[var(--text-primary)] underline-offset-4 transition hover:underline'
-          >
-            Sign up
-          </Link>
-        </div>
+        <AuthNavPrompt
+          prompt="Don't have an account?"
+          href={`/signup?callbackUrl=${encodeURIComponent(callbackUrl)}`}
+          linkLabel='Sign up'
+        />
       )}
-
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-normal text-[var(--text-muted)] text-sm leading-relaxed sm:px-8 md:px-[44px]'>
-        By signing in, you agree to our{' '}
-        <Link
-          href='/terms'
-          target='_blank'
-          rel='noopener noreferrer'
-          className='text-[var(--text-muted)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
-        >
-          Terms of Service
-        </Link>{' '}
-        and{' '}
-        <Link
-          href='/privacy'
-          target='_blank'
-          rel='noopener noreferrer'
-          className='text-[var(--text-muted)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
-        >
-          Privacy Policy
-        </Link>
-      </div>
-    </>
+      <AuthLegalFooter action='signing in' />
+    </AuthStack>
   )
 }
diff --git a/apps/sim/lib/navigation/auth-surfaces.ts b/apps/sim/lib/navigation/auth-surfaces.ts
new file mode 100644
index 00000000000..ca886bbde0b
--- /dev/null
+++ b/apps/sim/lib/navigation/auth-surfaces.ts
@@ -0,0 +1,28 @@
+import { isPathOrDescendant } from '@/lib/navigation/paths'
+
+const AUTH_SURFACE_ROOTS = [
+  '/login',
+  '/signup',
+  '/verify',
+  '/reset-password',
+  '/sso',
+  '/oauth',
+  '/oauth-error',
+  '/invite',
+  '/enterprise/claim',
+  '/unsubscribe',
+  '/desktop/auth',
+  '/desktop/done',
+  '/desktop/connect',
+  '/cli/auth',
+  '/credential-groups',
+  '/slack-search',
+  '/knowledge/github/setup',
+  '/f',
+  '/chat',
+] as const
+
+/** Routes whose account or resource-access UI is governed by the isolated Auth system. */
+export function isAuthSurfacePath(pathname: string): boolean {
+  return AUTH_SURFACE_ROOTS.some((root) => isPathOrDescendant(pathname, root))
+}
diff --git a/apps/sim/next.config.ts b/apps/sim/next.config.ts
index 87b7cbd3427..f516f9b4aca 100644
--- a/apps/sim/next.config.ts
+++ b/apps/sim/next.config.ts
@@ -274,6 +274,7 @@ const nextConfig: NextConfig = {
     '@t3-oss/env-core',
     '@sim/db',
     '@sim/emcn',
+    '@sim/auth-ui',
     '@sim/workflow-renderer',
   ],
   async headers() {
diff --git a/apps/sim/package.json b/apps/sim/package.json
index 77e1ddfebf5..f99a1c9675f 100644
--- a/apps/sim/package.json
+++ b/apps/sim/package.json
@@ -217,7 +217,6 @@
     "https-proxy-agent": "7.0.6",
     "idb-keyval": "6.3.0",
     "imapflow": "1.7.8",
-    "input-otp": "^1.5.0",
     "ioredis": "^5.6.0",
     "isolated-vm": "6.2.0",
     "jose": "6.2.3",
@@ -284,7 +283,8 @@
     "yauzl": "3.4.0",
     "yjs": "13.6.33",
     "zod": "4.3.6",
-    "zustand": "^5.0.15"
+    "zustand": "^5.0.15",
+    "@sim/auth-ui": "workspace:*"
   },
   "devDependencies": {
     "@next/env": "16.4.1",
diff --git a/apps/sim/proxy.test.ts b/apps/sim/proxy.test.ts
index 4f2705eeed9..59c9f3d2369 100644
--- a/apps/sim/proxy.test.ts
+++ b/apps/sim/proxy.test.ts
@@ -228,9 +228,22 @@ describe('proxy indexing policy', () => {
     expect(robotsTag('/library.md/some-article')).toBeNull()
   })
 
-  it('leaves a self-hosted non-landing public page indexable', () => {
-    setEnvFlags({ isHosted: false })
-    expect(robotsTag('/login')).toBeNull()
+  it.each([
+    '/login',
+    '/signup',
+    '/verify',
+    '/oauth/consent',
+    '/invite/example',
+    '/desktop/auth',
+    '/cli/auth',
+    '/credential-groups/enroll/example',
+    '/f/example',
+    '/chat/example',
+  ])('keeps Auth out of search results on every deployment: %s', (pathname) => {
+    for (const isHosted of [false, true]) {
+      setEnvFlags({ isHosted })
+      expect(robotsTag(pathname)).toBe('noindex, nofollow')
+    }
   })
 })
 
diff --git a/apps/sim/proxy.ts b/apps/sim/proxy.ts
index 2bb6396180e..93e8aea8b7b 100644
--- a/apps/sim/proxy.ts
+++ b/apps/sim/proxy.ts
@@ -9,6 +9,7 @@ import { resolveSimMcpHostPath } from '@/lib/api/mcp/host-routing'
 import { SIM_MCP_ROUTE_PATH } from '@/lib/api/mcp/urls'
 import { getBrowserExtensionOrigins } from '@/lib/core/security/extension'
 import { isMarketingPath } from '@/lib/landing/routes'
+import { isAuthSurfacePath } from '@/lib/navigation/auth-surfaces'
 import { APP_ENTRY_PATH, isAppSurfacePath, isNoindexPath } from '@/lib/navigation/paths'
 import { isOAuthAuthorizationCallback, resolveAuthRedirect } from '@/app/(auth)/auth-redirect'
 import { getEnv } from './lib/core/config/env'
@@ -471,6 +472,7 @@ function applyIndexingPolicy(request: NextRequest, response: NextResponse): Next
   if (
     isNonCanonicalSimHost(host) ||
     isNoindexPath(pathname) ||
+    isAuthSurfacePath(pathname) ||
     (!isHosted && isMarketingPath(pathname))
   ) {
     response.headers.set('X-Robots-Tag', 'noindex, nofollow')
diff --git a/biome.json b/biome.json
index 9086a717c9a..631ce6bb75b 100644
--- a/biome.json
+++ b/biome.json
@@ -154,7 +154,7 @@
   },
   "overrides": [
     {
-      "includes": ["apps/sim/app/_styles/tailwind.css"],
+      "includes": ["apps/sim/app/_styles/tailwind.css", "packages/auth-ui/src/utilities.css"],
       "linter": { "enabled": false },
       "formatter": { "enabled": false }
     },
diff --git a/bun.lock b/bun.lock
index aaa33a789ff..78930e39690 100644
--- a/bun.lock
+++ b/bun.lock
@@ -50,6 +50,7 @@
         "@lydell/node-pty": "1.2.0-beta.12",
         "@lydell/node-pty-darwin-arm64": "1.2.0-beta.12",
         "@lydell/node-pty-darwin-x64": "1.2.0-beta.12",
+        "@sim/auth-ui": "workspace:*",
         "@sim/browser-protocol": "workspace:*",
         "@sim/desktop-bridge": "workspace:*",
         "@sim/logger": "workspace:*",
@@ -274,6 +275,7 @@
         "@react-email/render": "2.1.0",
         "@sim/audit": "workspace:*",
         "@sim/auth": "workspace:*",
+        "@sim/auth-ui": "workspace:*",
         "@sim/browser-extension-protocol": "workspace:*",
         "@sim/browser-protocol": "workspace:*",
         "@sim/db": "workspace:*",
@@ -354,7 +356,6 @@
         "https-proxy-agent": "7.0.6",
         "idb-keyval": "6.3.0",
         "imapflow": "1.7.8",
-        "input-otp": "^1.5.0",
         "ioredis": "^5.6.0",
         "isolated-vm": "6.2.0",
         "jose": "6.2.3",
@@ -500,6 +501,26 @@
         "typescript": "^7.0.2",
       },
     },
+    "packages/auth-ui": {
+      "name": "@sim/auth-ui",
+      "version": "0.1.0",
+      "dependencies": {
+        "@radix-ui/react-dropdown-menu": "2.2.1",
+        "@radix-ui/react-popover": "1.3.1",
+        "clsx": "^2.1.1",
+        "input-otp": "1.5.0",
+      },
+      "devDependencies": {
+        "@sim/tsconfig": "workspace:*",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "typescript": "^7.0.2",
+      },
+      "peerDependencies": {
+        "react": "^19",
+        "react-dom": "^19",
+      },
+    },
     "packages/browser-extension-protocol": {
       "name": "@sim/browser-extension-protocol",
       "version": "0.1.0",
@@ -614,7 +635,6 @@
         "@types/react-dom": "^19",
         "class-variance-authority": "0.7.1",
         "framer-motion": "^12.5.0",
-        "input-otp": "1.5.0",
         "next": "16.4.1",
         "prismjs": "^1.30.0",
         "react": "19.2.4",
@@ -639,7 +659,6 @@
         "@tanstack/react-virtual": "^3.13.24",
         "class-variance-authority": "^0.7.1",
         "framer-motion": "^12.5.0",
-        "input-otp": "^1.5.0",
         "next": ">=15",
         "prismjs": "^1.30.0",
         "react": "^19",
@@ -1993,6 +2012,8 @@
 
     "@sim/auth": ["@sim/auth@workspace:packages/auth"],
 
+    "@sim/auth-ui": ["@sim/auth-ui@workspace:packages/auth-ui"],
+
     "@sim/browser-extension-protocol": ["@sim/browser-extension-protocol@workspace:packages/browser-extension-protocol"],
 
     "@sim/browser-protocol": ["@sim/browser-protocol@workspace:packages/browser-protocol"],
diff --git a/packages/auth-ui/design/contract.json b/packages/auth-ui/design/contract.json
new file mode 100644
index 00000000000..6735b962c47
--- /dev/null
+++ b/packages/auth-ui/design/contract.json
@@ -0,0 +1,93 @@
+{
+  "runtimeOwner": "@sim/auth-ui",
+  "styleOwner": "src/styles.module.css",
+  "snapshot": "design/tokens.json",
+  "architecture": {
+    "static": ["primitives.tsx", "compositions.tsx", "icons.tsx", "wordmark.tsx"],
+    "interactive": ["controls.tsx", "code-entry.tsx"],
+    "hostAdapters": "apps/sim/app/(auth)/components; apps/desktop/src/renderer",
+    "rule": "Shared visual elements live in this package. Route-specific operations stay colocated with their page. No auth/session logic or App/Docs/Landing theme imports in the package.",
+    "isolation": [
+      "CSS Modules",
+      "root-owned Auth variables",
+      "au: prefixed utilities without preflight",
+      "local licensed fonts",
+      "portals in AuthRoot",
+      "deployment CSS suppressed only while Auth is visible",
+      "identity, favicon and legal/support endpoints retained"
+    ]
+  },
+  "responsive": {
+    "desktop": {
+      "formMaxWidth": 400,
+      "navigationMaxWidth": 1280,
+      "navigationHeight": 56,
+      "pagePadding": "48px 24px",
+      "groupGap": 20,
+      "inputFontSize": 14,
+      "navigationAction": "32px ink pill",
+      "support": "flow footer after flexible main"
+    },
+    "mobile": {
+      "breakpointMax": 767,
+      "gutters": 16,
+      "mainTop": 24,
+      "groupGap": 24,
+      "visibleControlHeight": 32,
+      "touchTargetHeight": 44,
+      "inputFontSize": 16,
+      "navigationAction": "quiet text link",
+      "support": "after form, in document flow"
+    },
+    "all": {
+      "fieldGap": 20,
+      "labelGap": 8,
+      "controlRadius": 8,
+      "controlInset": 10,
+      "quietControl": 28,
+      "glyph": 16,
+      "otpSlot": 32,
+      "otpGap": 8,
+      "providerColumns": 2,
+      "providerGap": 8,
+      "menuPadding": 4,
+      "menuRadius": 10,
+      "menuRowMinHeight": 30,
+      "menuRowRadius": 6,
+      "menuBlur": 20
+    }
+  },
+  "tokens": {
+    "canvas": "--color-background",
+    "primary": "--color-app-text-primary",
+    "secondary": "--color-app-text-secondary",
+    "reading": "--color-app-reading",
+    "overlay": "--color-app-overlay",
+    "inputBorder": "--color-border",
+    "secondaryBorder": "--color-app-border",
+    "hover": "--color-app-hover",
+    "selected": "--color-app-selected",
+    "pressed": "--color-app-pressed",
+    "focus": "--blue",
+    "error": "#C83232 from Auth state boards",
+    "disabledOpacity": 0.4
+  },
+  "practicesReviewed": {
+    "date": "2026-10-29",
+    "documentationVersion": "16.4.3",
+    "installedVersion": "16.4.1",
+    "sources": [
+      "https://nextjs.org/docs/app/getting-started/project-structure",
+      "https://nextjs.org/docs/app/getting-started/server-and-client-components",
+      "https://nextjs.org/docs/app/api-reference/functions/generate-metadata",
+      "https://developers.google.com/search/docs/crawling-indexing/block-indexing"
+    ],
+    "decisions": [
+      "Keep server-rendered route/layout composition; isolate interactive controls behind client boundaries.",
+      "Colocate route-specific forms and keep the reusable visual system in a workspace package.",
+      "Keep Auth noindex/nofollow through metadata and HTTP indexing policy; no Auth sitemap, structured-data marketing, or agent discovery additions.",
+      "Preserve full-document Auth/App navigation boundaries.",
+      "Serve local WOFF2 with font-display swap; avoid adding a network font or analytics dependency."
+    ]
+  }
+}
diff --git a/packages/auth-ui/design/tokens.json b/packages/auth-ui/design/tokens.json
new file mode 100644
index 00000000000..c5e404a51b3
--- /dev/null
+++ b/packages/auth-ui/design/tokens.json
@@ -0,0 +1,2005 @@
+{
+  "tokens": [
+    {
+      "name": "--neutral-white",
+      "type": "color",
+      "value": "rgb(255 255 255)",
+      "description": "Figma: primitive/neutral/white; mode Default."
+    },
+    {
+      "name": "--neutral-pearl",
+      "type": "color",
+      "value": "#FAFAFA",
+      "description": "Figma: primitive/neutral/pearl; mode Default."
+    },
+    {
+      "name": "--neutral-silver",
+      "type": "color",
+      "value": "#F5F5F5",
+      "description": "Figma: primitive/neutral/silver; mode Default."
+    },
+    {
+      "name": "--neutral-gray",
+      "type": "color",
+      "value": "#6E6E6E",
+      "description": "Figma: primitive/neutral/gray; mode Default."
+    },
+    {
+      "name": "--neutral-graphite",
+      "type": "color",
+      "value": "#1D1D1D",
+      "description": "Figma: primitive/neutral/graphite; mode Default."
+    },
+    {
+      "name": "--neutral-black",
+      "type": "color",
+      "value": "rgb(0 0 0)",
+      "description": "Figma: primitive/neutral/black; mode Default."
+    },
+    {
+      "name": "--blue",
+      "type": "color",
+      "value": "rgb(0 102 204)",
+      "description": "Figma: primitive/blue; mode Default."
+    },
+    {
+      "name": "--black-4",
+      "type": "color",
+      "value": "rgb(0 0 0 / 4%)",
+      "description": "Figma: primitive/black/4; mode Default."
+    },
+    {
+      "name": "--black-6",
+      "type": "color",
+      "value": "rgb(0 0 0 / 6%)",
+      "description": "Figma: primitive/black/6; mode Default."
+    },
+    {
+      "name": "--black-8",
+      "type": "color",
+      "value": "rgb(0 0 0 / 8%)",
+      "description": "Figma: primitive/black/8; mode Default."
+    },
+    {
+      "name": "--black-12",
+      "type": "color",
+      "value": "rgb(0 0 0 / 12%)",
+      "description": "Figma: primitive/black/12; mode Default."
+    },
+    {
+      "name": "--white-0",
+      "type": "color",
+      "value": "rgb(255 255 255 / 0%)",
+      "description": "Figma: primitive/white/0; mode Default."
+    },
+    {
+      "name": "--white-30",
+      "type": "color",
+      "value": "rgb(255 255 255 / 30%)",
+      "description": "Figma: primitive/white/30; mode Default."
+    },
+    {
+      "name": "--white-70",
+      "type": "color",
+      "value": "rgb(255 255 255 / 70%)",
+      "description": "Figma: primitive/white/70; mode Default."
+    },
+    {
+      "name": "--white-85",
+      "type": "color",
+      "value": "rgb(255 255 255 / 85%)",
+      "description": "Figma: primitive/white/85; mode Default."
+    },
+    {
+      "name": "--pearl-80",
+      "type": "color",
+      "value": "rgb(255 255 255 / 80%)",
+      "description": "Figma: primitive/pearl/80; mode Default."
+    },
+    {
+      "name": "--color-surface-muted",
+      "type": "color",
+      "value": "var(--ink-4)",
+      "description": "Figma: color/surface/muted; mode Default."
+    },
+    {
+      "name": "--color-glass-fallback",
+      "type": "color",
+      "value": "var(--neutral-pearl)",
+      "description": "Figma: color/glass/fallback; mode Default."
+    },
+    {
+      "name": "--color-glass-highlight",
+      "type": "color",
+      "value": "var(--white-70)",
+      "description": "Figma: color/glass/highlight; mode Default."
+    },
+    {
+      "name": "--color-fade-edge",
+      "type": "color",
+      "value": "var(--white-85)",
+      "description": "Figma: color/fade/edge; mode Default."
+    },
+    {
+      "name": "--color-fade-middle",
+      "type": "color",
+      "value": "var(--white-30)",
+      "description": "Figma: color/fade/middle; mode Default."
+    },
+    {
+      "name": "--color-fade-clear",
+      "type": "color",
+      "value": "var(--white-0)",
+      "description": "Figma: color/fade/clear; mode Default."
+    },
+    {
+      "name": "--black-72",
+      "type": "color",
+      "value": "rgb(0 0 0 / 72%)",
+      "description": "Figma: primitive/black/72; mode Default."
+    },
+    {
+      "name": "--white-10",
+      "type": "color",
+      "value": "rgb(255 255 255 / 10%)",
+      "description": "Figma: primitive/white/10; mode Default."
+    },
+    {
+      "name": "--white-20",
+      "type": "color",
+      "value": "rgb(255 255 255 / 20%)",
+      "description": "Figma: primitive/white/20; mode Default."
+    },
+    {
+      "name": "--color-button-label",
+      "type": "color",
+      "value": "var(--neutral-white)",
+      "description": "Figma: color/button/label; mode Default."
+    },
+    {
+      "name": "--color-split-hover",
+      "type": "color",
+      "value": "var(--white-10)",
+      "description": "Figma: color/split/hover; mode Default."
+    },
+    {
+      "name": "--color-split-divider",
+      "type": "color",
+      "value": "var(--white-20)",
+      "description": "Figma: color/split/divider; mode Default."
+    },
+    {
+      "name": "--neutral-ink",
+      "type": "color",
+      "value": "rgb(10 10 10)",
+      "description": "Figma: neutral/ink; mode Default."
+    },
+    {
+      "name": "--neutral-warm",
+      "type": "color",
+      "value": "rgb(249 248 246)",
+      "description": "Figma: neutral/warm; mode Default."
+    },
+    {
+      "name": "--orange",
+      "type": "color",
+      "value": "rgb(255 99 8)",
+      "description": "Figma: orange; mode Default."
+    },
+    {
+      "name": "--ink-hover",
+      "type": "color",
+      "value": "rgb(9 9 9)",
+      "description": "Figma: ink/hover; mode Default."
+    },
+    {
+      "name": "--white-90",
+      "type": "color",
+      "value": "rgb(229 229 229)",
+      "description": "Figma: white/90; mode Default."
+    },
+    {
+      "name": "--warm-3",
+      "type": "color",
+      "value": "rgb(242 241 239)",
+      "description": "Figma: warm/3; mode Default."
+    },
+    {
+      "name": "--warm-7",
+      "type": "color",
+      "value": "rgb(232 231 229)",
+      "description": "Figma: warm/7; mode Default."
+    },
+    {
+      "name": "--orange-10",
+      "type": "color",
+      "value": "rgb(255 99 8 / 10%)",
+      "description": "Figma: orange/10; mode Default."
+    },
+    {
+      "name": "--black-22",
+      "type": "color",
+      "value": "rgb(0 0 0 / 22%)",
+      "description": "Figma: black/22; mode Default."
+    },
+    {
+      "name": "--ink-4",
+      "type": "color",
+      "value": "rgb(10 10 10 / 4%)",
+      "description": "Figma: ink/4; mode Default."
+    },
+    {
+      "name": "--ink-6",
+      "type": "color",
+      "value": "rgb(10 10 10 / 6%)",
+      "description": "Figma: ink/6; mode Default."
+    },
+    {
+      "name": "--ink-8",
+      "type": "color",
+      "value": "rgb(10 10 10 / 8%)",
+      "description": "Figma: ink/8; mode Default."
+    },
+    {
+      "name": "--ink-15",
+      "type": "color",
+      "value": "rgb(10 10 10 / 15%)",
+      "description": "Figma: ink/15; mode Default."
+    },
+    {
+      "name": "--ink-20",
+      "type": "color",
+      "value": "rgb(10 10 10 / 20%)",
+      "description": "Figma: ink/20; mode Default."
+    },
+    {
+      "name": "--ink-30",
+      "type": "color",
+      "value": "rgb(10 10 10 / 30%)",
+      "description": "Figma: ink/30; mode Default."
+    },
+    {
+      "name": "--ink-80",
+      "type": "color",
+      "value": "rgb(10 10 10 / 80%)",
+      "description": "Figma: ink/80; mode Default."
+    },
+    {
+      "name": "--color-control-text",
+      "type": "color",
+      "value": "var(--neutral-ink)",
+      "description": "Figma: color/control/text; mode Default."
+    },
+    {
+      "name": "--color-button-label-hover",
+      "type": "color",
+      "value": "var(--white-90)",
+      "description": "Figma: color/button/label/hover; mode Default."
+    },
+    {
+      "name": "--color-icon-background",
+      "type": "color",
+      "value": "var(--white-0)",
+      "description": "Figma: color/icon/background; mode Default."
+    },
+    {
+      "name": "--color-icon-background-hover",
+      "type": "color",
+      "value": "var(--ink-6)",
+      "description": "Figma: color/icon/background/hover; mode Default."
+    },
+    {
+      "name": "--color-announcement-badge",
+      "type": "color",
+      "value": "var(--orange)",
+      "description": "Figma: color/announcement/badge; mode Default."
+    },
+    {
+      "name": "--color-announcement-badge-background",
+      "type": "color",
+      "value": "var(--orange-10)",
+      "description": "Figma: color/announcement/badge/background; mode Default."
+    },
+    {
+      "name": "--color-announcement-separator",
+      "type": "color",
+      "value": "var(--ink-20)",
+      "description": "Figma: Archive/color/announcement/separator; mode Default."
+    },
+    {
+      "name": "--color-announcement-description-hover",
+      "type": "color",
+      "value": "var(--ink-80)",
+      "description": "Figma: color/announcement/description/hover; mode Default."
+    },
+    {
+      "name": "--color-menu-border",
+      "type": "color",
+      "value": "var(--ink-6)",
+      "description": "Figma: Archive/color/menu/border; mode Default."
+    },
+    {
+      "name": "--color-menu-hover",
+      "type": "color",
+      "value": "var(--ink-4)",
+      "description": "Figma: Archive/color/menu/hover; mode Default."
+    },
+    {
+      "name": "--ink-60",
+      "type": "color",
+      "value": "rgb(10 10 10 / 60%)",
+      "description": "Figma: ink/60; mode Default."
+    },
+    {
+      "name": "--color-nav-link-muted",
+      "type": "color",
+      "value": "var(--ink-60)",
+      "description": "Neighboring navigation links while one link is hovered or keyboard-focused. CSS --color-nav-link-muted: var(--ink-60). Figma: color/nav/link/muted; mode Default."
+    },
+    {
+      "name": "--color-nav-dropdown",
+      "type": "color",
+      "value": "var(--color-glass-floating)",
+      "description": "Landing dropdowns inherit the same neutral floating glass as App menus."
+    },
+    {
+      "name": "--color-nav-backdrop",
+      "type": "color",
+      "value": "rgb(232 232 232 / 40%)",
+      "description": "Figma: color/nav/backdrop; mode Default."
+    },
+    {
+      "name": "--color-nav-background",
+      "type": "color",
+      "value": "var(--neutral-white)",
+      "description": "Figma: color/nav/background; mode Default."
+    },
+    {
+      "name": "--white-80",
+      "type": "color",
+      "value": "rgb(255 255 255 / 80%)",
+      "description": "Figma: primitive/white/80; mode Default."
+    },
+    {
+      "name": "--color-background",
+      "type": "color",
+      "value": "var(--neutral-white)",
+      "description": "Shared Landing and App canvas: neutral white (#FFFFFF)."
+    },
+    {
+      "name": "--color-surface",
+      "type": "color",
+      "value": "var(--neutral-white)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #FFFFFF. Figma: color/surface; mode Default."
+    },
+    {
+      "name": "--color-surface-inverse",
+      "type": "color",
+      "value": "var(--neutral-black)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000. Figma: color/surface/inverse; mode Default."
+    },
+    {
+      "name": "--color-text-primary",
+      "type": "color",
+      "value": "var(--neutral-ink)",
+      "description": "Shared Landing and App primary text: neutral ink (#0A0A0A). Used for identity, headings and content."
+    },
+    {
+      "name": "--color-text-secondary",
+      "type": "color",
+      "value": "var(--ink-60)",
+      "description": "Shared neutral ink at 60% for secondary copy, quiet controls and chart series."
+    },
+    {
+      "name": "--color-text-inverse",
+      "type": "color",
+      "value": "var(--neutral-silver)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #FFFFFF. Figma: color/text/inverse; mode Default."
+    },
+    {
+      "name": "--color-accent",
+      "type": "color",
+      "value": "var(--blue)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #317CFF. Figma: color/accent; mode Default."
+    },
+    {
+      "name": "--color-border",
+      "type": "color",
+      "value": "var(--black-12)",
+      "description": "Shared strong boundary: neutral black at 12%."
+    },
+    {
+      "name": "--color-border-subtle",
+      "type": "color",
+      "value": "var(--black-6)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000 at 6% opacity. Figma: color/border/subtle; mode Default."
+    },
+    {
+      "name": "--color-tint",
+      "type": "color",
+      "value": "var(--black-4)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000 at 4% opacity. Figma: color/tint; mode Default."
+    },
+    {
+      "name": "--color-tint-hover",
+      "type": "color",
+      "value": "var(--black-6)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000 at 6% opacity. Figma: color/tint/hover; mode Default."
+    },
+    {
+      "name": "--color-glass",
+      "type": "color",
+      "value": "var(--white-80)",
+      "description": "Shared Landing and App shell glass: neutral white at 80%. Blur belongs to layered chrome; reading surfaces stay clearer."
+    },
+    {
+      "name": "--color-shadow",
+      "type": "color",
+      "value": "var(--black-8)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000 at 6% opacity. Figma: color/shadow; mode Default."
+    },
+    {
+      "name": "--color-shadow-floating",
+      "type": "color",
+      "value": "var(--black-12)",
+      "description": "Measured from https://devin.ai/ on 2026-10-06. #000000 at 25% opacity. Figma: color/shadow/floating; mode Default."
+    },
+    {
+      "name": "--color-nav-glass",
+      "type": "color",
+      "value": "var(--white-80)",
+      "description": "Neutral white at 80%, shared with shell glass. No blue or pearl tint."
+    },
+    {
+      "name": "--color-button-primary",
+      "type": "color",
+      "value": "var(--neutral-ink)",
+      "description": "Figma: color/button/primary; mode Default."
+    },
+    {
+      "name": "--color-button-primary-hover",
+      "type": "color",
+      "value": "var(--ink-hover)",
+      "description": "Figma: color/button/primary/hover; mode Default."
+    },
+    {
+      "name": "--color-button-secondary",
+      "type": "color",
+      "value": "var(--ink-4)",
+      "description": "Figma: color/button/secondary; mode Default."
+    },
+    {
+      "name": "--color-button-secondary-hover",
+      "type": "color",
+      "value": "var(--ink-8)",
+      "description": "Figma: color/button/secondary/hover; mode Default."
+    },
+    {
+      "name": "--color-footer-link",
+      "type": "color",
+      "value": "var(--neutral-ink)",
+      "description": "Figma: color/footer/link; mode Default."
+    },
+    {
+      "name": "--color-announcement-border",
+      "type": "color",
+      "value": "var(--ink-8)",
+      "description": "Figma: color/announcement/border; mode Default."
+    },
+    {
+      "name": "--color-announcement-border-hover",
+      "type": "color",
+      "value": "var(--ink-15)",
+      "description": "Figma: color/announcement/border/hover; mode Default."
+    },
+    {
+      "name": "--color-focus",
+      "type": "color",
+      "value": "var(--ink-30)",
+      "description": "Figma: Archive/color/focus; mode Default."
+    },
+    {
+      "name": "--color-app-canvas",
+      "type": "color",
+      "value": "var(--color-background)",
+      "description": "White working canvas. Use glass selectively for layered controls and floating surfaces."
+    },
+    {
+      "name": "--color-app-text-primary",
+      "type": "color",
+      "value": "var(--ink-80)",
+      "description": "Soft graphite for primary app text. Shared neutral ink at 80%; preserves strong reading contrast without pure black."
+    },
+    {
+      "name": "--color-app-text-secondary",
+      "type": "color",
+      "value": "var(--color-text-secondary)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-text-muted",
+      "type": "color",
+      "value": "var(--color-nav-link-muted)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-glass",
+      "type": "color",
+      "value": "var(--color-glass)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-overlay",
+      "type": "color",
+      "value": "var(--color-glass-floating)",
+      "description": "App menus and popovers inherit shared floating glass."
+    },
+    {
+      "name": "--color-app-reading",
+      "type": "color",
+      "value": "rgb(255 255 255 / 96%)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-border",
+      "type": "color",
+      "value": "var(--color-border-subtle)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-hover",
+      "type": "color",
+      "value": "var(--color-icon-background-hover)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-selected",
+      "type": "color",
+      "value": "var(--black-8)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-pressed",
+      "type": "color",
+      "value": "var(--black-12)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-accent",
+      "type": "color",
+      "value": "var(--color-accent)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-error",
+      "type": "color",
+      "value": "#C83232",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-app-success",
+      "type": "color",
+      "value": "var(--color-accent)",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--color-chart-series",
+      "type": "color",
+      "value": "var(--ink-50)",
+      "description": "Quiet neutral graphite, 1.5px. Hover point uses the same pigment; tooltip text remains high contrast."
+    },
+    {
+      "name": "--color-chart-grid",
+      "type": "color",
+      "value": "var(--ink-4)",
+      "description": "Quiet neutral chart guides. Zero baseline remains present; grids are decorative."
+    },
+    {
+      "name": "--color-chart-area",
+      "type": "color",
+      "value": "var(--neutral-ink)",
+      "description": "Neutral pigment beneath the series at 6% opacity, fading to zero. A zero-data chart has no area fill."
+    },
+    {
+      "name": "--color-glass-floating",
+      "type": "color",
+      "value": "rgb(255 255 255 / 88%)",
+      "description": "Shared neutral white glass for floating menus across Landing and App. 20px blur; retain the solid fallback when backdrop blur is unavailable."
+    },
+    {
+      "name": "--ink-50",
+      "type": "color",
+      "value": "rgb(10 10 10 / 50%)",
+      "description": "Neutral medium gray for data series; never used for small body text."
+    },
+    {
+      "name": "--color-landing-nav-dropdown",
+      "type": "color",
+      "value": "#FAFAFC",
+      "description": "Landing implementation: --color-nav-dropdown (neutral-pearl). Scoped here so App design tokens are unaffected."
+    },
+    {
+      "name": "--color-landing-nav-backdrop",
+      "type": "color",
+      "value": "rgb(232 232 237 / 40%)",
+      "description": "Landing implementation: --color-nav-backdrop; 20px backdrop blur."
+    },
+    {
+      "name": "--color-landing-button-secondary",
+      "type": "color",
+      "value": "var(--warm-3)",
+      "description": "Landing implementation: --color-button-secondary. App secondary controls retain their own token."
+    },
+    {
+      "name": "--color-mark-edge-start",
+      "type": "color",
+      "value": "#858585",
+      "description": "Isometric product-mark outline start; sampled from existing feature-mark source SVG."
+    },
+    {
+      "name": "--color-mark-edge-end",
+      "type": "color",
+      "value": "#D9D9D9",
+      "description": "Isometric product-mark outline end; sampled from existing feature-mark source SVG."
+    },
+    {
+      "name": "--color-mark-face-top",
+      "type": "color",
+      "value": "#F7F7F7",
+      "description": "Existing feature-mark upper face."
+    },
+    {
+      "name": "--color-mark-face-front",
+      "type": "color",
+      "value": "#EFEFEF",
+      "description": "Existing feature-mark front face."
+    },
+    {
+      "name": "--color-mark-face-side",
+      "type": "color",
+      "value": "#E5E5E5",
+      "description": "Existing feature-mark side face."
+    },
+    {
+      "name": "--color-tooltip-surface",
+      "type": "color",
+      "value": "#191919",
+      "description": "All explanatory tooltips use dark neutral. Jump to latest is the same tooltip. Light glass is for buttons, menus, dialogs, and richer data popovers."
+    },
+    {
+      "name": "--color-tooltip-text",
+      "type": "color",
+      "value": "#FFFFFF",
+      "description": "Shared tooltip foreground."
+    },
+    {
+      "name": "--color-auth-panel",
+      "type": "color",
+      "value": "#00000000",
+      "description": "Auth forms sit directly on the white page. Glass is reserved for opened menus and popovers."
+    },
+    {
+      "name": "--color-auth-field",
+      "type": "color",
+      "value": "var(--color-app-reading)",
+      "description": "Auth proposal: readable fields use the app 96% white reading surface."
+    },
+    {
+      "name": "--color-docs-green",
+      "type": "color",
+      "value": "#15803D",
+      "description": "Docs semantic green ink from Sim platform badge tokens; scope to method, status and syntax labels."
+    },
+    {
+      "name": "--color-docs-green-soft",
+      "type": "color",
+      "value": "rgb(187 247 208 / 35%)",
+      "description": "Compact green badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-purple",
+      "type": "color",
+      "value": "#7C3AED",
+      "description": "Docs semantic purple ink from Sim platform badge tokens; scope to method, status and syntax labels."
+    },
+    {
+      "name": "--color-docs-purple-soft",
+      "type": "color",
+      "value": "rgb(233 213 255 / 35%)",
+      "description": "Compact purple badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-orange",
+      "type": "color",
+      "value": "#C2410C",
+      "description": "Docs semantic orange ink from Sim platform badge tokens; scope to method, status and syntax labels."
+    },
+    {
+      "name": "--color-docs-orange-soft",
+      "type": "color",
+      "value": "rgb(254 215 170 / 35%)",
+      "description": "Compact orange badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-red",
+      "type": "color",
+      "value": "#C83232",
+      "description": "Error text color."
+    },
+    {
+      "name": "--color-docs-red-soft",
+      "type": "color",
+      "value": "rgb(254 202 202 / 35%)",
+      "description": "Compact red badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-blue",
+      "type": "color",
+      "value": "var(--color-accent)",
+      "description": "Reuse Sim link and action blue."
+    },
+    {
+      "name": "--color-docs-blue-soft",
+      "type": "color",
+      "value": "rgb(191 219 254 / 35%)",
+      "description": "Compact blue badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-gray",
+      "type": "color",
+      "value": "var(--color-app-text-secondary)",
+      "description": "Docs semantic gray ink from Sim platform badge tokens; scope to method, status and syntax labels."
+    },
+    {
+      "name": "--color-docs-gray-soft",
+      "type": "color",
+      "value": "var(--color-surface-muted)",
+      "description": "Compact gray badge fill from Sim platform. Keep page and glass surfaces neutral."
+    },
+    {
+      "name": "--color-docs-dark-canvas",
+      "type": "color",
+      "value": "#1B1B1B",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-reading",
+      "type": "color",
+      "value": "#1F1F1F",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-text",
+      "type": "color",
+      "value": "#E6E6E6",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-muted",
+      "type": "color",
+      "value": "#CCCCCC",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-border",
+      "type": "color",
+      "value": "#444444",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-hover",
+      "type": "color",
+      "value": "#262626",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-selected",
+      "type": "color",
+      "value": "#2C2C2C",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-blue",
+      "type": "color",
+      "value": "#93C5FD",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-green",
+      "type": "color",
+      "value": "#86EFAC",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-purple",
+      "type": "color",
+      "value": "#D8B4FE",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-orange",
+      "type": "color",
+      "value": "#FDBA74",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-docs-dark-red",
+      "type": "color",
+      "value": "#FCA5A5",
+      "description": "Dark docs specimen: shared Sim platform .dark token value from globals.css."
+    },
+    {
+      "name": "--color-surface-reading",
+      "type": "color",
+      "value": "var(--color-app-reading)",
+      "description": "Landing reading surfaces use the established 96% white app material."
+    },
+    {
+      "name": "--color-status-complete",
+      "type": "color",
+      "value": "var(--color-accent)"
+    },
+    {
+      "name": "--color-status-complete-background",
+      "type": "color",
+      "value": "rgb(235 243 251)"
+    },
+    {
+      "name": "--color-status-pending",
+      "type": "color",
+      "value": "#856404",
+      "description": "Pending approval text and clock icon; readable dark yellow on the pending surface."
+    },
+    {
+      "name": "--color-status-pending-background",
+      "type": "color",
+      "value": "#FFF5CC",
+      "description": "Pale yellow surface for a static Pending approval status. Landing inspection tickets."
+    },
+    {
+      "name": "--font-sans",
+      "type": "fontFamily",
+      "value": "\"Geist\"",
+      "description": "Source: Sim Figma variable font/sans; all modes use Geist."
+    },
+    {
+      "name": "--font-sans-mobile",
+      "type": "fontFamily",
+      "value": "\"Geist\"",
+      "description": "Figma: font/sans; mode Mobile."
+    },
+    {
+      "name": "--font-sans-tablet",
+      "type": "fontFamily",
+      "value": "\"Geist\"",
+      "description": "Figma: font/sans; mode Tablet."
+    },
+    {
+      "name": "--font-mono",
+      "type": "fontFamily",
+      "value": "\"Geist Mono\"",
+      "description": "Figma: font/mono; mode Desktop."
+    },
+    {
+      "name": "--font-mono-mobile",
+      "type": "fontFamily",
+      "value": "\"Geist Mono\"",
+      "description": "Figma: font/mono; mode Mobile."
+    },
+    {
+      "name": "--font-mono-tablet",
+      "type": "fontFamily",
+      "value": "\"Geist Mono\"",
+      "description": "Figma: font/mono; mode Tablet."
+    },
+    {
+      "name": "--type-display-size",
+      "type": "fontSize",
+      "value": "60px",
+      "description": "Figma: type/display/size; mode Desktop."
+    },
+    {
+      "name": "--type-display-size-mobile",
+      "type": "fontSize",
+      "value": "36px",
+      "description": "Figma: type/display/size; mode Mobile."
+    },
+    {
+      "name": "--type-display-size-tablet",
+      "type": "fontSize",
+      "value": "48px",
+      "description": "Figma: type/display/size; mode Tablet."
+    },
+    {
+      "name": "--type-page-size",
+      "type": "fontSize",
+      "value": "48px",
+      "description": "Figma: type/page/size; mode Desktop."
+    },
+    {
+      "name": "--type-page-size-mobile",
+      "type": "fontSize",
+      "value": "36px",
+      "description": "Figma: type/page/size; mode Mobile."
+    },
+    {
+      "name": "--type-page-size-tablet",
+      "type": "fontSize",
+      "value": "48px",
+      "description": "Figma: type/page/size; mode Tablet."
+    },
+    {
+      "name": "--type-section-size",
+      "type": "fontSize",
+      "value": "30px",
+      "description": "Figma: type/section/size; mode Desktop."
+    },
+    {
+      "name": "--type-section-size-mobile",
+      "type": "fontSize",
+      "value": "24px",
+      "description": "Figma: type/section/size; mode Mobile."
+    },
+    {
+      "name": "--type-section-size-tablet",
+      "type": "fontSize",
+      "value": "30px",
+      "description": "Figma: type/section/size; mode Tablet."
+    },
+    {
+      "name": "--type-subsection-size",
+      "type": "fontSize",
+      "value": "24px",
+      "description": "Figma: type/subsection/size; mode Desktop."
+    },
+    {
+      "name": "--type-subsection-size-mobile",
+      "type": "fontSize",
+      "value": "24px",
+      "description": "Figma: type/subsection/size; mode Mobile."
+    },
+    {
+      "name": "--type-subsection-size-tablet",
+      "type": "fontSize",
+      "value": "24px",
+      "description": "Figma: type/subsection/size; mode Tablet."
+    },
+    {
+      "name": "--type-card-size",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/card/size; mode Desktop."
+    },
+    {
+      "name": "--type-card-size-mobile",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/card/size; mode Mobile."
+    },
+    {
+      "name": "--type-card-size-tablet",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/card/size; mode Tablet."
+    },
+    {
+      "name": "--type-lead-size",
+      "type": "fontSize",
+      "value": "18px",
+      "description": "Figma: type/lead/size; mode Desktop."
+    },
+    {
+      "name": "--type-lead-size-mobile",
+      "type": "fontSize",
+      "value": "18px",
+      "description": "Figma: type/lead/size; mode Mobile."
+    },
+    {
+      "name": "--type-lead-size-tablet",
+      "type": "fontSize",
+      "value": "18px",
+      "description": "Figma: type/lead/size; mode Tablet."
+    },
+    {
+      "name": "--type-body-size",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/body/size; mode Desktop."
+    },
+    {
+      "name": "--type-body-size-mobile",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/body/size; mode Mobile."
+    },
+    {
+      "name": "--type-body-size-tablet",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Figma: type/body/size; mode Tablet."
+    },
+    {
+      "name": "--type-body-small-size",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/body-small/size; mode Desktop."
+    },
+    {
+      "name": "--type-body-small-size-mobile",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/body-small/size; mode Mobile."
+    },
+    {
+      "name": "--type-body-small-size-tablet",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/body-small/size; mode Tablet."
+    },
+    {
+      "name": "--type-caption-size",
+      "type": "fontSize",
+      "value": "12px",
+      "description": "Figma: type/caption/size; mode Desktop."
+    },
+    {
+      "name": "--type-caption-size-mobile",
+      "type": "fontSize",
+      "value": "12px",
+      "description": "Figma: type/caption/size; mode Mobile."
+    },
+    {
+      "name": "--type-caption-size-tablet",
+      "type": "fontSize",
+      "value": "12px",
+      "description": "Figma: type/caption/size; mode Tablet."
+    },
+    {
+      "name": "--type-nav-size",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/nav/size; mode Desktop."
+    },
+    {
+      "name": "--type-nav-size-mobile",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/nav/size; mode Mobile."
+    },
+    {
+      "name": "--type-nav-size-tablet",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/nav/size; mode Tablet."
+    },
+    {
+      "name": "--type-button-size",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/button/size; mode Desktop."
+    },
+    {
+      "name": "--type-button-size-mobile",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/button/size; mode Mobile."
+    },
+    {
+      "name": "--type-button-size-tablet",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/button/size; mode Tablet."
+    },
+    {
+      "name": "--type-eyebrow-size",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/eyebrow/size; mode Desktop."
+    },
+    {
+      "name": "--type-eyebrow-size-mobile",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/eyebrow/size; mode Mobile."
+    },
+    {
+      "name": "--type-eyebrow-size-tablet",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "Figma: type/eyebrow/size; mode Tablet."
+    },
+    {
+      "name": "--type-code-size",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/code/size; mode Desktop."
+    },
+    {
+      "name": "--type-code-size-mobile",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/code/size; mode Mobile."
+    },
+    {
+      "name": "--type-code-size-tablet",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/code/size; mode Tablet."
+    },
+    {
+      "name": "--type-footer-size",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "Figma: type/footer/size; mode Default."
+    },
+    {
+      "name": "--type-badge-size",
+      "type": "fontSize",
+      "value": "11px",
+      "description": "Figma: type/badge/size; mode Default."
+    },
+    {
+      "name": "--type-hero-size",
+      "type": "fontSize",
+      "value": "40px",
+      "description": "Platform hero headline, desktop and tablet. Separate from the 60px display role."
+    },
+    {
+      "name": "--type-hero-size-mobile",
+      "type": "fontSize",
+      "value": "32px"
+    },
+    {
+      "name": "--type-button-large-size",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "Large marketing CTA label. Retains 44px button height with 20px line-height and 12px vertical padding."
+    },
+    {
+      "name": "--text-app-page",
+      "type": "fontSize",
+      "value": "24px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--text-app-section",
+      "type": "fontSize",
+      "value": "16px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--text-app-body",
+      "type": "fontSize",
+      "value": "14px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--text-app-control",
+      "type": "fontSize",
+      "value": "13px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--text-app-caption",
+      "type": "fontSize",
+      "value": "12px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--text-chart-value",
+      "type": "fontSize",
+      "value": "var(--text-app-page)",
+      "description": "Use the app's 24px metric/page size, Geist Medium with tabular figures."
+    },
+    {
+      "name": "--text-docs-title",
+      "type": "fontSize",
+      "value": "32px"
+    },
+    {
+      "name": "--text-docs-body",
+      "type": "fontSize",
+      "value": "var(--type-body-size)"
+    },
+    {
+      "name": "--font-weight-regular",
+      "type": "fontWeight",
+      "value": "400",
+      "description": "Figma: weight/regular; mode Desktop."
+    },
+    {
+      "name": "--font-weight-regular-mobile",
+      "type": "fontWeight",
+      "value": "400",
+      "description": "Figma: weight/regular; mode Mobile."
+    },
+    {
+      "name": "--font-weight-regular-tablet",
+      "type": "fontWeight",
+      "value": "400",
+      "description": "Figma: weight/regular; mode Tablet."
+    },
+    {
+      "name": "--font-weight-medium",
+      "type": "fontWeight",
+      "value": "500",
+      "description": "Figma: weight/medium; mode Desktop."
+    },
+    {
+      "name": "--font-weight-medium-mobile",
+      "type": "fontWeight",
+      "value": "500",
+      "description": "Figma: weight/medium; mode Mobile."
+    },
+    {
+      "name": "--font-weight-medium-tablet",
+      "type": "fontWeight",
+      "value": "500",
+      "description": "Figma: weight/medium; mode Tablet."
+    },
+    {
+      "name": "--font-weight-semibold",
+      "type": "fontWeight",
+      "value": "600",
+      "description": "Figma: weight/semibold; mode Desktop."
+    },
+    {
+      "name": "--font-weight-semibold-mobile",
+      "type": "fontWeight",
+      "value": "600",
+      "description": "Figma: weight/semibold; mode Mobile."
+    },
+    {
+      "name": "--font-weight-semibold-tablet",
+      "type": "fontWeight",
+      "value": "600",
+      "description": "Figma: weight/semibold; mode Tablet."
+    },
+    {
+      "name": "--font-weight-display",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Figma: weight/display; mode Desktop."
+    },
+    {
+      "name": "--font-weight-display-mobile",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Figma: weight/display; mode Mobile."
+    },
+    {
+      "name": "--font-weight-display-tablet",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Figma: weight/display; mode Tablet."
+    },
+    {
+      "name": "--font-weight-control",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Geist optical compensation for X VF 500 at control sizes. Numeric weights are not visually equivalent between these families. Figma: weight/control; mode Desktop."
+    },
+    {
+      "name": "--font-weight-control-mobile",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Geist optical compensation for X VF 500 at control sizes. Numeric weights are not visually equivalent between these families. Figma: weight/control; mode Mobile."
+    },
+    {
+      "name": "--font-weight-control-tablet",
+      "type": "fontWeight",
+      "value": "450",
+      "description": "Geist optical compensation for X VF 500 at control sizes. Numeric weights are not visually equivalent between these families. Figma: weight/control; mode Tablet."
+    },
+    {
+      "name": "--type-footer-tracking",
+      "type": "letterSpacing",
+      "value": "0px",
+      "description": "Figma: type/footer/tracking; mode Default."
+    },
+    {
+      "name": "--type-hero-tracking",
+      "type": "letterSpacing",
+      "value": "-0.01em"
+    },
+    {
+      "name": "--tracking-app-title",
+      "type": "letterSpacing",
+      "value": "-0.02em",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--tracking-app-body",
+      "type": "letterSpacing",
+      "value": "0em",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--type-display-leading",
+      "type": "lineHeight",
+      "value": "60px",
+      "description": "Figma: type/display/leading; mode Desktop."
+    },
+    {
+      "name": "--type-display-leading-mobile",
+      "type": "lineHeight",
+      "value": "39.599998474121094px",
+      "description": "Figma: type/display/leading; mode Mobile."
+    },
+    {
+      "name": "--type-display-leading-tablet",
+      "type": "lineHeight",
+      "value": "48px",
+      "description": "Figma: type/display/leading; mode Tablet."
+    },
+    {
+      "name": "--type-page-leading",
+      "type": "lineHeight",
+      "value": "48px",
+      "description": "Figma: type/page/leading; mode Desktop."
+    },
+    {
+      "name": "--type-page-leading-mobile",
+      "type": "lineHeight",
+      "value": "40px",
+      "description": "Figma: type/page/leading; mode Mobile."
+    },
+    {
+      "name": "--type-page-leading-tablet",
+      "type": "lineHeight",
+      "value": "48px",
+      "description": "Figma: type/page/leading; mode Tablet."
+    },
+    {
+      "name": "--type-section-leading",
+      "type": "lineHeight",
+      "value": "36px",
+      "description": "Figma: type/section/leading; mode Desktop."
+    },
+    {
+      "name": "--type-section-leading-mobile",
+      "type": "lineHeight",
+      "value": "32px",
+      "description": "Figma: type/section/leading; mode Mobile."
+    },
+    {
+      "name": "--type-section-leading-tablet",
+      "type": "lineHeight",
+      "value": "36px",
+      "description": "Figma: type/section/leading; mode Tablet."
+    },
+    {
+      "name": "--type-subsection-leading",
+      "type": "lineHeight",
+      "value": "32px",
+      "description": "Figma: type/subsection/leading; mode Desktop."
+    },
+    {
+      "name": "--type-subsection-leading-mobile",
+      "type": "lineHeight",
+      "value": "32px",
+      "description": "Figma: type/subsection/leading; mode Mobile."
+    },
+    {
+      "name": "--type-subsection-leading-tablet",
+      "type": "lineHeight",
+      "value": "32px",
+      "description": "Figma: type/subsection/leading; mode Tablet."
+    },
+    {
+      "name": "--type-card-leading",
+      "type": "lineHeight",
+      "value": "22px",
+      "description": "Figma: type/card/leading; mode Desktop."
+    },
+    {
+      "name": "--type-card-leading-mobile",
+      "type": "lineHeight",
+      "value": "22px",
+      "description": "Figma: type/card/leading; mode Mobile."
+    },
+    {
+      "name": "--type-card-leading-tablet",
+      "type": "lineHeight",
+      "value": "22px",
+      "description": "Figma: type/card/leading; mode Tablet."
+    },
+    {
+      "name": "--type-lead-leading",
+      "type": "lineHeight",
+      "value": "29.25px",
+      "description": "Figma: type/lead/leading; mode Desktop."
+    },
+    {
+      "name": "--type-lead-leading-mobile",
+      "type": "lineHeight",
+      "value": "29.25px",
+      "description": "Figma: type/lead/leading; mode Mobile."
+    },
+    {
+      "name": "--type-lead-leading-tablet",
+      "type": "lineHeight",
+      "value": "29.25px",
+      "description": "Figma: type/lead/leading; mode Tablet."
+    },
+    {
+      "name": "--type-body-leading",
+      "type": "lineHeight",
+      "value": "26px",
+      "description": "Figma: type/body/leading; mode Desktop."
+    },
+    {
+      "name": "--type-body-leading-mobile",
+      "type": "lineHeight",
+      "value": "26px",
+      "description": "Figma: type/body/leading; mode Mobile."
+    },
+    {
+      "name": "--type-body-leading-tablet",
+      "type": "lineHeight",
+      "value": "26px",
+      "description": "Figma: type/body/leading; mode Tablet."
+    },
+    {
+      "name": "--type-body-small-leading",
+      "type": "lineHeight",
+      "value": "22.75px",
+      "description": "Figma: type/body-small/leading; mode Desktop."
+    },
+    {
+      "name": "--type-body-small-leading-mobile",
+      "type": "lineHeight",
+      "value": "22.75px",
+      "description": "Figma: type/body-small/leading; mode Mobile."
+    },
+    {
+      "name": "--type-body-small-leading-tablet",
+      "type": "lineHeight",
+      "value": "22.75px",
+      "description": "Figma: type/body-small/leading; mode Tablet."
+    },
+    {
+      "name": "--type-caption-leading",
+      "type": "lineHeight",
+      "value": "16px",
+      "description": "Figma: type/caption/leading; mode Desktop."
+    },
+    {
+      "name": "--type-caption-leading-mobile",
+      "type": "lineHeight",
+      "value": "16px",
+      "description": "Figma: type/caption/leading; mode Mobile."
+    },
+    {
+      "name": "--type-caption-leading-tablet",
+      "type": "lineHeight",
+      "value": "16px",
+      "description": "Figma: type/caption/leading; mode Tablet."
+    },
+    {
+      "name": "--type-nav-leading",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/nav/leading; mode Desktop."
+    },
+    {
+      "name": "--type-nav-leading-mobile",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/nav/leading; mode Mobile."
+    },
+    {
+      "name": "--type-nav-leading-tablet",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/nav/leading; mode Tablet."
+    },
+    {
+      "name": "--type-button-leading",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/button/leading; mode Desktop."
+    },
+    {
+      "name": "--type-button-leading-mobile",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/button/leading; mode Mobile."
+    },
+    {
+      "name": "--type-button-leading-tablet",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/button/leading; mode Tablet."
+    },
+    {
+      "name": "--type-eyebrow-leading",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/eyebrow/leading; mode Desktop."
+    },
+    {
+      "name": "--type-eyebrow-leading-mobile",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/eyebrow/leading; mode Mobile."
+    },
+    {
+      "name": "--type-eyebrow-leading-tablet",
+      "type": "lineHeight",
+      "value": "20px",
+      "description": "Figma: type/eyebrow/leading; mode Tablet."
+    },
+    {
+      "name": "--type-code-leading",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/code/leading; mode Desktop."
+    },
+    {
+      "name": "--type-code-leading-mobile",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/code/leading; mode Mobile."
+    },
+    {
+      "name": "--type-code-leading-tablet",
+      "type": "lineHeight",
+      "value": "19.5px",
+      "description": "Figma: type/code/leading; mode Tablet."
+    },
+    {
+      "name": "--type-footer-leading",
+      "type": "lineHeight",
+      "value": "21.125px",
+      "description": "Figma: type/footer/leading; mode Default."
+    },
+    {
+      "name": "--type-badge-leading",
+      "type": "lineHeight",
+      "value": "11px",
+      "description": "Figma: type/badge/leading; mode Default."
+    },
+    {
+      "name": "--type-hero-leading",
+      "type": "lineHeight",
+      "value": "44px"
+    },
+    {
+      "name": "--type-hero-leading-mobile",
+      "type": "lineHeight",
+      "value": "36px"
+    },
+    {
+      "name": "--leading-app-page",
+      "type": "lineHeight",
+      "value": "32px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--leading-app-body",
+      "type": "lineHeight",
+      "value": "22px",
+      "description": "Body / readable prose, 14px on 22px."
+    },
+    {
+      "name": "--leading-app-control",
+      "type": "lineHeight",
+      "value": "18px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--leading-docs-title",
+      "type": "lineHeight",
+      "value": "40px"
+    },
+    {
+      "name": "--leading-docs-body",
+      "type": "lineHeight",
+      "value": "var(--type-body-leading)"
+    },
+    {
+      "name": "--opacity-app-disabled",
+      "type": "opacity",
+      "value": "40%",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--opacity-chart-area",
+      "type": "opacity",
+      "value": "6%",
+      "description": "A restrained translucent neutral fade beneath a populated series. Zero data has no fill."
+    },
+    {
+      "name": "--breakpoint-app-compact",
+      "type": "breakpoint",
+      "value": "768px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--breakpoint-app-expanded",
+      "type": "breakpoint",
+      "value": "1280px",
+      "description": "280px expanded sidebar at 1280px and above. Below, use glass header and a navigation drawer."
+    },
+    {
+      "name": "--size-button-icon",
+      "type": "container",
+      "value": "16px",
+      "description": "16px from 640px; 20px below 640px. Standard button trailing icon. Figma: size/button-icon; mode Default."
+    },
+    {
+      "name": "--size-button-icon-large",
+      "type": "container",
+      "value": "20px",
+      "description": "Figma: size/button-icon-large; mode Default."
+    },
+    {
+      "name": "--height-nav",
+      "type": "container",
+      "value": "56px",
+      "description": "Figma: height/nav; mode Default."
+    },
+    {
+      "name": "--width-nav-logo",
+      "type": "container",
+      "value": "40px",
+      "description": "Figma: width/nav-logo; mode Default."
+    },
+    {
+      "name": "--container-app-sidebar",
+      "type": "container",
+      "value": "280px",
+      "description": "Baseline expanded sidebar width across web, desktop, settings, and shared shell specimens."
+    },
+    {
+      "name": "--container-app-composer",
+      "type": "container",
+      "value": "688px",
+      "description": "688px documentation specimen only. Application composer width is 100% of the Home content container."
+    },
+    {
+      "name": "--container-app-settings",
+      "type": "container",
+      "value": "700px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--container-app-command",
+      "type": "container",
+      "value": "680px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--container-app-modal-sm",
+      "type": "container",
+      "value": "440px",
+      "description": "Quick decisions and single-field forms."
+    },
+    {
+      "name": "--container-app-modal-md",
+      "type": "container",
+      "value": "560px",
+      "description": "Default task modal."
+    },
+    {
+      "name": "--container-app-modal-lg",
+      "type": "container",
+      "value": "760px",
+      "description": "Detailed reviews and related configuration."
+    },
+    {
+      "name": "--container-app-dashboard",
+      "type": "container",
+      "value": "1200px",
+      "description": "Maximum Home content width. Fill main area with 48px gutters; composer always fills this container. Equal two columns above 900px available content; stack below."
+    },
+    {
+      "name": "--container-chat-thread",
+      "type": "container",
+      "value": "800px",
+      "description": "Shared transcript and composer width; centered with 48px minimum desktop gutters."
+    },
+    {
+      "name": "--container-chat-message",
+      "type": "container",
+      "value": "640px",
+      "description": "Maximum user bubble width; right aligned within thread."
+    },
+    {
+      "name": "--container-auth-form",
+      "type": "container",
+      "value": "400px",
+      "description": "Auth composition uses a 400px reading measure with the App field and typography system. On mobile, use available width minus 32px."
+    },
+    {
+      "name": "--container-auth-panel",
+      "type": "container",
+      "value": "var(--container-auth-form)",
+      "description": "Compatibility alias for the open auth form column. 400px maximum width, no outer padding or panel chrome."
+    },
+    {
+      "name": "--container-auth-nav",
+      "type": "container",
+      "value": "1280px",
+      "description": "Landing content width; 16px inner inset places logo at x=96 on 1440px canvas."
+    },
+    {
+      "name": "--container-docs-toc",
+      "type": "container",
+      "value": "208px"
+    },
+    {
+      "name": "--container-docs-sidebar",
+      "type": "container",
+      "value": "216px"
+    },
+    {
+      "name": "--container-docs-article",
+      "type": "container",
+      "value": "680px"
+    },
+    {
+      "name": "--container-docs-shell",
+      "type": "container",
+      "value": "1280px"
+    },
+    {
+      "name": "--space-0",
+      "type": "spacing",
+      "value": "0px",
+      "description": "Figma: space/0; mode Default."
+    },
+    {
+      "name": "--space-3",
+      "type": "spacing",
+      "value": "3px",
+      "description": "Figma: space/3; mode Default."
+    },
+    {
+      "name": "--space-4",
+      "type": "spacing",
+      "value": "4px",
+      "description": "Figma: space/4; mode Default."
+    },
+    {
+      "name": "--space-6",
+      "type": "spacing",
+      "value": "6px",
+      "description": "Figma: space/6; mode Default."
+    },
+    {
+      "name": "--space-8",
+      "type": "spacing",
+      "value": "8px",
+      "description": "Figma: space/8; mode Default."
+    },
+    {
+      "name": "--space-10",
+      "type": "spacing",
+      "value": "10px",
+      "description": "Figma: space/10; mode Default."
+    },
+    {
+      "name": "--space-12",
+      "type": "spacing",
+      "value": "12px",
+      "description": "Figma: space/12; mode Default."
+    },
+    {
+      "name": "--space-16",
+      "type": "spacing",
+      "value": "16px",
+      "description": "Figma: space/16; mode Default."
+    },
+    {
+      "name": "--space-18",
+      "type": "spacing",
+      "value": "18px",
+      "description": "Figma: space/18; mode Default."
+    },
+    {
+      "name": "--space-20",
+      "type": "spacing",
+      "value": "20px",
+      "description": "Figma: space/20; mode Default."
+    },
+    {
+      "name": "--stroke-border",
+      "type": "spacing",
+      "value": "1px",
+      "description": "Figma: stroke/border; mode Default."
+    },
+    {
+      "name": "--space-24",
+      "type": "spacing",
+      "value": "24px",
+      "description": "Figma: space/24; mode Default."
+    },
+    {
+      "name": "--space-32",
+      "type": "spacing",
+      "value": "32px",
+      "description": "Figma: space/32; mode Default."
+    },
+    {
+      "name": "--space-40",
+      "type": "spacing",
+      "value": "40px",
+      "description": "Figma: space/40; mode Default."
+    },
+    {
+      "name": "--space-48",
+      "type": "spacing",
+      "value": "48px",
+      "description": "Figma: space/48; mode Default."
+    },
+    {
+      "name": "--space-56",
+      "type": "spacing",
+      "value": "56px",
+      "description": "Figma: space/56; mode Default."
+    },
+    {
+      "name": "--space-64",
+      "type": "spacing",
+      "value": "64px",
+      "description": "Figma: space/64; mode Default."
+    },
+    {
+      "name": "--spacing-app-unit",
+      "type": "spacing",
+      "value": "4px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--spacing-app-control-md",
+      "type": "spacing",
+      "value": "32px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--spacing-app-control-sm",
+      "type": "spacing",
+      "value": "28px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--spacing-app-chip",
+      "type": "spacing",
+      "value": "30px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--spacing-app-icon",
+      "type": "spacing",
+      "value": "16px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--spacing-app-activity-row",
+      "type": "spacing",
+      "value": "44px",
+      "description": "Compact stacked activity, email, meeting and inbox rows. Shared 4px vertical and 8px horizontal padding."
+    },
+    {
+      "name": "--spacing-app-dashboard-row",
+      "type": "spacing",
+      "value": "56px",
+      "description": "Roomier dashboard rows. Inbox remains the compact 44px rhythm."
+    },
+    {
+      "name": "--spacing-overflow-fade",
+      "type": "spacing",
+      "value": "16px",
+      "description": "One linear ramp everywhere: 100% until 16px before the visible clipping edge, then 0% at that edge. No fade on an unclipped resting filename. Hover controls overlay; they never reserve space. At an adjacent action, the clipping edge is 8px before its hit target."
+    },
+    {
+      "name": "--spacing-overflow-gap",
+      "type": "spacing",
+      "value": "8px",
+      "description": "Distance from the end of a content fade to the adjacent action hit target, on sidebar rows, file cards, and all shared overflow surfaces."
+    },
+    {
+      "name": "--spacing-chart-plot",
+      "type": "spacing",
+      "value": "128px",
+      "description": "Compact Home module plot. Data, empty, loading and unavailable states reserve the same geometry."
+    },
+    {
+      "name": "--spacing-chat-turn",
+      "type": "spacing",
+      "value": "24px",
+      "description": "Shared 24px spacing between conversation turns. Aligns with the platform spacing scale."
+    },
+    {
+      "name": "--spacing-app-gutter-mobile",
+      "type": "spacing",
+      "value": "16px",
+      "description": "Page gutters below 768px; shared module row inset remains 8px."
+    },
+    {
+      "name": "--spacing-app-gutter-compact",
+      "type": "spacing",
+      "value": "24px",
+      "description": "Page gutters from 768px to 1279px; default collapsed sidebar."
+    },
+    {
+      "name": "--spacing-app-gutter-desktop",
+      "type": "spacing",
+      "value": "48px",
+      "description": "Minimum content gutters at 1280px and above; center capped content in remaining space."
+    },
+    {
+      "name": "--spacing-app-touch-target",
+      "type": "spacing",
+      "value": "44px",
+      "description": "Touch hit area. Icon glyphs remain 16px and the same stroke weight."
+    },
+    {
+      "name": "--spacing-auth-control",
+      "type": "spacing",
+      "value": "var(--spacing-app-control-md)",
+      "description": "Auth uses a 32px visible control height. On touch, use transparent 44px hit areas around the compact visible controls."
+    },
+    {
+      "name": "--spacing-docs-gutter",
+      "type": "spacing",
+      "value": "48px"
+    },
+    {
+      "name": "--radius-full",
+      "type": "radius",
+      "value": "9999px",
+      "description": "Figma: radius/full; mode Default."
+    },
+    {
+      "name": "--radius-menu",
+      "type": "radius",
+      "value": "12px",
+      "description": "Figma: radius/menu; mode Default."
+    },
+    {
+      "name": "--radius-item",
+      "type": "radius",
+      "value": "6px",
+      "description": "Figma: radius/item; mode Default."
+    },
+    {
+      "name": "--radius-app-sm",
+      "type": "radius",
+      "value": "6px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--radius-app-md",
+      "type": "radius",
+      "value": "8px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--radius-app-menu",
+      "type": "radius",
+      "value": "10px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--radius-app-dialog",
+      "type": "radius",
+      "value": "16px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--radius-app-composer",
+      "type": "radius",
+      "value": "20px",
+      "description": "App redesign proposal v0.1; shared landing aliases where applicable. No code implementation yet."
+    },
+    {
+      "name": "--radius-panel",
+      "type": "radius",
+      "value": "var(--radius-app-dialog)",
+      "description": "Landing inspection tickets inherit the platform's 16px dialog corner."
+    }
+  ]
+}
diff --git a/packages/auth-ui/package.json b/packages/auth-ui/package.json
new file mode 100644
index 00000000000..4b76e4f2080
--- /dev/null
+++ b/packages/auth-ui/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@sim/auth-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.module.css": "./src/styles.module.css"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "lint": "biome check --write --unsafe .",
+    "lint:check": "biome check .",
+    "format": "biome format --write .",
+    "format:check": "biome format ."
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "1.3.1",
+    "@radix-ui/react-dropdown-menu": "2.2.1",
+    "clsx": "^2.1.1",
+    "input-otp": "1.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@sim/tsconfig": "workspace:*",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^7.0.2"
+  }
+}
diff --git a/packages/auth-ui/src/assets/geist-LICENSE.txt b/packages/auth-ui/src/assets/geist-LICENSE.txt
new file mode 100644
index 00000000000..8d003fec6b8
--- /dev/null
+++ b/packages/auth-ui/src/assets/geist-LICENSE.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/auth-ui/src/assets/geist-mono-LICENSE.txt b/packages/auth-ui/src/assets/geist-mono-LICENSE.txt
new file mode 100644
index 00000000000..8d003fec6b8
--- /dev/null
+++ b/packages/auth-ui/src/assets/geist-mono-LICENSE.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/auth-ui/src/assets/geist-mono-variable.woff2 b/packages/auth-ui/src/assets/geist-mono-variable.woff2
new file mode 100644
index 00000000000..0e746fc1822
Binary files /dev/null and b/packages/auth-ui/src/assets/geist-mono-variable.woff2 differ
diff --git a/packages/auth-ui/src/assets/geist-variable.woff2 b/packages/auth-ui/src/assets/geist-variable.woff2
new file mode 100644
index 00000000000..5c5999d617e
Binary files /dev/null and b/packages/auth-ui/src/assets/geist-variable.woff2 differ
diff --git a/packages/auth-ui/src/code-entry.tsx b/packages/auth-ui/src/code-entry.tsx
new file mode 100644
index 00000000000..892d2f5dc09
--- /dev/null
+++ b/packages/auth-ui/src/code-entry.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useId } from 'react'
+import { AuthFormMessage } from './compositions'
+import { AuthOTP, AuthOTPGroup, AuthOTPSlot } from './controls'
+import { AuthButton, AuthTextLink } from './primitives'
+import styles from './styles.module.css'
+
+interface AuthCodeEntryProps {
+  value: string
+  onChange: (value: string) => void
+  onVerify: () => void
+  onResend?: () => void
+  onChangeEmail?: () => void
+  verifying: boolean
+  resending: boolean
+  countdown: number
+  error?: string | null
+  help?: string
+}
+
+/** Six-digit entry shared by account verification and independent resource gates. */
+export function AuthCodeEntry({
+  value,
+  onChange,
+  onVerify,
+  onResend,
+  onChangeEmail,
+  verifying,
+  resending,
+  countdown,
+  error,
+  help,
+}: AuthCodeEntryProps) {
+  const errorId = useId()
+  const busy = verifying || resending
+  return (
+    <div className={styles.stack}>
+      <AuthOTP
+        maxLength={6}
+        value={value}
+        onChange={onChange}
+        disabled={busy}
+        aria-label='Verification code'
+        aria-invalid={Boolean(error)}
+        aria-describedby={error ? errorId : undefined}
+      >
+        <AuthOTPGroup>
+          {[0, 1, 2, 3, 4, 5].map((index) => (
+            <AuthOTPSlot key={index} index={index} />
+          ))}
+        </AuthOTPGroup>
+      </AuthOTP>
+      {error && (
+        <div id={errorId}>
+          <AuthFormMessage type='error'>{error}</AuthFormMessage>
+        </div>
+      )}
+      <AuthButton
+        variant='primary'
+        fullWidth
+        onClick={onVerify}
+        disabled={busy || value.length !== 6}
+        loading={verifying}
+        loadingLabel='Verifying…'
+      >
+        Verify email
+      </AuthButton>
+      {onResend && (
+        <p className={styles.codeHelp}>
+          Didn’t receive a code?{' '}
+          {countdown > 0 ? (
+            <span role='status'>Resend in {countdown}s</span>
+          ) : (
+            <AuthTextLink onClick={onResend} disabled={busy}>
+              {resending ? 'Sending…' : 'Resend'}
+            </AuthTextLink>
+          )}
+        </p>
+      )}
+      {help && <p className={styles.codeHelp}>{help}</p>}
+      {onChangeEmail && (
+        <div className={styles.codeHelp}>
+          <AuthTextLink onClick={onChangeEmail} disabled={busy}>
+            Change email
+          </AuthTextLink>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/packages/auth-ui/src/compositions.tsx b/packages/auth-ui/src/compositions.tsx
new file mode 100644
index 00000000000..962fc852b68
--- /dev/null
+++ b/packages/auth-ui/src/compositions.tsx
@@ -0,0 +1,286 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { AuthIcon } from './icons'
+import styles from './styles.module.css'
+
+interface AuthHeaderProps {
+  title: string
+  titleId?: string
+  description?: ReactNode
+}
+/** Owns the page heading; description accepts inline content rendered in a paragraph. */
+export function AuthHeader({ title, titleId, description }: AuthHeaderProps) {
+  return (
+    <div className={styles.heading}>
+      <h1 id={titleId}>{title}</h1>
+      {description != null && <p>{description}</p>}
+    </div>
+  )
+}
+
+interface AuthFieldProps {
+  htmlFor: string
+  label: string
+  errors?: string[]
+  hint?: ReactNode
+  action?: ReactNode
+  children: ReactNode
+}
+/** Connects a label and feedback to a child whose id equals htmlFor.
+ * AuthInput with error=true references the generated `${htmlFor}-errors` region.
+ * Callers supplying a hint include `${htmlFor}-hint` in the input's aria-describedby. */
+export function AuthField({ htmlFor, label, errors, hint, action, children }: AuthFieldProps) {
+  return (
+    <div className={styles.field}>
+      <div className={styles.labelRow}>
+        <label className={styles.label} htmlFor={htmlFor}>
+          {label}
+        </label>
+        {action}
+      </div>
+      {children}
+      {hint && (
+        <div id={`${htmlFor}-hint`} className={styles.caption}>
+          {hint}
+        </div>
+      )}
+      {Boolean(errors?.length) && (
+        <div id={`${htmlFor}-errors`} className={styles.fieldErrors} aria-live='polite'>
+          {errors?.map((error) => (
+            <p key={error}>{error}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface AuthFormMessageProps {
+  type: 'error' | 'success' | 'info'
+  align?: 'left' | 'center'
+  children: ReactNode
+}
+/** Announces errors as alerts and other feedback as status, without owning validation. */
+export function AuthFormMessage({ type, align = 'left', children }: AuthFormMessageProps) {
+  return (
+    <div
+      className={styles.feedback}
+      data-align={align}
+      data-tone={type}
+      role={type === 'error' ? 'alert' : 'status'}
+    >
+      <span className={styles.feedbackIcon}>
+        <AuthIcon name={type === 'error' ? 'error' : 'check'} />
+      </span>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+interface AuthDividerProps {
+  label?: string
+}
+/** Separates alternate actions; an omitted label leaves only the divider line. */
+export function AuthDivider({ label }: AuthDividerProps) {
+  return <div className={styles.divider}>{label && <span>{label}</span>}</div>
+}
+
+interface AuthNavPromptProps {
+  prompt?: string
+  href: string
+  linkLabel: string
+  onNavigate?: () => void
+}
+/** Links between Auth routes with full-document navigation; the host preserves return context. */
+export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPromptProps) {
+  return (
+    <div className={styles.navPrompt}>
+      {prompt && <span>{prompt}</span>}
+      <a href={href} onClick={onNavigate}>
+        {linkLabel}
+      </a>
+    </div>
+  )
+}
+
+interface AuthShellViewProps {
+  children: ReactNode
+  logo: ReactNode
+  homeHref: string
+  navigation?: ReactNode
+  footer?: ReactNode
+  titlebar?: ReactNode
+}
+/** Lays out host-supplied branding, navigation, native titlebar, and footer inside AuthRoot.
+ * The shared column owns responsive sizing, while the host owns authentication and routing. */
+export function AuthShellView({
+  children,
+  logo,
+  homeHref,
+  navigation,
+  footer,
+  titlebar,
+}: AuthShellViewProps) {
+  return (
+    <div className={styles.page}>
+      {titlebar}
+      <header className={styles.header}>
+        <nav className={styles.nav} aria-label='Authentication'>
+          <a className={styles.wordmark} href={homeHref} aria-label='Home'>
+            {logo}
+          </a>
+          {navigation}
+        </nav>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.column}>{children}</div>
+      </main>
+      {footer && <footer className={styles.footer}>{footer}</footer>}
+    </div>
+  )
+}
+
+interface AuthStatusContentProps {
+  title: string
+  titleId?: string
+  description?: ReactNode
+  detail?: ReactNode
+  children?: ReactNode
+}
+/** Composes a status heading, optional detail, and recovery actions in the Auth column. */
+export function AuthStatusContent({
+  title,
+  titleId,
+  description,
+  detail,
+  children,
+}: AuthStatusContentProps) {
+  return (
+    <div className={styles.stack}>
+      <AuthHeader title={title} titleId={titleId} description={description} />
+      {detail}
+      {children && <div className={styles.actions}>{children}</div>}
+    </div>
+  )
+}
+
+interface AuthIdentityProps {
+  email: string
+  name?: string
+  label?: string
+  action?: ReactNode
+}
+/** Displays an account identity; the host supplies any account-switch action. */
+export function AuthIdentity({ email, name, label = 'Signed in as', action }: AuthIdentityProps) {
+  return (
+    <div className={styles.identity}>
+      <span className={styles.avatar} aria-hidden='true'>
+        {(name || email).slice(0, 1).toUpperCase()}
+      </span>
+      <div className={styles.identityText}>
+        <p>{name || label}</p>
+        <p>{email}</p>
+      </div>
+      {action}
+    </div>
+  )
+}
+
+interface AuthResourceRowProps {
+  icon?: ReactNode
+  title: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  children?: ReactNode
+  className?: string
+  disabled?: boolean
+}
+/** Wraps resource details and responsive actions; disabled does not disable child controls. */
+export function AuthResourceRow({
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  disabled,
+}: AuthResourceRowProps) {
+  return (
+    <div className={clsx(styles.resourceRow, className)} aria-disabled={disabled || undefined}>
+      <div className={styles.resourceIcon}>{icon}</div>
+      <div className={styles.resourceText}>
+        <div>{title}</div>
+        {description && <p>{description}</p>}
+        {children}
+      </div>
+      {actions && <div className={styles.resourceActions}>{actions}</div>}
+    </div>
+  )
+}
+
+interface AuthSectionProps {
+  title: string
+  children: ReactNode
+  className?: string
+  description?: ReactNode
+}
+/** Groups related controls under a section heading without reserving absent description space. */
+export function AuthSection({ title, children, className, description }: AuthSectionProps) {
+  return (
+    <section className={clsx(styles.stack, className)}>
+      <div className={styles.sectionHeading}>
+        <h2>{title}</h2>
+        {description && <p>{description}</p>}
+      </div>
+      <div>{children}</div>
+    </section>
+  )
+}
+
+interface AuthLegalProps {
+  action: string
+  termsHref: string
+  privacyHref: string
+}
+/** Uses host-supplied legal URLs, opening them separately without losing form state. */
+export function AuthLegal({ action, termsHref, privacyHref }: AuthLegalProps) {
+  return (
+    <p className={styles.legal}>
+      By {action}, you agree to our{' '}
+      <a href={termsHref} target='_blank' rel='noopener noreferrer'>
+        Terms of Service
+      </a>{' '}
+      and{' '}
+      <a href={privacyHref} target='_blank' rel='noopener noreferrer'>
+        Privacy&nbsp;Policy
+      </a>
+      .
+    </p>
+  )
+}
+
+interface AuthStackProps {
+  children: ReactNode
+  className?: string
+}
+/** Applies the shared responsive section rhythm; className may adjust layout. */
+export function AuthStack({ children, className }: AuthStackProps) {
+  return <div className={clsx(styles.stack, className)}>{children}</div>
+}
+/** Pairs provider actions in two columns, with an odd final action spanning both. */
+export function AuthProviderGroup({ children, className }: AuthStackProps) {
+  return <div className={clsx(styles.providers, className)}>{children}</div>
+}
+
+interface AuthResourceIdentityProps {
+  initial: string
+  logoUrl?: string | null
+}
+/** Displays a decorative resource logo or initial beside its accessible name. */
+export function AuthResourceIdentity({ initial, logoUrl }: AuthResourceIdentityProps) {
+  return (
+    <span className={styles.avatar}>
+      {logoUrl ? <img src={logoUrl} width='24' height='24' alt='' /> : initial}
+    </span>
+  )
+}
diff --git a/packages/auth-ui/src/controls.tsx b/packages/auth-ui/src/controls.tsx
new file mode 100644
index 00000000000..c5717e996ea
--- /dev/null
+++ b/packages/auth-ui/src/controls.tsx
@@ -0,0 +1,512 @@
+'use client'
+
+import {
+  type ComponentType,
+  createContext,
+  forwardRef,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import * as Popover from '@radix-ui/react-popover'
+import { clsx } from 'clsx'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { createPortal } from 'react-dom'
+import { AuthFormMessage } from './compositions'
+import { AuthIcon } from './icons'
+import styles from './styles.module.css'
+import './utilities.css'
+
+const PortalContext = createContext<HTMLDivElement | null>(null)
+
+interface AuthRootProps {
+  children: ReactNode
+  className?: string
+}
+/** Provides the Auth styling and portal boundary without owning authentication state. */
+export function AuthRoot({ children, className }: AuthRootProps) {
+  const [portal, setPortal] = useState<HTMLDivElement | null>(null)
+  return (
+    <div data-auth-root='' className={clsx(styles.root, className)}>
+      <PortalContext.Provider value={portal}>
+        {children}
+        <div ref={setPortal} data-auth-portals='' className={styles.portal} />
+      </PortalContext.Provider>
+    </div>
+  )
+}
+
+interface AuthNotificationProps {
+  children: ReactNode
+  type: 'success' | 'error'
+}
+/** Feedback stays inside the Auth portal and does not inherit the app toast theme. */
+export function AuthNotification({ children, type }: AuthNotificationProps) {
+  const portal = useContext(PortalContext)
+  const [visible, setVisible] = useState(true)
+  const [hovered, setHovered] = useState(false)
+  useEffect(() => {
+    if (hovered) return
+    const timer = setTimeout(() => setVisible(false), 5000)
+    return () => clearTimeout(timer)
+  }, [hovered])
+  if (!portal || !visible) return null
+  return createPortal(
+    <div
+      className={styles.notification}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+    >
+      <AuthFormMessage type={type}>{children}</AuthFormMessage>
+    </div>,
+    portal
+  )
+}
+
+interface AuthInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  error?: boolean
+  icon?: ComponentType<{ className?: string }>
+  startAdornment?: ReactNode
+  endAdornment?: ReactNode
+  inputClassName?: string
+}
+/** Forwards native input props and ref inside the Auth control and mobile touch lane.
+ * With error and id supplied, associates the `${id}-errors` region from AuthField. */
+export const AuthInput = forwardRef<HTMLInputElement, AuthInputProps>(function AuthInput(
+  {
+    className,
+    inputClassName,
+    error,
+    icon: Icon,
+    startAdornment,
+    endAdornment,
+    disabled,
+    id,
+    ...props
+  },
+  ref
+) {
+  const describedBy =
+    [props['aria-describedby'], error && id ? `${id}-errors` : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined
+  return (
+    <div
+      className={clsx(styles.inputLane, className)}
+      data-disabled={disabled || undefined}
+      data-invalid={error || undefined}
+      onPointerDown={(event) => {
+        if (event.target === event.currentTarget) {
+          event.preventDefault()
+          event.currentTarget.querySelector('input')?.focus()
+        }
+      }}
+    >
+      <div className={styles.inputSurface}>
+        {startAdornment ?? (Icon && <Icon className={styles.icon} />)}
+        <input
+          {...props}
+          id={id}
+          ref={ref}
+          disabled={disabled}
+          className={clsx(styles.input, inputClassName)}
+          aria-invalid={error || props['aria-invalid']}
+          aria-describedby={describedBy}
+        />
+        {endAdornment}
+      </div>
+    </div>
+  )
+})
+
+/** Adds overridable email entry defaults while leaving input type and validation to the caller. */
+export const AuthEmailInput = forwardRef<HTMLInputElement, AuthInputProps>(
+  function AuthEmailInput(props, ref) {
+    return (
+      <AuthInput
+        inputMode='email'
+        autoCapitalize='none'
+        autoComplete='email'
+        autoCorrect='off'
+        placeholder='Enter your email'
+        {...props}
+        ref={ref}
+      />
+    )
+  }
+)
+
+interface PasswordInputProps extends Omit<AuthInputProps, 'type' | 'icon' | 'endAdornment'> {}
+/** Keeps password visibility local; forwards field identity, validation, and autocomplete props. */
+export function PasswordInput({
+  disabled,
+  placeholder = 'Enter your password',
+  ...props
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <AuthInput
+      {...props}
+      placeholder={placeholder}
+      disabled={disabled}
+      type={visible ? 'text' : 'password'}
+      endAdornment={
+        <button
+          type='button'
+          className={styles.quietAction}
+          disabled={disabled}
+          aria-label={visible ? 'Hide password' : 'Show password'}
+          aria-pressed={visible}
+          onClick={() => setVisible(!visible)}
+        >
+          <AuthIcon name={visible ? 'eye-off' : 'eye'} />
+        </button>
+      }
+    />
+  )
+}
+
+interface AuthReadonlyInputProps {
+  value: string
+  label?: string
+}
+/** Provides a labeled pairing code with copy feedback and manual selection on clipboard failure. */
+export function AuthReadonlyInput({ value, label = 'Pairing code' }: AuthReadonlyInputProps) {
+  const ref = useRef<HTMLInputElement>(null)
+  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle')
+  const statusId = useId()
+  const inputId = useId()
+  useEffect(() => {
+    if (status !== 'copied') return
+    const timer = setTimeout(() => setStatus('idle'), 2000)
+    return () => clearTimeout(timer)
+  }, [status])
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value)
+      setStatus('copied')
+    } catch {
+      setStatus('failed')
+      ref.current?.focus()
+      ref.current?.select()
+    }
+  }
+  return (
+    <div className={styles.field}>
+      <label htmlFor={inputId} className={styles.label}>
+        {label}
+      </label>
+      <AuthInput
+        id={inputId}
+        ref={ref}
+        readOnly
+        inputClassName={styles.readonlyValue}
+        value={value}
+        aria-label={label}
+        aria-describedby={statusId}
+        endAdornment={
+          <button
+            type='button'
+            className={styles.quietAction}
+            aria-label='Copy code'
+            title='Copy code'
+            onClick={copy}
+          >
+            <AuthIcon name={status === 'copied' ? 'check' : 'copy'} />
+          </button>
+        }
+      />
+      <p id={statusId} role='status' className={styles.caption}>
+        {status === 'copied'
+          ? 'Copied'
+          : status === 'failed'
+            ? 'Could not copy. Select the code and copy it manually.'
+            : null}
+      </p>
+    </div>
+  )
+}
+
+interface AuthOTPProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'maxLength' | 'children'
+  > {
+  value?: string
+  onChange?: (value: string) => void
+  maxLength: number
+  children: ReactNode
+  containerClassName?: string
+  onComplete?: (value: string) => void
+}
+/** Adapts a controlled numeric code input; the host supplies its accessible name and feedback IDs. */
+export function AuthOTP({ className, containerClassName, ...props }: AuthOTPProps) {
+  return (
+    <OTPInput
+      {...props}
+      autoComplete='one-time-code'
+      inputMode='numeric'
+      pattern='[0-9]*'
+      containerClassName={clsx(styles.otpLane, containerClassName)}
+      className={className}
+    />
+  )
+}
+interface AuthOTPGroupProps extends HTMLAttributes<HTMLDivElement> {}
+/** Groups visual code slots inside AuthOTP while the underlying input owns keyboard interaction. */
+export function AuthOTPGroup({ className, ...props }: AuthOTPGroupProps) {
+  return <div {...props} className={clsx(styles.otpGroup, className)} />
+}
+interface AuthOTPSlotProps extends HTMLAttributes<HTMLDivElement> {
+  index: number
+}
+/** Displays one indexed slot from the surrounding AuthOTP context. */
+export function AuthOTPSlot({ index, className, ...props }: AuthOTPSlotProps) {
+  const { slots } = useContext(OTPInputContext)
+  const slot = slots[index]
+  return (
+    <div
+      {...props}
+      className={clsx(styles.otpSlot, className)}
+      data-active={slot?.isActive || undefined}
+    >
+      {slot?.char}
+      {slot?.hasFakeCaret && <span className={styles.caret} />}
+    </div>
+  )
+}
+
+export interface AuthSelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+interface AuthSelectProps {
+  options: AuthSelectOption[]
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  placeholder?: string
+  displayLabel?: string
+  searchable?: boolean
+  searchPlaceholder?: string
+  fullWidth?: boolean
+  dropdownWidth?: string
+  className?: string
+  id?: string
+  'aria-label'?: string
+}
+/** Shared accessible option list for terminal workspaces and provider installation choices. */
+export function AuthSelect({
+  options,
+  value,
+  onChange,
+  disabled,
+  placeholder = 'Select an option',
+  displayLabel,
+  searchable,
+  searchPlaceholder = 'Search',
+  className,
+  id,
+  'aria-label': ariaLabel,
+}: AuthSelectProps) {
+  const portal = useContext(PortalContext)
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [active, setActive] = useState(0)
+  const listId = useId()
+  const trigger = useRef<HTMLButtonElement>(null)
+  const content = useRef<HTMLDivElement>(null)
+  const filtered = options.filter((option) =>
+    option.label.toLowerCase().includes(search.toLowerCase())
+  )
+  const selected = options.find((option) => option.value === value)
+  const available = filtered.filter((option) => !option.disabled)
+  const activeValue = available[active]?.value
+  function choose(next: string) {
+    onChange?.(next)
+    setOpen(false)
+    setSearch('')
+  }
+  function move(next: number) {
+    const index = Math.max(0, Math.min(available.length - 1, next))
+    setActive(index)
+    content.current
+      ?.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])')
+      [index]?.scrollIntoView({ block: 'nearest' })
+  }
+  return (
+    <Popover.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next)
+        setSearch('')
+        setActive(
+          Math.max(
+            0,
+            options
+              .filter((option) => !option.disabled)
+              .findIndex((option) => option.value === value)
+          )
+        )
+      }}
+    >
+      <Popover.Trigger asChild>
+        <button
+          ref={trigger}
+          id={id}
+          type='button'
+          role='combobox'
+          aria-label={ariaLabel}
+          aria-expanded={open}
+          aria-controls={listId}
+          aria-haspopup='listbox'
+          disabled={disabled}
+          className={clsx(styles.select, className)}
+          onKeyDown={(event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+              event.preventDefault()
+              setSearch('')
+              setActive(
+                Math.max(
+                  0,
+                  options
+                    .filter((option) => !option.disabled)
+                    .findIndex((option) => option.value === value)
+                )
+              )
+              setOpen(true)
+            }
+          }}
+        >
+          <span className={styles.inputSurface}>
+            <span>{displayLabel ?? selected?.label ?? placeholder}</span>
+            <AuthIcon name='chevron' />
+          </span>
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal container={portal ?? undefined}>
+        <Popover.Content
+          ref={content}
+          className={clsx(styles.root, styles.menu)}
+          sideOffset={4}
+          collisionPadding={16}
+          onKeyDown={(event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+              event.preventDefault()
+              move(active + (event.key === 'ArrowDown' ? 1 : -1))
+            } else if (
+              (event.key === 'Home' || event.key === 'End') &&
+              !(event.target instanceof HTMLInputElement)
+            ) {
+              event.preventDefault()
+              move(event.key === 'Home' ? 0 : available.length - 1)
+            } else if (event.key === 'Enter' && activeValue) {
+              event.preventDefault()
+              choose(activeValue)
+            }
+          }}
+          onOpenAutoFocus={(event) => {
+            if (!searchable) {
+              event.preventDefault()
+              content.current?.querySelector<HTMLElement>('[role="listbox"]')?.focus()
+            }
+          }}
+          tabIndex={-1}
+        >
+          {searchable && (
+            <input
+              className={styles.menuSearch}
+              aria-label={searchPlaceholder}
+              aria-controls={listId}
+              aria-activedescendant={activeValue ? `${listId}-${activeValue}` : undefined}
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                setActive(0)
+              }}
+            />
+          )}
+          <div
+            id={listId}
+            role='listbox'
+            aria-label={ariaLabel ?? placeholder}
+            aria-activedescendant={activeValue ? `${listId}-${activeValue}` : undefined}
+            className={styles.options}
+            tabIndex={0}
+          >
+            {filtered.map((option) => (
+              <div
+                key={option.value}
+                id={`${listId}-${option.value}`}
+                role='option'
+                aria-selected={option.value === value}
+                aria-disabled={option.disabled || undefined}
+                data-focused={option.value === activeValue || undefined}
+                className={styles.menuRow}
+                onPointerMove={() => {
+                  if (!option.disabled) setActive(available.indexOf(option))
+                }}
+                onClick={() => {
+                  if (!option.disabled) choose(option.value)
+                }}
+              >
+                <span>{option.label}</span>
+                <span className={styles.icon}>
+                  {option.value === value && <AuthIcon name='check' />}
+                </span>
+              </div>
+            ))}
+            {filtered.length === 0 && <p className={styles.empty}>No matching options</p>}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+interface AuthAccountMenuProps {
+  email: string
+  disabled?: boolean
+  pending?: boolean
+  onSwitch: () => void
+}
+/** Keeps account actions in the Auth portal; the host performs sign-out through onSwitch. */
+export function AuthAccountMenu({ email, disabled, pending, onSwitch }: AuthAccountMenuProps) {
+  const portal = useContext(PortalContext)
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button type='button' className={styles.accountTrigger} disabled={disabled}>
+          <span className={styles.avatar} aria-hidden='true'>
+            {email.slice(0, 1).toUpperCase()}
+          </span>
+          <span className={styles.identityText}>
+            <span>{pending ? 'Signing out…' : 'Signed in as'}</span>
+            <span className={styles.accountEmail}>{email}</span>
+          </span>
+          <AuthIcon name='chevron' />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal container={portal ?? undefined}>
+        <DropdownMenu.Content
+          className={clsx(styles.root, styles.menu)}
+          sideOffset={4}
+          collisionPadding={16}
+        >
+          <DropdownMenu.Label className={styles.menuLabel}>{email}</DropdownMenu.Label>
+          <DropdownMenu.Item className={styles.menuRow} disabled={disabled} onSelect={onSwitch}>
+            {pending ? 'Signing out…' : 'Use another account'}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/packages/auth-ui/src/icons.tsx b/packages/auth-ui/src/icons.tsx
new file mode 100644
index 00000000000..6134e2a3da0
--- /dev/null
+++ b/packages/auth-ui/src/icons.tsx
@@ -0,0 +1,74 @@
+import type { SVGProps } from 'react'
+
+interface AuthIconProps extends SVGProps<SVGSVGElement> {
+  name: 'eye' | 'eye-off' | 'copy' | 'check' | 'chevron' | 'lock' | 'error'
+}
+
+/** Auth glyphs with locally owned outlines, dimensions, and treatment. */
+export function AuthIcon({ name, ...props }: AuthIconProps) {
+  const views = {
+    eye: '0 0 24 24',
+    'eye-off': '0 0 24 24',
+    copy: '-1 -2 24 24',
+    check: '-2 -2.75 24 24',
+    chevron: '-1.75 -2.25 24 24',
+    lock: '-1.75 -2 24 24',
+    error: '0 0 24 24',
+  } as const
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox={views[name]}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      {name === 'eye' && (
+        <>
+          <path d='M3 12C5.25 8.5 8.25 6.75 12 6.75S18.75 8.5 21 12C18.75 15.5 15.75 17.25 12 17.25S5.25 15.5 3 12Z' />
+          <circle cx='12' cy='12' r='2.25' fill='currentColor' stroke='none' />
+        </>
+      )}
+      {name === 'eye-off' && (
+        <>
+          <path d='M3 9.75C5.25 13.25 8.25 15 12 15S18.75 13.25 21 9.75' />
+          <path d='M6.25 13 4.75 15M12 15v2.5M17.75 13l1.5 2' />
+        </>
+      )}
+      {name === 'copy' && (
+        <>
+          <path d='M14.25 0.75H2.75C1.65 0.75 0.75 1.65 0.75 2.75V14.25' />
+          <rect x='5.25' y='5.25' width='14' height='14' rx='2' />
+        </>
+      )}
+      {name === 'check' && (
+        <>
+          <path d='M18.25 2.75L7.25 15.75L1.75 10.25' />
+        </>
+      )}
+      {name === 'chevron' && (
+        <>
+          <path d='M3 6.25L10.25 13.25L17.5 6.25' />
+        </>
+      )}
+      {name === 'lock' && (
+        <>
+          <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
+          <path d='M5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75V8.75' />
+        </>
+      )}
+      {name === 'error' && (
+        <>
+          <circle cx='12' cy='12' r='10' />
+          <path d='M12 8v4' />
+          <path d='M12 16h.01' />
+        </>
+      )}
+    </svg>
+  )
+}
diff --git a/packages/auth-ui/src/index.ts b/packages/auth-ui/src/index.ts
new file mode 100644
index 00000000000..38eb312af60
--- /dev/null
+++ b/packages/auth-ui/src/index.ts
@@ -0,0 +1,42 @@
+export { clsx as cn } from 'clsx'
+export { AuthCodeEntry } from './code-entry'
+export {
+  AuthDivider,
+  AuthField,
+  AuthFormMessage,
+  AuthHeader,
+  AuthIdentity,
+  AuthLegal,
+  AuthNavPrompt,
+  AuthProviderGroup,
+  AuthResourceIdentity,
+  AuthResourceRow,
+  AuthSection,
+  AuthShellView,
+  AuthStack,
+  AuthStatusContent,
+} from './compositions'
+export type { AuthSelectOption } from './controls'
+export {
+  AuthAccountMenu,
+  AuthEmailInput,
+  AuthInput,
+  AuthNotification,
+  AuthReadonlyInput,
+  AuthRoot,
+  AuthSelect,
+  PasswordInput,
+} from './controls'
+export { AuthIcon } from './icons'
+export type { AuthButtonProps, AuthLinkButtonProps } from './primitives'
+export {
+  AuthButton,
+  AuthLabel,
+  AuthLinkButton,
+  AuthLoader,
+  AuthSkeleton,
+  AuthTag,
+  AuthTextLink,
+} from './primitives'
+export { AuthGithubIcon, AuthGoogleIcon, AuthMicrosoftIcon } from './provider-icons'
+export { AuthWordmark } from './wordmark'
diff --git a/packages/auth-ui/src/primitives.tsx b/packages/auth-ui/src/primitives.tsx
new file mode 100644
index 00000000000..063264e05fb
--- /dev/null
+++ b/packages/auth-ui/src/primitives.tsx
@@ -0,0 +1,170 @@
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ComponentType,
+  HTMLAttributes,
+  LabelHTMLAttributes,
+  ReactNode,
+} from 'react'
+import { clsx } from 'clsx'
+import styles from './styles.module.css'
+
+export interface AuthButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'outline'
+    | 'border'
+    | 'ghost'
+    | 'default'
+    | 'destructive'
+    | 'navigation'
+  fullWidth?: boolean
+  leftIcon?: ComponentType<{ className?: string }>
+  rightIcon?: ComponentType<{ className?: string }>
+  loading?: boolean
+  loadingLabel?: string
+}
+
+/** A compact 32px action inside a separate mobile touch target. */
+export function AuthButton({
+  children,
+  className,
+  variant = 'secondary',
+  fullWidth,
+  leftIcon: Icon,
+  rightIcon: EndIcon,
+  loading,
+  loadingLabel,
+  disabled,
+  type = 'button',
+  ...props
+}: AuthButtonProps) {
+  return (
+    <button
+      {...props}
+      type={type}
+      className={clsx(styles.button, fullWidth && styles.fullWidth, className)}
+      data-variant={variant}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+    >
+      <span className={styles.buttonSurface}>
+        {loading ? <AuthLoader /> : Icon ? <Icon className={styles.icon} /> : null}
+        <span>{loading ? (loadingLabel ?? children) : children}</span>
+        {!loading && EndIcon && <EndIcon className={styles.icon} />}
+      </span>
+    </button>
+  )
+}
+
+export interface AuthLinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: AuthButtonProps['variant']
+  fullWidth?: boolean
+}
+
+/** Applies Auth action styling to a native link without introducing client routing. */
+export function AuthLinkButton({
+  className,
+  children,
+  variant = 'secondary',
+  fullWidth,
+  ...props
+}: AuthLinkButtonProps) {
+  return (
+    <a
+      {...props}
+      className={clsx(styles.button, fullWidth && styles.fullWidth, className)}
+      data-variant={variant}
+    >
+      <span className={styles.buttonSurface}>{children}</span>
+    </a>
+  )
+}
+
+interface AuthLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
+/** Labels the control identified by htmlFor; feedback association belongs to AuthField. */
+export function AuthLabel({ className, htmlFor, children, ...props }: AuthLabelProps) {
+  return (
+    <label {...props} htmlFor={htmlFor} className={clsx(styles.label, className)}>
+      {children}
+    </label>
+  )
+}
+
+interface AuthLoaderProps extends HTMLAttributes<HTMLSpanElement> {
+  animate?: boolean
+}
+/** Decorative spinner with utility-overridable sizing; the loading region owns announcements. */
+export function AuthLoader({ className, animate = true, ...props }: AuthLoaderProps) {
+  return (
+    <span
+      {...props}
+      aria-hidden='true'
+      className={clsx(styles.loader, animate && styles.spinning, className)}
+    />
+  )
+}
+
+interface AuthSkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+  shape?: 'title' | 'label' | 'control' | 'divider'
+}
+/** Decorative placeholder whose sizing utilities override the shared shape defaults.
+ * Controls reserve the mobile touch lane while retaining the compact visible surface. */
+export function AuthSkeleton({ className, shape = 'control', ...props }: AuthSkeletonProps) {
+  return (
+    <span
+      {...props}
+      aria-hidden='true'
+      data-shape={shape}
+      className={clsx(styles.skeleton, className)}
+    />
+  )
+}
+
+interface AuthTextLinkProps {
+  children: ReactNode
+  href?: string
+  onClick?: () => void
+  external?: boolean
+  disabled?: boolean
+  className?: string
+}
+/** Renders a document link when href is provided, otherwise a button; disabled blocks either action. */
+export function AuthTextLink({
+  children,
+  href,
+  onClick,
+  external,
+  disabled,
+  className,
+}: AuthTextLinkProps) {
+  const classes = clsx(styles.textLink, className)
+  return href ? (
+    <a
+      href={disabled ? undefined : href}
+      role={disabled ? 'link' : undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={disabled ? undefined : onClick}
+      className={classes}
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+    >
+      {children}
+    </a>
+  ) : (
+    <button type='button' onClick={onClick} disabled={disabled} className={classes}>
+      {children}
+    </button>
+  )
+}
+
+interface AuthTagProps {
+  children: ReactNode
+  className?: string
+  variant?: string
+}
+/** Presents compact, non-interactive metadata beside Auth content. */
+export function AuthTag({ children, className }: AuthTagProps) {
+  return <span className={clsx(styles.tag, className)}>{children}</span>
+}
diff --git a/packages/auth-ui/src/provider-icons.tsx b/packages/auth-ui/src/provider-icons.tsx
new file mode 100644
index 00000000000..bebdee8e429
--- /dev/null
+++ b/packages/auth-ui/src/provider-icons.tsx
@@ -0,0 +1,58 @@
+import type { SVGProps } from 'react'
+
+interface ProviderIconProps extends SVGProps<SVGSVGElement> {}
+
+/** Decorative Google mark; the enclosing provider action supplies its accessible name. */
+export function AuthGoogleIcon(props: ProviderIconProps) {
+  return (
+    <svg width='16' height='16' viewBox='0 0 24 24' aria-hidden='true' focusable='false' {...props}>
+      <path
+        d='M21.6 12.23c0-.71-.06-1.39-.18-2.05H12v3.88h5.38a4.6 4.6 0 0 1-2 3.02v2.51h3.24c1.9-1.75 2.98-4.33 2.98-7.36Z'
+        fill='#4285F4'
+      />
+      <path
+        d='M12 22c2.7 0 4.96-.9 6.62-2.41l-3.24-2.51c-.9.6-2.05.97-3.38.97-2.6 0-4.8-1.76-5.59-4.13H3.07v2.59A10 10 0 0 0 12 22Z'
+        fill='#34A853'
+      />
+      <path
+        d='M6.41 13.92a6 6 0 0 1 0-3.84V7.49H3.07a10 10 0 0 0 0 9.02l3.34-2.59Z'
+        fill='#FBBC05'
+      />
+      <path
+        d='M12 5.95c1.47 0 2.79.5 3.83 1.5l2.88-2.87A9.6 9.6 0 0 0 12 2a10 10 0 0 0-8.93 5.49l3.34 2.59A5.99 5.99 0 0 1 12 5.95Z'
+        fill='#EA4335'
+      />
+    </svg>
+  )
+}
+
+/** Decorative Microsoft mark; the enclosing provider action supplies its accessible name. */
+export function AuthMicrosoftIcon(props: ProviderIconProps) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 109 109'
+      aria-hidden='true'
+      focusable='false'
+      {...props}
+    >
+      <polygon points='51.9,51.9 0,51.9 0,0 51.9,0' fill='#F1511B' />
+      <polygon points='109.3,51.9 57.3,51.9 57.3,0 109.3,0' fill='#80CC28' />
+      <polygon points='51.9,109.3 0,109.3 0,57.4 51.9,57.4' fill='#00ADEF' />
+      <polygon points='109.3,109.3 57.3,109.3 57.3,57.4 109.3,57.4' fill='#FBBC09' />
+    </svg>
+  )
+}
+
+/** Decorative GitHub mark; the enclosing provider action supplies its accessible name. */
+export function AuthGithubIcon(props: ProviderIconProps) {
+  return (
+    <svg width='16' height='16' viewBox='0 0 26 26' aria-hidden='true' focusable='false' {...props}>
+      <path
+        d='M13 0C11.29 0 9.6 0.34 8.03 0.99C6.45 1.64 5.01 2.6 3.81 3.81C1.37 6.25 0 9.55 0 13C0 18.75 3.73 23.62 8.89 25.35C9.54 25.45 9.75 25.05 9.75 24.7V22.5C6.15 23.28 5.38 20.76 5.38 20.76C4.78 19.25 3.94 18.85 3.94 18.85C2.76 18.04 4.03 18.07 4.03 18.07C5.33 18.16 6.02 19.41 6.02 19.41C7.15 21.39 9.06 20.8 9.8 20.49C9.92 19.64 10.26 19.07 10.62 18.75C7.74 18.42 4.71 17.3 4.71 12.35C4.71 10.91 5.2 9.75 6.05 8.83C5.92 8.5 5.46 7.15 6.18 5.4C6.18 5.4 7.27 5.04 9.75 6.72C10.78 6.44 11.9 6.29 13 6.29C14.11 6.29 15.22 6.44 16.25 6.72C18.73 5.04 19.83 5.4 19.83 5.4C20.54 7.15 20.09 8.5 19.95 8.83C20.8 9.75 21.29 10.91 21.29 12.35C21.29 17.32 18.25 18.41 15.35 18.73C15.82 19.14 16.25 19.93 16.25 21.14V24.7C16.25 25.05 16.46 25.47 17.12 25.35C22.28 23.61 26 18.75 26 13C26 5.82 20.18 0 13 0Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
diff --git a/packages/auth-ui/src/styles.d.ts b/packages/auth-ui/src/styles.d.ts
new file mode 100644
index 00000000000..bc5e482353c
--- /dev/null
+++ b/packages/auth-ui/src/styles.d.ts
@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'
diff --git a/packages/auth-ui/src/styles.module.css b/packages/auth-ui/src/styles.module.css
new file mode 100644
index 00000000000..a908ffbf94f
--- /dev/null
+++ b/packages/auth-ui/src/styles.module.css
@@ -0,0 +1,824 @@
+@reference 'tailwindcss';
+
+@font-face {
+  font-family: "Sim Auth Geist";
+  src: url("./assets/geist-variable.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Sim Auth Geist Mono";
+  src: url("./assets/geist-mono-variable.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+.root {
+  --auth-canvas: #fff;
+  --auth-primary: rgb(10 10 10 / 80%);
+  --auth-secondary: rgb(10 10 10 / 60%);
+  --auth-reading: rgb(255 255 255 / 96%);
+  --auth-overlay: rgb(255 255 255 / 88%);
+  --auth-border: rgb(0 0 0 / 12%);
+  --auth-border-subtle: rgb(0 0 0 / 6%);
+  --auth-hover: rgb(10 10 10 / 6%);
+  --auth-selected: rgb(0 0 0 / 8%);
+  --auth-pressed: rgb(0 0 0 / 12%);
+  --auth-accent: #06c;
+  --auth-error: #c83232;
+  --auth-disabled: 0.4;
+  --auth-font: "Sim Auth Geist", Arial, sans-serif;
+  --auth-mono: "Sim Auth Geist Mono", monospace;
+  --auth-title-size: 24px;
+  --auth-title-leading: 32px;
+  --auth-body-size: 14px;
+  --auth-body-leading: 22px;
+  --auth-control-size: 13px;
+  --auth-control-leading: 18px;
+  --auth-caption-size: 12px;
+  --auth-input-size: 14px;
+  --auth-control-height: 32px;
+  --auth-control-radius: 8px;
+  --auth-quiet-size: 28px;
+  --auth-icon-size: 16px;
+  --auth-field-gap: 20px;
+  --auth-group-gap: 20px;
+  --auth-label-gap: 8px;
+  --auth-control-inset: 10px;
+  --auth-form-width: 400px;
+  --auth-nav-width: 1280px;
+  --auth-touch-height: 32px;
+  color-scheme: light;
+  color: var(--auth-primary);
+  font-family: var(--auth-font);
+  font-size: var(--auth-body-size);
+  font-weight: 400;
+  font-synthesis: none;
+  line-height: var(--auth-body-leading);
+  letter-spacing: 0;
+  text-align: left;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+}
+.root :where(*, *::before, *::after) {
+  box-sizing: border-box;
+}
+.root :where(h1, h2, h3, p, ul, ol, fieldset) {
+  margin: 0;
+  padding: 0;
+}
+.root :where(ul, ol) {
+  list-style: none;
+}
+.root :where(button, input, select, textarea) {
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+  color: inherit;
+}
+.root :where(a) {
+  color: inherit;
+}
+.root :where(button) {
+  cursor: pointer;
+}
+.root :where(button:disabled) {
+  cursor: not-allowed;
+}
+.root :where(svg) {
+  flex-shrink: 0;
+}
+.root :where(button, a, input, [tabindex]):focus-visible {
+  outline: 2px solid var(--auth-accent);
+  outline-offset: 2px;
+}
+.root .page {
+  @apply flex w-full flex-col;
+  min-height: 100svh;
+  background: var(--auth-canvas);
+}
+.root .header {
+  @apply w-full shrink-0;
+  height: 56px;
+}
+.root .nav {
+  @apply mx-auto flex h-full w-full items-center justify-between;
+  max-width: var(--auth-nav-width);
+  padding-inline: 16px;
+}
+.root .wordmark {
+  @apply inline-flex items-center;
+  width: 40px;
+  min-height: 44px;
+}
+.root .wordmark :where(svg, img) {
+  display: block;
+  translate: 0 -2px;
+  color: #000;
+  width: 40px;
+  max-height: 24px;
+  object-fit: contain;
+}
+.root .main {
+  @apply flex w-full flex-1 items-center justify-center;
+  padding: 48px 24px;
+}
+.root .column {
+  @apply w-full shrink-0;
+  max-width: var(--auth-form-width);
+  min-width: 0;
+}
+.root .footer {
+  @apply flex shrink-0 justify-center;
+  padding: 0 16px 24px;
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+}
+.root .footer .textLink {
+  color: var(--auth-primary);
+}
+.root .heading {
+  @apply flex flex-col;
+  gap: 6px;
+}
+.root .heading h1 {
+  font-family: var(--auth-font);
+  font-size: var(--auth-title-size);
+  line-height: var(--auth-title-leading);
+  font-weight: 500;
+  color: var(--auth-primary);
+  letter-spacing: -0.02em;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.root .heading p {
+  color: var(--auth-primary);
+  font-size: var(--auth-body-size);
+  line-height: var(--auth-body-leading);
+  font-weight: 400;
+  overflow-wrap: anywhere;
+}
+.root .stack {
+  @apply flex flex-col;
+  gap: var(--auth-group-gap);
+}
+.root .field {
+  @apply flex w-full flex-col;
+  gap: var(--auth-label-gap);
+}
+.root .labelRow {
+  @apply flex items-center justify-between;
+  gap: 8px;
+}
+.root .labelRow .textLink {
+  font-size: var(--auth-caption-size);
+  line-height: var(--auth-control-leading);
+}
+.root .label {
+  color: var(--auth-primary);
+  font-size: var(--auth-control-size);
+  line-height: var(--auth-control-leading);
+  font-weight: 400;
+}
+.root .caption,
+.root .fieldErrors {
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.root .caption {
+  color: var(--auth-secondary);
+}
+.root .caption:empty {
+  display: none;
+}
+.root .fieldErrors {
+  color: var(--auth-error);
+}
+.root .inputLane,
+.root .select {
+  @apply flex w-full items-center;
+  position: relative;
+  min-width: 0;
+  height: var(--auth-touch-height);
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+}
+.root .inputSurface {
+  @apply flex w-full items-center;
+  position: relative;
+  min-width: 0;
+  height: var(--auth-control-height);
+  padding-inline: var(--auth-control-inset);
+  border: 1px solid var(--auth-border);
+  border-radius: var(--auth-control-radius);
+  background: var(--auth-reading);
+  gap: 6px;
+}
+.root .inputSurface:has(.quietAction) {
+  padding-right: 2px;
+}
+.root .inputLane:focus-within .inputSurface {
+  border-color: var(--auth-accent);
+  box-shadow: 0 0 0 1px var(--auth-accent);
+}
+.root .inputLane[data-invalid] .inputSurface {
+  border-color: var(--auth-error);
+}
+.root .inputLane[data-disabled] {
+  opacity: var(--auth-disabled);
+}
+.root .input {
+  @apply w-full min-w-0 flex-1;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  font-family: var(--auth-font);
+  font-size: var(--auth-input-size);
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--auth-primary);
+  caret-color: var(--auth-primary);
+  opacity: 1;
+}
+.root .input:focus-visible {
+  outline: none;
+}
+.root .input::placeholder {
+  color: var(--auth-secondary);
+  opacity: 1;
+}
+.root .input:-webkit-autofill {
+  -webkit-text-fill-color: var(--auth-primary);
+  box-shadow: 0 0 0 1000px white inset;
+}
+.root .button {
+  @apply relative inline-flex shrink-0 items-center justify-center;
+  height: var(--auth-touch-height);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--auth-control-radius);
+  background: transparent;
+  color: var(--auth-primary);
+  font-size: var(--auth-control-size);
+  line-height: var(--auth-control-leading);
+  font-weight: 400;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 150ms;
+}
+.root .buttonSurface {
+  @apply inline-flex h-full w-full items-center justify-center;
+  height: var(--auth-control-height);
+  min-width: 0;
+  padding-inline: var(--auth-control-inset);
+  gap: 6px;
+  border: 1px solid var(--auth-border-subtle);
+  border-radius: var(--auth-control-radius);
+  background: var(--auth-reading);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  transition: background-color 150ms;
+}
+.root .button[data-variant="primary"] .buttonSurface {
+  background: var(--auth-primary);
+  color: white;
+  border-color: transparent;
+  box-shadow: none;
+}
+.root .button[data-variant="navigation"] .buttonSurface {
+  background: #0a0a0a;
+  color: white;
+  border-color: transparent;
+  border-radius: 9999px;
+  padding-inline: 16px;
+  font-weight: 450;
+  line-height: 19.5px;
+  box-shadow: none;
+}
+.root .button[data-variant="navigation"]:hover .buttonSurface {
+  background: rgb(10 10 10 / 80%);
+}
+.root .button[data-variant="ghost"] .buttonSurface {
+  background: transparent;
+  box-shadow: none;
+  border-color: transparent;
+}
+.root .button:hover:not(:disabled, [data-variant="navigation"]) .buttonSurface {
+  background: var(--auth-hover);
+}
+.root .button[data-variant="primary"]:hover:not(:disabled) .buttonSurface {
+  background: rgb(10 10 10 / 90%);
+}
+.root .button:active:not(:disabled, [data-variant="navigation"]) .buttonSurface {
+  background: var(--auth-pressed);
+}
+.root .button[data-variant="primary"]:active:not(:disabled) .buttonSurface {
+  background: rgb(10 10 10);
+}
+.root .button:disabled {
+  opacity: var(--auth-disabled);
+}
+.root .fullWidth {
+  width: 100%;
+}
+.root .icon,
+.root .buttonSurface svg {
+  width: var(--auth-icon-size);
+  height: var(--auth-icon-size);
+  flex-shrink: 0;
+}
+.root .quietAction {
+  @apply relative inline-flex shrink-0 items-center justify-center;
+  width: var(--auth-quiet-size);
+  height: var(--auth-quiet-size);
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--auth-secondary);
+}
+.root .quietAction:hover {
+  background: var(--auth-hover);
+  color: var(--auth-primary);
+}
+.root .textLink {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--auth-secondary);
+  text-decoration: none;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: 400;
+}
+.root .textLink:not(:disabled):not([aria-disabled="true"]):hover {
+  color: var(--auth-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.root .textLink:disabled,
+.root .textLink[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--auth-disabled);
+}
+.root .feedback {
+  @apply flex items-start;
+  gap: 8px;
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+  color: var(--auth-primary);
+  overflow-wrap: anywhere;
+}
+.root .feedback[data-align="center"] {
+  justify-content: center;
+  text-align: center;
+}
+.root .feedback[data-tone="error"] {
+  color: var(--auth-error);
+}
+.root .feedbackIcon {
+  @apply flex shrink-0 items-center;
+  width: 16px;
+  height: 18px;
+}
+.root .divider {
+  @apply flex w-full items-center;
+  gap: 16px;
+  color: var(--auth-secondary);
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+}
+.root .divider::before,
+.root .divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--auth-border-subtle);
+}
+.root .providers {
+  @apply grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.root .providers > :last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+.root .legal {
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+  text-align: center;
+  color: var(--auth-secondary);
+}
+.root .legal a {
+  color: var(--auth-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.root .navPrompt {
+  @apply flex flex-wrap items-center;
+  gap: 6px;
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+  color: var(--auth-secondary);
+}
+.root .navPrompt a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.root .identity {
+  @apply flex items-start;
+  gap: 8px;
+  padding: 8px;
+  min-height: 40px;
+}
+.root .identityText {
+  @apply min-w-0 flex-1;
+  overflow-wrap: anywhere;
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+}
+.root .identityText p + p {
+  font-size: var(--auth-caption-size);
+  color: var(--auth-secondary);
+}
+.root .avatar {
+  @apply flex shrink-0 items-center justify-center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--auth-hover);
+  font-size: 12px;
+  line-height: 16px;
+}
+.root .actions {
+  @apply flex flex-wrap items-center;
+  gap: 8px;
+}
+.root .resourceRow {
+  @apply grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 8px;
+  padding: 8px;
+}
+.root .resourceIcon {
+  @apply flex items-center justify-center;
+  width: 24px;
+  height: 24px;
+}
+.root .resourceIcon svg {
+  width: 16px;
+  height: 16px;
+}
+.root .resourceText {
+  min-width: 0;
+  font-size: var(--auth-body-size);
+  line-height: 22px;
+  overflow-wrap: anywhere;
+}
+.root .resourceText p {
+  color: var(--auth-secondary);
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+}
+.root .resourceActions {
+  @apply flex items-center;
+  gap: 8px;
+}
+.root .tag {
+  display: inline-flex;
+  border: 1px solid var(--auth-border-subtle);
+  border-radius: 6px;
+  padding: 2px 6px;
+  color: var(--auth-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.root .sectionHeading h2 {
+  color: var(--auth-primary);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.root .sectionHeading p {
+  font-size: var(--auth-body-size);
+  line-height: 22px;
+}
+.root .loader {
+  display: inline-block;
+  border: 1.5px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.root .spinning {
+  animation: spin 800ms linear infinite;
+}
+@layer components {
+  .root .loader {
+    width: 16px;
+    height: 16px;
+  }
+  .root .skeleton {
+    height: var(--auth-touch-height);
+    border-radius: 8px;
+  }
+  .root .skeleton[data-shape="title"] {
+    height: 32px;
+  }
+  .root .skeleton[data-shape="label"] {
+    height: 18px;
+    border-radius: 4px;
+  }
+  .root .skeleton[data-shape="divider"] {
+    height: 1px;
+    border-radius: 0;
+  }
+}
+.root .skeleton {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.root .skeleton::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--auth-hover);
+}
+.root .skeleton[data-shape="control"]::before {
+  height: var(--auth-control-height);
+  max-height: 100%;
+}
+.root .otpLane {
+  @apply relative flex items-center;
+  min-height: var(--auth-touch-height);
+}
+.root .otpLane:has(input:disabled) {
+  opacity: var(--auth-disabled);
+}
+.root .otpGroup {
+  @apply flex items-center;
+  gap: 8px;
+}
+.root .otpSlot {
+  @apply relative flex items-center justify-center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--auth-border);
+  border-radius: 8px;
+  background: var(--auth-reading);
+  font-size: 16px;
+  line-height: 18px;
+}
+.root .otpSlot[data-active] {
+  border-color: var(--auth-accent);
+  outline: 1px solid var(--auth-accent);
+}
+.root .caret {
+  width: 1px;
+  height: 18px;
+  background: var(--auth-primary);
+  animation: pulse 1s infinite;
+}
+.root .select {
+  color: var(--auth-primary);
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+}
+.root .select .inputSurface {
+  justify-content: space-between;
+}
+.root .select .inputSurface > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.root .select:disabled {
+  opacity: var(--auth-disabled);
+}
+.root.menu {
+  width: var(--radix-popover-trigger-width, 280px);
+  max-width: calc(100vw - 32px);
+  padding: 4px;
+  z-index: 1000;
+  border: 1px solid var(--auth-border-subtle);
+  border-radius: 10px;
+  background: var(--auth-overlay);
+  backdrop-filter: blur(20px);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 6%),
+    inset 0 1px 0 rgb(255 255 255 / 70%);
+}
+.root .options {
+  overflow-y: auto;
+  max-height: min(320px, var(--radix-popover-content-available-height, 60vh));
+}
+.root .menuRow {
+  @apply flex items-center justify-between;
+  min-height: 30px;
+  padding: 6px 8px;
+  gap: 8px;
+  border-radius: 6px;
+  color: var(--auth-primary);
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+  cursor: pointer;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+.root .menuRow[aria-selected="true"] {
+  background: var(--auth-selected);
+}
+.root .menuRow[data-focused="true"],
+.root .menuRow[data-highlighted] {
+  background: var(--auth-hover);
+}
+.root .menuRow[aria-disabled="true"] {
+  opacity: var(--auth-disabled);
+  cursor: not-allowed;
+}
+.root .menuSearch {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--auth-border-subtle);
+  padding: 6px 8px;
+  background: transparent;
+  font-size: var(--auth-input-size);
+  line-height: 18px;
+}
+.root .menuLabel,
+.root .empty {
+  padding: 6px 8px;
+  color: var(--auth-secondary);
+  font-size: var(--auth-caption-size);
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.root .accountTrigger {
+  @apply flex w-full items-center justify-between;
+  padding: 8px;
+  gap: 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--auth-primary);
+  text-align: left;
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.root .accountTrigger:hover {
+  background: var(--auth-hover);
+}
+.root .accountTrigger:disabled {
+  opacity: var(--auth-disabled);
+}
+.root .notification {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 1000;
+  width: max-content;
+  max-width: min(400px, calc(100vw - 40px));
+  padding: 12px;
+  border: 1px solid var(--auth-border-subtle);
+  border-radius: 10px;
+  background: var(--auth-overlay);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 6%);
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+@media (max-width: 767px) {
+  .root {
+    --auth-input-size: 16px;
+    --auth-touch-height: 44px;
+    --auth-group-gap: 24px;
+  }
+  .root .main {
+    flex: 0 0 auto;
+    align-items: flex-start;
+    padding: 24px 16px 0;
+  }
+  .root .button[data-variant="navigation"] .buttonSurface {
+    background: transparent;
+    color: var(--auth-primary);
+    padding: 0;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .root .button[data-variant="navigation"]:hover .buttonSurface {
+    background: transparent;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .root .quietAction {
+    width: 44px;
+    height: 44px;
+    background: transparent;
+  }
+  .root .quietAction:hover {
+    background: transparent;
+  }
+  .root .quietAction::after {
+    content: "";
+    position: absolute;
+    inset: 8px;
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+  .root .quietAction:hover::after {
+    background: var(--auth-hover);
+  }
+  .root .inputSurface:has(.quietAction) {
+    padding-right: 0;
+  }
+  .root .resourceActions {
+    grid-column: 2 / -1;
+  }
+  .root .resourceRow {
+    grid-template-columns: 24px minmax(0, 1fr);
+  }
+  .root .textLink {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .root .labelRow .textLink {
+    min-height: 18px;
+    font-size: var(--auth-control-size);
+  }
+  .root .otpLane {
+    width: fit-content;
+  }
+  .root .footer {
+    padding: 11px 16px 40px;
+  }
+  .root .footer .textLink {
+    color: var(--auth-secondary);
+  }
+  .root .page:not(:has(.footer)) .main {
+    padding-bottom: 40px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .root :where(*, *::before, *::after) {
+    animation: none;
+    transition: none;
+  }
+}
+/* biome-ignore lint/correctness/noUnknownMediaFeatureName: Standard reduced-transparency preference; unsupported browsers keep the fallback. */
+@media (prefers-reduced-transparency: reduce) {
+  .root.menu,
+  .root .notification {
+    background: #fafafa;
+    backdrop-filter: none;
+  }
+}
+.root [data-auth-titlebar] {
+  height: var(--desktop-title-bar-height, 0px);
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+}
+.root .codeHelp {
+  text-align: center;
+  font-size: var(--auth-control-size);
+  line-height: 18px;
+  color: var(--auth-secondary);
+}
+.root .otpLane:has(input[aria-invalid="true"]) .otpSlot {
+  border-color: var(--auth-error);
+}
+
+.root .accountEmail {
+  display: block;
+  color: var(--auth-secondary);
+  font-size: var(--auth-caption-size);
+}
+
+.root .readonlyValue {
+  font-family: var(--auth-mono);
+}
diff --git a/packages/auth-ui/src/utilities.css b/packages/auth-ui/src/utilities.css
new file mode 100644
index 00000000000..46e6547c9ca
--- /dev/null
+++ b/packages/auth-ui/src/utilities.css
@@ -0,0 +1,25 @@
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) prefix(au);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(au) source(none);
+@source '../../../apps/sim/app';
+@source '../../../apps/sim/ee/sso/components/sso-auth.tsx';
+@source '../../../apps/sim/ee/sso/components/sso-form.tsx';
+@source '../../../apps/desktop/src/renderer';
+@theme {
+  --spacing: 4px;
+  --text-title: 24px;
+  --text-title--line-height: 32px;
+  --text-body: 14px;
+  --text-body--line-height: 22px;
+  --text-control: 13px;
+  --text-control--line-height: 18px;
+  --text-caption: 12px;
+  --text-caption--line-height: 18px;
+  --text-md: 16px;
+  --text-md--line-height: 24px;
+  --radius-lg: 8px;
+}
+@theme inline {
+  --font-sans: var(--auth-font);
+  --font-mono: var(--auth-mono);
+}
diff --git a/packages/auth-ui/src/wordmark.tsx b/packages/auth-ui/src/wordmark.tsx
new file mode 100644
index 00000000000..7130125ca0e
--- /dev/null
+++ b/packages/auth-ui/src/wordmark.tsx
@@ -0,0 +1,27 @@
+/** Canonical Sim logotype outlines from the brand guide. */
+const WORDMARK_VIEW_BOX = { width: 441, height: 212 } as const
+
+/** Glyph outlines, drawn in `WORDMARK_VIEW_BOX` coordinates. */
+const WORDMARK_PATHS: readonly string[] = [
+  'M0 160.9H29.51C29.51 169.08 32.46 175.61 38.37 180.48C44.27 185.12 52.25 187.44 62.31 187.44C73.24 187.44 81.65 185.34 87.56 181.14C93.46 176.71 96.41 170.85 96.41 163.55C96.41 158.24 94.77 153.82 91.49 150.28C88.43 146.74 82.75 143.86 74.44 141.65L46.24 135.01C32.03 131.47 21.42 126.05 14.43 118.75C7.65 111.45 4.26 101.83 4.26 89.88C4.26 79.93 6.78 71.3 11.81 64C17.05 56.7 24.16 51.06 33.12 47.08C42.3 43.09 52.8 41.1 64.6 41.1C76.41 41.1 86.57 43.2 95.1 47.41C103.84 51.61 110.62 57.47 115.43 64.99C120.46 72.52 123.08 81.48 123.3 91.87H93.79C93.57 83.47 90.84 76.94 85.59 72.3C80.34 67.65 73.02 65.33 63.62 65.33C54 65.33 46.57 67.43 41.32 71.63C36.07 75.83 33.45 81.59 33.45 88.89C33.45 99.73 41.32 107.14 57.06 111.12L85.26 118.09C98.81 121.19 108.98 126.28 115.76 133.35C122.53 140.21 125.92 149.61 125.92 161.56C125.92 171.74 123.19 180.7 117.73 188.44C112.26 195.96 104.72 201.82 95.1 206.03C85.7 210.01 74.55 212 61.65 212C42.85 212 27.87 207.35 16.72 198.06C5.57 188.77 0 176.38 0 160.9Z',
+  'M232.8 212H202.13L202.13 49.76H229.54V77.39C232.8 68.34 239.11 60.66 247.81 54.7C256.73 48.52 267.5 45.43 280.12 45.43C294.26 45.43 306.01 49.29 315.36 57.02C324.72 64.75 330.81 75.01 333.64 87.82H328.09C330.27 75.01 336.25 64.75 346.04 57.02C355.83 49.29 367.9 45.43 382.26 45.43C400.54 45.43 414.89 50.84 425.34 61.66C435.78 72.47 441 87.26 441 106.03V212H410.98V113.65C410.98 100.84 407.71 91.02 401.19 84.17C394.88 77.11 386.29 73.58 375.41 73.58C367.79 73.58 361.05 75.34 355.17 78.88C349.52 82.19 345.06 87.04 341.8 93.45C338.53 99.85 336.9 107.36 336.9 115.97V212H306.55V113.32C306.55 100.51 303.4 90.8 297.09 84.17C290.78 77.33 282.19 73.91 271.31 73.91C263.69 73.91 256.95 75.67 251.08 79.21C245.42 82.52 240.96 87.38 237.7 93.78C234.43 99.96 232.8 107.36 232.8 115.97V212Z',
+  'M184.83 20.55C184.83 31.9 175.64 41.1 164.29 41.1C152.95 41.1 143.76 31.9 143.76 20.55C143.76 9.2 152.95 0 164.29 0C175.64 0 184.83 9.2 184.83 20.55Z',
+  'M179.43 212H149.16V49.76C153.76 51.91 158.88 53.12 164.29 53.12C169.7 53.12 174.83 51.91 179.43 49.76V212Z',
+]
+
+/** Brand-guide outlines, rendered with Auth-owned size and ink. */
+export function AuthWordmark() {
+  return (
+    <svg
+      width='40'
+      height='19'
+      viewBox={`0 0 ${WORDMARK_VIEW_BOX.width} ${WORDMARK_VIEW_BOX.height}`}
+      aria-hidden='true'
+      fill='currentColor'
+    >
+      {WORDMARK_PATHS.map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  )
+}
diff --git a/packages/auth-ui/tsconfig.json b/packages/auth-ui/tsconfig.json
new file mode 100644
index 00000000000..6e7e485cdc6
--- /dev/null
+++ b/packages/auth-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@sim/tsconfig/library.json",
+  "compilerOptions": { "jsx": "react-jsx", "lib": ["ES2022", "DOM", "DOM.Iterable"] },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/emcn/package.json b/packages/emcn/package.json
index 734ca605ac8..31d3c8db466 100644
--- a/packages/emcn/package.json
+++ b/packages/emcn/package.json
@@ -62,7 +62,6 @@
     "@tanstack/react-virtual": "^3.13.24",
     "class-variance-authority": "^0.7.1",
     "framer-motion": "^12.5.0",
-    "input-otp": "^1.5.0",
     "next": ">=15",
     "prismjs": "^1.30.0",
     "react": "^19",
@@ -89,7 +88,6 @@
     "@types/react-dom": "^19",
     "class-variance-authority": "0.7.1",
     "framer-motion": "^12.5.0",
-    "input-otp": "1.5.0",
     "next": "16.4.1",
     "prismjs": "^1.30.0",
     "react": "19.2.4",
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index d38342fd34e..5beb7c4d08b 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -44,7 +44,7 @@ export {
   type ChipDropdownProps,
 } from './chip-dropdown/chip-dropdown'
 export { ChipEmailsInput } from './chip-emails-input/chip-emails-input'
-export { ChipInput, type ChipInputProps } from './chip-input/chip-input'
+export { ChipInput } from './chip-input/chip-input'
 export {
   ChipConfirmModal,
   type ChipConfirmTextSegment,
@@ -112,7 +112,6 @@ export {
   InfoCardList,
 } from './info-card/info-card'
 export { Input } from './input/input'
-export { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp/input-otp'
 export { Label } from './label/label'
 export { Lightbox } from './lightbox/lightbox'
 export {
diff --git a/packages/emcn/src/components/input-otp/input-otp.tsx b/packages/emcn/src/components/input-otp/input-otp.tsx
deleted file mode 100644
index 128d9b5abbd..00000000000
--- a/packages/emcn/src/components/input-otp/input-otp.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * An OTP input component matching the emcn design system.
- *
- * Wraps the `input-otp` library with emcn design tokens for consistent styling.
- *
- * @example
- * ```tsx
- * import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../index'
- *
- * <InputOTP maxLength={6} value={otp} onChange={setOtp}>
- *   <InputOTPGroup>
- *     <InputOTPSlot index={0} />
- *     <InputOTPSlot index={1} />
- *     <InputOTPSlot index={2} />
- *     <InputOTPSlot index={3} />
- *     <InputOTPSlot index={4} />
- *     <InputOTPSlot index={5} />
- *   </InputOTPGroup>
- * </InputOTP>
- * ```
- *
- * @see InputOTP - Root component wrapping OTPInput
- * @see InputOTPGroup - Groups slots together
- * @see InputOTPSlot - Individual digit slot
- */
-'use client'
-
-import * as React from 'react'
-import { OTPInput, OTPInputContext } from 'input-otp'
-import { cn } from '../../lib/cn'
-
-/**
- * Root OTP input component. Manages the overall input state and layout.
- */
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      'flex items-center gap-2 has-[:disabled]:opacity-50',
-      containerClassName
-    )}
-    className={cn('disabled:cursor-not-allowed', className)}
-    {...props}
-  />
-))
-InputOTP.displayName = 'InputOTP'
-
-/**
- * Groups OTP slots together with consistent spacing.
- */
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center gap-2', className)} {...props} />
-))
-InputOTPGroup.displayName = 'InputOTPGroup'
-
-/**
- * Individual OTP digit slot. Displays the entered character and a fake caret when active.
- *
- * Uses emcn design tokens for consistent styling with the Input component.
- */
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex size-12 items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-primary)] text-lg transition-colors',
-        isActive && 'z-10 border-[var(--text-muted)] ring-1 ring-[var(--text-muted)]',
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000 motion-reduce:animate-none' />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = 'InputOTPSlot'
-
-export { InputOTP, InputOTPGroup, InputOTPSlot }
diff --git a/scripts/test-patterns-baseline.json b/scripts/test-patterns-baseline.json
index 0d7ed8685bb..a21ba5665e6 100644
--- a/scripts/test-patterns-baseline.json
+++ b/scripts/test-patterns-baseline.json
@@ -44,7 +44,6 @@
   "local-factory\tapps/sim/connectors/confluence/attachments.test.ts\t@/lib/knowledge/documents/secure-fetch.server",
   "local-factory\tapps/sim/ee/access-requests/components/permission-access-boundary.test.tsx\t@sim/emcn",
   "local-factory\tapps/sim/ee/credential-groups/components/organization-account-workspace-access.test.tsx\t@sim/emcn",
-  "local-factory\tapps/sim/ee/sso/components/sso-form.test.tsx\t@sim/emcn",
   "local-factory\tapps/sim/ee/sso/components/sso-settings.test.tsx\t@sim/emcn",
   "local-factory\tapps/sim/executor/execution/block-executor.test.ts\t@/lib/logs/execution/pii-redaction",
   "local-factory\tapps/sim/executor/utils/output-filter.test.ts\t@/blocks",