refactor: design critique fixes for account pages

- Admin accounts: replace dense card grid with compact DataTable
- Account settings: remove redundant hero card, stat grid, header pills
- Fix bg-accent (orange) misuse on decorative elements across 7 files
- Add ConfirmButton for destructive actions (deactivate, remove member)
- Replace single-field modals with inline editing (plan, trial)
- Add contextual help: display code tooltip, improved empty states
- Non-owner aside explanation for hidden owner-only sections
- Admin sidebar: group 11 items into 5 labeled sections
- Rename UsersPage.tsx → AccountsPage.tsx to match route
- Fix border radius consistency, hide zero-count badges

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/admin/ActionMenu.tsx

@@ -54,7 +54,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
         onClick={() => setOpen(!open)}
         className={cn(
           'rounded-md p-1.5 text-muted-foreground transition-colors',
-          'hover:bg-accent hover:text-foreground'
+          'hover:bg-elevated hover:text-foreground'
         )}
       >
         <MoreHorizontal className="h-4 w-4" />
@@ -81,7 +81,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
                 'disabled:opacity-50 disabled:pointer-events-none',
                 item.destructive
                   ? 'text-red-400 hover:bg-red-400/10'
-                  : 'text-muted-foreground hover:bg-accent'
+                  : 'text-muted-foreground hover:bg-elevated'
               )}
             >
               {item.icon}

frontend/src/components/admin/AdminSidebar.tsx

