From 0ec3d62aced15e87a11ec670d115e98ce762a3d1 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 22:32:56 -0500
Subject: [PATCH 1/3] refactor: enforce shared Modal component in remaining
 custom modals

- ShareSessionModal: replaced custom modal markup with <Modal>
- CreateCategoryModal: replaced custom modal markup with <Modal>
- EditCategoryModal: replaced custom modal markup with <Modal>
- All now get focus trapping, Escape close, body scroll lock for free

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin/CreateCategoryModal.tsx  | 169 +++----
 .../components/admin/EditCategoryModal.tsx    | 168 +++----
 .../components/session/ShareSessionModal.tsx  | 469 +++++++++---------
 3 files changed, 379 insertions(+), 427 deletions(-)

diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index adda04b5..4c2f5e33 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Modal } from '@/components/common/Modal'
 
 interface CreateCategoryModalProps {
   isOpen: boolean
@@ -19,8 +19,6 @@ export function CreateCategoryModal({
   const [description, setDescription] = useState('')
   const [error, setError] = useState('')
 
-  if (!isOpen) return null
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
@@ -40,7 +38,6 @@ export function CreateCategoryModal({
         name: name.trim(),
         description: description.trim()
       })
-      // Reset form on success
       setName('')
       setDescription('')
     } catch {
@@ -58,102 +55,90 @@ export function CreateCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">Create Category</h2>
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Create Category"
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
           <button
+            type="button"
             onClick={handleClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            className={cn(
+              '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'
+            )}
           >
-            <X className="h-5 w-5" />
+            Cancel
+          </button>
+          <button
+            type="submit"
+            form="create-category-form"
+            disabled={isSaving || !name.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'
+            )}
+          >
+            {isSaving ? 'Creating...' : 'Create Category'}
           </button>
         </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
-          {error && (
-            <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
-              {error}
-            </div>
-          )}
-
-          {/* Name Field */}
-          <div>
-            <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
-              Category Name <span className="text-red-400">*</span>
-            </label>
-            <input
-              id="name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isSaving}
-              maxLength={100}
-              placeholder="e.g., Network Troubleshooting"
-              required
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {name.length}/100 characters
-            </p>
+      }
+    >
+      <form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
+            {error}
           </div>
+        )}
 
-          {/* Description Field */}
-          <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
-              Description <span className="text-muted-foreground">(optional)</span>
-            </label>
-            <textarea
-              id="description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isSaving}
-              rows={3}
-              placeholder="Brief description of this category..."
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-          </div>
+        <div>
+          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
+            Category Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isSaving}
+            maxLength={100}
+            placeholder="e.g., Network Troubleshooting"
+            required
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+          <p className="mt-1 text-xs text-muted-foreground">
+            {name.length}/100 characters
+          </p>
+        </div>
 
-          {/* Actions */}
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isSaving}
-              className={cn(
-                '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'
-              )}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isSaving || !name.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'
-              )}
-            >
-              {isSaving ? 'Creating...' : 'Create Category'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div>
+          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={isSaving}
+            rows={3}
+            placeholder="Brief description of this category..."
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+        </div>
+      </form>
+    </Modal>
   )
 }
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index 9af88445..c51d6f0c 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { StepCategoryListItem } from '@/types'
+import { Modal } from '@/components/common/Modal'
 
 interface EditCategoryModalProps {
   isOpen: boolean
@@ -33,7 +33,7 @@ export function EditCategoryModal({
     setPrevCategoryId(null)
   }
 
-  if (!isOpen || !category) return null
+  if (!category) return null
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -67,102 +67,90 @@ export function EditCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Edit Category"
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
           <button
+            type="button"
             onClick={handleClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            className={cn(
+              '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'
+            )}
           >
-            <X className="h-5 w-5" />
+            Cancel
+          </button>
+          <button
+            type="submit"
+            form="edit-category-form"
+            disabled={isSaving || !name.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'
+            )}
+          >
+            {isSaving ? 'Saving...' : 'Save Changes'}
           </button>
         </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
-          {error && (
-            <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
-              {error}
-            </div>
-          )}
-
-          {/* Name Field */}
-          <div>
-            <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
-              Category Name <span className="text-red-400">*</span>
-            </label>
-            <input
-              id="edit-name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isSaving}
-              maxLength={100}
-              placeholder="e.g., Network Troubleshooting"
-              required
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {name.length}/100 characters
-            </p>
+      }
+    >
+      <form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
+            {error}
           </div>
+        )}
 
