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