@@ -15,18 +15,54 @@ import {
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
-const navItems = [
+interface NavItem {
-  { path: '/admin', label: 'Dashboard', icon: LayoutDashboard, end: true },
+  path: string
-  { path: '/admin/accounts', label: 'Accounts', icon: Building2 },
+  label: string
-  { path: '/admin/invite-codes', label: 'Invite Codes', icon: Ticket },
+  icon: typeof LayoutDashboard
-  { path: '/admin/audit-logs', label: 'Audit Logs', icon: FileText },
+  end?: boolean
-  { path: '/admin/plan-limits', label: 'Plan Limits', icon: Gauge },
+}
-  { path: '/admin/feature-flags', label: 'Feature Flags', icon: ToggleLeft },
+
-  { path: '/admin/settings', label: 'Settings', icon: Settings },
+interface NavSection {
-  { path: '/admin/categories', label: 'Categories', icon: FolderTree },
+  label?: string
-  { path: '/admin/survey-invites', label: 'Survey Invites', icon: ClipboardList },
+  items: NavItem[]
-  { path: '/admin/survey-responses', label: 'Survey Responses', icon: MessageSquareText },
+}
-  { path: '/admin/gallery', label: 'Gallery', icon: LayoutGrid },
+
+const navSections: NavSection[] = [
+  {
+    items: [
+      { path: '/admin', label: 'Dashboard', icon: LayoutDashboard, end: true },
+      { path: '/admin/accounts', label: 'Accounts', icon: Building2 },
+      { path: '/admin/invite-codes', label: 'Invite Codes', icon: Ticket },
+    ],
+  },
+  {
+    label: 'Platform',
+    items: [
+      { path: '/admin/plan-limits', label: 'Plan Limits', icon: Gauge },
+      { path: '/admin/feature-flags', label: 'Feature Flags', icon: ToggleLeft },
+      { path: '/admin/settings', label: 'Settings', icon: Settings },
+    ],
+  },
+  {
+    label: 'Content',
+    items: [
+      { path: '/admin/categories', label: 'Categories', icon: FolderTree },
+      { path: '/admin/gallery', label: 'Gallery', icon: LayoutGrid },
+    ],
+  },
+  {
+    label: 'Feedback',
+    items: [
+      { path: '/admin/survey-invites', label: 'Survey Invites', icon: ClipboardList },
+      { path: '/admin/survey-responses', label: 'Survey Responses', icon: MessageSquareText },
+    ],
+  },
+  {
+    label: 'Audit',
+    items: [
+      { path: '/admin/audit-logs', label: 'Audit Logs', icon: FileText },
+    ],
+  },
 ]
 
 interface AdminSidebarProps {
@@ -47,22 +83,33 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
       <div className="p-4">
         <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
       </div>
-      <nav className="flex-1 space-y-1 px-3">
+      <nav className="flex-1 space-y-4 overflow-y-auto px-3">
-        {navItems.map((item) => (
+        {navSections.map((section, i) => (
-          <Link
+          <div key={i}>
-            key={item.path}
+            {section.label && (
-            to={item.path}
+              <p className="mb-1 px-3 text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
-            onClick={onNavigate}
+                {section.label}
-            className={cn(
+              </p>
-              'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-              isActive(item.path, item.end)
-                ? 'bg-accent text-foreground'
-                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
-          >
+            <div className="space-y-0.5">
-            <item.icon className="h-4 w-4" />
+              {section.items.map((item) => (
-            {item.label}
+                <Link
-          </Link>
+                  key={item.path}
+                  to={item.path}
+                  onClick={onNavigate}
+                  className={cn(
+                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                    isActive(item.path, item.end)
+                      ? 'bg-elevated text-foreground'
+                      : 'text-muted-foreground hover:bg-elevated hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
         ))}
       </nav>
       <div className="border-t border-border p-3">
@@ -71,7 +118,7 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
           onClick={onNavigate}
           className={cn(
             'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-            'text-muted-foreground hover:bg-accent hover:text-foreground'
+            'text-muted-foreground hover:bg-elevated hover:text-foreground'
           )}
         >
           <ArrowLeft className="h-4 w-4" />

frontend/src/components/admin/DataTable.tsx

@@ -53,7 +53,7 @@ export function DataTable<T>({
     <div className="overflow-x-auto rounded-lg border border-border">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-border bg-accent">
+          <tr className="border-b border-border bg-elevated">
             {columns.map((col) => (
               <th
                 key={col.key}
@@ -90,7 +90,7 @@ export function DataTable<T>({
               <tr key={i} className="border-b border-border last:border-0">
                 {columns.map((col) => (
                   <td key={col.key} className="px-4 py-3">
-                    <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
+                    <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
                   </td>
                 ))}
               </tr>
@@ -107,7 +107,7 @@ export function DataTable<T>({
             data.map((item) => (
               <tr
                 key={keyExtractor(item)}
-                className="border-b border-border last:border-0 hover:bg-accent transition-colors"
+                className="border-b border-border last:border-0 hover:bg-elevated transition-colors"
               >
                 {columns.map((col) => (
                   <td key={col.key} className={cn('px-4 py-3', col.className)}>

frontend/src/components/admin/Pagination.tsx

@@ -43,7 +43,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-elevated hover:text-foreground')}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
@@ -59,7 +59,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
                 'px-2',
                 p === page
                   ? 'bg-primary text-white'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  : 'text-muted-foreground hover:bg-elevated hover:text-foreground'
               )}
             >
               {p}
@@ -69,7 +69,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-elevated hover:text-foreground')}
         >
           <ChevronRight className="h-4 w-4" />
         </button>

frontend/src/components/admin/StatusBadge.tsx

@@ -6,22 +6,26 @@ interface StatusBadgeProps {
   variant?: BadgeVariant
   children: React.ReactNode
   className?: string
+  title?: string
 }
 
 const variantClasses: Record<BadgeVariant, string> = {
   success: 'bg-emerald-400/10 text-emerald-400',
   destructive: 'bg-red-400/10 text-red-400',
   warning: 'bg-yellow-400/10 text-yellow-400',
-  default: 'bg-accent text-muted-foreground',
+  default: 'bg-muted text-muted-foreground',
 }
 
-export function StatusBadge({ variant = 'default', children, className }: StatusBadgeProps) {
+export function StatusBadge({ variant = 'default', children, className, title }: StatusBadgeProps) {
   return (
-    <span className={cn(
+    <span
-      'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+      className={cn(
-      variantClasses[variant],
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-      className
+        variantClasses[variant],
-    )}>
+        className
+      )}
+      title={title}
+    >
       {children}
     </span>
   )

frontend/src/components/common/ConfirmButton.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+interface ConfirmButtonProps {
+  onConfirm: () => void
+  children: React.ReactNode
+  confirmLabel?: string
+  className?: string
+  confirmClassName?: string
+  timeoutMs?: number
+  'aria-label'?: string
+}
+
+/**
+ * Two-click inline confirm button.
+ * First click arms the button (shows confirm state).
+ * Second click executes the action.
+ * Auto-resets after timeoutMs (default 3000ms).
+ */
+export function ConfirmButton({
+  onConfirm,
+  children,
+  confirmLabel = 'Confirm?',
+  className,
+  confirmClassName,
+  timeoutMs = 3000,
+  'aria-label': ariaLabel,
+}: ConfirmButtonProps) {
+  const [armed, setArmed] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const reset = useCallback(() => {
+    setArmed(false)
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  const handleClick = () => {
+    if (armed) {
+      reset()
+      onConfirm()
+    } else {
+      setArmed(true)
+      timerRef.current = setTimeout(reset, timeoutMs)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      onBlur={reset}
+      aria-label={ariaLabel}
+      className={cn(armed ? confirmClassName : className)}
+    >
+      {armed ? confirmLabel : children}
+    </button>
+  )
+}
+
+export default ConfirmButton

frontend/src/pages/AccountSettingsPage.tsx

@@ -5,7 +5,6 @@ import {
   AlertTriangle,
   ArrowRight,
   Building2,
-  CalendarClock,
   Check,
   Clock,
   Copy,
@@ -31,6 +30,7 @@ import { TransferOwnershipModal } from '@/components/account/TransferOwnershipMo
 import { LeaveAccountModal } from '@/components/account/LeaveAccountModal'
 import { DeleteAccountModal } from '@/components/account/DeleteAccountModal'
 import { Button } from '@/components/ui/Button'
+import { ConfirmButton } from '@/components/common/ConfirmButton'
 import { Spinner } from '@/components/common/Spinner'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -56,12 +56,12 @@ function SettingsLinkCard({ to, icon, title, description, badge }: SettingsLinkC
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-start gap-3">
-          <div className="rounded-xl bg-accent p-2 text-muted-foreground">{icon}</div>
+          <div className="rounded-xl bg-elevated p-2 text-muted-foreground">{icon}</div>
           <div>
             <div className="flex items-center gap-2">
               <h3 className="text-base font-semibold text-foreground">{title}</h3>
               {badge && (
-                <span className="rounded-full bg-accent px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+                <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
                   {badge}
                 </span>
               )}
@@ -75,37 +75,6 @@ function SettingsLinkCard({ to, icon, title, description, badge }: SettingsLinkC
   )
 }
 
-function OverviewStat({
-  icon,
-  label,
-  value,
-  tone = 'default',
-}: {
-  icon: React.ReactNode
-  label: string
-  value: string
-  tone?: 'default' | 'good' | 'warn'
-}) {
-  return (
-    <div className="rounded-2xl border border-border bg-card p-4">
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <span
-          className={cn(
-            'inline-flex rounded-lg p-2',
-            tone === 'good' && 'bg-emerald-400/10 text-emerald-400',
-            tone === 'warn' && 'bg-yellow-400/10 text-yellow-400',
-            tone === 'default' && 'bg-accent text-muted-foreground'
-          )}
-        >
-          {icon}
-        </span>
-        {label}
-      </div>
-      <p className="mt-3 text-xl font-semibold text-foreground">{value}</p>
-    </div>
-  )
-}
-
 function UsageStat({
   label,
   current,
@@ -135,7 +104,7 @@ function UsageStat({
         </span>
       </p>
       {!isUnlimited && (
-        <div className="mt-3 h-2 overflow-hidden rounded-full bg-accent">
+        <div className="mt-3 h-2 overflow-hidden rounded-full bg-muted">
           <div
             className={cn(
               'h-full rounded-full transition-all',
@@ -212,7 +181,7 @@ export function AccountSettingsPage() {
 
   const pendingInvites = useMemo(() => invites.filter((invite) => !invite.used_at), [invites])
   const ownerMember = useMemo(() => members.find((member) => member.account_role === 'owner') ?? null, [members])
-  const currentMembership = useMemo(() => members.find((member) => member.id === user?.id) ?? null, [members, user?.id])
+
 
   const handleCopyDisplayCode = async () => {
     if (!account?.display_code) return
@@ -312,72 +281,11 @@ export function AccountSettingsPage() {
     <>
       <PageMeta title="Account Settings" />
       <div className="space-y-8">
-        <div className="rounded-3xl border border-border bg-card p-6 sm:p-8">
+        <div>
-          <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+          <h1 className="text-2xl font-bold font-heading text-foreground">Account Management</h1>
-            <div className="max-w-2xl">
+          <p className="mt-1 text-muted-foreground">
-              <div className="flex items-center gap-3">
+            Manage your account identity, billing, access, and workspace settings.
-                <div className="rounded-2xl bg-accent p-3 text-muted-foreground">
+          </p>
-                  <Building2 className="h-7 w-7" />
-                </div>
-                <div>
-                  <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
-                    Account Management
-                  </h1>
-                  <p className="mt-1 text-muted-foreground">
-                    Manage your account identity, billing, access, and workspace settings from one place.
-                  </p>
-                </div>
-              </div>
-
-              <div className="mt-6 flex flex-wrap gap-2">
-                <span className="rounded-full bg-accent-dim px-3 py-1 text-sm font-medium text-accent-text">
-                  {plan.charAt(0).toUpperCase() + plan.slice(1)} plan
-                </span>
-                {sub && (
-                  <span
-                    className={cn(
-                      'rounded-full px-3 py-1 text-sm font-medium',
-                      sub.status === 'active' && 'bg-success-dim text-success',
-                      sub.status === 'trialing' && 'bg-info-dim text-info',
-                      sub.status === 'past_due' && 'bg-warning-dim text-warning',
-                      sub.status === 'canceled' && 'bg-danger-dim text-danger',
-                      sub.status === 'orphaned' && 'bg-muted text-muted-foreground'
-                    )}
-                  >
-                    {sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')}
-                  </span>
-                )}
-                <span className="rounded-full bg-muted px-3 py-1 text-sm text-muted-foreground">
-                  {isAccountOwner ? 'Owner access' : `Role: ${currentMembership?.account_role ?? user?.account_role ?? 'member'}`}
-                </span>
-              </div>
-            </div>
-
-            <div className="grid w-full gap-3 sm:grid-cols-2 lg:w-[420px]">
-              <OverviewStat
-                icon={<Users className="h-4 w-4" />}
-                label="Members"
-                value={isAccountOwner ? String(members.length) : String(usage?.user_count ?? 1)}
-              />
-              <OverviewStat
-                icon={<Mail className="h-4 w-4" />}
-                label="Pending invites"
-                value={isAccountOwner ? String(pendingInvites.length) : 'Owner only'}
-                tone={pendingInvites.length > 0 ? 'warn' : 'default'}
-              />
-              <OverviewStat
-                icon={<CalendarClock className="h-4 w-4" />}
-                label="Account created"
-                value={formatShortDate(account?.created_at)}
-              />
-              <OverviewStat
-                icon={<ShieldCheck className="h-4 w-4" />}
-                label="Security"
-                value={plan === 'team' ? 'SSO ready' : 'Password auth'}
-                tone={plan === 'team' ? 'good' : 'default'}
-              />
-            </div>
-          </div>
         </div>
 
         <div className="grid gap-6 xl:grid-cols-[1.25fr_0.95fr]">
@@ -452,7 +360,7 @@ export function AccountSettingsPage() {
                       </Button>
                     </div>
                     <p className="mt-2 text-xs text-muted-foreground">
-                      Useful when admins or teammates need to join this account.
+                      Share this code with teammates so they can join your account during registration.
                     </p>
                   </div>
 
@@ -610,6 +518,14 @@ export function AccountSettingsPage() {
           </section>
 
           <aside className="space-y-6">
+            {!isAccountOwner && (
+              <div className="rounded-2xl border border-border bg-card/50 p-5">
+                <p className="text-sm text-muted-foreground">
+                  Membership, invites, branding, and integrations are managed by the account owner. Contact your admin to make changes.
+                </p>
+              </div>
+            )}
+
             {isAccountOwner && (
               <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
                 <div className="flex items-center gap-2">
@@ -618,7 +534,7 @@ export function AccountSettingsPage() {
                 </div>
 
                 {members.length === 0 ? (
-                  <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
+                  <p className="mt-4 text-sm text-muted-foreground">No team members yet. Use the invite form below to add your first teammate.</p>
                 ) : (
                   <div className="mt-4 space-y-3">
                     {members.map((member) => (
@@ -668,13 +584,15 @@ export function AccountSettingsPage() {
                               </select>
                             )}
                             {member.account_role !== 'owner' && (
-                              <button
+                              <ConfirmButton
-                                onClick={() => handleRemoveMember(member.id)}
+                                onConfirm={() => handleRemoveMember(member.id)}
+                                confirmLabel="Remove?"
                                 className="p-1 text-muted-foreground hover:text-danger"
+                                confirmClassName="rounded px-1.5 py-0.5 text-xs font-medium text-danger bg-danger-dim"
                                 aria-label={`Remove ${member.name}`}
                               >
                                 <X className="h-4 w-4" />
-                              </button>
+                              </ConfirmButton>
                             )}
                           </div>
                         </div>
@@ -758,7 +676,7 @@ export function AccountSettingsPage() {
                     ))}
                   </div>
                 ) : (
-                  <p className="mt-4 text-sm text-muted-foreground">No pending invites right now.</p>
+                  <p className="mt-4 text-sm text-muted-foreground">No pending invites. Use the form above to invite teammates by email.</p>
                 )}
               </div>
             )}
@@ -784,7 +702,7 @@ export function AccountSettingsPage() {
                     toast.success('Preference saved')
                   }}
                   className={cn(
-                    'mt-2 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'mt-2 block w-full rounded-md border border-border bg-card px-3 py-2',
                     'text-sm text-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}

frontend/src/pages/admin/AccountDetailPage.tsx

@@ -19,6 +19,7 @@ import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/common/Modal'
 import { EmptyState, StatusBadge } from '@/components/admin'
+import { ConfirmButton } from '@/components/common/ConfirmButton'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
@@ -57,11 +58,11 @@ export function AccountDetailPage() {
   })
   const [inviteLoading, setInviteLoading] = useState(false)
 
-  const [planModalOpen, setPlanModalOpen] = useState(false)
+  const [editingPlan, setEditingPlan] = useState(false)
   const [selectedPlan, setSelectedPlan] = useState('free')
   const [planSaving, setPlanSaving] = useState(false)
 
-  const [trialModalOpen, setTrialModalOpen] = useState(false)
+  const [editingTrial, setEditingTrial] = useState(false)
   const [trialDays, setTrialDays] = useState('14')
   const [trialSaving, setTrialSaving] = useState(false)
 
@@ -189,7 +190,7 @@ export function AccountDetailPage() {
     try {
       await adminApi.updateAccountSubscriptionPlan(account.id, selectedPlan)
       toast.success(`Plan updated to ${selectedPlan}`)
-      setPlanModalOpen(false)
+      setEditingPlan(false)
       loadAccount()
     } catch {
       toast.error('Failed to update plan')
@@ -204,7 +205,7 @@ export function AccountDetailPage() {
     try {
       await adminApi.extendAccountTrial(account.id, parseInt(trialDays, 10))
       toast.success(`Trial updated by ${trialDays} days`)
-      setTrialModalOpen(false)
+      setEditingTrial(false)
       loadAccount()
     } catch {
       toast.error('Failed to update trial')
@@ -249,7 +250,7 @@ export function AccountDetailPage() {
       <div className="flex items-center gap-4">
         <button
           onClick={() => navigate('/admin/accounts')}
-          className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="rounded-md border border-border p-2 text-muted-foreground hover:bg-elevated hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
         </button>
@@ -257,7 +258,7 @@ export function AccountDetailPage() {
           <div className="flex items-center gap-3">
             <Building2 className="h-6 w-6 text-muted-foreground" />
             <h1 className="truncate text-2xl font-bold text-foreground">{account.name}</h1>
-            <StatusBadge variant="default">{account.display_code}</StatusBadge>
+            <StatusBadge variant="default" title="Unique code for joining this account">{account.display_code}</StatusBadge>
           </div>
           <p className="mt-1 text-sm text-muted-foreground">
             Manage account settings, subscription, invites, and users from one place.
@@ -367,10 +368,22 @@ export function AccountDetailPage() {
                           <option value="engineer">Engineer</option>
                           <option value="viewer">Viewer</option>
                         </select>
-                        <Button variant="secondary" size="sm" onClick={() => handleToggleActive(member)}>
+                        {member.is_active ? (
-                          {member.is_active ? <UserX className="h-4 w-4" /> : <UserCheck className="h-4 w-4" />}
+                          <ConfirmButton
-                          {member.is_active ? 'Deactivate' : 'Activate'}
+                            onConfirm={() => handleToggleActive(member)}
-                        </Button>
+                            confirmLabel="Confirm deactivate?"
+                            className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-elevated"
+                            confirmClassName="inline-flex items-center rounded-md border border-danger/30 bg-danger-dim px-3 py-1.5 text-sm font-medium text-danger transition-colors"
+                          >
+                            <UserX className="h-4 w-4" />
+                            Deactivate
+                          </ConfirmButton>
+                        ) : (
+                          <Button variant="secondary" size="sm" onClick={() => handleToggleActive(member)}>
+                            <UserCheck className="h-4 w-4" />
+                            Activate
+                          </Button>
+                        )}
                         <Button variant="secondary" size="sm" onClick={() => navigate(`/admin/users/${member.id}`)}>
                           View User
                         </Button>
@@ -379,8 +392,9 @@ export function AccountDetailPage() {
                   </div>
                 ))
               ) : (
-                <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+                <div className="rounded-xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
-                  No users yet. Create or invite someone into this account.
+                  <p>No users yet.</p>
+                  <p className="mt-1">Use <strong className="text-foreground">Create User</strong> or <strong className="text-foreground">Invite User</strong> above to add members.</p>
                 </div>
               )}
             </div>
@@ -414,29 +428,71 @@ export function AccountDetailPage() {
               </div>
             </div>
 
-            <div className="mt-4 flex flex-wrap gap-2">
+            {editingPlan ? (
-              <Button
+              <div className="mt-4 flex items-center gap-2">
-                variant="secondary"
+                <select
-                size="sm"
+                  value={selectedPlan}
-                onClick={() => {
+                  onChange={(e) => setSelectedPlan(e.target.value)}
-                  setSelectedPlan(account.subscription?.plan ?? 'free')
+                  className={cn(
-                  setPlanModalOpen(true)
+                    'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
-                }}
+                    'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              >
+                  )}
-                <Crown className="h-4 w-4" />
+                >
-                Change Plan
+                  <option value="free">Free</option>
-              </Button>
+                  <option value="pro">Pro</option>
-              <Button variant="secondary" size="sm" onClick={() => setTrialModalOpen(true)}>
+                  <option value="team">Team</option>
-                <CalendarClock className="h-4 w-4" />
+                </select>
-                Start or Extend Trial
+                <Button size="sm" onClick={handleUpdatePlan} loading={planSaving}>Save</Button>
-              </Button>
+                <Button variant="secondary" size="sm" onClick={() => setEditingPlan(false)}>Cancel</Button>
-            </div>
+              </div>
+            ) : editingTrial ? (
+              <div className="mt-4 flex items-center gap-2">
+                <Input
+                  type="number"
+                  min={1}
+                  max={90}
+                  value={trialDays}
+                  onChange={(e) => setTrialDays(e.target.value)}
+                  className="w-24"
+                  placeholder="Days"
+                />
+                <Button size="sm" onClick={handleExtendTrial} loading={trialSaving}>Save</Button>
+                <Button variant="secondary" size="sm" onClick={() => setEditingTrial(false)}>Cancel</Button>
+              </div>
+            ) : (
+              <div className="mt-4 flex flex-wrap gap-2">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedPlan(account.subscription?.plan ?? 'free')
+                    setEditingPlan(true)
+                  }}
+                >
+                  <Crown className="h-4 w-4" />
+                  Change Plan
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => {
+                    setTrialDays('14')
+                    setEditingTrial(true)
+                  }}
+                >
+                  <CalendarClock className="h-4 w-4" />
+                  Extend Trial
+                </Button>
+              </div>
+            )}
           </div>
 
           <div className="rounded-2xl border border-border bg-card p-5">
             <div className="flex items-center justify-between gap-3">
               <h2 className="text-lg font-semibold text-foreground">Pending Invites</h2>
-              <StatusBadge variant="default">{account.pending_invite_count}</StatusBadge>
+              {account.pending_invite_count > 0 && (
+                <StatusBadge variant="warning">{account.pending_invite_count} pending</StatusBadge>
+              )}
             </div>
             <div className="mt-4 space-y-3">
               {account.invites.length > 0 ? (
@@ -450,8 +506,9 @@ export function AccountDetailPage() {
                   </div>
                 ))
               ) : (
-                <div className="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+                <div className="rounded-xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
-                  No pending invites for this account.
+                  <p>No pending invites.</p>
+                  <p className="mt-1">Use <strong className="text-foreground">Invite User</strong> above to send an invitation.</p>
                 </div>
               )}
             </div>
@@ -561,7 +618,7 @@ export function AccountDetailPage() {
             </code>
             <button
               onClick={copyTempPassword}
-              className="rounded-md border border-border p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              className="rounded-md border border-border p-2 text-muted-foreground transition-colors hover:bg-elevated hover:text-foreground"
             >
               {copiedPassword ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
             </button>
@@ -569,49 +626,6 @@ export function AccountDetailPage() {
         </div>
       </Modal>
 
-      <Modal
-        isOpen={planModalOpen}
-        onClose={() => setPlanModalOpen(false)}
-        title="Change Account Plan"
-        size="sm"
-        footer={(
-          <div className="flex justify-end gap-3">
-            <Button variant="secondary" onClick={() => setPlanModalOpen(false)}>Cancel</Button>
-            <Button onClick={handleUpdatePlan} loading={planSaving}>Save</Button>
-          </div>
-        )}
-      >
-        <select
-          value={selectedPlan}
-          onChange={(e) => setSelectedPlan(e.target.value)}
-          className={cn(
-            'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-            'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-          )}
-        >
-          <option value="free">Free</option>
-          <option value="pro">Pro</option>
-          <option value="team">Team</option>
-        </select>
-      </Modal>
-
-      <Modal
-        isOpen={trialModalOpen}
-        onClose={() => setTrialModalOpen(false)}
-        title="Start or Extend Trial"
-        size="sm"
-        footer={(
-          <div className="flex justify-end gap-3">
-            <Button variant="secondary" onClick={() => setTrialModalOpen(false)}>Cancel</Button>
-            <Button onClick={handleExtendTrial} loading={trialSaving}>Save</Button>
-          </div>
-        )}
-      >
-        <div>
-          <label className="mb-1 block text-sm font-medium text-foreground">Days</label>
-          <Input type="number" min={1} max={90} value={trialDays} onChange={(e) => setTrialDays(e.target.value)} />
-        </div>
-      </Modal>
     </div>
   )
 }

frontend/src/pages/admin/AccountsPage.tsx

@@ -0,0 +1,821 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Building2,
+  Check,
+  Copy,
+  ExternalLink,
+  Loader2,
+  Mail,
+  Plus,
+  Search,
+  Sparkles,
+  UserPlus,
+} from 'lucide-react'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import {
+  DataTable,
+  EmptyState,
+  PageHeader,
+  Pagination,
+  SearchInput,
+  StatusBadge,
+  ActionMenu,
+  type Column,
+} from '@/components/admin'
+import { Modal } from '@/components/common/Modal'
+import { adminApi } from '@/api/admin'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import type {
+  AdminAccountListItem,
+  AdminUserListItem,
+} from '@/types/admin'
+
+function formatDate(value: string | null) {
+  if (!value) return 'Never'
+  return new Date(value).toLocaleDateString()
+}
+
+function planBadgeVariant(status: string | undefined): 'success' | 'warning' | 'destructive' | 'default' {
+  switch (status) {
+    case 'active': return 'success'
+    case 'trialing': return 'warning'
+    case 'past_due': return 'warning'
+    case 'canceled': return 'destructive'
+    default: return 'default'
+  }
+}
+
+export function UsersPage() {
+  const navigate = useNavigate()
+
+  const [accounts, setAccounts] = useState<AdminAccountListItem[]>([])
+  const [accountsLoading, setAccountsLoading] = useState(true)
+  const [accountSearch, setAccountSearch] = useState('')
+  const [planFilter, setPlanFilter] = useState('all')
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const accountPageSize = 12
+  const [showArchived, setShowArchived] = useState(false)
+
+  const [people, setPeople] = useState<AdminUserListItem[]>([])
+  const [peopleLoading, setPeopleLoading] = useState(false)
+  const [peopleSearch, setPeopleSearch] = useState('')
+  const [peoplePage, setPeoplePage] = useState(1)
+  const [peopleTotal, setPeopleTotal] = useState(0)
+  const peoplePageSize = 12
+
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [createForm, setCreateForm] = useState({
+    email: '',
+    name: '',
+    account_mode: 'personal' as 'existing' | 'personal',
+    account_display_code: '',
+    account_role: 'engineer' as 'engineer' | 'viewer',
+    send_email: true,
+  })
+  const [createLoading, setCreateLoading] = useState(false)
+  const [tempPassword, setTempPassword] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [showInviteModal, setShowInviteModal] = useState(false)
+  const [inviteForm, setInviteForm] = useState({
+    email: '',
+    account_display_code: '',
+    role: 'engineer' as 'engineer' | 'viewer',
+  })
+  const [inviteLoading, setInviteLoading] = useState(false)
+  const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
+  const [createAccountForm, setCreateAccountForm] = useState({ name: '', plan: 'free' as 'free' | 'pro' | 'team' })
+  const [createAccountLoading, setCreateAccountLoading] = useState(false)
+
+  const fetchAccounts = useCallback(async () => {
+    setAccountsLoading(true)
+    try {
+      const accountsData = await adminApi.listAccounts({
+        page,
+        size: accountPageSize,
+        search: accountSearch || undefined,
+        plan: planFilter !== 'all' ? planFilter : undefined,
+        status: statusFilter !== 'all' ? statusFilter : undefined,
+        include_archived: showArchived || undefined,
+      })
+      setAccounts(accountsData.items)
+      setTotal(accountsData.total)
+    } catch {
+      toast.error('Failed to load accounts')
+    } finally {
+      setAccountsLoading(false)
+    }
+  }, [accountPageSize, accountSearch, page, planFilter, showArchived, statusFilter])
+
+  const fetchPeople = useCallback(async () => {
+    if (!peopleSearch.trim()) {
+      setPeopleLoading(false)
+      setPeople([])
+      setPeopleTotal(0)
+      return
+    }
+    setPeopleLoading(true)
+    try {
+      const data = await adminApi.listUsers({
+        page: peoplePage,
+        size: peoplePageSize,
+        search: peopleSearch || undefined,
+        include_archived: showArchived || undefined,
+      })
+      setPeople(data.items)
+      setPeopleTotal(data.total)
+    } catch {
+      toast.error('Failed to load people search')
+    } finally {
+      setPeopleLoading(false)
+    }
+  }, [peoplePage, peoplePageSize, peopleSearch, showArchived])
+
+  useEffect(() => {
+    fetchAccounts()
+  }, [fetchAccounts])
+
+  useEffect(() => {
+    fetchPeople()
+  }, [fetchPeople])
+
+  const handleCreateUser = async () => {
+    if (!createForm.email || !createForm.name) return
+    if (createForm.account_mode === 'existing' && !createForm.account_display_code) {
+      toast.error('Account display code is required')
+      return
+    }
+    setCreateLoading(true)
+    try {
+      const result = await adminApi.createUser({
+        email: createForm.email,
+        name: createForm.name,
+        account_mode: createForm.account_mode,
+        account_display_code: createForm.account_mode === 'existing' ? createForm.account_display_code : undefined,
+        account_role: createForm.account_mode === 'existing' ? createForm.account_role : undefined,
+        send_email: createForm.send_email,
+      })
+      setShowCreateModal(false)
+      setTempPassword(result.temporary_password)
+      setCopied(false)
+      toast.success(result.email_sent ? 'User created and welcome email sent' : 'User created')
+      setCreateForm({
+        email: '',
+        name: '',
+        account_mode: 'personal',
+        account_display_code: '',
+        account_role: 'engineer',
+        send_email: true,
+      })
+      fetchAccounts()
+    } catch (err: unknown) {
+      if (err && typeof err === 'object' && 'response' in err) {
+        const axiosErr = err as { response?: { data?: { detail?: string } } }
+        toast.error(axiosErr.response?.data?.detail || 'Failed to create user')
+      } else {
+        toast.error('Failed to create user')
+      }
+    } finally {
+      setCreateLoading(false)
+    }
+  }
+
+  const handleCopyPassword = async () => {
+    if (!tempPassword) return
+    await navigator.clipboard.writeText(tempPassword)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleInviteUser = async () => {
+    if (!inviteForm.email || !inviteForm.account_display_code) return
+    setInviteLoading(true)
+    try {
+      const result = await adminApi.createInvite({
+        email: inviteForm.email,
+        account_display_code: inviteForm.account_display_code,
+        role: inviteForm.role,
+      })
+      setShowInviteModal(false)
+      setInviteForm({ email: '', account_display_code: '', role: 'engineer' })
+      toast.success(result.email_sent ? 'Invite sent' : 'Invite created (email not configured)')
+      fetchAccounts()
+    } catch (err: unknown) {
+      if (err && typeof err === 'object' && 'response' in err) {
+        const axiosErr = err as { response?: { data?: { detail?: string } } }
+        toast.error(axiosErr.response?.data?.detail || 'Failed to send invite')
+      } else {
+        toast.error('Failed to send invite')
+      }
+    } finally {
+      setInviteLoading(false)
+    }
+  }
+
+  const handleCreateAccount = async () => {
+    if (!createAccountForm.name.trim()) return
+    setCreateAccountLoading(true)
+    try {
+      const created = await adminApi.createAccount({
+        name: createAccountForm.name.trim(),
+        plan: createAccountForm.plan,
+      })
+      toast.success('Account created')
+      setShowCreateAccountModal(false)
+      setCreateAccountForm({ name: '', plan: 'free' })
+      navigate(`/admin/accounts/${created.id}`)
+    } catch {
+      toast.error('Failed to create account')
+    } finally {
+      setCreateAccountLoading(false)
+    }
+  }
+
+  const accountColumns: Column<AdminAccountListItem>[] = [
+    {
+      key: 'name',
+      header: 'Account',
+      render: (account) => (
+        <div className="min-w-0">
+          <button
+            type="button"
+            onClick={() => navigate(`/admin/accounts/${account.id}`)}
+            className="text-sm font-medium text-foreground hover:underline"
+          >
+            {account.name}
+          </button>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {account.display_code}
+            {account.owner ? ` · ${account.owner.name}` : ''}
+          </p>
+        </div>
+      ),
+    },
+    {
+      key: 'plan',
+      header: 'Plan',
+      render: (account) => (
+        <StatusBadge variant="default">
+          {account.subscription?.plan ?? 'free'}
+        </StatusBadge>
+      ),
+      className: 'w-[100px]',
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (account) => {
+        if (!account.subscription) {
+          return <StatusBadge variant="warning">No subscription</StatusBadge>
+        }
+        return (
+          <StatusBadge variant={planBadgeVariant(account.subscription.status)}>
+            {account.subscription.status}
+          </StatusBadge>
+        )
+      },
+      className: 'w-[120px]',
+    },
+    {
+      key: 'members',
+      header: 'Members',
+      render: (account) => (
+        <span className="text-sm text-foreground">
+          {account.active_member_count}
+          <span className="text-muted-foreground"> / {account.member_count}</span>
+        </span>
+      ),
+      className: 'w-[100px]',
+    },
+    {
+      key: 'usage',
+      header: 'Usage',
+      render: (account) => (
+        <span className="text-sm text-muted-foreground">
+          {account.usage.tree_count} flows · {account.usage.session_count_this_month} sessions
+        </span>
+      ),
+      className: 'w-[160px]',
+    },
+    {
+      key: 'created',
+      header: 'Created',
+      render: (account) => (
+        <span className="text-sm text-muted-foreground">{formatDate(account.created_at)}</span>
+      ),
+      className: 'w-[100px]',
+    },
+    {
+      key: 'actions',
+      header: '',
+      render: (account) => (
+        <ActionMenu
+          items={[
+            {
+              label: 'Manage Account',
+              icon: <Building2 className="h-4 w-4" />,
+              onClick: () => navigate(`/admin/accounts/${account.id}`),
+            },
+            ...(account.owner ? [{
+              label: 'View Owner',
+              icon: <ExternalLink className="h-4 w-4" />,
+              onClick: () => navigate(`/admin/users/${account.owner?.id}`),
+            }] : []),
+          ]}
+        />
+      ),
+      className: 'w-[48px]',
+    },
+  ]
+
+  const peopleColumns: Column<AdminUserListItem>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      render: (user) => (
+        <div className="min-w-0">
+          <button
+            type="button"
+            onClick={() => navigate(`/admin/users/${user.id}`)}
+            className="text-sm font-medium text-foreground hover:underline"
+          >
+            {user.name}
+          </button>
+          <p className="mt-0.5 text-xs text-muted-foreground">{user.email}</p>
+        </div>
+      ),
+    },
+    {
+      key: 'role',
+      header: 'Role',
+      render: (user) => (
+        <div className="flex flex-wrap gap-1">
+          {user.is_super_admin && <StatusBadge variant="destructive">Super Admin</StatusBadge>}
+          <StatusBadge variant="default">{user.role}</StatusBadge>
+        </div>
+      ),
+      className: 'w-[140px]',
+    },
+    {
+      key: 'account',
+      header: 'Account',
+      render: (user) => (
+        <span className="text-sm text-muted-foreground">
+          {user.account_name || 'No account'}
+          {user.account_display_code && (
+            <span className="ml-1 text-xs opacity-60">{user.account_display_code}</span>
+          )}
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (user) => (
+        <div className="flex gap-1">
+          <StatusBadge variant={user.is_active ? 'success' : 'destructive'}>
+            {user.is_active ? 'Active' : 'Inactive'}
+          </StatusBadge>
+          {user.deleted_at && <StatusBadge variant="warning">Archived</StatusBadge>}
+        </div>
+      ),
+      className: 'w-[140px]',
+    },
+    {
+      key: 'last_login',
+      header: 'Last Login',
+      render: (user) => (
+        <span className="text-sm text-muted-foreground">{formatDate(user.last_login)}</span>
+      ),
+      className: 'w-[100px]',
+    },
+    {
+      key: 'actions',
+      header: '',
+      render: (user) => (
+        <ActionMenu
+          items={[
+            {
+              label: 'View Detail',
+              icon: <ExternalLink className="h-4 w-4" />,
+              onClick: () => navigate(`/admin/users/${user.id}`),
+            },
+          ]}
+        />
+      ),
+      className: 'w-[48px]',
+    },
+  ]
+
+  const accountTotalPages = Math.max(1, Math.ceil(total / accountPageSize))
+  const peopleTotalPages = Math.max(1, Math.ceil(peopleTotal / peoplePageSize))
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Accounts"
+        description="Manage customer accounts, subscriptions, and users."
+        action={
+          <div className="flex items-center gap-3">
+            <Button variant="secondary" onClick={() => setShowCreateAccountModal(true)}>
+              <Plus className="h-4 w-4" />
+              Create Account
+            </Button>
+            <Button variant="secondary" onClick={() => setShowInviteModal(true)}>
+              <Mail className="h-4 w-4" />
+              Invite User
+            </Button>
+            <Button onClick={() => setShowCreateModal(true)}>
+              <UserPlus className="h-4 w-4" />
+              Create User
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Filters */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <SearchInput
+          value={accountSearch}
+          onSearch={(value) => {
+            setAccountSearch(value)
+            setPage(1)
+          }}
+          placeholder="Search accounts, owners, or codes..."
+          className="w-full sm:max-w-sm"
+        />
+        <div className="flex flex-wrap items-center gap-3">
+          <select
+            value={planFilter}
+            onChange={(e) => {
+              setPlanFilter(e.target.value)
+              setPage(1)
+            }}
+            className={cn(
+              'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+              'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+            )}
+          >
+            <option value="all">All plans</option>
+            <option value="free">Free</option>
+            <option value="pro">Pro</option>
+            <option value="team">Team</option>
+          </select>
+          <select
+            value={statusFilter}
+            onChange={(e) => {
+              setStatusFilter(e.target.value)
+              setPage(1)
+            }}
+            className={cn(
+              'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+              'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+            )}
+          >
+            <option value="all">All statuses</option>
+            <option value="active">Active</option>
+            <option value="trialing">Trialing</option>
+            <option value="past_due">Past due</option>
+            <option value="canceled">Canceled</option>
+            <option value="orphaned">Orphaned</option>
+          </select>
+          <label className="flex items-center gap-2 text-sm text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={showArchived}
+              onChange={(e) => {
+                setShowArchived(e.target.checked)
+                setPage(1)
+                setPeoplePage(1)
+              }}
+              className="rounded border-border bg-card"
+            />
+            Archived
+          </label>
+        </div>
+      </div>
+
+      {/* Accounts table */}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-medium text-muted-foreground">
+            {accountsLoading ? 'Loading...' : `${total} accounts`}
+          </h2>
+        </div>
+
+        <DataTable
+          columns={accountColumns}
+          data={accounts}
+          keyExtractor={(a) => a.id}
+          isLoading={accountsLoading}
+          skeletonRows={6}
+          emptyState={
+            <EmptyState
+              icon={<Building2 className="h-8 w-8" />}
+              title="No accounts found"
+              description="Adjust the filters or clear the search."
+            />
+          }
+        />
+
+        <Pagination
+          page={page}
+          totalPages={accountTotalPages}
+          total={total}
+          pageSize={accountPageSize}
+          onPageChange={setPage}
+        />
+      </section>
+
+      {/* Global people search */}
+      <section className="space-y-4 rounded-xl border border-border bg-card p-5">
+        <div>
+          <div className="flex items-center gap-2">
+            <Search className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-base font-semibold text-foreground">Global People Search</h2>
+          </div>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Find a user across all accounts by name or email.
+          </p>
+        </div>
+
+        <SearchInput
+          value={peopleSearch}
+          onSearch={(value) => {
+            setPeopleSearch(value)
+            setPeoplePage(1)
+          }}
+          placeholder="Search by name, email, or account..."
+          className="max-w-sm"
+        />
+
+        {peopleSearch.trim() ? (
+          people.length > 0 ? (
+            <div className="space-y-3">
+              <DataTable
+                columns={peopleColumns}
+                data={people}
+                keyExtractor={(p) => p.id}
+                isLoading={peopleLoading}
+                skeletonRows={4}
+                emptyState={
+                  <EmptyState
+                    icon={<Sparkles className="h-8 w-8" />}
+                    title="No matching people"
+                    description="Try another name or email."
+                  />
+                }
+              />
+              <Pagination
+                page={peoplePage}
+                totalPages={peopleTotalPages}
+                total={peopleTotal}
+                pageSize={peoplePageSize}
+                onPageChange={setPeoplePage}
+              />
+            </div>
+          ) : !peopleLoading ? (
+            <EmptyState
+              icon={<Sparkles className="h-8 w-8" />}
+              title="No matching people"
+              description="Try another name or email."
+            />
+          ) : (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Searching...
+            </div>
+          )
+        ) : (
+          <p className="text-sm text-muted-foreground">Type a name or email to search.</p>
+        )}
+      </section>
+
+      {/* Create Account modal */}
+      <Modal
+        isOpen={showCreateAccountModal}
+        onClose={() => setShowCreateAccountModal(false)}
+        title="Create Account"
+        size="sm"
+        footer={(
+          <div className="flex justify-end gap-3">
+            <Button variant="secondary" onClick={() => setShowCreateAccountModal(false)}>Cancel</Button>
+            <Button onClick={handleCreateAccount} disabled={!createAccountForm.name.trim()} loading={createAccountLoading}>
+              {createAccountLoading ? 'Creating...' : 'Create Account'}
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Name</label>
+            <Input
+              value={createAccountForm.name}
+              onChange={(e) => setCreateAccountForm((form) => ({ ...form, name: e.target.value }))}
+              placeholder="Acme MSP"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Initial Plan</label>
+            <select
+              value={createAccountForm.plan}
+              onChange={(e) => setCreateAccountForm((form) => ({ ...form, plan: e.target.value as 'free' | 'pro' | 'team' }))}
+              className={cn(
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+              )}
+            >
+              <option value="free">Free</option>
+              <option value="pro">Pro</option>
+              <option value="team">Team</option>
+            </select>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Create User modal */}
+      <Modal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title="Create User"
+        size="sm"
+        footer={(
+          <div className="flex justify-end gap-3">
+            <Button variant="secondary" onClick={() => setShowCreateModal(false)}>Cancel</Button>
+            <Button onClick={handleCreateUser} disabled={!createForm.email || !createForm.name} loading={createLoading}>
+              {createLoading ? 'Creating...' : 'Create User'}
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
+            <Input
+              type="text"
+              value={createForm.name}
+              onChange={(e) => setCreateForm((form) => ({ ...form, name: e.target.value }))}
+              placeholder="Full name"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
+            <Input
+              type="email"
+              value={createForm.email}
+              onChange={(e) => setCreateForm((form) => ({ ...form, email: e.target.value }))}
+              placeholder="user@example.com"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Mode</label>
+            <select
+              value={createForm.account_mode}
+              onChange={(e) => setCreateForm((form) => ({ ...form, account_mode: e.target.value as 'existing' | 'personal' }))}
+              className={cn(
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+              )}
+            >
+              <option value="personal">Personal (new account)</option>
+              <option value="existing">Join existing account</option>
+            </select>
+          </div>
+          {createForm.account_mode === 'existing' && (
+            <>
+              <div>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
+                <Input
+                  type="text"
+                  value={createForm.account_display_code}
+                  onChange={(e) => setCreateForm((form) => ({ ...form, account_display_code: e.target.value }))}
+                  placeholder="e.g. ABC12345"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Role</label>
+                <select
+                  value={createForm.account_role}
+                  onChange={(e) => setCreateForm((form) => ({ ...form, account_role: e.target.value as 'engineer' | 'viewer' }))}
+                  className={cn(
+                    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+                  )}
+                >
+                  <option value="engineer">Engineer</option>
+                  <option value="viewer">Viewer</option>
+                </select>
+              </div>
+            </>
+          )}
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="send-email"
+              checked={createForm.send_email}
+              onChange={(e) => setCreateForm((form) => ({ ...form, send_email: e.target.checked }))}
+              className="rounded border-border bg-card"
+            />
+            <label htmlFor="send-email" className="text-sm text-muted-foreground">
+              Send welcome email with temporary password
+            </label>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Temp password modal */}
+      <Modal
+        isOpen={!!tempPassword}
+        onClose={() => setTempPassword(null)}
+        title="User Created"
+        size="sm"
+        footer={(
+          <div className="flex justify-end">
+            <Button onClick={() => setTempPassword(null)}>Done</Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div className="rounded-xl border border-yellow-400/20 bg-yellow-400/10 p-3 text-sm text-yellow-400">
+            This password will not be shown again. Copy it now.
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Temporary Password</label>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 rounded-md border border-border bg-card px-3 py-2 font-mono text-sm text-foreground">
+                {tempPassword}
+              </code>
+              <button
+                onClick={handleCopyPassword}
+                className="rounded-md border border-border p-2 text-muted-foreground transition-colors hover:bg-elevated hover:text-foreground"
+                title="Copy password"
+              >
+                {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            The user will be required to change this password on first login.
+          </p>
+        </div>
+      </Modal>
+
+      {/* Invite User modal */}
+      <Modal
+        isOpen={showInviteModal}
+        onClose={() => setShowInviteModal(false)}
+        title="Invite User"
+        size="sm"
+        footer={(
+          <div className="flex justify-end gap-3">
+            <Button variant="secondary" onClick={() => setShowInviteModal(false)}>Cancel</Button>
+            <Button onClick={handleInviteUser} disabled={!inviteForm.email || !inviteForm.account_display_code} loading={inviteLoading}>
+              {inviteLoading ? 'Sending...' : 'Send Invite'}
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
+            <Input
+              type="email"
+              value={inviteForm.email}
+              onChange={(e) => setInviteForm((form) => ({ ...form, email: e.target.value }))}
+              placeholder="user@example.com"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
+            <Input
+              type="text"
+              value={inviteForm.account_display_code}
+              onChange={(e) => setInviteForm((form) => ({ ...form, account_display_code: e.target.value }))}
+              placeholder="e.g. ABC12345"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-foreground">Role</label>
+            <select
+              value={inviteForm.role}
+              onChange={(e) => setInviteForm((form) => ({ ...form, role: e.target.value as 'engineer' | 'viewer' }))}
+              className={cn(
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+              )}
+            >
+              <option value="engineer">Engineer</option>
+              <option value="viewer">Viewer</option>
+            </select>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default UsersPage

frontend/src/router.tsx

@@ -63,7 +63,7 @@ const AccountSettingsPage = lazyWithRetry(() => import('@/pages/AccountSettingsP
 // Admin pages
 const AdminLayout = lazyWithRetry(() => import('@/components/admin/AdminLayout'))
 const AdminDashboardPage = lazyWithRetry(() => import('@/pages/admin/DashboardPage'))
-const AdminAccountsPage = lazyWithRetry(() => import('@/pages/admin/UsersPage'))
+const AdminAccountsPage = lazyWithRetry(() => import('@/pages/admin/AccountsPage'))
 const AdminAccountDetailPage = lazyWithRetry(() => import('@/pages/admin/AccountDetailPage'))
 const AdminUserDetailPage = lazyWithRetry(() => import('@/pages/admin/UserDetailPage'))
 const AdminInviteCodesPage = lazyWithRetry(() => import('@/pages/admin/InviteCodesPage'))