-          {/* Description Field */}
-          <div>
-            <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
-              Description <span className="text-muted-foreground">(optional)</span>
-            </label>
-            <textarea
-              id="edit-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isSaving}
-              rows={3}
-              placeholder="Brief description of this category..."
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-          </div>
+        <div>
+          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
+            Category Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="edit-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isSaving}
+            maxLength={100}
+            placeholder="e.g., Network Troubleshooting"
+            required
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+          <p className="mt-1 text-xs text-muted-foreground">
+            {name.length}/100 characters
+          </p>
+        </div>
 
-          {/* Actions */}
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isSaving}
-              className={cn(
-                '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'
-              )}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isSaving || !name.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'
-              )}
-            >
-              {isSaving ? 'Saving...' : 'Save Changes'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div>
+          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
+          </label>
+          <textarea
+            id="edit-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={isSaving}
+            rows={3}
+            placeholder="Brief description of this category..."
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+        </div>
+      </form>
+    </Modal>
   )
 }
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 7ea2b23f..338875b3 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -1,15 +1,16 @@
 import { useState, useEffect, useCallback } from 'react'
-import { X, Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
+import { Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
 import type { SessionShare, SessionShareVisibility } from '@/types'
 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'
+import { Modal } from '@/components/common/Modal'
 
 interface ShareSessionModalProps {
   sessionId: string
-  sessionLabel: string // e.g. ticket number or "Session Details"
+  sessionLabel: string
   isOpen: boolean
   onClose: () => void
 }
@@ -76,7 +77,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
   const [isGenerating, setIsGenerating] = useState(false)
   const [copiedShareId, setCopiedShareId] = useState<string | null>(null)
 
-  // Form state
   const [visibility, setVisibility] = useState<SessionShareVisibility>('account')
   const [shareName, setShareName] = useState('')
   const [expirationPreset, setExpirationPreset] = useState<ExpirationPreset>('never')
@@ -88,7 +88,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
     try {
       const allShares = await sessionsApi.listMyShares()
       const sessionShares = filterSharesForSession(allShares, sessionId)
-      // Sort newest first
       sessionShares.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
       setShares(sessionShares)
     } catch (err) {
@@ -101,7 +100,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
   useEffect(() => {
     if (isOpen) {
       loadShares()
-      // Reset form state
       setVisibility('account')
       setShareName('')
       setExpirationPreset('never')
@@ -123,7 +121,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       })
       setShares([newShare, ...shares])
       toast.success('Share link generated')
-      // Reset form
       setShareName('')
       setExpirationPreset('never')
       setCustomDatetime('')
@@ -167,8 +164,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
     }
   }
 
-  if (!isOpen) return null
-
   const presetButtons: { value: ExpirationPreset; label: string }[] = [
     { value: 'never', label: 'Never' },
     { value: '1day', label: '1 day' },
@@ -178,242 +173,13 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
   ]
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
-        onClick={onClose}
-      />
-
-      {/* Modal */}
-      <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
-          <div>
-            <h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
-            <p className="text-sm text-muted-foreground">{sessionLabel}</p>
-          </div>
-          <button
-            onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6">
-          {/* Create Share Form */}
-          <div className="space-y-4">
-            {/* Visibility */}
-            <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">
-                Visibility
-              </label>
-              <div className="space-y-2">
-                <button
-                  onClick={() => { setVisibility('account'); setVisibilityError(null) }}
-                  className={cn(
-                    'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
-                    visibility === 'account'
-                      ? 'border-primary/30 bg-primary/10 text-foreground'
-                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
-                  )}
-                >
-                  <Users className="h-4 w-4" />
-                  <div className="flex-1">
-                    <div className="text-sm font-medium">Account Only</div>
-                    <div className="text-xs text-muted-foreground">Visible to your team</div>
-                  </div>
-                  {visibility === 'account' && (
-                    <div className="h-2 w-2 rounded-full bg-primary" />
-                  )}
-                </button>
-                <button
-                  onClick={() => { setVisibility('public'); setVisibilityError(null) }}
-                  className={cn(
-                    'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
-                    visibility === 'public'
-                      ? 'border-primary/30 bg-primary/10 text-foreground'
-                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
-                  )}
-                >
-                  <Globe className="h-4 w-4" />
-                  <div className="flex-1">
-                    <div className="text-sm font-medium">Public</div>
-                    <div className="text-xs text-muted-foreground">Anyone with the link</div>
-                  </div>
-                  {visibility === 'public' && (
-                    <div className="h-2 w-2 rounded-full bg-primary" />
-                  )}
-                </button>
-              </div>
-              {visibilityError && (
-                <p className="mt-2 text-sm text-red-400">{visibilityError}</p>
-              )}
-            </div>
-
-            {/* Share Name */}
-            <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">
-                Share Name <span className="text-muted-foreground">(optional)</span>
-              </label>
-              <input
-                type="text"
-                value={shareName}
-                onChange={(e) => setShareName(e.target.value.slice(0, 100))}
-                placeholder="e.g. Training link, Customer escalation"
-                className={cn(
-                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
-                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-                )}
-                maxLength={100}
-              />
-            </div>
-
-            {/* Expiration */}
-            <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">
-                Expiration
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {presetButtons.map((preset) => (
-                  <button
-                    key={preset.value}
-                    onClick={() => setExpirationPreset(preset.value)}
-                    className={cn(
-                      'rounded-md border px-3 py-1.5 text-sm transition-colors',
-                      expirationPreset === preset.value
-                        ? 'border-primary/30 bg-primary/10 text-foreground'
-                        : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
-                    )}
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-              {expirationPreset === 'custom' && (
-                <input
-                  type="datetime-local"
-                  value={customDatetime}
-                  onChange={(e) => setCustomDatetime(e.target.value)}
-                  className={cn(
-                    'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                    'scheme-dark'
-                  )}
-                />
-              )}
-            </div>
-
-            {/* Generate Button */}
-            <button
-              onClick={handleGenerateLink}
-              disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
-              className={cn(
-                'flex w-full items-center justify-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'
-              )}
-            >
-              <Link2 className="h-4 w-4" />
-              {isGenerating ? 'Generating...' : 'Generate Link'}
-            </button>
-          </div>
-
-          {/* Existing Shares */}
-          {shares.length > 0 && (
-            <div>
-              <h3 className="mb-3 text-sm font-medium text-foreground">
-                Active Shares ({shares.length})
-              </h3>
-              <div className="space-y-3">
-                {shares.map((share) => {
-                  const expiration = getExpirationLabel(share.expires_at)
-                  const isCopied = copiedShareId === share.id
-                  return (
-                    <div
-                      key={share.id}
-                      className="bg-card border border-border rounded-xl p-4 space-y-2"
-                    >
-                      <div className="flex items-start justify-between gap-2">
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2">
-                            <span className={cn(
-                              'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
-                              share.visibility === 'public'
-                                ? 'bg-accent text-muted-foreground'
-                                : 'bg-accent text-muted-foreground'
-                            )}>
-                              {share.visibility === 'public' ? (
-                                <Globe className="h-3 w-3" />
-                              ) : (
-                                <Users className="h-3 w-3" />
-                              )}
-                              {share.visibility === 'public' ? 'Public' : 'Account'}
-                            </span>
-                            <span className="truncate text-sm font-medium text-foreground">
-                              {share.share_name || 'Untitled share'}
-                            </span>
-                          </div>
-                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
-                            <span>{getRelativeTime(share.created_at)}</span>
-                            <span>
-                              {share.view_count > 0
-                                ? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
-                                : 'Not viewed yet'}
-                            </span>
-                            <span className={cn(
-                              'flex items-center gap-1',
-                              expiration.isExpired && 'text-red-400'
-                            )}>
-                              <Clock className="h-3 w-3" />
-                              {expiration.text}
-                            </span>
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-1 shrink-0">
-                          <button
-                            onClick={() => handleCopyUrl(share)}
-                            title="Copy share URL"
-                            className={cn(
-                              'rounded-md border border-border p-1.5 text-sm transition-colors',
-                              isCopied
-                                ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
-                                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                            )}
-                          >
-                            {isCopied ? (
-                              <Check className="h-3.5 w-3.5" />
-                            ) : (
-                              <Copy className="h-3.5 w-3.5" />
-                            )}
-                          </button>
-                          <button
-                            onClick={() => handleRevoke(share.id)}
-                            title="Revoke share"
-                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
-                          >
-                            <Trash2 className="h-3.5 w-3.5" />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Loading state */}
-          {isLoadingShares && shares.length === 0 && (
-            <div className="flex items-center justify-center py-4">
-              <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Share Session"
+      size="lg"
+      footer={
+        <div className="flex justify-end">
           <button
             onClick={onClose}
             className={cn(
@@ -424,8 +190,221 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
             Close
           </button>
         </div>
+      }
+    >
+      {/* Subtitle */}
+      <p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
+
+      <div className="space-y-6">
+        {/* Create Share Form */}
+        <div className="space-y-4">
+          {/* Visibility */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-foreground">
+              Visibility
+            </label>
+            <div className="space-y-2">
+              <button
+                onClick={() => { setVisibility('account'); setVisibilityError(null) }}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
+                  visibility === 'account'
+                    ? 'border-primary/30 bg-primary/10 text-foreground'
+                    : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
+                )}
+              >
+                <Users className="h-4 w-4" />
+                <div className="flex-1">
+                  <div className="text-sm font-medium">Account Only</div>
+                  <div className="text-xs text-muted-foreground">Visible to your team</div>
+                </div>
+                {visibility === 'account' && (
+                  <div className="h-2 w-2 rounded-full bg-primary" />
+                )}
+              </button>
+              <button
+                onClick={() => { setVisibility('public'); setVisibilityError(null) }}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
+                  visibility === 'public'
+                    ? 'border-primary/30 bg-primary/10 text-foreground'
+                    : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
+                )}
+              >
+                <Globe className="h-4 w-4" />
+                <div className="flex-1">
+                  <div className="text-sm font-medium">Public</div>
+                  <div className="text-xs text-muted-foreground">Anyone with the link</div>
+                </div>
+                {visibility === 'public' && (
+                  <div className="h-2 w-2 rounded-full bg-primary" />
+                )}
+              </button>
+            </div>
+            {visibilityError && (
+              <p className="mt-2 text-sm text-red-400">{visibilityError}</p>
+            )}
+          </div>
+
+          {/* Share Name */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-foreground">
+              Share Name <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <input
+              type="text"
+              value={shareName}
+              onChange={(e) => setShareName(e.target.value.slice(0, 100))}
+              placeholder="e.g. Training link, Customer escalation"
+              className={cn(
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+              )}
+              maxLength={100}
+            />
+          </div>
+
+          {/* Expiration */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-foreground">
+              Expiration
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {presetButtons.map((preset) => (
+                <button
+                  key={preset.value}
+                  onClick={() => setExpirationPreset(preset.value)}
+                  className={cn(
+                    'rounded-md border px-3 py-1.5 text-sm transition-colors',
+                    expirationPreset === preset.value
+                      ? 'border-primary/30 bg-primary/10 text-foreground'
+                      : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
+                  )}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+            {expirationPreset === 'custom' && (
+              <input
+                type="datetime-local"
+                value={customDatetime}
+                onChange={(e) => setCustomDatetime(e.target.value)}
+                className={cn(
+                  'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+                  'scheme-dark'
+                )}
+              />
+            )}
+          </div>
+
+          {/* Generate Button */}
+          <button
+            onClick={handleGenerateLink}
+            disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
+            className={cn(
+              'flex w-full items-center justify-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'
+            )}
+          >
+            <Link2 className="h-4 w-4" />
+            {isGenerating ? 'Generating...' : 'Generate Link'}
+          </button>
+        </div>
+
+        {/* Existing Shares */}
+        {shares.length > 0 && (
+          <div>
+            <h3 className="mb-3 text-sm font-medium text-foreground">
+              Active Shares ({shares.length})
+            </h3>
+            <div className="space-y-3">
+              {shares.map((share) => {
+                const expiration = getExpirationLabel(share.expires_at)
+                const isCopied = copiedShareId === share.id
+                return (
+                  <div
+                    key={share.id}
+                    className="bg-card border border-border rounded-xl p-4 space-y-2"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className={cn(
+                            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
+                            share.visibility === 'public'
+                              ? 'bg-accent text-muted-foreground'
+                              : 'bg-accent text-muted-foreground'
+                          )}>
+                            {share.visibility === 'public' ? (
+                              <Globe className="h-3 w-3" />
+                            ) : (
+                              <Users className="h-3 w-3" />
+                            )}
+                            {share.visibility === 'public' ? 'Public' : 'Account'}
+                          </span>
+                          <span className="truncate text-sm font-medium text-foreground">
+                            {share.share_name || 'Untitled share'}
+                          </span>
+                        </div>
+                        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                          <span>{getRelativeTime(share.created_at)}</span>
+                          <span>
+                            {share.view_count > 0
+                              ? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
+                              : 'Not viewed yet'}
+                          </span>
+                          <span className={cn(
+                            'flex items-center gap-1',
+                            expiration.isExpired && 'text-red-400'
+                          )}>
+                            <Clock className="h-3 w-3" />
+                            {expiration.text}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0">
+                        <button
+                          onClick={() => handleCopyUrl(share)}
+                          title="Copy share URL"
+                          className={cn(
+                            'rounded-md border border-border p-1.5 text-sm transition-colors',
+                            isCopied
+                              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
+                              : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                          )}
+                        >
+                          {isCopied ? (
+                            <Check className="h-3.5 w-3.5" />
+                          ) : (
+                            <Copy className="h-3.5 w-3.5" />
+                          )}
+                        </button>
+                        <button
+                          onClick={() => handleRevoke(share.id)}
+                          title="Revoke share"
+                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Loading state */}
+        {isLoadingShares && shares.length === 0 && (
+          <div className="flex items-center justify-center py-4">
+            <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
+          </div>
+        )}
       </div>
-    </div>
+    </Modal>
   )
 }
 
-- 
2.49.1


From b158eddbcbbad4696927898a8b90e2d34d4df202 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 22:53:20 -0500
Subject: [PATCH 2/3] refactor: adopt shared Button component in 18 modal
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace raw <button> elements with <Button> from ui/Button.tsx:
- Primary buttons (bg-gradient-brand) → <Button variant="primary">
- Secondary buttons (border-border) → <Button variant="secondary">
- Ghost buttons → <Button variant="ghost">
- Loading states use loading prop instead of manual Loader2 spinner

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/admin/CreateCategoryModal.tsx  | 23 +++++------
 .../components/admin/EditCategoryModal.tsx    | 23 +++++------
 .../components/library/ExportFlowModal.tsx    | 17 ++++-----
 .../components/library/FolderEditModal.tsx    | 20 ++++------
 frontend/src/components/library/ForkModal.tsx | 17 +++++----
 .../components/library/ImportFlowModal.tsx    | 25 ++++++------
 .../src/components/library/ShareTreeModal.tsx | 24 ++++--------
 .../components/procedural/IntakeFormModal.tsx | 14 +++----
 .../src/components/session/ForkTreeModal.tsx  | 38 ++++++-------------
 .../session/SaveSessionAsTreeModal.tsx        | 22 ++++-------
 .../session/SessionOutcomeModal.tsx           | 22 ++++-------
 .../components/session/ShareSessionModal.tsx  | 25 +++++-------
 .../components/session/StepRatingModal.tsx    | 22 ++++-------
 .../session/VariablePromptModal.tsx           | 19 ++++------
 .../step-library/StepDetailModal.tsx          | 17 ++++-----
 .../src/components/step-library/StepForm.tsx  | 18 +++++----
 .../tree-editor/AIFixReviewModal.tsx          | 28 ++++++--------
 .../tree-editor/NodeEditorModal.tsx           | 12 +++---
 18 files changed, 155 insertions(+), 231 deletions(-)

diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index 4c2f5e33..752d0ce5 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface CreateCategoryModalProps {
   isOpen: boolean
@@ -62,28 +63,22 @@ export function CreateCategoryModal({
       size="sm"
       footer={
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={handleClose}
             disabled={isSaving}
-            className={cn(
-              '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'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="create-category-form"
-            disabled={isSaving || !name.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={!name.trim()}
+            loading={isSaving}
           >
-            {isSaving ? 'Creating...' : 'Create Category'}
-          </button>
+            Create Category
+          </Button>
         </div>
       }
     >
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index c51d6f0c..fb586940 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { cn } from '@/lib/utils'
 import type { StepCategoryListItem } from '@/types'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface EditCategoryModalProps {
   isOpen: boolean
@@ -74,28 +75,22 @@ export function EditCategoryModal({
       size="sm"
       footer={
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={handleClose}
             disabled={isSaving}
-            className={cn(
-              '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'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="edit-category-form"
-            disabled={isSaving || !name.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={!name.trim()}
+            loading={isSaving}
           >
-            {isSaving ? 'Saving...' : 'Save Changes'}
-          </button>
+            Save Changes
+          </Button>
         </div>
       }
     >
diff --git a/frontend/src/components/library/ExportFlowModal.tsx b/frontend/src/components/library/ExportFlowModal.tsx
index 5d044dce..e241491c 100644
--- a/frontend/src/components/library/ExportFlowModal.tsx
+++ b/frontend/src/components/library/ExportFlowModal.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { Download, X } from 'lucide-react'
 import { flowTransferApi } from '@/api/flowTransfer'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 interface ExportFlowModalProps {
   treeId: string
@@ -79,20 +80,16 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
 
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleExport}
-            disabled={isExporting}
-            className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+            loading={isExporting}
           >
             <Download className="h-4 w-4" />
-            {isExporting ? 'Exporting…' : 'Download .rfflow'}
-          </button>
+            Download .rfflow
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index 63b8415c..25a3c596 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -4,6 +4,7 @@ import { foldersApi } from '@/api/folders'
 import type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 // Predefined color options
 const FOLDER_COLORS = [
@@ -259,24 +260,19 @@ export function FolderEditModal({
 
           {/* Actions */}
           <div className="flex justify-end gap-3">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
-              className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSubmitting}
-              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',
-                'disabled:opacity-50'
-              )}
+              loading={isSubmitting}
             >
-              {isSubmitting ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Folder'}
-            </button>
+              {isEditMode ? 'Save Changes' : 'Create Folder'}
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
index c56b532e..7e7f1f31 100644
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -4,6 +4,7 @@ import { treesApi } from '@/api/trees'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/Button'
 
 interface ForkModalProps {
   treeId: string
@@ -116,20 +117,20 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
 
           {/* Footer */}
           <div className="flex justify-end gap-2 pt-1">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
-              className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSubmitting || !name.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!name.trim()}
+              loading={isSubmitting}
             >
-              {isSubmitting ? 'Forking…' : 'Fork Flow'}
-            </button>
+              Fork Flow
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index ec44fe46..45f6aad0 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -7,6 +7,7 @@ import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
 import { getTreeEditorPath } from '@/lib/routing'
+import { Button } from '@/components/ui/Button'
 
 interface ImportFlowModalProps {
   onClose: () => void
@@ -227,28 +228,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
           {step === 'preview' && (
-            <button
+            <Button
+              variant="secondary"
               onClick={() => { setStep('pick'); setParsed(null); setParseError(null) }}
-              className="mr-auto rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="mr-auto"
             >
               Back
-            </button>
+            </Button>
           )}
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             Cancel
-          </button>
+          </Button>
           {step === 'preview' && (
-            <button
+            <Button
               onClick={handleImport}
-              disabled={isImporting || !nameOverride.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!nameOverride.trim()}
+              loading={isImporting}
             >
               <FileUp className="h-4 w-4" />
-              {isImporting ? 'Importing…' : 'Import as Draft'}
-            </button>
+              Import as Draft
+            </Button>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index 3fab9b62..cc97b08f 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -4,6 +4,7 @@ import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
 import { treesApi } from '@/api/trees'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'
 
 interface ShareTreeModalProps {
   tree: TreeListItem
@@ -201,16 +202,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
               {/* Generate Button */}
               {!activeShare && (
-                <button
+                <Button
                   onClick={handleGenerateLink}
-                  disabled={isGenerating}
-                  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 disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
+                  loading={isGenerating}
+                  className="w-full"
                 >
-                  {isGenerating ? 'Generating...' : 'Generate Share Link'}
-                </button>
+                  Generate Share Link
+                </Button>
               )}
 
               {/* Active Share Link */}
@@ -263,15 +261,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
         {/* Footer */}
         <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
-          <button
-            onClick={onClose}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={onClose}>
             Close
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index d3b09355..19fae7ff 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { IntakeFormField } from '@/types'
 import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface IntakeFormModalProps {
   isOpen: boolean
@@ -240,19 +241,16 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
           {/* Footer */}
           <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onCancel}
-              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
-            </button>
-            <button
-              type="submit"
-              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>
+            <Button type="submit">
               Start Procedure
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index 34a1d210..a5dba031 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { Modal } from '@/components/common/Modal'
-import { GitFork, Loader2 } from 'lucide-react'
+import { GitFork } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface ForkTreeModalProps {
   isOpen: boolean
@@ -44,38 +45,21 @@ export function ForkTreeModal({
 
   const footer = (
     <div className="flex justify-end gap-3">
-      <button
+      <Button
+        variant="ghost"
         onClick={onSkip}
         disabled={isSaving}
-        className={cn(
-          'rounded-md px-4 py-2 text-sm font-medium transition-colors',
-          'text-muted-foreground hover:bg-accent hover:text-foreground',
-          'disabled:cursor-not-allowed disabled:opacity-50'
-        )}
       >
         Skip
-      </button>
-      <button
+      </Button>
+      <Button
         onClick={handleFork}
-        disabled={isSaving || !name.trim()}
-        className={cn(
-          '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 transition-colors',
-          'hover:opacity-90',
-          'disabled:cursor-not-allowed disabled:opacity-50'
-        )}
+        disabled={!name.trim()}
+        loading={isSaving}
       >
-        {isSaving ? (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Saving...
-          </>
-        ) : (
-          <>
-            <GitFork className="h-4 w-4" />
-            Save as Personal Tree
-          </>
-        )}
-      </button>
+        <GitFork className="h-4 w-4" />
+        Save as Personal Tree
+      </Button>
     </div>
   )
 
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index aceaa836..11f5635b 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface SaveSessionAsTreeModalProps {
   isOpen: boolean
@@ -130,27 +131,20 @@ export function SaveSessionAsTreeModal({
 
           {/* Actions */}
           <div className="flex justify-end gap-2 pt-2">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={onClose}
               disabled={isSaving}
-              className={cn(
-                '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'
-              )}
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              disabled={isSaving}
-              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 disabled:opacity-50'
-              )}
+              loading={isSaving}
             >
-              {isSaving ? 'Saving...' : 'Save as Tree'}
-            </button>
+              Save as Tree
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/session/SessionOutcomeModal.tsx b/frontend/src/components/session/SessionOutcomeModal.tsx
index ac5e1f31..b011444e 100644
--- a/frontend/src/components/session/SessionOutcomeModal.tsx
+++ b/frontend/src/components/session/SessionOutcomeModal.tsx
@@ -2,6 +2,7 @@ import { useRef } from 'react'
 import { Modal } from '@/components/common/Modal'
 import { cn } from '@/lib/utils'
 import type { SessionOutcome } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface SessionOutcomeModalProps {
   isOpen: boolean
@@ -46,28 +47,21 @@ export function SessionOutcomeModal({
       title="Session Outcome"
       footer={(
         <div className="flex justify-end gap-2">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={onClose}
             disabled={isSubmitting}
-            className={cn(
-              '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'
-            )}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             onClick={handleSubmit}
-            disabled={isSubmitting}
-            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'
-            )}
+            loading={isSubmitting}
           >
-            {isSubmitting ? 'Completing...' : 'Complete Session'}
-          </button>
+            Complete Session
+          </Button>
         </div>
       )}
     >
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 338875b3..d3ebd42b 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -7,6 +7,7 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Spinner } from '@/components/common/Spinner'
 import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
 
 interface ShareSessionModalProps {
   sessionId: string
@@ -180,15 +181,9 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       size="lg"
       footer={
         <div className="flex justify-end">
-          <button
-            onClick={onClose}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
+          <Button variant="secondary" onClick={onClose}>
             Close
-          </button>
+          </Button>
         </div>
       }
     >
@@ -300,17 +295,15 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           </div>
 
           {/* Generate Button */}
-          <button
+          <Button
             onClick={handleGenerateLink}
-            disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
-            className={cn(
-              'flex w-full items-center justify-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'
-            )}
+            disabled={expirationPreset === 'custom' && !customDatetime}
+            loading={isGenerating}
+            className="w-full"
           >
             <Link2 className="h-4 w-4" />
-            {isGenerating ? 'Generating...' : 'Generate Link'}
-          </button>
+            Generate Link
+          </Button>
         </div>
 
         {/* Existing Shares */}
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 1d1b604f..06966d72 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -3,6 +3,7 @@ import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
 import { StarRating } from '@/components/common/StarRating'
 import { cn } from '@/lib/utils'
 import type { Step } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface StepRatingData {
   rating: number
@@ -190,28 +191,21 @@ export function StepRatingModal({
 
         {/* Footer */}
         <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             onClick={onClose}
             disabled={isSaving}
-            className={cn(
-              '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'
-            )}
           >
             Skip
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             onClick={handleSubmit}
-            disabled={isSaving}
-            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 disabled:opacity-50'
-            )}
+            loading={isSaving}
           >
-            {isSaving ? 'Submitting...' : 'Submit Ratings'}
-          </button>
+            Submit Ratings
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index 9182b9aa..8467548b 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/Button'
 
 interface VariablePromptModalProps {
   /** The prompt text from [USER_INPUT:prompt] */
@@ -45,26 +46,20 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
           />
 
           <div className="mt-4 flex gap-2">
-            <button
+            <Button
               type="submit"
               disabled={!value.trim()}
-              className={cn(
-                'flex-1 rounded-lg 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'
-              )}
+              className="flex-1"
             >
               Continue
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
+              variant="secondary"
               onClick={onCancel}
-              className={cn(
-                'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                'hover:bg-accent hover:text-foreground'
-              )}
             >
               Skip
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 56fe83c2..2b13975e 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { stepsApi } from '@/api/steps'
 import type { Step, Review } from '@/types/step'
+import { Button } from '@/components/ui/Button'
 
 interface StepDetailModalProps {
   stepId: string
@@ -318,22 +319,20 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
 
         {/* Footer - Actions */}
         <div className="flex gap-2 border-t border-border p-4">
-          <button
+          <Button
+            variant="secondary"
             onClick={onClose}
-            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"
+            className="flex-1"
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleInsert}
             disabled={!step}
-            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 disabled:opacity-50'
-            )}
+            className="flex-1"
           >
             Insert Into Session
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index df73d3fa..5dc01dd9 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -3,6 +3,7 @@ import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { stepCategoriesApi } from '@/api/stepCategories'
 import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
+import { Button } from '@/components/ui/Button'
 
 interface StepFormProps {
   onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Actions */}
       <div className="flex gap-2 pt-4">
-        <button
+        <Button
           type="button"
+          variant="secondary"
           onClick={onCancel}
-          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"
+          className="flex-1"
         >
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
           type="submit"
-          disabled={isSubmitting}
-          className="flex-1 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"
+          loading={isSubmitting}
+          className="flex-1"
         >
-          {isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
-        </button>
+          {submitLabel ?? 'Insert Step'}
+        </Button>
       </div>
     </form>
   )
diff --git a/frontend/src/components/tree-editor/AIFixReviewModal.tsx b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
index 1f3a096e..17f21a64 100644
--- a/frontend/src/components/tree-editor/AIFixReviewModal.tsx
+++ b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { AIFixProposal } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface AIFixReviewModalProps {
   fixes: AIFixProposal[]
@@ -125,20 +126,21 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
 
                     {/* Action buttons */}
                     <div className="mt-3 flex gap-2">
-                      <button
+                      <Button
+                        size="sm"
                         onClick={() => handleApply(fix)}
-                        className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90"
                       >
                         <Check className="h-3 w-3" />
                         Apply
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        size="sm"
                         onClick={() => handleSkip(fix)}
-                        className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
                       >
                         <SkipForward className="h-3 w-3" />
                         Skip
-                      </button>
+                      </Button>
                     </div>
                   </>
                 )}
@@ -149,19 +151,13 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
 
         {/* Footer */}
         <div className="flex items-center justify-between border-t border-border px-6 py-4">
-          <button
-            onClick={onClose}
-            className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
             {allHandled ? 'Done' : 'Cancel'}
-          </button>
+          </Button>
           {!allHandled && (
-            <button
-              onClick={onApplyAll}
-              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={onApplyAll}>
               Apply All ({pendingFixes.length})
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index 96fbc31e..43312d96 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -5,6 +5,7 @@ import { NodeFormDecision } from './NodeFormDecision'
 import { NodeFormAction } from './NodeFormAction'
 import { NodeFormResolution } from './NodeFormResolution'
 import type { TreeStructure } from '@/types'
+import { Button } from '@/components/ui/Button'
 
 interface NodeEditorModalProps {
   node: TreeStructure
@@ -65,20 +66,19 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
 
   const footerContent = (
     <div className="flex justify-end gap-2">
-      <button
+      <Button
         type="button"
+        variant="secondary"
         onClick={handleCancel}
-        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
+      </Button>
+      <Button
         type="button"
         onClick={handleSave}
-        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>
     </div>
   )
 
-- 
2.49.1


From 44f02d06055bcf3f865a736d984869e373c6b692 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 23:18:45 -0500
Subject: [PATCH 3/3] refactor: adopt shared Button component in 20
 page/component files

Replace raw <button> elements with <Button> across pages and remaining
components. 38 total files now use the shared Button component consistently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/common/ErrorBoundary.tsx   | 12 +--
 frontend/src/components/common/RouteError.tsx | 22 ++---
 .../procedural/CompletionSummary.tsx          | 15 ++--
 .../step-library/StepLibraryBrowser.tsx       | 15 ++--
 frontend/src/pages/AccountSettingsPage.tsx    | 76 ++++++----------
 frontend/src/pages/MySharesPage.tsx           | 34 +++----
 frontend/src/pages/MyTreesPage.tsx            | 46 ++++------
 frontend/src/pages/ProceduralEditorPage.tsx   | 14 +--
 frontend/src/pages/SessionDetailPage.tsx      | 22 ++---
 frontend/src/pages/StepLibraryPage.tsx        | 24 ++---
 frontend/src/pages/TreeEditorPage.tsx         | 69 ++++----------
 frontend/src/pages/TreeLibraryPage.tsx        | 23 ++---
 frontend/src/pages/TreeNavigationPage.tsx     | 32 ++-----
 .../src/pages/account/TeamCategoriesPage.tsx  | 13 +--
 frontend/src/pages/admin/FeatureFlagsPage.tsx | 17 ++--
 .../src/pages/admin/GlobalCategoriesPage.tsx  | 13 +--
 frontend/src/pages/admin/InviteCodesPage.tsx  | 26 ++----
 frontend/src/pages/admin/PlanLimitsPage.tsx   | 16 ++--
 frontend/src/pages/admin/UserDetailPage.tsx   | 90 ++++---------------
 frontend/src/pages/admin/UsersPage.tsx        | 81 ++++-------------
 20 files changed, 211 insertions(+), 449 deletions(-)

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>
         }
       >
-- 
2.49.1