diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 3c47835d..3c347df1 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,9 +1,32 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText, UserCog, AlertTriangle, Clock, Plug, Palette, ShieldCheck } from 'lucide-react'
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowRight,
+  Building2,
+  CalendarClock,
+  Check,
+  Clock,
+  Copy,
+  Crown,
+  FolderTree,
+  Loader2,
+  Mail,
+  MessageSquareText,
+  Palette,
+  Plug,
+  RefreshCw,
+  Server,
+  Settings,
+  ShieldCheck,
+  UserCog,
+  Users,
+  X,
+} from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { accountsApi } from '@/api/accounts'
-import type { Account, AccountMember, AccountInvite } from '@/types'
+import type { Account, AccountInvite, AccountMember } from '@/types'
 import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
 import { LeaveAccountModal } from '@/components/account/LeaveAccountModal'
 import { DeleteAccountModal } from '@/components/account/DeleteAccountModal'
@@ -17,32 +40,147 @@ import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { CheckoutButton } from '@/components/subscription/CheckoutButton'
 import { toast } from '@/lib/toast'
 
+interface SettingsLinkCardProps {
+  to: string
+  icon: React.ReactNode
+  title: string
+  description: string
+  badge?: string
+}
+
+function SettingsLinkCard({ to, icon, title, description, badge }: SettingsLinkCardProps) {
+  return (
+    <Link
+      to={to}
+      className="group rounded-2xl border border-border bg-card p-5 transition-colors hover:border-border-hover"
+    >
+      <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>
+            <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">
+                  {badge}
+                </span>
+              )}
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        <ArrowRight className="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
+      </div>
+    </Link>
+  )
+}
+
+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,
+  max,
+}: {
+  label: string
+  current: number
+  max: number | null
+}) {
+  const isUnlimited = max === null
+  const percentage = isUnlimited ? 0 : Math.min((current / max) * 100, 100)
+  const isNearLimit = !isUnlimited && percentage >= 80
+  const isAtLimit = !isUnlimited && current >= max
+
+  return (
+    <div className="rounded-xl border border-border bg-card/50 p-4">
+      <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">{label}</p>
+      <p
+        className={cn(
+          'mt-2 text-xl font-semibold',
+          isAtLimit ? 'text-danger' : isNearLimit ? 'text-warning' : 'text-foreground'
+        )}
+      >
+        {current}
+        <span className="ml-1 text-sm font-normal text-muted-foreground">
+          / {isUnlimited ? 'Unlimited' : max}
+        </span>
+      </p>
+      {!isUnlimited && (
+        <div className="mt-3 h-2 overflow-hidden rounded-full bg-accent">
+          <div
+            className={cn(
+              'h-full rounded-full transition-all',
+              isAtLimit ? 'bg-danger' : isNearLimit ? 'bg-warning' : 'bg-primary'
+            )}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function formatShortDate(value: string | null | undefined) {
+  if (!value) return 'Never'
+  return new Date(value).toLocaleDateString()
+}
+
 export function AccountSettingsPage() {
   const { isAccountOwner } = usePermissions()
   const { plan, limits, usage } = useSubscription()
   const { defaultExportFormat, setDefaultExportFormat } = useUserPreferencesStore()
   const subscription = useAuthStore((s) => s.subscription)
+  const user = useAuthStore((s) => s.user)
+  const refreshUser = useAuthStore((s) => s.fetchUser)
 
   const [account, setAccount] = useState<Account | null>(null)
   const [members, setMembers] = useState<AccountMember[]>([])
   const [invites, setInvites] = useState<AccountInvite[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [copiedCode, setCopiedCode] = useState(false)
 
-  // Account name editing
   const [isEditingName, setIsEditingName] = useState(false)
   const [editedName, setEditedName] = useState('')
   const [isSavingName, setIsSavingName] = useState(false)
 
-  // Modals
   const [showTransferModal, setShowTransferModal] = useState(false)
   const [showLeaveModal, setShowLeaveModal] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
-  // Invite form
   const [inviteEmail, setInviteEmail] = useState('')
   const [inviteRole, setInviteRole] = useState('engineer')
   const [isInviting, setIsInviting] = useState(false)
+  const [resendingId, setResendingId] = useState<string | null>(null)
 
   useEffect(() => {
     loadData()
@@ -72,6 +210,18 @@ 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
+    await navigator.clipboard.writeText(account.display_code)
+    setCopiedCode(true)
+    toast.success('Display code copied')
+    setTimeout(() => setCopiedCode(false), 2000)
+  }
+
   const handleSaveName = async () => {
     if (!editedName.trim() || editedName === account?.name) {
       setIsEditingName(false)
@@ -83,6 +233,7 @@ export function AccountSettingsPage() {
       setAccount(updated)
       setIsEditingName(false)
       toast.success('Account name updated')
+      await refreshUser()
     } catch (err) {
       toast.error('Failed to update account name')
       console.error('Failed to update account name:', err)
@@ -110,8 +261,6 @@ export function AccountSettingsPage() {
     }
   }
 
-  const [resendingId, setResendingId] = useState<string | null>(null)
-
   const handleResendInvite = async (inviteId: string) => {
     setResendingId(inviteId)
     try {
@@ -129,8 +278,9 @@ export function AccountSettingsPage() {
   const handleRemoveMember = async (userId: string) => {
     try {
       await accountsApi.removeMember(userId)
-      setMembers(members.filter((m) => m.id !== userId))
+      setMembers((current) => current.filter((member) => member.id !== userId))
       toast.success('Member removed')
+      await refreshUser()
     } catch (err) {
       toast.error('Failed to remove member')
       console.error('Failed to remove member:', err)
@@ -160,622 +310,629 @@ export function AccountSettingsPage() {
 
   return (
     <>
-    <PageMeta title="Account Settings" />
-    <div>
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Building2 className="h-8 w-8 text-muted-foreground" />
-          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Account Settings</h1>
-        </div>
-        <p className="mt-2 text-muted-foreground">
-          Manage your account, subscription, and team
-        </p>
-      </div>
-
-      <div className="max-w-3xl space-y-6">
-        {/* Account Info Section */}
-        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-foreground">Account Information</h2>
-
-          <div className="mt-4 space-y-4">
-            {/* Account Name */}
-            <div>
-              <label className="block text-sm font-medium text-foreground">
-                Account Name
-              </label>
-              {isEditingName ? (
-                <div className="mt-1 flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={editedName}
-                    onChange={(e) => setEditedName(e.target.value)}
-                    className={cn(
-                      'flex-1 rounded-md border border-border bg-card px-3 py-2',
-                      'text-foreground placeholder:text-muted-foreground',
-                      'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-                    )}
-                    autoFocus
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') handleSaveName()
-                      if (e.key === 'Escape') {
-                        setEditedName(account?.name ?? '')
-                        setIsEditingName(false)
-                      }
-                    }}
-                  />
-                  <Button
-                    onClick={handleSaveName}
-                    loading={isSavingName}
-                    size="icon-sm"
-                  >
-                    <Check className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size="icon-sm"
-                    onClick={() => {
-                      setEditedName(account?.name ?? '')
-                      setIsEditingName(false)
-                    }}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
+      <PageMeta title="Account Settings" />
+      <div className="space-y-8">
+        <div className="rounded-3xl border border-border bg-card p-6 sm:p-8">
+          <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+            <div className="max-w-2xl">
+              <div className="flex items-center gap-3">
+                <div className="rounded-2xl bg-accent p-3 text-muted-foreground">
+                  <Building2 className="h-7 w-7" />
                 </div>
-              ) : (
-                <div className="mt-1 flex items-center gap-2">
-                  <span className="text-sm text-foreground">{account?.name}</span>
-                  {isAccountOwner && (
-                    <button
-                      onClick={() => setIsEditingName(true)}
-                      className="rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                    >
-                      Edit
-                    </button>
-                  )}
+                <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>
 
-            {/* Display Code */}
-            <div>
-              <label className="block text-sm font-medium text-foreground">
-                Display Code
-              </label>
-              <p className="mt-1 text-sm font-mono text-muted-foreground">
-                {account?.display_code}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Subscription Section */}
-        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-foreground">Subscription</h2>
-
-          <div className="mt-4 space-y-4">
-            {/* Plan & Status */}
-            <div className="flex items-center gap-3">
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
-                  plan === 'free' && 'bg-muted text-muted-foreground',
-                  plan === 'pro' && 'bg-accent-dim text-accent-text',
-                  plan === 'team' && 'bg-accent-dim text-accent-text'
-                )}
-              >
-                <Crown className="h-3.5 w-3.5" />
-                {plan.charAt(0).toUpperCase() + plan.slice(1)} Plan
-              </span>
-              {sub && (
-                <span
-                  className={cn(
-                    'inline-flex rounded-full px-2.5 py-0.5 text-xs 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('_', ' ')}
+              <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>
 
-            {sub?.current_period_end && (
-              <p className="text-sm text-muted-foreground">
-                Current period ends: {new Date(sub.current_period_end).toLocaleDateString()}
-              </p>
-            )}
-
-            {/* Usage Stats */}
-            {limits && usage && (
-              <div className="mt-4 grid gap-3 sm:grid-cols-3">
-                <UsageStat
-                  label="Flows"
-                  current={usage.tree_count}
-                  max={limits.max_trees}
-                />
-                <UsageStat
-                  label="Sessions / month"
-                  current={usage.session_count_this_month}
-                  max={limits.max_sessions_per_month}
-                />
-                <UsageStat
-                  label="Team members"
-                  current={usage.user_count}
-                  max={limits.max_users}
-                />
-              </div>
-            )}
-
-            {/* Upgrade buttons */}
-            {plan === 'free' && (
-              <div className="mt-4 flex gap-3">
-                <CheckoutButton plan="pro" />
-                <CheckoutButton plan="team" />
-              </div>
-            )}
-            {plan === 'pro' && (
-              <div className="mt-4">
-                <CheckoutButton plan="team" />
-              </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>
 
-        {/* Team Members Section (owners only) */}
-        {isAccountOwner && (
-          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-            <div className="flex items-center gap-2">
-              <Users className="h-5 w-5 text-muted-foreground" />
-              <h2 className="text-lg font-semibold text-foreground">Team Members</h2>
-            </div>
+        <div className="grid gap-6 xl:grid-cols-[1.25fr_0.95fr]">
+          <section className="space-y-6">
+            <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+              <div className="flex items-center gap-2">
+                <Building2 className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">Account Identity</h2>
+              </div>
 
-            {members.length === 0 ? (
-              <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
-            ) : (
-              <div className="mt-4 divide-y divide-border">
-                {members.map((member) => (
-                  <div
-                    key={member.id}
-                    className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-                  >
-                    <div>
-                      <p className="text-sm font-medium text-foreground">{member.name}</p>
-                      <p className="text-xs text-muted-foreground">{member.email}</p>
+              <div className="mt-5 space-y-5">
+                <div>
+                  <label className="block text-sm font-medium text-foreground">Account Name</label>
+                  {isEditingName ? (
+                    <div className="mt-2 flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={editedName}
+                        onChange={(e) => setEditedName(e.target.value)}
+                        className={cn(
+                          'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                          'text-foreground placeholder:text-muted-foreground',
+                          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                        )}
+                        autoFocus
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleSaveName()
+                          if (e.key === 'Escape') {
+                            setEditedName(account?.name ?? '')
+                            setIsEditingName(false)
+                          }
+                        }}
+                      />
+                      <Button onClick={handleSaveName} loading={isSavingName} size="icon-sm">
+                        <Check className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        size="icon-sm"
+                        onClick={() => {
+                          setEditedName(account?.name ?? '')
+                          setIsEditingName(false)
+                        }}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
                     </div>
-                    <div className="flex items-center gap-3">
-                      {member.account_role === 'owner' ? (
-                        <span className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent-dim text-accent-text">
-                          owner
-                        </span>
-                      ) : (
-                        <select
-                          value={member.account_role}
-                          aria-label={`Role for ${member.name}`}
-                          onChange={async (e) => {
-                            try {
-                              const updated = await accountsApi.updateMemberRole(member.id, e.target.value)
-                              setMembers(members.map((m) => m.id === member.id ? { ...m, account_role: updated.account_role } : m))
-                              toast.success(`Role updated to ${updated.account_role}`)
-                            } catch {
-                              toast.error('Failed to update role')
-                            }
-                          }}
-                          className={cn(
-                            'rounded-md border border-border bg-card px-2 py-0.5 text-xs',
-                            'text-foreground focus:border-primary focus:outline-hidden'
-                          )}
-                        >
-                          <option value="engineer">engineer</option>
-                          <option value="viewer">viewer</option>
-                        </select>
-                      )}
-                      {!member.is_active && (
-                        <span className="rounded-full bg-danger-dim px-2 py-0.5 text-xs text-danger">
-                          Inactive
-                        </span>
-                      )}
-                      {member.account_role !== 'owner' && (
+                  ) : (
+                    <div className="mt-2 flex items-center gap-2">
+                      <span className="text-sm text-foreground">{account?.name}</span>
+                      {isAccountOwner && (
                         <button
-                          onClick={() => handleRemoveMember(member.id)}
-                          className="p-1 text-muted-foreground hover:text-danger"
-                          aria-label={`Remove ${member.name}`}
+                          onClick={() => setIsEditingName(true)}
+                          className="rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                         >
-                          <X className="h-4 w-4" />
+                          Edit
                         </button>
                       )}
                     </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
+                  )}
+                </div>
 
-        {/* Invite Member Section (owners only) */}
-        {isAccountOwner && (
-          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-            <div className="flex items-center gap-2">
-              <Mail className="h-5 w-5 text-muted-foreground" />
-              <h2 className="text-lg font-semibold text-foreground">Invite Member</h2>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">Display Code</label>
+                    <div className="mt-2 flex items-center gap-2">
+                      <code className="rounded-md border border-border bg-card/50 px-3 py-2 font-mono text-sm text-foreground">
+                        {account?.display_code}
+                      </code>
+                      <Button variant="secondary" size="icon-sm" onClick={handleCopyDisplayCode} title="Copy display code">
+                        {copiedCode ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                      </Button>
+                    </div>
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      Useful when admins or teammates need to join this account.
+                    </p>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">Account Owner</label>
+                    <div className="mt-2 text-sm text-foreground">
+                      {ownerMember ? ownerMember.name : user?.account_role === 'owner' ? user.email : 'Owner unavailable'}
+                    </div>
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      {ownerMember?.email ?? 'The owner manages billing, branding, integrations, and membership changes.'}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">Created</label>
+                    <p className="mt-2 text-sm text-muted-foreground">{formatShortDate(account?.created_at)}</p>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">Last updated</label>
+                    <p className="mt-2 text-sm text-muted-foreground">{formatShortDate(account?.updated_at)}</p>
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <form onSubmit={handleInvite} className="mt-4 space-y-3">
-              <div className="flex flex-col gap-3 sm:flex-row">
-                <input
-                  type="email"
-                  placeholder="Email address"
-                  value={inviteEmail}
-                  onChange={(e) => setInviteEmail(e.target.value)}
-                  required
-                  className={cn(
-                    'flex-1 rounded-md border border-border bg-card px-3 py-2',
-                    'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-                  )}
-                />
-                <select
-                  value={inviteRole}
-                  onChange={(e) => setInviteRole(e.target.value)}
-                  className={cn(
-                    'rounded-md border border-border bg-card px-3 py-2',
-                    'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-                  )}
-                >
-                  <option value="engineer">Engineer</option>
-                  <option value="viewer">Viewer</option>
-                </select>
-                <Button
-                  type="submit"
-                  disabled={!inviteEmail.trim()}
-                  loading={isInviting}
-                >
-                  {isInviting ? 'Sending...' : 'Send Invite'}
-                </Button>
+            <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <Crown className="h-5 w-5 text-muted-foreground" />
+                    <h2 className="text-lg font-semibold text-foreground">Billing & Usage</h2>
+                  </div>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Monitor plan status, renewal timing, and current account limits.
+                  </p>
+                </div>
               </div>
 
-            </form>
+              <div className="mt-5 flex flex-wrap items-center gap-3">
+                <span
+                  className={cn(
+                    'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
+                    plan === 'free' && 'bg-muted text-muted-foreground',
+                    plan === 'pro' && 'bg-accent-dim text-accent-text',
+                    plan === 'team' && 'bg-accent-dim text-accent-text'
+                  )}
+                >
+                  <Crown className="h-3.5 w-3.5" />
+                  {plan.charAt(0).toUpperCase() + plan.slice(1)} Plan
+                </span>
+                {sub && (
+                  <span
+                    className={cn(
+                      'inline-flex rounded-full px-2.5 py-0.5 text-xs 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>
+                )}
+              </div>
 
-            {/* Pending Invites */}
-            {invites.length > 0 && (
-              <div className="mt-6">
-                <h3 className="text-sm font-medium text-foreground">Pending Invites</h3>
-                <div className="mt-2 divide-y divide-border">
-                  {invites
-                    .filter((inv) => !inv.used_at)
-                    .map((invite) => (
-                      <div
-                        key={invite.id}
-                        className="flex items-center justify-between py-2"
-                      >
-                        <div>
-                          <p className="text-sm text-foreground">{invite.email}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {invite.expires_at
-                              ? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
-                              : 'No expiration'}
-                          </p>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs text-muted-foreground">
-                            {invite.role}
-                          </span>
-                          <button
-                            onClick={() => handleResendInvite(invite.id)}
-                            disabled={resendingId === invite.id}
-                            className="p-1 text-muted-foreground hover:text-foreground disabled:opacity-50"
-                            aria-label={`Resend invite to ${invite.email}`}
-                          >
-                            {resendingId === invite.id ? (
-                              <Loader2 className="h-4 w-4 animate-spin" />
-                            ) : (
-                              <RefreshCw className="h-4 w-4" />
+              <div className="mt-4 grid gap-4 sm:grid-cols-2">
+                <div className="rounded-xl border border-border bg-card/50 p-4">
+                  <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Renewal date</p>
+                  <p className="mt-2 text-sm text-foreground">
+                    {sub?.current_period_end ? new Date(sub.current_period_end).toLocaleDateString() : 'Not scheduled'}
+                  </p>
+                </div>
+                <div className="rounded-xl border border-border bg-card/50 p-4">
+                  <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Branding access</p>
+                  <p className="mt-2 text-sm text-foreground">
+                    {limits?.custom_branding ? 'Included in your plan' : 'Upgrade required'}
+                  </p>
+                </div>
+              </div>
+
+              {limits && usage && (
+                <div className="mt-5 grid gap-3 sm:grid-cols-3">
+                  <UsageStat label="Flows" current={usage.tree_count} max={limits.max_trees} />
+                  <UsageStat label="Sessions / month" current={usage.session_count_this_month} max={limits.max_sessions_per_month} />
+                  <UsageStat label="Seats" current={usage.user_count} max={limits.max_users} />
+                </div>
+              )}
+
+              {plan === 'free' && (
+                <div className="mt-5 flex flex-wrap gap-3">
+                  <CheckoutButton plan="pro" />
+                  <CheckoutButton plan="team" />
+                </div>
+              )}
+              {plan === 'pro' && (
+                <div className="mt-5">
+                  <CheckoutButton plan="team" />
+                </div>
+              )}
+            </div>
+
+            <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+              <div className="flex items-center gap-2">
+                <ShieldCheck className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">Access & Security</h2>
+              </div>
+
+              <div className="mt-5 grid gap-4 md:grid-cols-2">
+                <div className="rounded-xl border border-border bg-card/50 p-4">
+                  <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Authentication</p>
+                  <p className="mt-2 text-sm text-foreground">
+                    {plan === 'team' ? 'Password auth available, SSO can be enabled.' : 'Password-based authentication is active.'}
+                  </p>
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    Use profile settings to update your personal details and sign-in information.
+                  </p>
+                </div>
+
+                <div className="rounded-xl border border-border bg-card/50 p-4">
+                  <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Single Sign-On</p>
+                  <p className="mt-2 text-sm text-foreground">
+                    {plan === 'team' ? 'Enterprise-ready setup available.' : 'Available on higher-tier account setups.'}
+                  </p>
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    Contact support to configure SAML or OIDC for your organization.
+                  </p>
+                </div>
+              </div>
+
+              {isAccountOwner && (
+                <div className="mt-5 rounded-xl border border-border bg-card/50 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-foreground">Need enterprise security controls?</p>
+                      <p className="text-sm text-muted-foreground">
+                        We can help enable SSO and align account security for larger teams.
+                      </p>
+                    </div>
+                    <a
+                      href="mailto:support@resolutionflow.com?subject=SSO%20Setup%20Request"
+                      className={cn(
+                        'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
+                        'bg-muted border border-border text-foreground transition-colors hover:border-border-hover'
+                      )}
+                    >
+                      Contact Us
+                    </a>
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+
+          <aside className="space-y-6">
+            {isAccountOwner && (
+              <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+                <div className="flex items-center gap-2">
+                  <Users className="h-5 w-5 text-muted-foreground" />
+                  <h2 className="text-lg font-semibold text-foreground">Membership</h2>
+                </div>
+
+                {members.length === 0 ? (
+                  <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
+                ) : (
+                  <div className="mt-4 space-y-3">
+                    {members.map((member) => (
+                      <div key={member.id} className="rounded-xl border border-border bg-card/50 p-4">
+                        <div className="flex items-start justify-between gap-3">
+                          <div>
+                            <p className="text-sm font-medium text-foreground">{member.name}</p>
+                            <p className="text-xs text-muted-foreground">{member.email}</p>
+                            <p className="mt-2 text-xs text-muted-foreground">
+                              Last login: {formatShortDate(member.last_login)}
+                            </p>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            {!member.is_active && (
+                              <span className="rounded-full bg-danger-dim px-2 py-0.5 text-xs text-danger">
+                                Inactive
+                              </span>
                             )}
-                          </button>
+                            {member.account_role === 'owner' ? (
+                              <span className="rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-medium text-accent-text">
+                                owner
+                              </span>
+                            ) : (
+                              <select
+                                value={member.account_role}
+                                aria-label={`Role for ${member.name}`}
+                                onChange={async (e) => {
+                                  try {
+                                    const updated = await accountsApi.updateMemberRole(member.id, e.target.value)
+                                    setMembers((current) =>
+                                      current.map((entry) =>
+                                        entry.id === member.id ? { ...entry, account_role: updated.account_role } : entry
+                                      )
+                                    )
+                                    toast.success(`Role updated to ${updated.account_role}`)
+                                  } catch {
+                                    toast.error('Failed to update role')
+                                  }
+                                }}
+                                className={cn(
+                                  'rounded-md border border-border bg-card px-2 py-0.5 text-xs',
+                                  'text-foreground focus:border-primary focus:outline-hidden'
+                                )}
+                              >
+                                <option value="engineer">engineer</option>
+                                <option value="viewer">viewer</option>
+                              </select>
+                            )}
+                            {member.account_role !== 'owner' && (
+                              <button
+                                onClick={() => handleRemoveMember(member.id)}
+                                className="p-1 text-muted-foreground hover:text-danger"
+                                aria-label={`Remove ${member.name}`}
+                              >
+                                <X className="h-4 w-4" />
+                              </button>
+                            )}
+                          </div>
                         </div>
                       </div>
                     ))}
-                </div>
+                  </div>
+                )}
               </div>
             )}
-          </div>
-        )}
 
-        {/* Profile Settings Link */}
-        <Link
-          to="/account/profile"
-          className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-        >
-          <div className="flex items-center gap-3">
-            <UserCog className="h-5 w-5 text-muted-foreground" />
-            <div>
-              <h2 className="text-lg font-semibold text-foreground">Profile Settings</h2>
-              <p className="text-sm text-muted-foreground">Update your name, email, and personal details</p>
-            </div>
-          </div>
-          <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-        </Link>
-
-        {/* Team Settings section (owners only) */}
-        {isAccountOwner && (
-          <>
-            <p className="pt-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Team Settings
-            </p>
-
-            <Link
-              to="/account/categories"
-              className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <FolderTree className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">Team Categories</h2>
-                  <p className="text-sm text-muted-foreground">Manage flow categories for your team</p>
+            {isAccountOwner && (
+              <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+                <div className="flex items-center gap-2">
+                  <Mail className="h-5 w-5 text-muted-foreground" />
+                  <h2 className="text-lg font-semibold text-foreground">Invites</h2>
                 </div>
-              </div>
-              <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-            </Link>
 
-            <Link
-              to="/account/target-lists"
-              className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <Server className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">Target Lists</h2>
-                  <p className="text-sm text-muted-foreground">Saved server and device lists for your team</p>
-                </div>
-              </div>
-              <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-            </Link>
-
-            <Link
-              to="/account/chat-retention"
-              className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <Clock className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">Chat Retention</h2>
-                  <p className="text-sm text-muted-foreground">Configure AI assistant conversation retention policies</p>
-                </div>
-              </div>
-              <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-            </Link>
-
-            <Link
-              to="/account/integrations"
-              className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <Plug className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">Integrations</h2>
-                  <p className="text-sm text-muted-foreground">Connect your PSA to sync session documentation to tickets</p>
-                </div>
-              </div>
-              <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-            </Link>
-
-            <Link
-              to="/account/branding"
-              className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <Palette className="h-5 w-5 text-muted-foreground" />
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">Branding</h2>
-                  <p className="text-sm text-muted-foreground">Customize logo, accent color, and company name</p>
-                </div>
-              </div>
-              <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-            </Link>
-          </>
-        )}
-
-        {/* Feedback Link (all users) */}
-        <Link
-          to="/feedback"
-          className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border-hover transition-colors"
-        >
-          <div className="flex items-center gap-3">
-            <MessageSquareText className="h-5 w-5 text-muted-foreground" />
-            <div>
-              <h2 className="text-lg font-semibold text-foreground">Send Feedback</h2>
-              <p className="text-sm text-muted-foreground">Report bugs, request features, or share your thoughts</p>
-            </div>
-          </div>
-          <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
-        </Link>
-
-        {/* Preferences Section */}
-        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-          <div className="flex items-center gap-2">
-            <Settings className="h-5 w-5 text-muted-foreground" />
-            <h2 className="text-lg font-semibold text-foreground">Preferences</h2>
-          </div>
-
-          <div className="mt-4">
-            <label
-              htmlFor="export-format"
-              className="block text-sm font-medium text-foreground"
-            >
-              Default Export Format
-            </label>
-            <p className="text-sm text-muted-foreground">
-              This format will be pre-selected when exporting sessions
-            </p>
-            <select
-              id="export-format"
-              value={defaultExportFormat}
-              onChange={(e) => {
-                setDefaultExportFormat(e.target.value as 'markdown' | 'text' | 'html')
-                toast.success('Preference saved')
-              }}
-              className={cn(
-                'mt-2 block w-full max-w-xs rounded-xl 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'
-              )}
-            >
-              <option value="markdown">Markdown (.md)</option>
-              <option value="text">Plain Text (.txt)</option>
-              <option value="html">HTML (.html)</option>
-            </select>
-          </div>
-        </div>
-        {/* SSO Section */}
-        {isAccountOwner && (
-          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
-            <div className="flex items-center gap-2 mb-3">
-              <ShieldCheck className="h-5 w-5 text-muted-foreground" />
-              <h2 className="text-lg font-semibold text-foreground">Single Sign-On (SSO)</h2>
-              <span className="inline-flex items-center rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-medium text-primary">
-                Enterprise
-              </span>
-            </div>
-            <p className="text-sm text-muted-foreground mb-4">
-              SAML and OIDC single sign-on is available for enterprise plans. Contact us to enable SSO for
-              your organization.
-            </p>
-            <a
-              href="mailto:support@resolutionflow.com?subject=SSO%20Setup%20Request"
-              className={cn(
-                'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-muted border border-border text-foreground',
-                'hover:border-border-hover transition-colors'
-              )}
-            >
-              Contact Us
-            </a>
-          </div>
-        )}
-
-        {/* Danger Zone */}
-        <div className="rounded-xl border border-danger/20 p-4 sm:p-6">
-          <div className="flex items-center gap-2 mb-4">
-            <AlertTriangle className="h-5 w-5 text-danger" />
-            <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
-          </div>
-
-          <div className="space-y-3">
-            {isAccountOwner ? (
-              <>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Transfer Ownership</p>
-                    <p className="text-xs text-muted-foreground">Make another member the account owner</p>
+                <form onSubmit={handleInvite} className="mt-4 space-y-3">
+                  <input
+                    type="email"
+                    placeholder="Email address"
+                    value={inviteEmail}
+                    onChange={(e) => setInviteEmail(e.target.value)}
+                    required
+                    className={cn(
+                      'w-full rounded-md border border-border bg-card px-3 py-2',
+                      'text-foreground placeholder:text-muted-foreground',
+                      'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                    )}
+                  />
+                  <div className="flex gap-3">
+                    <select
+                      value={inviteRole}
+                      onChange={(e) => setInviteRole(e.target.value)}
+                      className={cn(
+                        'min-w-[140px] rounded-md border border-border bg-card px-3 py-2',
+                        'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                      )}
+                    >
+                      <option value="engineer">Engineer</option>
+                      <option value="viewer">Viewer</option>
+                    </select>
+                    <Button type="submit" disabled={!inviteEmail.trim()} loading={isInviting} className="flex-1">
+                      {isInviting ? 'Sending...' : 'Send Invite'}
+                    </Button>
                   </div>
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => setShowTransferModal(true)}
-                    className="border-warning/30 text-warning hover:bg-warning-dim"
-                  >
-                    Transfer
-                  </Button>
-                </div>
-                <div className="flex items-center justify-between border-t border-border pt-3">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Delete Account</p>
-                    <p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
+                </form>
+
+                {pendingInvites.length > 0 ? (
+                  <div className="mt-5 space-y-3">
+                    {pendingInvites.map((invite) => (
+                      <div key={invite.id} className="rounded-xl border border-border bg-card/50 p-4">
+                        <div className="flex items-start justify-between gap-3">
+                          <div>
+                            <p className="text-sm font-medium text-foreground">{invite.email}</p>
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              {invite.expires_at
+                                ? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
+                                : 'No expiration'}
+                            </p>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs text-muted-foreground">
+                              {invite.role}
+                            </span>
+                            <button
+                              onClick={() => handleResendInvite(invite.id)}
+                              disabled={resendingId === invite.id}
+                              className="p-1 text-muted-foreground hover:text-foreground disabled:opacity-50"
+                              aria-label={`Resend invite to ${invite.email}`}
+                            >
+                              {resendingId === invite.id ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                              ) : (
+                                <RefreshCw className="h-4 w-4" />
+                              )}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
                   </div>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => setShowDeleteModal(true)}
-                  >
-                    Delete
-                  </Button>
-                </div>
-              </>
-            ) : (
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-foreground">Leave Account</p>
-                  <p className="text-xs text-muted-foreground">Leave this account and create a personal one</p>
-                </div>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={() => setShowLeaveModal(true)}
+                ) : (
+                  <p className="mt-4 text-sm text-muted-foreground">No pending invites right now.</p>
+                )}
+              </div>
+            )}
+
+            <div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
+              <div className="flex items-center gap-2">
+                <Settings className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">Preferences</h2>
+              </div>
+
+              <div className="mt-4">
+                <label htmlFor="export-format" className="block text-sm font-medium text-foreground">
+                  Default Export Format
+                </label>
+                <p className="text-sm text-muted-foreground">
+                  This format will be pre-selected when exporting sessions.
+                </p>
+                <select
+                  id="export-format"
+                  value={defaultExportFormat}
+                  onChange={(e) => {
+                    setDefaultExportFormat(e.target.value as 'markdown' | 'text' | 'html')
+                    toast.success('Preference saved')
+                  }}
+                  className={cn(
+                    'mt-2 block w-full rounded-xl 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'
+                  )}
                 >
-                  Leave
-                </Button>
+                  <option value="markdown">Markdown (.md)</option>
+                  <option value="text">Plain Text (.txt)</option>
+                  <option value="html">HTML (.html)</option>
+                </select>
               </div>
-            )}
-          </div>
-        </div>
-      </div>
+            </div>
 
-      {/* Modals */}
-      {showTransferModal && (
-        <TransferOwnershipModal
-          members={members}
-          onClose={() => setShowTransferModal(false)}
-          onTransferred={() => { setShowTransferModal(false); loadData() }}
-        />
-      )}
-      {showLeaveModal && account && (
-        <LeaveAccountModal
-          accountName={account.name}
-          onClose={() => setShowLeaveModal(false)}
-        />
-      )}
-      {showDeleteModal && (
-        <DeleteAccountModal onClose={() => setShowDeleteModal(false)} />
-      )}
-    </div>
+            <div className="rounded-2xl border border-danger/20 p-5 sm:p-6">
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-5 w-5 text-danger" />
+                <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
+              </div>
+
+              <div className="mt-4 space-y-3">
+                {isAccountOwner ? (
+                  <>
+                    <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card/40 p-4">
+                      <div>
+                        <p className="text-sm font-medium text-foreground">Transfer Ownership</p>
+                        <p className="text-xs text-muted-foreground">Make another member the account owner.</p>
+                      </div>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => setShowTransferModal(true)}
+                        className="border-warning/30 text-warning hover:bg-warning-dim"
+                      >
+                        Transfer
+                      </Button>
+                    </div>
+                    <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card/40 p-4">
+                      <div>
+                        <p className="text-sm font-medium text-foreground">Delete Account</p>
+                        <p className="text-xs text-muted-foreground">Permanently delete your account and all data.</p>
+                      </div>
+                      <Button variant="destructive" size="sm" onClick={() => setShowDeleteModal(true)}>
+                        Delete
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card/40 p-4">
+                    <div>
+                      <p className="text-sm font-medium text-foreground">Leave Account</p>
+                      <p className="text-xs text-muted-foreground">Leave this account and create a personal one.</p>
+                    </div>
+                    <Button variant="destructive" size="sm" onClick={() => setShowLeaveModal(true)}>
+                      Leave
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-lg font-semibold text-foreground">Settings Areas</h2>
+            <p className="text-sm text-muted-foreground">
+              Common account management actions, organized the way most SaaS teams expect to find them.
+            </p>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <SettingsLinkCard
+              to="/account/profile"
+              icon={<UserCog className="h-5 w-5" />}
+              title="Profile Settings"
+              description="Update your name, email, and personal details."
+            />
+
+            {isAccountOwner && (
+              <SettingsLinkCard
+                to="/account/branding"
+                icon={<Palette className="h-5 w-5" />}
+                title="Branding"
+                description="Customize logo, accent color, and company name."
+                badge={limits?.custom_branding ? 'Included' : 'Plan gated'}
+              />
+            )}
+
+            {isAccountOwner && (
+              <SettingsLinkCard
+                to="/account/integrations"
+                icon={<Plug className="h-5 w-5" />}
+                title="Integrations"
+                description="Connect PSA and other external systems for your team."
+              />
+            )}
+
+            {isAccountOwner && (
+              <SettingsLinkCard
+                to="/account/chat-retention"
+                icon={<Clock className="h-5 w-5" />}
+                title="Chat Retention"
+                description="Control conversation retention and assistant data lifecycle."
+              />
+            )}
+
+            {isAccountOwner && (
+              <SettingsLinkCard
+                to="/account/categories"
+                icon={<FolderTree className="h-5 w-5" />}
+                title="Team Categories"
+                description="Manage shared flow categories for your workspace."
+              />
+            )}
+
+            {isAccountOwner && (
+              <SettingsLinkCard
+                to="/account/target-lists"
+                icon={<Server className="h-5 w-5" />}
+                title="Target Lists"
+                description="Maintain saved server and device lists for the team."
+              />
+            )}
+
+            <SettingsLinkCard
+              to="/feedback"
+              icon={<MessageSquareText className="h-5 w-5" />}
+              title="Support & Feedback"
+              description="Report bugs, request features, or share product feedback."
+            />
+          </div>
+        </section>
+
+        {showTransferModal && (
+          <TransferOwnershipModal
+            members={members}
+            onClose={() => setShowTransferModal(false)}
+            onTransferred={() => {
+              setShowTransferModal(false)
+              loadData()
+            }}
+          />
+        )}
+        {showLeaveModal && account && (
+          <LeaveAccountModal accountName={account.name} onClose={() => setShowLeaveModal(false)} />
+        )}
+        {showDeleteModal && <DeleteAccountModal onClose={() => setShowDeleteModal(false)} />}
+      </div>
     </>
   )
 }
 
-/** Small helper component for usage stat display */
-function UsageStat({
-  label,
-  current,
-  max,
-}: {
-  label: string
-  current: number
-  max: number | null
-}) {
-  const isUnlimited = max === null
-  const percentage = isUnlimited ? 0 : Math.min((current / max) * 100, 100)
-  const isNearLimit = !isUnlimited && percentage >= 80
-  const isAtLimit = !isUnlimited && current >= max
-
-  return (
-    <div className="rounded-md border border-border bg-card p-3">
-      <p className="text-xs font-medium text-muted-foreground">{label}</p>
-      <p
-        className={cn(
-          'mt-1 text-lg font-semibold',
-          isAtLimit ? 'text-danger' : isNearLimit ? 'text-warning' : 'text-foreground'
-        )}
-      >
-        {current}
-        <span className="text-sm font-normal text-muted-foreground">
-          {' '}/ {isUnlimited ? 'Unlimited' : max}
-        </span>
-      </p>
-      {!isUnlimited && (
-        <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted">
-          <div
-            className={cn(
-              'h-full rounded-full transition-all',
-              isAtLimit ? 'bg-danger' : isNearLimit ? 'bg-warning' : 'bg-primary'
-            )}
-            style={{ width: `${percentage}%` }}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
 export default AccountSettingsPage