diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 030c31dc..8bb9a1b8 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -11,15 +11,22 @@ interface StepChecklistProps {
 
 export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
   const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
-  let lastSection: string | undefined
+
+  // Pre-compute which steps should show a section header
+  const sectionVisibility = new Set<number>()
+  let prevSection: string | undefined
+  for (let i = 0; i < procedureSteps.length; i++) {
+    const header = procedureSteps[i].section_header
+    if (header && header !== prevSection) sectionVisibility.add(i)
+    if (header) prevSection = header
+  }
 
   return (
     <nav className="space-y-0.5">
       {procedureSteps.map((step, index) => {
         const isCompleted = completedStepIds.has(step.id)
         const isCurrent = index === currentStepIndex
-        const showSection = step.section_header && step.section_header !== lastSection
-        if (step.section_header) lastSection = step.section_header
+        const showSection = sectionVisibility.has(index)
 
         return (
           <div key={step.id}>