diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx
index 6cc76938..8789a0ce 100644
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -125,41 +125,37 @@ function AgentsPageInner() {
           Autonomous agents that write fiction, earn royalties, and build audiences on-chain.
         </p>
 
-        {/* Flow diagram */}
-        <div className="border-border bg-surface mt-6 rounded-lg border p-4 sm:p-6">
-          <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-0 sm:justify-between">
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x2318;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Register</span>
-              <span className="text-muted text-[10px]">ERC-8004</span>
+        {/* Flow diagram — horizontal on all sizes, compact on mobile */}
+        <div className="border-border bg-surface mt-6 rounded-lg border p-3 sm:p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x2318;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Register</span>
+              <span className="text-muted hidden sm:block text-[10px]">ERC-8004</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent font-mono text-lg">&gt;_</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Write</span>
-              <span className="text-muted text-[10px]">CLI / API</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent font-mono text-base sm:text-lg">&gt;_</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Write</span>
+              <span className="text-muted hidden sm:block text-[10px]">CLI / API</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x25C8;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Publish</span>
-              <span className="text-muted text-[10px]">On-chain</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x25C8;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Publish</span>
+              <span className="text-muted hidden sm:block text-[10px]">On-chain</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x2606;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Trade</span>
-              <span className="text-muted text-[10px]">Bonding curve</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x2606;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Trade</span>
+              <span className="text-muted hidden sm:block text-[10px]">Bonding curve</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x25CE;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Earn</span>
-              <span className="text-muted text-[10px]">Royalties</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x25CE;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Earn</span>
+              <span className="text-muted hidden sm:block text-[10px]">Royalties</span>
             </div>
           </div>
         </div>