feat: standardize shared UI primitives across frontend

frontend/src/api/client.ts

@@ -11,8 +11,8 @@ export const apiClient = axios.create({
   },
 })
 
-// Global error handler - shows toast for common API errors
+// Global error handler for shared cases only.
-// Pages can still catch errors explicitly if they need custom handling
+// By convention, 4xx errors are handled at the page/component level.
 function handleGlobalError(error: AxiosError) {
   // Network error (no response from server)
   if (!error.response) {
@@ -43,9 +43,8 @@ function handleGlobalError(error: AxiosError) {
     return
   }
 
-  // Client errors (4xx) — don't toast globally.
+  // Client errors (4xx) remain page-owned to avoid duplicate/noisy toasts.
-  // Pages handle their own 4xx errors (permission checks, validation, not-found)
+  // Global handling only covers 401/429/5xx.
-  // and many are caught silently. Global toasts here cause noisy duplicates.
   if (status >= 400 && status < 500) {
     return
   }

frontend/src/components/admin/PageHeader.tsx

@@ -1,25 +1,2 @@
-import type { ReactNode } from 'react'
+export { PageHeader } from '@/components/common/PageHeader'
-import { cn } from '@/lib/utils'
+export { PageHeader as default } from '@/components/common/PageHeader'
-
-interface PageHeaderProps {
-  title: string
-  description?: string
-  action?: ReactNode
-  className?: string
-}
-
-export function PageHeader({ title, description, action, className }: PageHeaderProps) {
-  return (
-    <div className={cn('flex items-start justify-between gap-4', className)}>
-      <div>
-        <h1 className="text-2xl font-bold font-heading text-foreground">{title}</h1>
-        {description && (
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        )}
-      </div>
-      {action && <div className="flex-shrink-0">{action}</div>}
-    </div>
-  )
-}
-
-export default PageHeader

frontend/src/components/common/PageHeader.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  titleClassName,
+  descriptionClassName,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4', className)}>
+      <div className="flex items-start gap-3">
+        {icon && <div className="shrink-0">{icon}</div>}
+        <div>
+          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+            {title}
+          </h1>
+          {description && (
+            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}
+
+export default PageHeader

frontend/src/components/layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
-import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
+import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -55,8 +55,7 @@ export function AppLayout() {
     { path: '/sessions', label: 'Sessions', icon: Clock },
     { path: '/shares', label: 'Exports', icon: FileText },
     { path: '/step-library', label: 'Step Library', icon: Bookmark },
-    { path: '/account', label: 'Team', icon: Users },
+    { path: '/account', label: 'Account', icon: Settings },
-    { path: '/account', label: 'Settings', icon: Settings },
   ]
 
   return (

frontend/src/components/layout/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions, type EffectiveRole } from '@/hooks/usePermissions'
+import { Spinner } from '@/components/common/Spinner'
 
 interface ProtectedRouteProps {
   requiredRole?: EffectiveRole
@@ -15,7 +16,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
       </div>
     )
   }

frontend/src/components/maintenance/BatchLaunchModal.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { targetListsApi, batchLaunchApi } from '@/api'
 import type { TargetList, TargetEntry } from '@/types'
+import { Spinner } from '@/components/common/Spinner'
 
 interface BatchLaunchModalProps {
   treeId: string
@@ -127,7 +128,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
             <div className="space-y-2">
               {savedLists === null ? (
                 <div className="flex h-24 items-center justify-center">
-                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                  <Spinner size="sm" className="border-primary border-t-transparent" />
                 </div>
               ) : savedLists.length === 0 ? (
                 <p className="text-[0.875rem] text-muted-foreground">

frontend/src/components/session/ShareSessionModal.tsx

@@ -5,6 +5,7 @@ import { sessionsApi } from '@/api/sessions'
 import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Spinner } from '@/components/common/Spinner'
 
 interface ShareSessionModalProps {
   sessionId: string
@@ -406,7 +407,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Loading state */}
           {isLoadingShares && shares.length === 0 && (
             <div className="flex items-center justify-center py-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
             </div>
           )}
         </div>

frontend/src/components/step-library/CustomStepModal.tsx

@@ -5,6 +5,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 import { StepForm } from './StepForm'
 import { StepLibraryBrowser } from './StepLibraryBrowser'
 import type { Step, StepCreate } from '@/types/step'
+import { Spinner } from '@/components/common/Spinner'
 
 export interface CustomStepDraft {
   title: string
@@ -134,7 +135,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         {isSubmitting && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm">
             <div className="flex flex-col items-center gap-3">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+              <Spinner className="border-t-foreground" />
               <p className="text-sm text-muted-foreground">Creating step...</p>
             </div>
           </div>

frontend/src/components/tree-editor/TreeEditorLayout.tsx

@@ -5,6 +5,7 @@ import { NodeEditorPanel } from './NodeEditorPanel'
 import { MetadataSidePanel } from './MetadataSidePanel'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { cn } from '@/lib/utils'
+import { Spinner } from '@/components/common/Spinner'
 
 // Lazy load CodeModeEditor (Monaco is ~2MB)
 const CodeModeEditor = lazy(() =>
@@ -46,7 +47,7 @@ export function TreeEditorLayout({
           )}>
             <Suspense fallback={
               <div className="flex h-full items-center justify-center bg-card">
-                <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
               </div>
             }>
               <CodeModeEditor />

frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx

@@ -9,6 +9,7 @@ import { createCompletionProvider } from './resolutionFlowCompletions'
 import { CodeModeToolbar } from './CodeModeToolbar'
 import { SyntaxHelpPanel } from './SyntaxHelpPanel'
 import { setMonacoEditor } from './monacoEditorRef'
+import { Spinner } from '@/components/common/Spinner'
 
 export function CodeModeEditor() {
   const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
@@ -167,7 +168,7 @@ export function CodeModeEditor() {
           onMount={handleEditorDidMount}
           loading={
             <div className="flex h-full items-center justify-center bg-card">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
             </div>
           }
           options={{

frontend/src/pages/AccountSettingsPage.tsx

@@ -138,12 +138,10 @@ export function AccountSettingsPage() {
 
   if (error) {
     return (
-      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+      <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
-        <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
+        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-2">
+          <AlertCircle className="h-5 w-5" />
-            <AlertCircle className="h-5 w-5" />
+          {error}
-            {error}
-          </div>
         </div>
       </div>
     )
@@ -152,7 +150,7 @@ export function AccountSettingsPage() {
   const sub = subscription?.subscription
 
   return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+    <div>
       <div className="mb-8">
         <div className="flex items-center gap-3">
           <Building2 className="h-8 w-8 text-muted-foreground" />

frontend/src/pages/ForgotPasswordPage.tsx

@@ -35,7 +35,7 @@ export function ForgotPasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-foreground tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Reset Password
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">

frontend/src/pages/MaintenanceFlowDetailPage.tsx

@@ -5,6 +5,9 @@ import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
 import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import type { Tree, MaintenanceSchedule, Session } from '@/types'
@@ -64,12 +67,29 @@ export default function MaintenanceFlowDetailPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        <Spinner size="sm" className="h-6 w-6 border-primary border-t-transparent" />
       </div>
     )
   }
 
-  if (!tree) return null
+  if (!tree) {
+    return (
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Maintenance flow not found"
+          description="This flow is unavailable or you do not have access."
+          action={(
+            <button
+              onClick={() => navigate('/trees?type=maintenance')}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Back to Maintenance Flows
+            </button>
+          )}
+        />
+      </div>
+    )
+  }
 
   // Group sessions by batch_id for run history
   const batchMap = new Map<string, Session[]>()
@@ -81,43 +101,42 @@ export default function MaintenanceFlowDetailPage() {
   const batches = Array.from(batchMap.entries()).slice(0, 10)
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6 p-6">
+    <div className="container mx-auto max-w-4xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
       {/* Header */}
-      <div className="flex items-start justify-between">
+      <PageHeader
-        <div className="flex items-center gap-3">
+        title={tree.name}
+        description={tree.description || undefined}
+        icon={(
           <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
             <Wrench className="h-5 w-5" />
           </div>
-          <div>
+        )}
-            <h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
+        titleClassName="text-xl font-semibold"
-            {tree.description && (
+        action={(
-              <p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
+          <div className="flex gap-2">
-            )}
+            <button
+              onClick={() => navigate(`/flows/${id}/edit`)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <Settings className="h-3.5 w-3.5" />
+              Edit Flow
+            </button>
+            <button
+              onClick={() => navigate(`/flows/${id}/navigate`)}
+              className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+            >
+              <Play className="h-3.5 w-3.5" />
+              Run
+            </button>
+            <button
+              onClick={() => setShowBatchModal(true)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Batch Launch
+            </button>
           </div>
-        </div>
+        )}
-        <div className="flex gap-2">
+      />
-          <button
-            onClick={() => navigate(`/flows/${id}/edit`)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <Settings className="h-3.5 w-3.5" />
-            Edit Flow
-          </button>
-          <button
-            onClick={() => navigate(`/flows/${id}/navigate`)}
-            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
-            <Play className="h-3.5 w-3.5" />
-            Run
-          </button>
-          <button
-            onClick={() => setShowBatchModal(true)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            Batch Launch
-          </button>
-        </div>
-      </div>
 
       {/* Schedule Panel */}
       <div className="rounded-xl border border-border bg-card p-5">

frontend/src/pages/MyAnalyticsPage.tsx

@@ -11,6 +11,7 @@ import {
   ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
 import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
@@ -54,8 +55,11 @@ export default function MyAnalyticsPage() {
 
   if (!data) {
     return (
-      <div className="flex items-center justify-center min-h-[60vh]">
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
       </div>
     )
   }

frontend/src/pages/TeamAnalyticsPage.tsx

@@ -11,8 +11,10 @@ import {
   ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
+import { toast } from '@/lib/toast'
 import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'
 
 const CHART_COLORS = {
@@ -46,6 +48,12 @@ export default function TeamAnalyticsPage() {
       .finally(() => setLoading(false))
   }, [period, isAccountOwner, isSuperAdmin])
 
+  useEffect(() => {
+    if (!isAccountOwner && !isSuperAdmin) {
+      toast.info('Viewing your personal analytics', { id: 'analytics-redirect' })
+    }
+  }, [isAccountOwner, isSuperAdmin])
+
   if (!isAccountOwner && !isSuperAdmin) {
     return <Navigate to="/analytics/me" replace />
   }
@@ -60,8 +68,11 @@ export default function TeamAnalyticsPage() {
 
   if (!data) {
     return (
-      <div className="flex items-center justify-center min-h-[60vh]">
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
       </div>
     )
   }

frontend/src/pages/TreeLibraryPage.tsx

@@ -21,6 +21,8 @@ import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { toast } from '@/lib/toast'
 
 export function TreeLibraryPage() {
@@ -465,13 +467,17 @@ export function TreeLibraryPage() {
           {/* Loading State */}
           {isLoading ? (
             <div className="flex justify-center py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
+              <Spinner />
             </div>
           ) : trees.length === 0 ? (
-            <div className="py-12 text-center text-muted-foreground">
+            <EmptyState
-              No flows found.{' '}
+              title="No flows found"
-              {(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
+              description={
-            </div>
+                (searchQuery || hasActiveFilters)
+                  ? 'Try adjusting your filters.'
+                  : 'Create your first flow to get started.'
+              }
+            />
           ) : (
             <>
               {treeLibraryView === 'grid' && (

frontend/src/pages/TreeNavigationPage.tsx

@@ -795,7 +795,7 @@ export function TreeNavigationPage() {
                   {index < 9 && (
                     selectingOption === option.id ? (
                       <span className="flex h-6 w-6 shrink-0 items-center justify-center">
-                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                        <Spinner size="sm" className="h-4 w-4 border-t-foreground" />
                       </span>
                     ) : (
                       <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">

frontend/src/pages/account/TargetListsPage.tsx

@@ -4,6 +4,10 @@ import { targetListsApi } from '@/api'
 import type { TargetList, TargetListCreate, TargetEntry } from '@/types'
 import { toast } from '@/lib/toast'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
+import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'
 
 export default function TargetListsPage() {
   const [lists, setLists] = useState<TargetList[]>([])
@@ -103,34 +107,31 @@ export default function TargetListsPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <PageHeader
-        <div>
+        title="Target Lists"
-          <h1 className="text-xl font-semibold text-foreground">Target Lists</h1>
+        titleClassName="text-xl font-semibold"
-          <p className="text-[0.8125rem] text-muted-foreground">
+        description="Saved server lists for maintenance flow batch launching"
-            Saved server lists for maintenance flow batch launching
+        action={(
-          </p>
+          <button
-        </div>
+            onClick={() => openEditor()}
-        <button
+            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          onClick={() => openEditor()}
+          >
-          className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+            <Plus className="h-4 w-4" />
-        >
+            New List
-          <Plus className="h-4 w-4" />
+          </button>
-          New List
+        )}
-        </button>
+      />
-      </div>
 
       {isLoading ? (
         <div className="flex h-32 items-center justify-center">
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <Spinner size="sm" className="h-5 w-5 border-primary border-t-transparent" />
         </div>
       ) : lists.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-xl border border-border bg-card py-12 text-center">
+        <EmptyState
-          <Server className="mb-3 h-10 w-10 text-muted-foreground" />
+          icon={<Server className="h-10 w-10" />}
-          <p className="font-medium text-foreground">No target lists yet</p>
+          title="No target lists yet"
-          <p className="mt-1 text-[0.8125rem] text-muted-foreground">
+          description="Create lists of servers to reuse across maintenance runs."
-            Create lists of servers to reuse across maintenance runs
+        />
-          </p>
-        </div>
       ) : (
         <div className="space-y-3">
           {lists.map(list => (
@@ -172,68 +173,68 @@ export default function TargetListsPage() {
       )}
 
       {/* Editor Modal */}
-      {showEditor && (
+      <Modal
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+        isOpen={showEditor}
-          <div className="w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-2xl">
+        onClose={() => setShowEditor(false)}
-            <h2 className="mb-4 text-base font-semibold text-foreground">
+        title={editingList ? 'Edit Target List' : 'New Target List'}
-              {editingList ? 'Edit Target List' : 'New Target List'}
+        size="md"
-            </h2>
+        footer={(
-            <div className="space-y-4">
+          <div className="flex justify-end gap-2">
-              <div>
+            <button
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              onClick={() => setShowEditor(false)}
-                  Name
+              className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-                </label>
+            >
-                <input
+              Cancel
-                  type="text"
+            </button>
-                  value={editorName}
+            <button
-                  onChange={e => setEditorName(e.target.value)}
+              onClick={handleSave}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              disabled={isSaving}
-                  placeholder="e.g. RDS Farm A"
+              className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
-                />
+            >
-              </div>
+              {isSaving ? 'Saving\u2026' : 'Save'}
-              <div>
+            </button>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+          </div>
-                  Description (optional)
+        )}
-                </label>
+      >
-                <input
+        <div className="space-y-4">
-                  type="text"
+          <div>
-                  value={editorDescription}
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  onChange={e => setEditorDescription(e.target.value)}
+              Name
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            </label>
-                  placeholder="e.g. Production RDS servers"
+            <input
-                />
+              type="text"
-              </div>
+              value={editorName}
-              <div>
+              onChange={e => setEditorName(e.target.value)}
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  Targets &mdash; one per line (add notes after #)
+              placeholder="e.g. RDS Farm A"
-                </label>
+            />
-                <textarea
+          </div>
-                  value={editorTargets}
+          <div>
-                  onChange={e => setEditorTargets(e.target.value)}
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  rows={6}
+              Description (optional)
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            </label>
-                  placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
+            <input
-                />
+              type="text"
-              </div>
+              value={editorDescription}
-            </div>
+              onChange={e => setEditorDescription(e.target.value)}
-            <div className="mt-6 flex justify-end gap-2">
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-              <button
+              placeholder="e.g. Production RDS servers"
-                onClick={() => setShowEditor(false)}
+            />
-                className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+          </div>
-              >
+          <div>
-                Cancel
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-              </button>
+              Targets &mdash; one per line (add notes after #)
-              <button
+            </label>
-                onClick={handleSave}
+            <textarea
-                disabled={isSaving}
+              value={editorTargets}
-                className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+              onChange={e => setEditorTargets(e.target.value)}
-              >
+              rows={6}
-                {isSaving ? 'Saving\u2026' : 'Save'}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-              </button>
+              placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
-            </div>
+            />
           </div>
         </div>
-      )}
+      </Modal>
 
       {deleteTarget && (
         <ConfirmDialog

frontend/src/pages/account/TeamCategoriesPage.tsx

@@ -3,6 +3,7 @@ import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
+import { PageHeader } from '@/components/common/PageHeader'
 import api from '@/api/client'
 
 interface TeamCategory {
@@ -80,17 +81,17 @@ export function TeamCategoriesPage() {
   const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+    <div className="space-y-6">
-      <div className="mb-6 flex items-center justify-between">
+      <PageHeader
-        <div>
+        title="Team Categories"
-          <h1 className="text-2xl font-bold font-heading text-foreground">Team Categories</h1>
+        description="Manage tree categories for your team"
-          <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
+        action={(
-        </div>
+          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
-        <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
+            <Plus className="h-4 w-4" />
-          <Plus className="h-4 w-4" />
+            Create Category
-          Create Category
+          </button>
-        </button>
+        )}
-      </div>
+      />
 
       {loading ? (
         <div className="space-y-3">

frontend/src/pages/admin/UserDetailPage.tsx

@@ -3,6 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
 import { StatusBadge } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
@@ -177,14 +179,25 @@ export function UserDetailPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
       </div>
     )
   }
 
   if (!user) {
     return (
-      <div className="py-20 text-center text-muted-foreground">User not found</div>
+      <EmptyState
+        title="User not found"
+        description="This user may have been removed or is unavailable."
+        action={(
+          <button
+            onClick={() => navigate('/admin/users')}
+            className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            Back to Users
+          </button>
+        )}
+      />
     )
   }
 
@@ -202,7 +215,7 @@ export function UserDetailPage() {
           <ArrowLeft className="h-4 w-4" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-semibold text-foreground">
+          <h1 className="text-xl font-heading font-semibold text-foreground">
             {user.full_name || user.email}
           </h1>
           <p className="text-sm text-muted-foreground">{user.email}</p>