diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index bdee3079..e2f4a371 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import { Component, type ReactNode } from 'react'
-import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface Props {
   children: ReactNode
@@ -45,15 +45,9 @@ export class ErrorBoundary extends Component<Props, State> {
                 {this.state.error.message}
               </pre>
             )}
-            <button
-              onClick={() => window.location.reload()}
-              className={cn(
-                'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90'
-              )}
-            >
+            <Button onClick={() => window.location.reload()}>
               Refresh Page
-            </button>
+            </Button>
           </div>
         </div>
       )
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index 71e9ae63..01931aea 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
-import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 function isChunkLoadError(error: unknown): boolean {
   if (!(error instanceof Error)) return false
@@ -55,24 +55,12 @@ export function RouteError() {
           <p className="mb-4 text-muted-foreground">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
-          <button
-            onClick={() => navigate(-1)}
-            className={cn(
-              'rounded-xl border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={() => navigate(-1)}>
             Go Back
-          </button>
-          <button
-            onClick={() => navigate('/trees')}
-            className={cn(
-              'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90'
-            )}
-          >
+          </Button>
+          <Button onClick={() => navigate('/trees')}>
             Go Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/procedural/CompletionSummary.tsx b/frontend/src/components/procedural/CompletionSummary.tsx
index a563e2eb..0f283c5e 100644
--- a/frontend/src/components/procedural/CompletionSummary.tsx
+++ b/frontend/src/components/procedural/CompletionSummary.tsx
@@ -1,4 +1,5 @@
 import { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import type { ProceduralStep } from '@/types'
 
 interface StepCompletion {
@@ -128,19 +129,13 @@ export function CompletionSummary({
 
       {/* Actions */}
       <div className="flex items-center gap-3">
-        <button
-          onClick={onExport}
-          className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
+        <Button variant="secondary" onClick={onExport} className="flex-1">
           <Download className="h-4 w-4" />
           Export Report
-        </button>
-        <button
-          onClick={onClose}
-          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-brand px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-        >
+        </Button>
+        <Button onClick={onClose} className="flex-1">
           Done
-        </button>
+        </Button>
       </div>
     </div>
   )
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index ad71e7da..3f28805e 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { cn } from '@/lib/utils'
 import { stepsApi } from '@/api/steps'
 import { stepCategoriesApi } from '@/api/stepCategories'
@@ -253,12 +254,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         ) : error ? (
           <div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
             <p className="text-sm text-red-400 mb-3">{error}</p>
-            <button
-              onClick={() => setRetryCount(c => c + 1)}
-              className="rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-            >
+            <Button variant="secondary" size="sm" onClick={() => setRetryCount(c => c + 1)}>
               Try again
-            </button>
+            </Button>
           </div>
         ) : steps.length === 0 ? (
           <div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
@@ -374,12 +372,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
       {/* Footer - Optional Create Button */}
       {showCreateButton && onCreateNew && (
         <div className="border-t border-border p-4">
-          <button
-            onClick={onCreateNew}
-            className="w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
+          <Button onClick={onCreateNew} className="w-full">
             + Create New Step
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 156a9c6e..51bd8bdb 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -6,6 +6,7 @@ import type { Account, AccountMember, AccountInvite } from '@/types'
 import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
 import { LeaveAccountModal } from '@/components/account/LeaveAccountModal'
 import { DeleteAccountModal } from '@/components/account/DeleteAccountModal'
+import { Button } from '@/components/ui/Button'
 import { Spinner } from '@/components/common/Spinner'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -200,29 +201,23 @@ export function AccountSettingsPage() {
                       }
                     }}
                   />
-                  <button
+                  <Button
                     onClick={handleSaveName}
-                    disabled={isSavingName}
-                    className={cn(
-                      'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 p-2',
-                      'hover:opacity-90 disabled:opacity-50'
-                    )}
+                    loading={isSavingName}
+                    size="icon-sm"
                   >
-                    {isSavingName ? (
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : (
-                      <Check className="h-4 w-4" />
-                    )}
-                  </button>
-                  <button
+                    <Check className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="icon-sm"
                     onClick={() => {
                       setEditedName(account?.name ?? '')
                       setIsEditingName(false)
                     }}
-                    className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
                   >
                     <X className="h-4 w-4" />
-                  </button>
+                  </Button>
                 </div>
               ) : (
                 <div className="mt-1 flex items-center gap-2">
@@ -429,23 +424,13 @@ export function AccountSettingsPage() {
                   <option value="engineer">Engineer</option>
                   <option value="viewer">Viewer</option>
                 </select>
-                <button
+                <Button
                   type="submit"
-                  disabled={isInviting || !inviteEmail.trim()}
-                  className={cn(
-                    'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
+                  disabled={!inviteEmail.trim()}
+                  loading={isInviting}
                 >
-                  {isInviting ? (
-                    <span className="flex items-center gap-2">
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Sending...
-                    </span>
-                  ) : (
-                    'Send Invite'
-                  )}
-                </button>
+                  {isInviting ? 'Sending...' : 'Send Invite'}
+                </Button>
               </div>
 
               {inviteError && (
@@ -633,30 +618,27 @@ export function AccountSettingsPage() {
                     <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
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     onClick={() => setShowTransferModal(true)}
-                    className={cn(
-                      'rounded-[10px] px-3 py-1.5 text-sm font-medium',
-                      'border border-amber-500/30 text-amber-400 hover:bg-amber-500/10'
-                    )}
+                    className="border-amber-500/30 text-amber-400 hover:bg-amber-500/10"
                   >
                     Transfer
-                  </button>
+                  </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>
                   </div>
-                  <button
+                  <Button
+                    variant="destructive"
+                    size="sm"
                     onClick={() => setShowDeleteModal(true)}
-                    className={cn(
-                      'rounded-[10px] px-3 py-1.5 text-sm font-medium',
-                      'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
-                    )}
                   >
                     Delete
-                  </button>
+                  </Button>
                 </div>
               </>
             ) : (
@@ -665,15 +647,13 @@ export function AccountSettingsPage() {
                   <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
+                <Button
+                  variant="destructive"
+                  size="sm"
                   onClick={() => setShowLeaveModal(true)}
-                  className={cn(
-                    'rounded-[10px] px-3 py-1.5 text-sm font-medium',
-                    'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
-                  )}
                 >
                   Leave
-                </button>
+                </Button>
               </div>
             )}
           </div>
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 17ea9a4a..020f7bfd 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Globe, Users, Copy, Check, Link2, ExternalLink, Trash2, ArrowLeft } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
@@ -110,12 +111,9 @@ export default function MySharesPage() {
         <div className="bg-card border border-red-400/20 rounded-xl p-6">
           <div className="text-center">
             <p className="text-red-400 text-sm mb-4">{error}</p>
-            <button
-              onClick={fetchShares}
-              className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
-            >
+            <Button onClick={fetchShares}>
               Try again
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -147,12 +145,9 @@ export default function MySharesPage() {
             title="No shared sessions"
             description="Share a session from the session detail page to create a link"
             action={
-              <button
-                onClick={() => navigate('/sessions')}
-                className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
-              >
+              <Button onClick={() => navigate('/sessions')}>
                 Go to Sessions
-              </button>
+              </Button>
             }
           />
         </div>
@@ -201,14 +196,10 @@ export default function MySharesPage() {
 
                 {/* Actions */}
                 <div className="flex flex-wrap items-center gap-2">
-                  <button
+                  <Button
+                    size="sm"
                     onClick={() => handleCopyLink(share)}
-                    className={cn(
-                      'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
-                      isCopied
-                        ? 'bg-emerald-400/10 text-emerald-400'
-                        : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
-                    )}
+                    className={isCopied ? 'bg-emerald-400/10 text-emerald-400 shadow-none hover:opacity-100' : ''}
                   >
                     {isCopied ? (
                       <Check className="h-3.5 w-3.5" />
@@ -216,7 +207,7 @@ export default function MySharesPage() {
                       <Copy className="h-3.5 w-3.5" />
                     )}
                     {isCopied ? 'Copied' : 'Copy Link'}
-                  </button>
+                  </Button>
 
                   <Link
                     to={`/sessions/${share.session_id}`}
@@ -226,13 +217,14 @@ export default function MySharesPage() {
                     View Session
                   </Link>
 
-                  <button
+                  <Button
+                    variant="destructive"
+                    size="sm"
                     onClick={() => setRevokeTarget(share)}
-                    className="inline-flex items-center gap-1.5 text-red-400 hover:text-red-300 hover:bg-red-400/10 rounded-md px-3 py-1.5 text-sm transition-colors"
                   >
                     <Trash2 className="h-3.5 w-3.5" />
                     Revoke
-                  </button>
+                  </Button>
                 </div>
               </div>
             )
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 38e6df6f..44dabe7f 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
@@ -125,14 +126,13 @@ export function MyTreesPage() {
         </div>
         {canCreateTrees && (
           <div className="relative">
-            <button
+            <Button
               onClick={() => setShowCreateMenu(!showCreateMenu)}
-              className="flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               <Plus className="h-4 w-4" />
               Create New
               <ChevronDown className="h-3.5 w-3.5" />
-            </button>
+            </Button>
             {showCreateMenu && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
@@ -297,17 +297,13 @@ export function MyTreesPage() {
 
               {/* Actions */}
               <div className="flex items-center gap-2">
-                <button
-                  type="button"
+                <Button
                   onClick={() => handleStartSession(tree)}
-                  className={cn(
-                    'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
-                    'hover:opacity-90'
-                  )}
+                  className="flex-1"
                 >
                   <Play className="h-4 w-4" />
                   Start
-                </button>
+                </Button>
                 {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                   <Link
                     to={getEditPath(tree)}
@@ -320,42 +316,36 @@ export function MyTreesPage() {
                     <Pencil className="h-4 w-4" />
                   </Link>
                 )}
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  size="icon"
                   onClick={() => {
                     setTreeToShare(tree)
                     setShowShareModal(true)
                   }}
-                  className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
-                  )}
                   title="Share tree"
                 >
                   <Share2 className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="icon"
                   onClick={() => setForkTarget(tree)}
-                  className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                   title="Fork flow"
                 >
                   <GitBranch className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="icon"
                   onClick={() => {
                     setTreeToDelete(tree)
                     setShowDeleteConfirm(true)
                   }}
-                  className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
-                    'hover:bg-red-400/10 hover:text-red-400'
-                  )}
                   title="Delete tree"
                 >
                   <Trash2 className="h-4 w-4" />
-                </button>
+                </Button>
               </div>
             </div>
           ))}
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 5419b0ce..b1c6a73e 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { Save, ArrowLeft, ListOrdered, Wrench, Settings, FileText, Calendar, Sparkles, Layers } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
 import { CollapsibleEditorSection } from '@/components/procedural-editor/CollapsibleEditorSection'
@@ -220,21 +221,20 @@ export function ProceduralEditorPage() {
             <Sparkles className="h-4 w-4" />
             AI Assist
           </button>
-          <button
+          <Button
+            variant="secondary"
             onClick={() => handleSave('draft')}
             disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             Save Draft
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={() => handleSave('published')}
-            disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+            loading={isSaving}
           >
             <Save className="h-4 w-4" />
             {isSaving ? 'Saving...' : 'Publish'}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 0c1a6074..71710514 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { Copy, Check, Eye, Save, Share2, CheckCircle2, AlertTriangle, ArrowUpRight, HelpCircle, Flag } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { sessionsApi } from '@/api/sessions'
 import { stepsApi } from '@/api/steps'
 import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
@@ -391,13 +392,10 @@ export function SessionDetailPage() {
               </div>
             </div>
             {/* Primary action: Copy for Ticket */}
-            <button
-              onClick={handleCopyForTicket}
-              className="flex shrink-0 items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-            >
+            <Button onClick={handleCopyForTicket} className="shrink-0">
               {copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
               {copiedPsa ? 'Copied!' : 'Copy for Ticket'}
-            </button>
+            </Button>
           </div>
         </div>
       ) : !session.completed_at ? (
@@ -410,12 +408,9 @@ export function SessionDetailPage() {
               <p className="text-xs text-muted-foreground">Set an outcome to finalize this session and generate documentation.</p>
             </div>
           </div>
-          <button
-            onClick={() => setShowOutcomeModal(true)}
-            className="shrink-0 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
+          <Button onClick={() => setShowOutcomeModal(true)} className="shrink-0">
             Complete Session
-          </button>
+          </Button>
         </div>
       ) : null}
 
@@ -462,14 +457,15 @@ export function SessionDetailPage() {
         >
           {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
         </button>
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={handlePreview}
           disabled={isExporting}
-          className="flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
         >
           <Eye className="h-4 w-4" />
           {isExporting ? 'Loading...' : 'Preview'}
-        </button>
+        </Button>
         {/* Copy for ticket (secondary position when session is complete) */}
         {session.completed_at && (
           <button
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
index b1ca8970..27daa66a 100644
--- a/frontend/src/pages/StepLibraryPage.tsx
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Bookmark, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { stepsApi } from '@/api/steps'
@@ -99,12 +100,9 @@ export default function StepLibraryPage() {
           </div>
         </div>
         {canCreateSteps && (
-          <button
-            onClick={() => setCreateOpen(true)}
-            className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
+          <Button onClick={() => setCreateOpen(true)}>
             + Create Step
-          </button>
+          </Button>
         )}
       </div>
 
@@ -147,20 +145,22 @@ export default function StepLibraryPage() {
               <p className="mb-4 text-sm text-red-400">{deleteError}</p>
             )}
             <div className="flex gap-2">
-              <button
+              <Button
+                variant="secondary"
                 onClick={() => { setDeletingStep(null); setDeleteError(null) }}
                 disabled={isDeleting}
-                className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+                className="flex-1"
               >
                 Cancel
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="destructive"
                 onClick={handleDeleteConfirm}
-                disabled={isDeleting}
-                className="flex-1 rounded-md bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600 disabled:opacity-50"
+                loading={isDeleting}
+                className="flex-1"
               >
                 {isDeleting ? 'Deleting...' : 'Delete'}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index 344a5284..2b47b0ee 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 import { useParams, useNavigate, useBlocker } from 'react-router-dom'
 import { useStore } from 'zustand'
 import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings, Download, Sparkles } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { getMonacoEditor } from '@/components/tree-editor/code-mode'
 import { treesApi } from '@/api/trees'
 import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -508,15 +509,9 @@ export function TreeEditorPage() {
         <p className="mb-6 max-w-sm text-sm text-muted-foreground">
           The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
         </p>
-        <button
-          onClick={() => navigate('/trees')}
-          className={cn(
-            'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-            'hover:opacity-90'
-          )}
-        >
+        <Button onClick={() => navigate('/trees')}>
           Back to Library
-        </button>
+        </Button>
       </div>
     )
   }
@@ -535,24 +530,12 @@ export function TreeEditorPage() {
               You have an unsaved draft from a previous session. Would you like to restore it?
             </p>
             <div className="flex gap-2">
-              <button
-                onClick={handleRestoreDraft}
-                className={cn(
-                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
-                )}
-              >
+              <Button onClick={handleRestoreDraft} className="flex-1">
                 Restore Draft
-              </button>
-              <button
-                onClick={handleDiscardDraft}
-                className={cn(
-                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                  'hover:bg-accent hover:text-foreground'
-                )}
-              >
+              </Button>
+              <Button variant="secondary" onClick={handleDiscardDraft} className="flex-1">
                 Start Fresh
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -567,24 +550,12 @@ export function TreeEditorPage() {
               You have unsaved changes. Are you sure you want to leave?
             </p>
             <div className="flex gap-2">
-              <button
-                onClick={handleBlockerReset}
-                className={cn(
-                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
-                )}
-              >
+              <Button onClick={handleBlockerReset} className="flex-1">
                 Stay
-              </button>
-              <button
-                onClick={handleBlockerProceed}
-                className={cn(
-                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
-                  'hover:bg-accent'
-                )}
-              >
+              </Button>
+              <Button variant="destructive" onClick={handleBlockerProceed} className="flex-1">
                 Leave Without Saving
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -787,32 +758,26 @@ export function TreeEditorPage() {
           </button>
 
           {/* Save Draft */}
-          <button
+          <Button
+            variant="secondary"
             onClick={handleSaveDraft}
             disabled={isSaving || !isDirty}
             title="Save as draft (Ctrl+S when draft or has errors)"
-            className={cn(
-              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
-            )}
           >
             <Save className="h-4 w-4" />
             Save Draft
-          </button>
+          </Button>
 
           {/* Publish */}
-          <button
+          <Button
             onClick={handlePublish}
             disabled={isSaving || hasBlockingErrors}
+            loading={isSaving}
             title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
-            className={cn(
-              'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-            )}
           >
             <CheckCircle2 className="h-4 w-4" />
             {isSaving ? 'Publishing...' : 'Publish'}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index aed0be7d..1865314c 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useMemo } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { X, RotateCcw, Play, FileUp } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
 import { foldersApi } from '@/api/folders'
@@ -283,13 +284,13 @@ export function TreeLibraryPage() {
             </div>
             {canCreateTrees && (
               <div className="flex items-center gap-2">
-                <button
+                <Button
+                  variant="secondary"
                   onClick={() => setShowImportModal(true)}
-                  className="flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
                 >
                   <FileUp className="h-4 w-4" />
                   Import
-                </button>
+                </Button>
                 <CreateFlowDropdown
                   aiEnabled={aiEnabled}
 
@@ -315,15 +316,9 @@ export function TreeLibraryPage() {
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
-                <button
-                  onClick={handleSearch}
-                  className={cn(
-                    'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                    'hover:opacity-90'
-                  )}
-                >
+                <Button onClick={handleSearch}>
                   Search
-                </button>
+                </Button>
               </div>
 
               <select
@@ -436,13 +431,13 @@ export function TreeLibraryPage() {
                     </p>
                   </div>
                   <div className="flex items-center gap-2">
-                    <button
+                    <Button
+                      size="sm"
                       onClick={() => navigate(getSessionResumePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
-                      className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
                     >
                       <Play className="h-3.5 w-3.5" />
                       Resume
-                    </button>
+                    </Button>
                     <button
                       onClick={() => dismissSession(s.id)}
                       className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 1de7c257..c273e680 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -21,6 +21,7 @@ import { StepFeedback } from '@/components/session/StepFeedback'
 import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
 import { CopilotPanel } from '@/components/copilot/CopilotPanel'
 import { CopilotToggle } from '@/components/copilot/CopilotToggle'
+import { Button } from '@/components/ui/Button'
 
 interface LocationState {
   sessionId?: string
@@ -601,15 +602,9 @@ export function TreeNavigationPage() {
             />
           </div>
 
-          <button
-            onClick={startSession}
-            className={cn(
-              'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-              'hover:opacity-90'
-            )}
-          >
+          <Button onClick={startSession} className="w-full">
             Start Troubleshooting
-          </button>
+          </Button>
         </div>
       </div>
     )
@@ -940,17 +935,14 @@ export function TreeNavigationPage() {
               const targetLabel = targetNode?.question || targetNode?.title || 'next step'
               return (
                 <div className="mt-6 border-t border-primary/30 pt-4">
-                  <button
-                    type="button"
+                  <Button
                     onClick={handleCustomContinueToDescendant}
-                    className={cn(
-                      'flex w-full items-center justify-between rounded-md bg-gradient-brand px-4 py-3 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                      'hover:opacity-90'
-                    )}
+                    className="w-full justify-between"
+                    size="lg"
                   >
                     <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
                     <ArrowRight className="h-4 w-4 shrink-0" />
-                  </button>
+                  </Button>
                 </div>
               )
             })()}
@@ -1063,15 +1055,9 @@ export function TreeNavigationPage() {
               </p>
             )}
             {currentNode.next_node_id && (
-              <button
-                onClick={() => handleContinue()}
-                className={cn(
-                  'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
-                )}
-              >
+              <Button onClick={() => handleContinue()}>
                 Continue
-              </button>
+              </Button>
             )}
           </>
         )}
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index c2665cdc..ffa5c3b9 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
@@ -86,10 +87,10 @@ export function TeamCategoriesPage() {
         title="Team Categories"
         description="Manage tree categories for your team"
         action={(
-          <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)}>
             <Plus className="h-4 w-4" />
             Create Category
-          </button>
+          </Button>
         )}
       />
 
@@ -132,8 +133,8 @@ export function TeamCategoriesPage() {
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
+            <Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
           </div>
         }
       >
@@ -157,8 +158,8 @@ export function TeamCategoriesPage() {
       <Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
+            <Button variant="secondary" onClick={() => setEditCategory(null)}>Cancel</Button>
+            <Button onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
           </div>
         }
       >
diff --git a/frontend/src/pages/admin/FeatureFlagsPage.tsx b/frontend/src/pages/admin/FeatureFlagsPage.tsx
index 26f0d077..42ecf482 100644
--- a/frontend/src/pages/admin/FeatureFlagsPage.tsx
+++ b/frontend/src/pages/admin/FeatureFlagsPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, ToggleLeft } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -153,10 +154,10 @@ export function FeatureFlagsPage() {
         title="Feature Flags"
         description="Manage feature availability per plan and account"
         action={
-          <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)}>
             <Plus className="h-4 w-4" />
             Create Flag
-          </button>
+          </Button>
         }
       />
 
@@ -172,10 +173,10 @@ export function FeatureFlagsPage() {
       <div>
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
-          <button onClick={() => setOverrideOpen(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={() => setOverrideOpen(true)}>
             <Plus className="h-4 w-4" />
             Add Override
-          </button>
+          </Button>
         </div>
         <div className="mt-3">
           <DataTable columns={overrideColumns} data={overrides} keyExtractor={(o) => o.id} isLoading={loading}
@@ -188,8 +189,8 @@ export function FeatureFlagsPage() {
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Feature Flag" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
+            <Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name}>Create</Button>
           </div>
         }
       >
@@ -213,8 +214,8 @@ export function FeatureFlagsPage() {
       <Modal isOpen={overrideOpen} onClose={() => setOverrideOpen(false)} title="Add Account Override" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setOverrideOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
+            <Button variant="secondary" onClick={() => setOverrideOpen(false)}>Cancel</Button>
+            <Button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id}>Create</Button>
           </div>
         }
       >
diff --git a/frontend/src/pages/admin/GlobalCategoriesPage.tsx b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
index cc42e109..aa1d8158 100644
--- a/frontend/src/pages/admin/GlobalCategoriesPage.tsx
+++ b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -95,10 +96,10 @@ export function GlobalCategoriesPage() {
         title="Global Categories"
         description="Manage tree categories available to all accounts"
         action={
-          <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)}>
             <Plus className="h-4 w-4" />
             Create Category
-          </button>
+          </Button>
         }
       />
 
@@ -118,8 +119,8 @@ export function GlobalCategoriesPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
+            <Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
           </div>
         }
       >
@@ -147,8 +148,8 @@ export function GlobalCategoriesPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
+            <Button variant="secondary" onClick={() => setEditCategory(null)}>Cancel</Button>
+            <Button onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
           </div>
         }
       >
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index 05788ce5..d938d3b7 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Copy, Trash2, Ticket, Mail, MailCheck, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -215,16 +216,10 @@ export function InviteCodesPage() {
         title="Invite Codes"
         description="Create and manage registration invite codes with plan assignment"
         action={
-          <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)}>
             <Plus className="h-4 w-4" />
             Create Code
-          </button>
+          </Button>
         }
       />
 
@@ -249,19 +244,10 @@ export function InviteCodesPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => { setCreateOpen(false); resetForm() }}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleCreate}
-              disabled={creating}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
-            >
+            <Button variant="secondary" onClick={() => { setCreateOpen(false); resetForm() }}>Cancel</Button>
+            <Button onClick={handleCreate} loading={creating}>
               {creating ? 'Creating...' : 'Create'}
-            </button>
+            </Button>
           </div>
         }
       >
diff --git a/frontend/src/pages/admin/PlanLimitsPage.tsx b/frontend/src/pages/admin/PlanLimitsPage.tsx
index 63026298..a7778d1e 100644
--- a/frontend/src/pages/admin/PlanLimitsPage.tsx
+++ b/frontend/src/pages/admin/PlanLimitsPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Gauge } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -127,13 +128,10 @@ export function PlanLimitsPage() {
       <div>
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
-          <button
-            onClick={() => setCreateOverride(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={() => setCreateOverride(true)}>
             <Plus className="h-4 w-4" />
             Add Override
-          </button>
+          </Button>
         </div>
         <div className="mt-3">
           <DataTable
@@ -154,8 +152,8 @@ export function PlanLimitsPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditPlan(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleSavePlan} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90">Save</button>
+            <Button variant="secondary" onClick={() => setEditPlan(null)}>Cancel</Button>
+            <Button onClick={handleSavePlan}>Save</Button>
           </div>
         }
       >
@@ -185,8 +183,8 @@ export function PlanLimitsPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOverride(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
-            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
+            <Button variant="secondary" onClick={() => setCreateOverride(false)}>Cancel</Button>
+            <Button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code}>Create</Button>
           </div>
         }
       >
diff --git a/frontend/src/pages/admin/UserDetailPage.tsx b/frontend/src/pages/admin/UserDetailPage.tsx
index 40deb024..019e83ae 100644
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 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 { Button } from '@/components/ui/Button'
 import { StatusBadge } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
 import { Spinner } from '@/components/common/Spinner'
@@ -205,12 +206,9 @@ export function UserDetailPage() {
         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"
-          >
+          <Button variant="secondary" onClick={() => navigate('/admin/users')}>
             Back to Users
-          </button>
+          </Button>
         )}
       />
     )
@@ -525,18 +523,8 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setPlanModalOpen(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleChangePlan}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
-            >
-              Update Plan
-            </button>
+            <Button variant="secondary" onClick={() => setPlanModalOpen(false)}>Cancel</Button>
+            <Button onClick={handleChangePlan}>Update Plan</Button>
           </div>
         }
       >
@@ -563,19 +551,10 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setResetModalOpen(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleResetPassword}
-              disabled={resetLoading}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
-            >
+            <Button variant="secondary" onClick={() => setResetModalOpen(false)}>Cancel</Button>
+            <Button onClick={handleResetPassword} loading={resetLoading}>
               {resetLoading ? 'Resetting...' : 'Reset Password'}
-            </button>
+            </Button>
           </div>
         }
       >
@@ -624,12 +603,7 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end">
-            <button
-              onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
-            >
-              Done
-            </button>
+            <Button onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}>Done</Button>
           </div>
         }
       >
@@ -663,18 +637,10 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setTrialModalOpen(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleExtendTrial}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
-            >
+            <Button variant="secondary" onClick={() => setTrialModalOpen(false)}>Cancel</Button>
+            <Button onClick={handleExtendTrial}>
               {user.subscription?.status === 'trialing' ? 'Extend' : 'Start Trial'}
-            </button>
+            </Button>
           </div>
         }
       >
@@ -700,23 +666,13 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setSuperAdminModalOpen(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
-            >
-              Cancel
-            </button>
-            <button
+            <Button variant="secondary" onClick={() => setSuperAdminModalOpen(false)}>Cancel</Button>
+            <Button
               onClick={handleToggleSuperAdmin}
-              className={cn(
-                'rounded-md px-4 py-2 text-sm font-medium text-white',
-                user.is_super_admin
-                  ? 'bg-yellow-600 hover:bg-yellow-700'
-                  : 'bg-gradient-brand shadow-lg shadow-primary/20 hover:opacity-90'
-              )}
+              className={user.is_super_admin ? 'bg-yellow-600 hover:bg-yellow-700 shadow-none' : ''}
             >
               {user.is_super_admin ? 'Remove Access' : 'Promote'}
-            </button>
+            </Button>
           </div>
         }
       >
@@ -741,19 +697,11 @@ export function UserDetailPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setHardDeleteModalOpen(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
-            >
-              Cancel
-            </button>
+            <Button variant="secondary" onClick={() => setHardDeleteModalOpen(false)}>Cancel</Button>
             {hardDeleteBlockers && Object.keys(hardDeleteBlockers).length === 0 && (
-              <button
-                onClick={handleHardDelete}
-                className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-foreground hover:bg-red-700"
-              >
+              <Button variant="destructive" onClick={handleHardDelete}>
                 Delete Permanently
-              </button>
+              </Button>
             )}
           </div>
         }
diff --git a/frontend/src/pages/admin/UsersPage.tsx b/frontend/src/pages/admin/UsersPage.tsx
index 7a372610..f982acef 100644
--- a/frontend/src/pages/admin/UsersPage.tsx
+++ b/frontend/src/pages/admin/UsersPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { UserCheck, UserX, Shield, ArrowRightLeft, ExternalLink, UserPlus, Copy, Check, Mail } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { DataTable, Pagination, SearchInput, PageHeader, StatusBadge, ActionMenu } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -266,20 +267,14 @@ export function UsersPage() {
       <div className="flex items-center justify-between">
         <PageHeader title="Users" description="Manage platform users and roles" />
         <div className="flex items-center gap-3">
-          <button
-            onClick={() => setShowInviteModal(true)}
-            className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors"
-          >
+          <Button variant="secondary" onClick={() => setShowInviteModal(true)}>
             <Mail className="h-4 w-4" />
             Invite User
-          </button>
-          <button
-            onClick={() => setShowCreateModal(true)}
-            className="flex items-center gap-2 rounded-lg bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 transition-colors"
-          >
+          </Button>
+          <Button onClick={() => setShowCreateModal(true)}>
             <UserPlus className="h-4 w-4" />
             Create User
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -324,18 +319,8 @@ export function UsersPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setRoleModalUser(null)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleRoleChange}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
-            >
-              Save
-            </button>
+            <Button variant="secondary" onClick={() => setRoleModalUser(null)}>Cancel</Button>
+            <Button onClick={handleRoleChange}>Save</Button>
           </div>
         }
       >
@@ -365,19 +350,8 @@ export function UsersPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setMoveModalUser(null)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleMoveAccount}
-              disabled={!displayCode}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
-            >
-              Move
-            </button>
+            <Button variant="secondary" onClick={() => setMoveModalUser(null)}>Cancel</Button>
+            <Button onClick={handleMoveAccount} disabled={!displayCode}>Move</Button>
           </div>
         }
       >
@@ -409,19 +383,10 @@ export function UsersPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setShowCreateModal(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleCreateUser}
-              disabled={createLoading || !createForm.email || !createForm.name}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
-            >
+            <Button variant="secondary" onClick={() => setShowCreateModal(false)}>Cancel</Button>
+            <Button onClick={handleCreateUser} disabled={!createForm.email || !createForm.name} loading={createLoading}>
               {createLoading ? 'Creating...' : 'Create User'}
-            </button>
+            </Button>
           </div>
         }
       >
@@ -520,12 +485,7 @@ export function UsersPage() {
         size="sm"
         footer={
           <div className="flex justify-end">
-            <button
-              onClick={() => setTempPassword(null)}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
-            >
-              Done
-            </button>
+            <Button onClick={() => setTempPassword(null)}>Done</Button>
           </div>
         }
       >
@@ -562,19 +522,10 @@ export function UsersPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => setShowInviteModal(false)}
-              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleInviteUser}
-              disabled={inviteLoading || !inviteForm.email || !inviteForm.account_display_code}
-              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
-            >
+            <Button variant="secondary" onClick={() => setShowInviteModal(false)}>Cancel</Button>
+            <Button onClick={handleInviteUser} disabled={!inviteForm.email || !inviteForm.account_display_code} loading={inviteLoading}>
               {inviteLoading ? 'Sending...' : 'Send Invite'}
-            </button>
+            </Button>
           </div>
         }
       >