diff

diff --git a/components/ArchitectureDiagram.tsx b/components/ArchitectureDiagram.tsx
index 61848d7..62fd5b8 100644
--- a/components/ArchitectureDiagram.tsx
+++ b/components/ArchitectureDiagram.tsx
@@ -284,6 +284,9 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
         <g transform="translate(260, 60)">
           {/* Auth Connection Lines (Behind nodes) */}
           <path d="M0 40 L0 120" stroke={colors.linkAuth} strokeWidth="2" strokeDasharray="4 4" className={!isDirect ? "" : "flow-anim"} opacity={!isDirect ? 0.3 : 1} />
+          {/* Step 2 - Auth to SPA (User Token) */}
+          <circle cx="10" cy="50" r="10" fill="#334155" opacity={!isDirect ? 0.3 : 1} />
+          <text x="10" y="55" textAnchor="middle" className="text-xs font-bold fill-white" opacity={!isDirect ? 0.3 : 1}>2</text>
 
           <rect x="-70" y="-30" width="150" height="70" rx="4" fill={colors.auth} stroke={colors.linkAuth} strokeWidth="2" />
           <text x="0" y="-5" textAnchor="middle" className="text-xs font-bold fill-amber-800">WSO2 IAM</text>
@@ -364,6 +367,9 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
           opacity={isAgent ? 0.3 : 1}
         />
         <text x="110" y="120" textAnchor="middle" className="text-[9px] fill-amber-600 font-bold bg-white rounded">Authenticate/Authorize</text>
+        {/* Step 1 - User to Auth */}
+        <circle cx="75" cy="200" r="10" fill="#334155" />
+        <text x="75" y="205" textAnchor="middle" className="text-xs font-bold fill-white">1</text>
 
         {/* SPA -> Auth Server (Request) - Direct Flow Only */}
         {isDirect && (
@@ -387,7 +393,9 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               strokeDasharray="4 4"
               markerEnd="url(#arrowhead-amber)"
             />
-            {/* <text x="420" y="95" textAnchor="middle" className="text-[9px] fill-amber-600 font-bold bg-white rounded">Agent Authenticate</text> */}
+            {/* Step 6 - Agent to Auth (OBO Flow) */}
+            <circle cx="480" cy="115" r="10" fill="#334155" />
+            <text x="480" y="120" textAnchor="middle" className="text-xs font-bold fill-white">6</text>
 
             {/* 1. Return Link: Agent -> SPA */}
             <path
@@ -399,6 +407,10 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               className="flow-anim"
               markerEnd="url(#arrowhead-pink)"
             />
+            {/* Step 4 - Agent to SPA (Authz Request) */}
+            <circle cx="495" cy="145" r="10" fill="#334155" />
+            <text x="495" y="150" textAnchor="middle" className="text-xs font-bold fill-white">4</text>
+
             {/* 2. Return Link: SPA -> User */}
             <path
               d="M 190 265 L 90 265"
@@ -410,6 +422,9 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               markerEnd="url(#arrowhead-pink)"
             />
             <text x="140" y="278" textAnchor="middle" className="text-[9px] fill-pink-600 font-bold bg-white p-1">Authz Request</text>
+            {/* Step 5 - SPA to User (Authz Request) */}
+            <circle cx="175" cy="262" r="10" fill="#334155" />
+            <text x="175" y="267" textAnchor="middle" className="text-xs font-bold fill-white">5</text>
 
             {/* 4. Auth Server -> Agent (Token Delivery) */}
             <path
@@ -421,6 +436,10 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               className="flow-anim"
               markerEnd="url(#arrowhead-amber)"
             />
+            {/* Step 7 - Auth to Agent */}
+            <circle cx="350" cy="55" r="10" fill="#334155" />
+            <text x="350" y="60" textAnchor="middle" className="text-xs font-bold fill-white">7</text>
+
             {/* OBO Token Animation - Auth to Agent */}
             <circle r="6" fill={colors.tokenOBO}>
               <animateMotion
@@ -458,6 +477,10 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               strokeWidth="1.5"
               strokeDasharray="4 4"
             />
+            {/* Step 4.a - Agent to Auth */}
+            <circle cx="495" cy="125" r="10" fill="#334155" />
+            <text x="495" y="130" textAnchor="middle" className="text-[9px] font-bold fill-white">4a</text>
+
             {/* Token moving from Auth to Agent */}
             <circle r="6" fill={colors.tokenAgent}>
               <animateMotion
@@ -492,6 +515,9 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
               markerEnd="url(#arrowhead-amber)"
             />
             <text x="420" y="105" textAnchor="middle" className="text-[9px] fill-amber-600 font-bold bg-white rounded">Agent Authenticate</text>
+            {/* Step 4.b - Auth to Agent Token */}
+            <circle cx="350" cy="55" r="10" fill="#334155" />
+            <text x="350" y="60" textAnchor="middle" className="text-[9px] font-bold fill-white">4b</text>
           </>
         )}
 
@@ -515,6 +541,13 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
           className={isDirect ? "flow-anim" : ""}
           markerEnd={isDirect ? "url(#arrowhead-blue)" : ""}
         />
+        {/* Step 3 - SPA to MCP (Direct Flow) */}
+        {isDirect && (
+          <>
+            <circle cx="340" cy="310" r="10" fill="#334155" />
+            <text x="340" y="315" textAnchor="middle" className="text-xs font-bold fill-white">3</text>
+          </>
+        )}
 
         {/* SPA -> Agent (Flow 2: Agent) */}
         <path
@@ -526,6 +559,13 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
           className={isAgent ? "flow-anim" : ""}
           markerEnd={isAgent ? "url(#arrowhead-blue)" : ""}
         />
+        {/* Step 3 - SPA to Agent (Agent/OBO Flow) */}
+        {(isAgent || isOBO) && (
+          <>
+            <circle cx="350" cy="185" r="10" fill="#334155" />
+            <text x="350" y="190" textAnchor="middle" className="text-xs font-bold fill-white">3</text>
+          </>
+        )}
 
         {/* Agent -> MCP Servers (Flow 2: Agent & Flow 3: OBO) */}
         <path
@@ -546,6 +586,19 @@ const ArchitectureDiagram: React.FC<ArchitectureDiagramProps> = ({ activeFlow })
           className={(isAgent || isOBO) ? "flow-anim" : ""}
           markerEnd={(isAgent || isOBO) ? "url(#arrowhead-violet)" : ""}
         />
+        {/* Step 5 (Agent Flow) / Step 9 (OBO Flow) - Agent to MCP */}
+        {isAgent && (
+          <>
+            <circle cx="665" cy="155" r="10" fill="#334155" />
+            <text x="665" y="160" textAnchor="middle" className="text-xs font-bold fill-white">5</text>
+          </>
+        )}
+        {isOBO && (
+          <>
+            <circle cx="665" cy="155" r="10" fill="#334155" />
+            <text x="665" y="160" textAnchor="middle" className="text-xs font-bold fill-white">9</text>
+          </>
+        )}
 
         {/* Token Animation for Agent -> MCP (Active in Agent or OBO) */}
         {(isAgent || isOBO) && (