diff --git a/docs/src/components/Workflow.astro b/docs/src/components/Workflow.astro
new file mode 100644
index 0000000..4ead229
--- /dev/null
+++ b/docs/src/components/Workflow.astro
@@ -0,0 +1,117 @@
+---
+interface Props {
+ steps: Array<{
+ title: string;
+ description: string;
+ }>;
+}
+
+const { steps } = Astro.props;
+---
+
+
+
+ {
+ steps.map((step, index) => (
+ <>
+
+ {index < steps.length - 1 &&
→
}
+ >
+ ))
+ }
+
+
+
+
+
+
diff --git a/docs/src/content/docs/building-stacks/workflow.mdx b/docs/src/content/docs/building-stacks/workflow.mdx
index 38aec3e..8bc6609 100644
--- a/docs/src/content/docs/building-stacks/workflow.mdx
+++ b/docs/src/content/docs/building-stacks/workflow.mdx
@@ -6,17 +6,28 @@ description: The end-to-end process of building and deploying a Hyperstack data
---
import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
Building a stack follows a straightforward four-step workflow: define your data model in Rust, compile to build the stack, deploy to Hyperstack Cloud, and connect from your application.
-```
-┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
-│ 1. Write │ │ 2. Build │ │ 3. Deploy │ │ 4. Connect │
-│ Rust │ ──▶ │ Stack │ ──▶ │ via CLI │ ──▶ │ from App │
-│ │ │ │ │ │ │ │
-│ #[hyperstack] │ cargo build │ │ hs up │ │ SDK/WS │
-└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
-```
+
---
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 251217c..08f5c01 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -4,6 +4,7 @@ description: Programmable data feeds for Solana
---
import { Card, CardGrid, Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../components/Workflow.astro";
**Hyperstack is a system for programmable data feeds on Solana.**
@@ -102,13 +103,20 @@ npm install hyperstack-stacks hyperstack-react
Hyperstack handles the full pipeline from chain to client:
-```
-┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
-│ Solana │ ──▶ │ Hyperstack │ ──▶ │ Your App │
-│ (on-chain) │ │ (transform + │ │ (live feed) │
-│ │ │ stream) │ │ │
-└─────────────────┘ └─────────────────┘ └─────────────────┘
-```
+
1. **Define** the data shape you need using a declarative Rust DSL
2. **Deploy** your definition — Hyperstack manages the infrastructure
diff --git a/docs/src/content/docs/using-stacks/connect.mdx b/docs/src/content/docs/using-stacks/connect.mdx
index 7d1e725..c3cfa8f 100644
--- a/docs/src/content/docs/using-stacks/connect.mdx
+++ b/docs/src/content/docs/using-stacks/connect.mdx
@@ -6,6 +6,7 @@ description: Add Hyperstack to your existing project and stream live Solana data
---
import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
Add Hyperstack to an existing project and start streaming live Solana data in minutes. Connect to stacks you have deployed or to one of our managed feeds like Ore. The Ore feed is available with no account required — just install the SDK and connect to the public Ore stack.
@@ -204,12 +205,20 @@ You just connected to a live Hyperstack stack. The ORE mining stack watches the
The stack is public — no API key or account needed. Point your SDK at the WebSocket URL and start receiving data immediately.
-```
-┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
-│ Solana │ ──▶ │ Hyperstack │ ──▶ │ Your App │
-│ (on-chain) │ │ (streaming) │ │ (live feed) │
-└─────────────────┘ └─────────────────┘ └─────────────────┘
-```
+
### The Data You're Receiving
diff --git a/docs/src/content/docs/using-stacks/quickstart.mdx b/docs/src/content/docs/using-stacks/quickstart.mdx
index d2dfa40..e1a217c 100644
--- a/docs/src/content/docs/using-stacks/quickstart.mdx
+++ b/docs/src/content/docs/using-stacks/quickstart.mdx
@@ -7,6 +7,7 @@ description: Scaffold a new Hyperstack app in under 2 minutes.
---
import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
Create a new app that streams live Solana data in under 2 minutes. The CLI scaffolds everything you need — no configuration required.
@@ -116,12 +117,20 @@ The scaffolded app connects to a deployed **Hyperstack Stack** — a streaming d
2. **Transforms raw transactions** into structured round data (round ID, motherlode, deployment totals)
3. **Streams updates** to your app via WebSocket as they happen on-chain
-```
-┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
-│ Solana │ ──▶ │ Hyperstack │ ──▶ │ Your App │
-│ ORE program │ │ ore stack │ │ (live feed) │
-└─────────────────┘ └─────────────────┘ └─────────────────┘
-```
+
No RPC calls. No polling. No custom indexer. Just streaming data.
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 9771b84..c6602e9 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -439,3 +439,10 @@ starlight-tabs [role="tab"][aria-selected="true"] {
font-size: var(--sl-text-xl);
}
}
+
+/* ============================================
+ Heading Anchor Links - Fix Overlap
+ ============================================ */
+.sl-markdown-content .sl-heading-wrapper {
+ --sl-anchor-icon-gap: 0.75em;
+}