diff --git a/src/app/(dashboard)/playbooks/page.tsx b/src/app/(dashboard)/playbooks/page.tsx
index 8d47582..d564b82 100644
--- a/src/app/(dashboard)/playbooks/page.tsx
+++ b/src/app/(dashboard)/playbooks/page.tsx
@@ -87,7 +87,7 @@ export default function PlaybooksPage() {
   };
 
   const advanceStep = async (p: PlaybookProgress) => {
-    const steps: PlaybookStep[] = selectedPlaybook ? JSON.parse(selectedPlaybook.steps_json) : [];
+    const steps: (string | PlaybookStep)[] = selectedPlaybook ? JSON.parse(selectedPlaybook.steps_json) : [];
     const nextStep = p.current_step + 1;
     const isComplete = nextStep > steps.length;
     await fetch('/api/phase2', {
@@ -124,7 +124,7 @@ export default function PlaybooksPage() {
   };
 
   if (selectedPlaybook) {
-    const steps: PlaybookStep[] = (() => { try { return JSON.parse(selectedPlaybook.steps_json); } catch { return []; } })();
+    const steps: (string | PlaybookStep)[] = (() => { try { return JSON.parse(selectedPlaybook.steps_json); } catch { return []; } })();
 
     return (
       <div className="space-y-6">
@@ -162,16 +162,23 @@ export default function PlaybooksPage() {
             {/* Steps Overview */}
             <ChartCard title="Playbook Steps" action={<button onClick={() => startEdit(selectedPlaybook)} className="text-xs text-[#0098C7] hover:text-[#007ba3] font-medium">Edit</button>}>
               <div className="space-y-3 py-1">
-                {steps.map((step, i) => (
-                  <div key={i} className="flex items-start gap-3">
-                    <div className="w-7 h-7 rounded-full bg-[#1B1D36] text-white flex items-center justify-center text-xs font-bold flex-shrink-0">{step.step}</div>
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-semibold text-foreground">{step.title}</div>
-                      <div className="text-xs text-muted mt-0.5">{step.description}</div>
-                      <div className="text-[10px] text-muted mt-1">{step.duration}</div>
+                {steps.map((step, i) => {
+                  const isString = typeof step === 'string';
+                  const title = isString ? step : step.title;
+                  const desc = isString ? null : step.description;
+                  const dur = isString ? null : step.duration;
+                  const num = isString ? i + 1 : step.step;
+                  return (
+                    <div key={i} className="flex items-start gap-3">
+                      <div className="w-7 h-7 rounded-full bg-[#1B1D36] text-white flex items-center justify-center text-xs font-bold flex-shrink-0">{num}</div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-semibold text-foreground">{title}</div>
+                        {desc && <div className="text-xs text-muted mt-0.5">{desc}</div>}
+                        {dur && <div className="text-[10px] text-muted mt-1">{dur}</div>}
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
             </ChartCard>
 
@@ -226,7 +233,7 @@ export default function PlaybooksPage() {
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {playbooks.map(pb => {
-          const steps: PlaybookStep[] = (() => { try { return JSON.parse(pb.steps_json); } catch { return []; } })();
+          const steps: (string | PlaybookStep)[] = (() => { try { return JSON.parse(pb.steps_json); } catch { return []; } })();
           return (
             <div
               key={pb.id}