diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 1b610f31..9cd07c7c 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -8,12 +8,17 @@ import { StepDetailModal } from './StepDetailModal'
 import type { Step, StepListItem, StepCategory, PopularTag, StepListParams } from '@/types/step'
 
 interface StepLibraryBrowserProps {
-  onInsert: (step: Step) => void
+  onInsert?: (step: Step) => void
   onCreateNew?: () => void
   showCreateButton?: boolean
+  onEdit?: (step: StepListItem) => void
+  onDelete?: (step: StepListItem) => void
+  onSave?: (step: StepListItem) => void
+  currentUserId?: string
+  refreshKey?: number
 }
 
-export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false }: StepLibraryBrowserProps) {
+export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false, onEdit, onDelete, onSave, currentUserId, refreshKey }: StepLibraryBrowserProps) {
   // State
   const [steps, setSteps] = useState<StepListItem[]>([])
   const [categories, setCategories] = useState<StepCategory[]>([])
@@ -87,7 +92,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
     }
 
     loadSteps()
-  }, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag])
+  }, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag, refreshKey])
 
   // Group steps by visibility
   const groupedSteps = useMemo(() => {
@@ -108,12 +113,15 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
 
   const handleInsertFromPreview = (step: Step) => {
     setPreviewStepId(null)
-    onInsert(step)
+    if (onInsert) {
+      onInsert(step)
+    }
   }
 
   const handleInsertFromCard = (stepItem: StepListItem) => {
-    // Need to fetch full step details for insert
-    stepsApi.get(stepItem.id).then(onInsert)
+    if (onInsert) {
+      stepsApi.get(stepItem.id).then(onInsert)
+    }
   }
 
   const handleTagClick = (tag: string) => {
@@ -275,7 +283,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                         key={step.id}
                         step={step}
                         onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                       />
                     ))}
                   </div>
@@ -304,7 +316,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                         key={step.id}
                         step={step}
                         onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                       />
                     ))}
                   </div>
@@ -333,7 +349,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                         key={step.id}
                         step={step}
                         onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                       />
                     ))}
                   </div>