diff --git a/src/components/admin/CollectionForm.jsx b/src/components/admin/CollectionForm.jsx
index afe2746..74dccd0 100644
--- a/src/components/admin/CollectionForm.jsx
+++ b/src/components/admin/CollectionForm.jsx
@@ -3,7 +3,7 @@ import { Card, CardContent } from '../ui/card'
 import { Input } from '../ui/input'
 import { Textarea } from '../ui/textarea'
 import { Button } from '../ui/button'
-import { generateId, normalizeImageUrl } from '../../lib/utils'
+import { generateId } from '../../lib/utils'
 import { adminApiRequest } from '../../lib/auth'
 import ImageUrlField from './ImageUrlField'
 import { 
@@ -102,10 +102,10 @@ export function CollectionForm({ collection, onSave, onCancel }) {
   return (
     <>
     <div className="w-full max-w-4xl mx-auto space-y-6">
-      <div className="sticky top-0 z-20 px-6 py-4 bg-white/95 backdrop-blur border border-gray-200 rounded-lg flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="sticky top-0 z-20 px-6 py-4 bg-[var(--admin-bg-card)]/95 backdrop-blur border border-[var(--admin-border-primary)] rounded-lg flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-gray-900">{collection ? 'Edit Collection' : 'Create New Collection'}</h2>
-          <p className="text-sm text-gray-500">Organize products into collections with names, descriptions, and hero imagery.</p>
+          <h2 className="text-xl font-semibold text-[var(--admin-text-primary)]">{collection ? 'Edit Collection' : 'Create New Collection'}</h2>
+          <p className="text-sm text-[var(--admin-text-secondary)]">Organize products into collections with names, descriptions, and hero imagery.</p>
         </div>
         <div className="flex items-center gap-3">
           <Button type="button" variant="outline" onClick={onCancel}>
@@ -130,7 +130,7 @@ export function CollectionForm({ collection, onSave, onCancel }) {
             />
           </div>
           {driveNotice && (
-            <p className="text-xs text-gray-700 mt-2">{driveNotice}</p>
+            <p className="text-xs text-[var(--admin-text-secondary)] mt-2">{driveNotice}</p>
           )}
 
           <div className="flex items-center gap-3">
@@ -139,7 +139,7 @@ export function CollectionForm({ collection, onSave, onCancel }) {
               checked={!!formData.archived}
               onCheckedChange={(v) => setFormData(prev => ({ ...prev, archived: v }))}
             />
-            <label htmlFor="collection-archived" className="text-sm text-gray-700 select-none">Archived (hide from storefront)</label>
+            <label htmlFor="collection-archived" className="text-sm text-[var(--admin-text-secondary)] select-none">Archived (hide from storefront)</label>
           </div>
 
           <div>
@@ -162,7 +162,7 @@ export function CollectionForm({ collection, onSave, onCancel }) {
               onPreview={(src) => setModalImage(src)}
               hideInput
             />
-            <p className="text-sm text-gray-500 mt-1">
+            <p className="text-sm text-[var(--admin-text-muted)] mt-1">
               This image will be displayed as a banner on the collection page
             </p>
           </div>
@@ -172,18 +172,18 @@ export function CollectionForm({ collection, onSave, onCancel }) {
     </div>
     {modalImage && (
       <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50" onClick={() => setModalImage(null)}>
-        <div className="bg-white rounded-lg shadow-xl max-w-3xl w-full mx-4 relative max-h-[90vh] overflow-auto" onClick={(e) => e.stopPropagation()}>
+        <div className="bg-[var(--admin-bg-card)] rounded-lg shadow-xl max-w-3xl w-full mx-4 relative max-h-[90vh] overflow-auto border border-[var(--admin-border-primary)]" onClick={(e) => e.stopPropagation()}>
           <button
             type="button"
-            className="absolute top-2 right-2 px-2 py-1 rounded border bg-white/90 hover:bg-white"
+            className="absolute top-2 right-2 px-2 py-1 rounded border border-[var(--admin-border-primary)] bg-[var(--admin-bg-elevated)] hover:bg-[var(--admin-bg-secondary)] text-[var(--admin-text-primary)]"
             onClick={() => setModalImage(null)}
             aria-label="Close"
           >
-            ×
+            X
           </button>
           <img src={modalImage} alt="preview" className="w-full h-auto max-h-[80vh] object-contain rounded" />
           <div className="p-3 border-t text-center">
-            <a href={modalImage} target="_blank" rel="noreferrer" className="text-sm text-gray-600 hover:text-gray-700">Open original</a>
+            <a href={modalImage} target="_blank" rel="noreferrer" className="text-sm text-[var(--admin-accent-light)] hover:underline">Open original</a>
           </div>
         </div>
       </div>
diff --git a/src/components/admin/ProductWorkspace.jsx b/src/components/admin/ProductWorkspace.jsx
index 63a7893..af9425e 100644
--- a/src/components/admin/ProductWorkspace.jsx
+++ b/src/components/admin/ProductWorkspace.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo } from "react"
+import { useNavigate, useParams } from "react-router-dom"
 import { Card, CardHeader, CardTitle, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { Select } from "../ui/select"
@@ -6,6 +7,16 @@ import { Input } from "../ui/input"
 import { Textarea } from "../ui/textarea"
 import { Switch } from "../ui/switch"
 import { RefreshCcw, Plus, Save, Trash2, CheckCircle2, AlertTriangle, Package } from "lucide-react"
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "../ui/alert-dialog"
 import ImageUrlField from "./ImageUrlField"
 import VariantImageSelector from "./VariantImageSelector"
 import { adminApiRequest } from "../../lib/auth"
@@ -54,6 +65,8 @@ const mapProductToDraft = (product) => {
 const hasVariantGroup = (variants, style) =>
   (Array.isArray(variants) && variants.length > 0) || Boolean(style)
 
+const draftFingerprint = (draft) => JSON.stringify(draft || null)
+
 const prepareVariantsForSave = (variants = []) =>
   variants
     .filter((variant) => variant && (variant.name || variant.selectorImageUrl || variant.displayImageUrl))
@@ -109,7 +122,7 @@ function VariantGroupEditor({
               Add option
             </Button>
           </div>
-          <div className="grid grid-cols-12 gap-2 text-xs text-[var(--admin-text-muted)] px-1">
+          <div className="hidden grid-cols-12 gap-2 px-1 text-xs text-[var(--admin-text-muted)] md:grid">
             <div className="col-span-3">Option name</div>
             <div className="col-span-3">Selector image</div>
             <div className="col-span-3">Display image</div>
@@ -120,29 +133,41 @@ function VariantGroupEditor({
           ) : (
             <div className="space-y-2">
               {items.map((variant, index) => (
-                <div key={variant.id || index} className="grid grid-cols-12 gap-2 items-center">
-                  <div className="col-span-3">
+                <div
+                  key={variant.id || index}
+                  className="grid grid-cols-1 gap-3 rounded-md border border-[var(--admin-border-primary)] bg-[var(--admin-bg-elevated)] p-3 md:grid-cols-12 md:items-center md:bg-transparent md:p-0 md:border-0"
+                >
+                  <div className="md:col-span-3">
+                    <label className="mb-1 block text-[11px] font-semibold uppercase text-[var(--admin-text-muted)] md:hidden">
+                      Option name
+                    </label>
                     <Input
                       value={variant.name || ""}
                       onChange={(event) => onVariantChange(index, "name", event.target.value)}
                       placeholder="Variant name"
                     />
                   </div>
-                  <div className="col-span-3 flex justify-center">
+                  <div className="flex justify-start md:col-span-3 md:justify-center">
+                    <label className="mr-3 self-center text-[11px] font-semibold uppercase text-[var(--admin-text-muted)] md:hidden">
+                      Selector
+                    </label>
                     <VariantImageSelector
                       value={variant.selectorImageUrl || ""}
                       onChange={(value) => onVariantChange(index, "selectorImageUrl", value)}
                       onPreview={onPreview}
                     />
                   </div>
-                  <div className="col-span-3 flex justify-center">
+                  <div className="flex justify-start md:col-span-3 md:justify-center">
+                    <label className="mr-3 self-center text-[11px] font-semibold uppercase text-[var(--admin-text-muted)] md:hidden">
+                      Display
+                    </label>
                     <VariantImageSelector
                       value={variant.displayImageUrl || ""}
                       onChange={(value) => onVariantChange(index, "displayImageUrl", value)}
                       onPreview={onPreview}
                     />
                   </div>
-                  <div className="col-span-3 flex items-center gap-2">
+                  <div className="flex items-center justify-between gap-2 md:col-span-3">
                     <div className="flex items-center gap-2">
                       <Switch
                         checked={!!variant.hasCustomPrice}
@@ -165,8 +190,9 @@ function VariantGroupEditor({
                       size="sm"
                       className="px-2 text-[var(--admin-error)] border-[var(--admin-error)] hover:bg-[var(--admin-error-bg)]"
                       onClick={() => onVariantRemove(index)}
+                      aria-label={`Remove ${variant.name || 'variant option'}`}
                     >
-                      X
+                      <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>
                 </div>
@@ -244,6 +270,8 @@ function ProductListItem({ product, isActive, onSelect, collectionName }) {
 }
 
 export function ProductWorkspace() {
+  const { productId } = useParams()
+  const navigate = useNavigate()
   const [products, setProducts] = useState([])
   const [collections, setCollections] = useState([])
   const [collectionFilter, setCollectionFilter] = useState('all')
@@ -251,6 +279,7 @@ export function ProductWorkspace() {
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedId, setSelectedId] = useState(null)
   const [draft, setDraft] = useState(null)
+  const [baselineDraft, setBaselineDraft] = useState(null)
   const [isCreating, setIsCreating] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
@@ -259,6 +288,11 @@ export function ProductWorkspace() {
   const [variants1Enabled, setVariants1Enabled] = useState(false)
   const [variants2Enabled, setVariants2Enabled] = useState(false)
   const [storeSettings, setStoreSettings] = useState(null)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [pendingSelection, setPendingSelection] = useState(null)
+  const [unsavedDialogOpen, setUnsavedDialogOpen] = useState(false)
+
+  const isDirty = draftFingerprint(draft) !== draftFingerprint(baselineDraft)
 
   const collectionLookup = useMemo(() => {
     const map = new Map()
@@ -308,9 +342,12 @@ export function ProductWorkspace() {
     const productData = await productsRes.json()
     setProducts(productData)
 
-    if (!isCreating) {
+    if (!isCreating && productId !== 'new') {
       if (productData.length > 0) {
         setSelectedId((prev) => {
+          if (productId && productData.some((product) => product.id === productId)) {
+            return productId
+          }
           if (prev && productData.some((product) => product.id === prev)) {
             return prev
           }
@@ -319,6 +356,7 @@ export function ProductWorkspace() {
       } else {
         setSelectedId(null)
         setDraft(null)
+        setBaselineDraft(null)
       }
     }
 
@@ -361,6 +399,28 @@ export function ProductWorkspace() {
     load()
   }, [])
 
+  useEffect(() => {
+    if (productId === 'new') {
+      if (!isCreating) {
+        const blank = createEmptyProduct()
+        setDraft(blank)
+        setBaselineDraft(blank)
+        setIsCreating(true)
+        setSelectedId(null)
+        setVariants1Enabled(false)
+        setVariants2Enabled(false)
+        setStatus(null)
+      }
+      return
+    }
+
+    if (productId && products.some((product) => product.id === productId)) {
+      setIsCreating(false)
+      setSelectedId(productId)
+      setStatus(null)
+    }
+  }, [productId, products, isCreating])
+
   useEffect(() => {
     if (isCreating) return
     if (filteredProducts.length === 0) {
@@ -369,24 +429,29 @@ export function ProductWorkspace() {
       }
       if (draft) {
         setDraft(null)
+        setBaselineDraft(null)
       }
       return
     }
     if (!selectedId || !filteredProducts.some((product) => product.id === selectedId)) {
-      setSelectedId(filteredProducts[0].id)
+      const nextId = filteredProducts[0].id
+      setSelectedId(nextId)
+      if (!productId) navigate(`/admin/products/${nextId}`, { replace: true })
     }
-  }, [filteredProducts, isCreating, selectedId, draft])
+  }, [filteredProducts, isCreating, selectedId, draft, productId, navigate])
 
   useEffect(() => {
     if (isCreating) return
     if (!selectedId) {
       setDraft(null)
+      setBaselineDraft(null)
       return
     }
     const selectedProduct = products.find((product) => product.id === selectedId)
     if (selectedProduct) {
       const nextDraft = mapProductToDraft(selectedProduct)
       setDraft(nextDraft)
+      setBaselineDraft(nextDraft)
       setVariants1Enabled(hasVariantGroup(nextDraft.variants, nextDraft.variantStyle))
       setVariants2Enabled(hasVariantGroup(nextDraft.variants2, nextDraft.variantStyle2))
     }
@@ -411,19 +476,55 @@ export function ProductWorkspace() {
   }
 
   const startCreate = () => {
+    if (isDirty) {
+      setPendingSelection('new')
+      setUnsavedDialogOpen(true)
+      return
+    }
     const blank = createEmptyProduct()
     setDraft(blank)
+    setBaselineDraft(blank)
     setIsCreating(true)
     setSelectedId(null)
     setVariants1Enabled(false)
     setVariants2Enabled(false)
     setStatus(null)
+    navigate('/admin/products/new')
   }
 
   const handleSelectProduct = (productId) => {
+    if (isDirty) {
+      setPendingSelection(productId)
+      setUnsavedDialogOpen(true)
+      return
+    }
     setIsCreating(false)
     setSelectedId(productId)
     setStatus(null)
+    navigate(`/admin/products/${productId}`)
+  }
+
+  const confirmPendingSelection = () => {
+    const next = pendingSelection
+    setPendingSelection(null)
+    setUnsavedDialogOpen(false)
+    if (next === 'new') {
+      const blank = createEmptyProduct()
+      setDraft(blank)
+      setBaselineDraft(blank)
+      setIsCreating(true)
+      setSelectedId(null)
+      setVariants1Enabled(false)
+      setVariants2Enabled(false)
+      navigate('/admin/products/new')
+      return
+    }
+    if (next) {
+      setIsCreating(false)
+      setSelectedId(next)
+      setStatus(null)
+      navigate(`/admin/products/${next}`)
+    }
   }
 
   const handleDraftChange = (key, value) => {
@@ -520,19 +621,24 @@ export function ProductWorkspace() {
       setIsCreating(false)
       if (filteredProducts.length > 0) {
         setSelectedId(filteredProducts[0].id)
+        navigate(`/admin/products/${filteredProducts[0].id}`)
       } else {
         setDraft(null)
+        setBaselineDraft(null)
+        navigate('/admin/products')
       }
       return
     }
     if (!selectedId) {
       setDraft(null)
+      setBaselineDraft(null)
       return
     }
     const original = products.find((product) => product.id === selectedId)
     if (original) {
       const nextDraft = mapProductToDraft(original)
       setDraft(nextDraft)
+      setBaselineDraft(nextDraft)
       setVariants1Enabled(hasVariantGroup(nextDraft.variants, nextDraft.variantStyle))
       setVariants2Enabled(hasVariantGroup(nextDraft.variants2, nextDraft.variantStyle2))
     }
@@ -596,9 +702,11 @@ export function ProductWorkspace() {
       setSelectedId(savedProduct.id)
       const nextDraft = mapProductToDraft(savedProduct)
       setDraft(nextDraft)
+      setBaselineDraft(nextDraft)
       setVariants1Enabled(hasVariantGroup(nextDraft.variants, nextDraft.variantStyle))
       setVariants2Enabled(hasVariantGroup(nextDraft.variants2, nextDraft.variantStyle2))
       setStatus({ type: 'success', message: isNew ? 'Product created' : 'Product updated' })
+      navigate(`/admin/products/${savedProduct.id}`, { replace: true })
       
       // Refresh store settings after creating a product to update limit status
       if (isNew) {
@@ -614,8 +722,7 @@ export function ProductWorkspace() {
 
   const handleDelete = async () => {
     if (!draft?.id || isCreating) return
-    const confirmed = window.confirm('Delete this product? This action cannot be undone.')
-    if (!confirmed) return
+    setDeleteDialogOpen(false)
     try {
       const response = await adminApiRequest(`/api/admin/products/${draft.id}`, {
         method: 'DELETE',
@@ -625,9 +732,11 @@ export function ProductWorkspace() {
       }
       setProducts((prev) => prev.filter((product) => product.id !== draft.id))
       setDraft(null)
+      setBaselineDraft(null)
       setSelectedId(null)
       setIsCreating(false)
       setStatus({ type: 'success', message: 'Product deleted' })
+      navigate('/admin/products', { replace: true })
       
       // Refresh store settings after deleting a product to update limit status
       await fetchStoreSettings()
@@ -798,16 +907,18 @@ export function ProductWorkspace() {
 
           {draft ? (
             <div className="space-y-5 pb-16">
-              <Card className="border border-[var(--admin-border-primary)]">
+              <Card className="sticky top-0 z-20 border border-[var(--admin-border-primary)]">
                 <CardHeader className="gap-4 md:flex-row md:items-center md:justify-between py-4">
                   <div className="space-y-1">
                     <CardTitle className="text-lg">
                       {draft.name || (isCreating ? 'New product draft' : 'Untitled product')}
                     </CardTitle>
                     <p className="text-xs text-[var(--admin-text-secondary)]">
-                      {isCreating
-                        ? 'Draft will be created once you save changes.'
-                        : 'Changes are saved to the live product.'}
+                      {isDirty
+                        ? 'Unsaved changes'
+                        : isCreating
+                          ? 'Draft is ready for edits.'
+                          : 'All changes saved.'}
                     </p>
                   </div>
                   <div className="flex flex-wrap gap-2">
@@ -815,7 +926,7 @@ export function ProductWorkspace() {
                       <Button
                         type="button"
                         variant="outline"
-                        onClick={handleDelete}
+                        onClick={() => setDeleteDialogOpen(true)}
                         disabled={isSaving}
                         className="border-[var(--admin-error)] text-[var(--admin-error)] hover:bg-[var(--admin-error-bg)]"
                         size="sm"
@@ -824,10 +935,10 @@ export function ProductWorkspace() {
                         Delete
                       </Button>
                     )}
-                    <Button type="button" variant="outline" onClick={handleCancel} disabled={isSaving} size="sm">
+                    <Button type="button" variant="outline" onClick={handleCancel} disabled={isSaving || !isDirty} size="sm">
                       Discard
                     </Button>
-                    <Button type="button" onClick={handleSave} disabled={isSaving} size="sm">
+                    <Button type="button" onClick={handleSave} disabled={isSaving || !isDirty} size="sm">
                       {isSaving ? (
                         <>
                           <RefreshCcw className="mr-2 h-4 w-4 animate-spin" />
@@ -1078,6 +1189,40 @@ export function ProductWorkspace() {
           </div>
         </div>
       )}
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete product?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {draft?.name || 'This product'} will be permanently removed from the catalog. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isSaving}>Cancel</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" disabled={isSaving} onClick={handleDelete}>
+              Delete product
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={unsavedDialogOpen} onOpenChange={setUnsavedDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Switching products will discard edits that have not been saved.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep editing</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={confirmPendingSelection}>
+              Discard changes
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/src/components/admin/StoreSettingsEditor.jsx b/src/components/admin/StoreSettingsEditor.jsx
index a5a872f..8377421 100644
--- a/src/components/admin/StoreSettingsEditor.jsx
+++ b/src/components/admin/StoreSettingsEditor.jsx
@@ -95,6 +95,7 @@ export function StoreSettingsEditor() {
     businessPostalCode: '',
     businessCountry: ''
   })
+  const [settingsBaseline, setSettingsBaseline] = useState(null)
   const [saving, setSaving] = useState(false)
   const [modalImage, setModalImage] = useState(null)
   const [savedOpen, setSavedOpen] = useState(false)
@@ -114,6 +115,10 @@ export function StoreSettingsEditor() {
 
   const previewTheme = useMemo(() => resolveStorefrontTheme(themeState), [themeState])
   const previewStyles = useMemo(() => ({ ...previewTheme.cssVariables }), [previewTheme])
+  const settingsDirty = useMemo(
+    () => JSON.stringify(settings) !== JSON.stringify(settingsBaseline || settings),
+    [settings, settingsBaseline]
+  )
   const selectedFontOption = useMemo(
     () => FONT_OPTIONS.find((font) => font.id === themeState.typography.fontId) || FONT_OPTIONS[0],
     [themeState.typography.fontId]
@@ -155,15 +160,19 @@ export function StoreSettingsEditor() {
       const response = await fetch('/api/store-settings')
       if (response.ok) {
         const data = await response.json()
-        setSettings(prev => ({
-          ...prev,
-          ...data,
-          // Ensure about page fields have defaults if missing
-          aboutHeroImageUrl: data.aboutHeroImageUrl || '',
-          aboutHeroTitle: data.aboutHeroTitle || prev.aboutHeroTitle,
-          aboutHeroSubtitle: data.aboutHeroSubtitle || prev.aboutHeroSubtitle,
-          aboutContent: data.aboutContent || prev.aboutContent || ''
-        }))
+        setSettings(prev => {
+          const nextSettings = {
+            ...prev,
+            ...data,
+            // Ensure about page fields have defaults if missing
+            aboutHeroImageUrl: data.aboutHeroImageUrl || '',
+            aboutHeroTitle: data.aboutHeroTitle || prev.aboutHeroTitle,
+            aboutHeroSubtitle: data.aboutHeroSubtitle || prev.aboutHeroSubtitle,
+            aboutContent: data.aboutContent || prev.aboutContent || ''
+          }
+          setSettingsBaseline(nextSettings)
+          return nextSettings
+        })
       }
     } catch (error) {
       console.error('Error fetching store settings:', error)
@@ -341,6 +350,7 @@ export function StoreSettingsEditor() {
       if (response.ok) {
         const updatedSettings = await response.json()
         setSettings(updatedSettings)
+        setSettingsBaseline(updatedSettings)
         setSavedOpen(true)
       } else {
         const error = await response.json()
@@ -519,7 +529,7 @@ export function StoreSettingsEditor() {
                       onPreview={(src) => setModalImage(src)}
                       hideInput
                     />
-                    {driveNotice && <p className="text-xs text-gray-700">{driveNotice}</p>}
+                    {driveNotice && <p className="text-xs text-[var(--admin-text-secondary)]">{driveNotice}</p>}
                     <p className="text-xs text-[var(--admin-text-muted)]">Recommended size: 200x50px</p>
                   </div>
                 )}
@@ -592,7 +602,7 @@ export function StoreSettingsEditor() {
                     value={settings.aboutContent}
                     onChange={handleChange}
                     rows={8}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent text-sm"
+                    className="w-full px-3 py-2 border border-[var(--admin-border-primary)] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--admin-accent)] focus:border-transparent text-sm bg-[var(--admin-bg-elevated)] text-[var(--admin-text-primary)]"
                   />
                 </div>
               </div>
@@ -624,15 +634,27 @@ export function StoreSettingsEditor() {
           </div>
 
           {(themeMessage || themeError) && (
-            <div className={`rounded-md px-3 py-2 text-xs ${themeError ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
+            <div className={`rounded-md px-3 py-2 text-xs ${themeError ? 'bg-[var(--admin-error-bg)] text-[var(--admin-error)]' : 'bg-[var(--admin-success-bg)] text-[var(--admin-success)]'}`}>
               {themeError || themeMessage}
             </div>
           )}
 
           <div className="flex items-center justify-between border-t border-[var(--admin-border-primary)] pt-4">
-            <span className="text-xs text-[var(--admin-text-muted)]">{themeDirty ? 'Unsaved changes' : themeHasOverrides ? 'Custom theme saved' : 'Using default theme'}</span>
-            <Button onClick={handleSubmit} disabled={saving || themeSaving}>
-              {saving || themeSaving ? 'Saving...' : 'Save Changes'}
+            <span className="text-xs text-[var(--admin-text-muted)]">
+              {settingsDirty || themeDirty
+                ? 'Unsaved changes'
+                : themeHasOverrides
+                  ? 'Custom theme saved'
+                  : 'Using default theme'}
+            </span>
+            <Button onClick={handleSubmit} disabled={saving || themeSaving || (!settingsDirty && !themeDirty)}>
+              {saving || themeSaving
+                ? 'Saving...'
+                : settingsDirty && themeDirty
+                  ? 'Save all changes'
+                  : themeDirty
+                    ? 'Save theme'
+                    : 'Save settings'}
             </Button>
           </div>
         </div>
@@ -703,10 +725,10 @@ export function StoreSettingsEditor() {
       {/* Modals */}
       {modalImage && (
       <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50" onClick={() => setModalImage(null)}>
-        <div className="bg-white rounded-lg shadow-xl max-w-3xl w-full mx-4" onClick={(e) => e.stopPropagation()}>
+        <div className="bg-[var(--admin-bg-card)] rounded-lg shadow-xl max-w-3xl w-full mx-4 border border-[var(--admin-border-primary)]" onClick={(e) => e.stopPropagation()}>
           <img src={modalImage} alt="preview" className="w-full h-auto object-contain rounded" />
-          <div className="p-3 border-t text-center">
-            <a href={modalImage} target="_blank" rel="noreferrer" className="text-sm text-gray-600 hover:text-gray-700">Open original</a>
+          <div className="p-3 border-t border-[var(--admin-border-primary)] text-center">
+            <a href={modalImage} target="_blank" rel="noreferrer" className="text-sm text-[var(--admin-accent-light)] hover:underline">Open original</a>
           </div>
         </div>
       </div>
diff --git a/src/components/ui/alert-dialog.jsx b/src/components/ui/alert-dialog.jsx
index c5eff55..ae36d99 100644
--- a/src/components/ui/alert-dialog.jsx
+++ b/src/components/ui/alert-dialog.jsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { cn } from "../../lib/utils"
 
 // Minimal shadcn-style AlertDialog for this project (no portals for simplicity)
 
@@ -27,13 +28,18 @@ export function AlertDialogTrigger({ asChild = false, children }) {
     : <button {...props}>{children}</button>
 }
 
-export function AlertDialogContent({ children }) {
+export function AlertDialogContent({ children, className }) {
   const { open, setOpen } = React.useContext(AlertDialogContext)
   if (!open) return null
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={() => setOpen(false)} />
-      <div className="relative bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={() => setOpen(false)} />
+      <div
+        className={cn(
+          "relative w-full max-w-md mx-4 rounded-lg border border-[var(--admin-border-primary)] bg-[var(--admin-bg-card)] text-[var(--admin-text-primary)] shadow-[var(--admin-shadow-lg)]",
+          className
+        )}
+      >
         {children}
       </div>
     </div>
@@ -45,23 +51,27 @@ export function AlertDialogHeader({ children }) {
 }
 
 export function AlertDialogTitle({ children }) {
-  return <h2 className="text-lg font-semibold text-gray-900">{children}</h2>
+  return <h2 className="text-lg font-semibold text-[var(--admin-text-primary)]">{children}</h2>
 }
 
 export function AlertDialogDescription({ children }) {
-  return <p className="mt-2 text-sm text-gray-600">{children}</p>
+  return <p className="mt-2 text-sm text-[var(--admin-text-secondary)]">{children}</p>
 }
 
 export function AlertDialogFooter({ children }) {
   return <div className="p-6 pt-2 flex justify-end gap-2">{children}</div>
 }
 
-export function AlertDialogCancel({ children, onClick }) {
+export function AlertDialogCancel({ children, onClick, disabled, className }) {
   const { setOpen } = React.useContext(AlertDialogContext)
   return (
     <button
       type="button"
-      className="px-4 py-2 rounded border hover:bg-gray-50"
+      disabled={disabled}
+      className={cn(
+        "px-4 py-2 rounded-md border border-[var(--admin-border-primary)] bg-[var(--admin-bg-elevated)] text-sm text-[var(--admin-text-primary)] hover:bg-[var(--admin-bg-card)] disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
       onClick={(e) => { onClick?.(e); setOpen(false) }}
     >
       {children}
@@ -69,13 +79,23 @@ export function AlertDialogCancel({ children, onClick }) {
   )
 }
 
-export function AlertDialogAction({ children, onClick }) {
+export function AlertDialogAction({ children, onClick, disabled, variant = 'default', className }) {
   const { setOpen } = React.useContext(AlertDialogContext)
   return (
     <button
       type="button"
-      className="px-4 py-2 rounded bg-slate-900 text-white hover:bg-gradient-to-r hover:from-slate-600 hover:to-slate-700"
-      onClick={(e) => { onClick?.(e); setOpen(false) }}
+      disabled={disabled}
+      className={cn(
+        "px-4 py-2 rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
+        variant === 'destructive'
+          ? "border border-[var(--admin-error)] bg-transparent text-[var(--admin-error)] hover:bg-[var(--admin-error-bg)]"
+          : "bg-[var(--admin-accent)] text-white hover:bg-[var(--admin-accent-hover)]",
+        className
+      )}
+      onClick={(e) => {
+        const result = onClick?.(e)
+        if (result !== false) setOpen(false)
+      }}
     >
       {children}
     </button>
diff --git a/src/pages/admin/AdminDashboard.jsx b/src/pages/admin/AdminDashboard.jsx
index 9de7b06..a4bd1fb 100644
--- a/src/pages/admin/AdminDashboard.jsx
+++ b/src/pages/admin/AdminDashboard.jsx
@@ -55,7 +55,9 @@ export function AdminDashboard() {
       <Route element={<AdminLayout onLogout={handleLogout} />}>
         <Route index element={<DashboardPage />} />
         <Route path="products" element={<ProductsPage />} />
+        <Route path="products/:productId" element={<ProductsPage />} />
         <Route path="collections" element={<CollectionsPage />} />
+        <Route path="fulfillment" element={<FulfillmentPage />} />
         <Route path="Fulfillment" element={<FulfillmentPage />} />
         <Route path="media" element={<MediaLibraryPage />} />
         <Route path="store-settings" element={<StoreSettingsPage />} />
diff --git a/src/pages/admin/AdminLayout.jsx b/src/pages/admin/AdminLayout.jsx
index 760aeda..2c6e8e3 100644
--- a/src/pages/admin/AdminLayout.jsx
+++ b/src/pages/admin/AdminLayout.jsx
@@ -8,13 +8,14 @@ import {
   ShoppingBag,
   Image as ImageIcon,
   LogOut,
+  Store,
 } from 'lucide-react'
 
 const menuItems = [
   { path: '/admin', label: 'Dashboard', icon: Home, end: true },
   { path: '/admin/products', label: 'Products', icon: Package },
   { path: '/admin/collections', label: 'Collections', icon: FolderOpen },
-  { path: '/admin/Fulfillment', label: 'Fulfillment', icon: ShoppingBag },
+  { path: '/admin/fulfillment', label: 'Fulfillment', icon: ShoppingBag },
   { path: '/admin/media', label: 'Media', icon: ImageIcon },
   { path: '/admin/store-settings', label: 'Store Settings', icon: Settings },
 ]
@@ -30,19 +31,20 @@ export function AdminLayout({ onLogout }) {
   const location = useLocation()
 
   return (
-    <div className="flex min-h-screen bg-[var(--admin-bg-primary)] admin-container">
-      <div className="w-64 bg-[var(--admin-bg-secondary)] border-r border-[var(--admin-border-primary)] min-h-screen flex flex-col">
+    <div className="flex min-h-screen flex-col bg-[var(--admin-bg-primary)] admin-container lg:flex-row">
+      <div className="bg-[var(--admin-bg-secondary)] border-b border-[var(--admin-border-primary)] lg:w-64 lg:min-h-screen lg:border-b-0 lg:border-r flex flex-col">
         <div className="p-5 border-b border-[var(--admin-border-primary)]">
           <h1 className="text-lg font-bold text-[var(--admin-text-primary)]">OpenShop Admin</h1>
           <Link
             to="/"
             className="text-xs text-[var(--admin-text-secondary)] hover:text-[var(--admin-accent-light)] transition-colors mt-1 inline-block"
           >
-            ← Back to Store
+            <Store className="mr-1 inline h-3.5 w-3.5" />
+            Back to Store
           </Link>
         </div>
         <nav className="flex-1 p-3">
-          <ul className="space-y-1">
+          <ul className="flex gap-1 overflow-x-auto lg:block lg:space-y-1">
             {menuItems.map((item) => {
               const Icon = item.icon
               const isActive = isNavActive(location.pathname, item)
@@ -50,7 +52,7 @@ export function AdminLayout({ onLogout }) {
                 <li key={item.path}>
                   <Link
                     to={item.path}
-                    className={`flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-all duration-200 ${
+                    className={`flex whitespace-nowrap items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-all duration-200 ${
                       isActive
                         ? 'bg-[var(--admin-accent)]/15 text-[var(--admin-accent-light)] border-l-2 border-[var(--admin-accent)]'
                         : 'text-[var(--admin-text-secondary)] hover:bg-[var(--admin-overlay-light)] hover:text-[var(--admin-text-primary)]'
@@ -75,7 +77,7 @@ export function AdminLayout({ onLogout }) {
           </Button>
         </div>
       </div>
-      <div className="flex-1 p-5 overflow-auto">
+      <div className="flex-1 overflow-auto p-4 sm:p-5">
         <Outlet />
       </div>
     </div>
diff --git a/src/pages/admin/CollectionsPage.jsx b/src/pages/admin/CollectionsPage.jsx
index d3d14c6..95dea2c 100644
--- a/src/pages/admin/CollectionsPage.jsx
+++ b/src/pages/admin/CollectionsPage.jsx
@@ -6,12 +6,23 @@ import { CollectionForm } from '../../components/admin/CollectionForm'
 import { adminApiRequest } from '../../lib/auth'
 import { FolderOpen, Plus, Edit, Trash2 } from 'lucide-react'
 import { Switch } from '../../components/ui/switch'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '../../components/ui/alert-dialog'
 
 export function CollectionsPage() {
   const [collections, setCollections] = useState([])
   const [showForm, setShowForm] = useState(false)
   const [editingCollection, setEditingCollection] = useState(null)
   const [archivedFilter, setArchivedFilter] = useState('all')
+  const [collectionToDelete, setCollectionToDelete] = useState(null)
 
   useEffect(() => {
     fetchCollections()
@@ -40,8 +51,6 @@ export function CollectionsPage() {
   }
 
   const handleDeleteCollection = async (collectionId) => {
-    if (!confirm('Are you sure you want to delete this collection?')) return
-
     try {
       const response = await adminApiRequest(`/api/admin/collections/${collectionId}`, {
         method: 'DELETE',
@@ -49,6 +58,7 @@ export function CollectionsPage() {
 
       if (response.ok) {
         setCollections(collections.filter((c) => c.id !== collectionId))
+        setCollectionToDelete(null)
       }
     } catch (error) {
       console.error('Error deleting collection:', error)
@@ -152,7 +162,7 @@ export function CollectionsPage() {
                       variant="destructive"
                       size="sm"
                       className="h-8 px-2.5"
-                      onClick={() => handleDeleteCollection(collection.id)}
+                    onClick={() => setCollectionToDelete(collection)}
                     >
                       <Trash2 className="w-4 h-4" />
                     </Button>
@@ -163,6 +173,26 @@ export function CollectionsPage() {
           ))}
         </div>
       )}
+
+      <AlertDialog open={!!collectionToDelete} onOpenChange={(open) => !open && setCollectionToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete collection?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {collectionToDelete?.name || 'This collection'} will be removed from admin and storefront organization. Products in it will remain in the catalog.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={() => handleDeleteCollection(collectionToDelete.id)}
+            >
+              Delete collection
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/src/pages/admin/DashboardPage.jsx b/src/pages/admin/DashboardPage.jsx
index 20affba..17ff94a 100644
--- a/src/pages/admin/DashboardPage.jsx
+++ b/src/pages/admin/DashboardPage.jsx
@@ -148,7 +148,7 @@ export function DashboardPage() {
                             {formatCurrency(product.price, product.currency)}
                           </p>
                         </div>
-                        <Link to={`/admin/products/${product.id}/edit`}>
+                        <Link to={`/admin/products/${product.id}`}>
                           <Button variant="outline" size="sm" className="h-8 text-xs">
                             <Edit className="w-3.5 h-3.5 mr-1.5" />
                             Edit
diff --git a/src/pages/admin/FulfillmentPage.jsx b/src/pages/admin/FulfillmentPage.jsx
index 87c08aa..b4c26f6 100644
--- a/src/pages/admin/FulfillmentPage.jsx
+++ b/src/pages/admin/FulfillmentPage.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Button } from '../../components/ui/button'
 import { Card, CardContent } from '../../components/ui/card'
-import { Switch } from '../../components/ui/switch'
 import { formatCurrency } from '../../lib/utils'
 import { adminApiRequest } from '../../lib/auth'
 import { X } from 'lucide-react'
@@ -13,7 +12,7 @@ export function FulfillmentPage() {
   const [cursorNext, setCursorNext] = useState(null)
   const [cursorPrev, setCursorPrev] = useState(null)
   const [direction, setDirection] = useState('next')
-  const [showFulfilled, setShowFulfilled] = useState(false)
+  const [statusFilter, setStatusFilter] = useState('open')
   const [selectedOrder, setSelectedOrder] = useState(null)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const limit = 25
@@ -26,7 +25,7 @@ export function FulfillmentPage() {
     setCursorNext(null)
     setCursorPrev(null)
     fetchOrders()
-  }, [showFulfilled])
+  }, [statusFilter])
 
   const fetchOrders = async (dir = 'next', cursor) => {
     try {
@@ -34,7 +33,7 @@ export function FulfillmentPage() {
       setError('')
       const params = new URLSearchParams({
         limit: String(limit),
-        showFulfilled: String(showFulfilled),
+        status: statusFilter,
       })
       if (cursor) params.set('cursor', cursor)
       if (dir) params.set('direction', dir)
@@ -262,16 +261,23 @@ export function FulfillmentPage() {
     <div className="space-y-5">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
         <h1 className="text-2xl font-bold text-[var(--admin-text-primary)]">Fulfillment</h1>
-        <div className="flex items-center gap-3">
-          <span className="text-sm text-[var(--admin-text-secondary)]">Unfulfilled</span>
-          <Switch
-            checked={showFulfilled}
-            onCheckedChange={(checked) => {
-              setShowFulfilled(checked)
-              fetchOrders()
-            }}
-          />
-          <span className="text-sm text-[var(--admin-text-secondary)]">Fulfilled</span>
+        <div className="inline-flex rounded-md border border-[var(--admin-border-primary)] bg-[var(--admin-bg-elevated)] p-1">
+          {[
+            { value: 'open', label: 'Open' },
+            { value: 'fulfilled', label: 'Fulfilled' },
+            { value: 'all', label: 'All' },
+          ].map((item) => (
+            <Button
+              key={item.value}
+              type="button"
+              size="sm"
+              variant={statusFilter === item.value ? 'default' : 'ghost'}
+              className="h-8 px-3 text-xs"
+              onClick={() => setStatusFilter(item.value)}
+            >
+              {item.label}
+            </Button>
+          ))}
         </div>
       </div>
 
diff --git a/src/pages/admin/MediaLibraryPage.jsx b/src/pages/admin/MediaLibraryPage.jsx
index b155e79..d39f3e6 100644
--- a/src/pages/admin/MediaLibraryPage.jsx
+++ b/src/pages/admin/MediaLibraryPage.jsx
@@ -3,13 +3,25 @@ import { Button } from '../../components/ui/button'
 import { Card, CardContent } from '../../components/ui/card'
 import { normalizeImageUrl } from '../../lib/utils'
 import { adminApiRequest } from '../../lib/auth'
-import { Plus, Trash2, Image as ImageIcon, X } from 'lucide-react'
+import { Plus, Trash2, Image as ImageIcon, X, Copy } from 'lucide-react'
 import AddMediaModal from '../../components/admin/AddMediaModal'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '../../components/ui/alert-dialog'
 
 export function MediaLibraryPage() {
   const [media, setMedia] = useState([])
   const [selected, setSelected] = useState(null)
   const [addOpen, setAddOpen] = useState(false)
+  const [mediaToDelete, setMediaToDelete] = useState(null)
+  const [status, setStatus] = useState('')
 
   useEffect(() => {
     load()
@@ -28,17 +40,28 @@ export function MediaLibraryPage() {
   }
 
   async function handleDelete(id) {
-    if (!confirm('Remove this media from the library?')) return
     try {
       const res = await adminApiRequest(`/api/admin/media/${id}`, { method: 'DELETE' })
       if (res.ok) {
         setMedia(media.filter((m) => m.id !== id))
+        if (selected?.id === id) setSelected(null)
+        setMediaToDelete(null)
+        setStatus('Media removed')
       }
     } catch (e) {
       console.error('Delete media failed', e)
     }
   }
 
+  async function copyUrl(url) {
+    try {
+      await navigator.clipboard.writeText(url)
+      setStatus('Media URL copied')
+    } catch {
+      setStatus('Unable to copy URL')
+    }
+  }
+
   return (
     <div className="space-y-5">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
@@ -54,6 +77,12 @@ export function MediaLibraryPage() {
         </div>
       </div>
 
+      {status && (
+        <div className="rounded-md border border-[var(--admin-success)]/30 bg-[var(--admin-success-bg)] px-4 py-3 text-sm text-[var(--admin-success)]">
+          {status}
+        </div>
+      )}
+
       {media.length === 0 ? (
         <Card>
           <CardContent className="p-12 text-center">
@@ -82,8 +111,11 @@ export function MediaLibraryPage() {
                   className="w-full h-28 object-cover"
                 />
               </button>
-              <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button size="sm" variant="destructive" className="h-8 w-8 p-0" onClick={() => handleDelete(m.id)}>
+              <div className="absolute top-2 right-2 flex gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100">
+                <Button size="sm" variant="outline" className="h-8 w-8 p-0" onClick={() => copyUrl(m.url)} aria-label="Copy media URL">
+                  <Copy className="w-4 h-4" />
+                </Button>
+                <Button size="sm" variant="destructive" className="h-8 w-8 p-0" onClick={() => setMediaToDelete(m)} aria-label="Delete media">
                   <Trash2 className="w-4 h-4" />
                 </Button>
               </div>
@@ -128,6 +160,20 @@ export function MediaLibraryPage() {
                 >
                   Open original
                 </a>
+                <button
+                  type="button"
+                  className="text-[var(--admin-accent-light)] hover:underline"
+                  onClick={() => copyUrl(selected.url)}
+                >
+                  Copy URL
+                </button>
+                <button
+                  type="button"
+                  className="text-[var(--admin-error)] hover:underline"
+                  onClick={() => setMediaToDelete(selected)}
+                >
+                  Delete
+                </button>
               </div>
             </div>
           </div>
@@ -143,6 +189,23 @@ export function MediaLibraryPage() {
           setAddOpen(false)
         }}
       />
+
+      <AlertDialog open={!!mediaToDelete} onOpenChange={(open) => !open && setMediaToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete media?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {mediaToDelete?.filename || 'This media item'} will be removed from the library. Existing product or page references may stop displaying if they use this URL.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={() => handleDelete(mediaToDelete.id)}>
+              Delete media
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/src/routes/admin/analytics.js b/src/routes/admin/analytics.js
index 64143a5..16380dc 100644
--- a/src/routes/admin/analytics.js
+++ b/src/routes/admin/analytics.js
@@ -23,6 +23,7 @@ router.get('/orders', asyncHandler(async (c) => {
   const direction = c.req.query('direction') || 'next'
   const cursor = c.req.query('cursor') || undefined
   const showFulfilled = c.req.query('showFulfilled') === 'true'
+  const fulfillmentStatus = c.req.query('status') || (showFulfilled ? 'fulfilled' : 'open')
 
   const stripeService = new StripeService(c.env.STRIPE_SECRET_KEY, c.env.SITE_URL)
   const analyticsService = new AnalyticsService(stripeService)
@@ -33,6 +34,7 @@ router.get('/orders', asyncHandler(async (c) => {
     direction,
     cursor,
     showFulfilled,
+    fulfillmentStatus,
     kvNamespace
   })
 
diff --git a/src/services/AnalyticsService.js b/src/services/AnalyticsService.js
index a1d9c92..6d75346 100644
--- a/src/services/AnalyticsService.js
+++ b/src/services/AnalyticsService.js
@@ -127,6 +127,7 @@ export class AnalyticsService {
     const direction = options.direction || 'next'
     const cursor = options.cursor
     const showFulfilled = options.showFulfilled === true
+    const fulfillmentFilter = options.fulfillmentStatus || (showFulfilled ? 'fulfilled' : 'open')
 
     const listParams = { limit }
     if (cursor) {
@@ -165,7 +166,9 @@ export class AnalyticsService {
         const fulfillmentData = fulfillmentMap.get(s.id)
         const fulfillmentStatus = fulfillmentData ? JSON.parse(fulfillmentData) : { fulfilled: false }
 
-        if (showFulfilled) {
+        if (fulfillmentFilter === 'all') {
+          includeSession = true
+        } else if (fulfillmentFilter === 'fulfilled') {
           if (!fulfillmentStatus.fulfilled) {
             includeSession = false
           }