diff --git a/docs/docs.json b/docs/docs.json
index b6de523d7..664f672bd 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -21,7 +21,6 @@
                 "group": "Quickstart",
                 "pages": [
                   "quickstart/applications",
-                  "quickstart/clients",
                   {
                     "group": "Build integrations",
                     "pages": [
@@ -29,7 +28,8 @@
                       "quickstart/server",
                       "quickstart/middleware"
                     ]
-                  }
+                  },
+                  "quickstart/clients"
                 ]
               }
             ]
diff --git a/docs/images/ag-ui-overview-with-partners.png b/docs/images/ag-ui-overview-with-partners.png
new file mode 100644
index 000000000..8a569cac8
Binary files /dev/null and b/docs/images/ag-ui-overview-with-partners.png differ
diff --git a/docs/images/ai-protocol-stack.png b/docs/images/ai-protocol-stack.png
new file mode 100644
index 000000000..fa0b61f1b
Binary files /dev/null and b/docs/images/ai-protocol-stack.png differ
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index 30a0d6fa1..712982d0c 100644
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -5,23 +5,18 @@ description:
 
 # The Agent–User Interaction (AG-UI) Protocol
 
-*A horizontal standard to bring AI agents into user‑facing frontend applications.*
 
-AG‑UI is the boundary layer where AI agents and users meet. It standardizes how agent state, UI intents, and user interactions flow between your model/agent runtime and your app's frontend—so you can ship reliable, debuggable, user‑friendly agentic features fast.
+AG-UI is an <u><strong>open</strong></u>, <u><strong>lightweight</strong></u>, <u><strong>event-based</strong></u> protocol that standardizes how AI agents connect to user-facing applications.
 
----
 
-## Built with the ecosystem
+Built for simplicity and flexibility, it standardizes how agent state, UI intents, and user interactions flow between your model/agent runtime and user-facing frontend applications—to allow application developers to ship reliable, debuggable, user‑friendly agentic features fast while focusing on application needs and avoding complex ad-hoc wiring.
 
-**First‑party partnerships & integrations**
 
-*AG‑UI works across leading agent frameworks and frontend stacks, with shared vocabulary and primitives that keep your UX consistent as your agents evolve.*
 
 <div style={{textAlign: 'center', margin: '2rem 0'}}>
-  <img src="/images/ag-ui-concept.png" alt="AG-UI Architecture Illustration" style={{maxWidth: '100%', height: 'auto', borderRadius: '8px'}} />
+  <img src="/images/ag-ui-overview-with-partners.png" alt="AG-UI Overview" style={{maxWidth: '100%', height: 'auto', borderRadius: '8px'}} />
 </div>
 
-
 ---
 
 ## Building blocks (today & upcoming)
@@ -33,95 +28,108 @@ AG‑UI is the boundary layer where AI agents and users meet. It standardizes ho
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Token‑level and tool‑event streaming for responsive UIs.
+        Live token and event streaming for responsive multi turn sessions, with cancel and resume.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Static generative UI
+      Multimodality
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Render model output into stable, typed components.
+        Typed attachments and real time media (files, images, audio, transcripts); supports voice, previews, annotations, provenance.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Declarative generative UI
+      Generative UI, static
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Let agents propose UI trees; app decides what to mount.
+        Render model output as stable, typed components under app control.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Frontend tools
+      Generative UI, declarative
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Safe, typed tool calls that bridge agent logic to app actions.
+        Small declarative language for constrained yet open-ended agent UIs; agents propose trees and constraints, the app validates and mounts.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Interrupts & human‑in‑the‑loop
+      Shared state
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Pause, approve, edit, or steer mid‑flow.
+        (Read-only & read-write). Typed store shared between agent and app, with streamed event-sourced diffs and conflict resolution for snappy collaboration.
       </div>
     </div>
   </div>
 
+    <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
+    <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
+      Thinking steps
+    </div>
+    <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
+      <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
+        Visualize intermediate reasoning from traces and tool events; no raw chain of thought.
+      </div>
+    </div>
+  </div>
+
+
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      In‑chat + in‑app interactions
+      Frontend tool calls
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Chat commands alongside regular app controls.
+        Typed handoffs from agent to frontend-executed actions, and back.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Attachments & multimodality
+      Backend tool rendering & side effects
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Files, images, audio, and structured payloads.
+        Visualize backend tool outputs in app and chat, emit side effects as first-class events.
       </div>
     </div>
   </div>
 
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Thinking steps
+      Interrupts (human in the loop)
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Expose summaries/redactions of chain‑of‑thought artifacts to users, safely.
+        Pause, approve, edit, retry, or escalate mid flow without losing state.
       </div>
     </div>
   </div>
 
+
   <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Sub‑agent calls
+      Sub-agents and composition
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Orchestrate nested agents and delegate specialized tasks.
+        Nested delegation with scoped state, tracing, and cancellation.
       </div>
     </div>
   </div>
@@ -132,12 +140,73 @@ AG‑UI is the boundary layer where AI agents and users meet. It standardizes ho
     </div>
     <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
       <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Guardrails, policies, and UX affordances to keep agents on track.
+        Dynamically redirect agent execution with real-time user input to guide behavior and outcomes.
       </div>
     </div>
   </div>
+
+  <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
+    <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
+      Tool output streaming
+    </div>
+    <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
+      <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
+        Stream tool results and logs so UIs can render long-running effects in real time.
+      </div>
+    </div>
+  </div>
+
+  <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onClick={() => window.location.href = '/concepts/events'} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; }}>
+    <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
+      Events
+    </div>
+    <div style={{padding: '1rem 1.5rem', color: '#6b7280', lineHeight: '1.6'}}>
+      Learn about AG-UI's event-driven protocol and all available event types.
+    </div>
+  </div>
+</div>
+
+
+
+---
+
+## Why Agentic Apps need AG-UI
+
+Agentic applications break the simple request/response model that dominated frontend-backend development in the pre-agentic era: a client makes a request, the server returns data, the client renders it, and the interaction ends.
+
+#### The requirements of user‑facing agents
+
+While agents are just software, they exhibit characteristics that make them challenging to serve behind traditional REST/GraphQL APIs:
+
+- Agents are **long‑running** and **stream** intermediate work—often across multi‑turn sessions.
+- Agents are **nondeterministic** and can **control application UI nondeterministically**.
+- Agents simultanously mix **structured + unstructured IO** (e.g. text & voice, alongside tool calls and state updates).
+- Agents need user-interactive **composition**: e.g. they may call sub‑agents, often recursively.
+- And more...
+
+AG-UI is an event-based protocol that enables dynamic communication between agentic frontends and backends. It builds on top of the foundational protocols of the web (HTTP, WebSockets) as an abstraction layer designed for the agentic age—bridging the gap between traditional client-server architectures and the dynamic, stateful nature of AI agents.
+
+## The AI protocol landscape
+
+AG-UI has emerged as the 3rd leg of the AI protocol landscape:
+<div style={{textAlign: 'center', margin: '2rem 0'}}>
+  <img src="/images/ai-protocol-stack.png" alt="AI Protocol Stack" style={{maxWidth: '40%', height: 'auto', borderRadius: '8px'}} />
 </div>
 
+- MCP: Connects agents to tool and to context.
+- A2A: Connects agents to other agents.
+- **AG-UI:** Connects agents to users (through user-facing applications)
+
+
+These protocols are complimentary and have distinct technical goals; a single agent can and often does use all 3 simultanously.
+Where these protocols intersect, there are opportunities for seamless handshakes facilitating interoperability—work on these integration points is actively ongoing.
+AG-UI's mandate is to support the full set of building blocks required by modern agentic applications.
+
+
+
+
+---
+
 ## AG-UI in action
 
 <div style={{textAlign: 'center', margin: '3rem 0 1rem 0'}}>
@@ -161,21 +230,6 @@ You can see demo apps of the AG-UI features with the framework of your choice, w
 
 ---
 
-## Why Agentic Apps need AG-UI
-
-**Agentic apps break the classic request/response contract.** Agents run for longer, stream work as they go, and make nondeterministic choices that can affect your UI and state. AG‑UI defines a clean, observable boundary so frontends remain predictable while agents stay flexible.
-
-### What's hard about user‑facing agents?
-
-- Agents are **long‑running** and **stream** intermediate work—often across multi‑turn sessions.
-- Agents are **nondeterministic** and can **control UI** in ways that must be supervised.
-- Apps must mix **structured + unstructured IO** (text, voice, tool calls, state updates).
-- Agents need **composition**: agents **call sub‑agents**, often non-deterministically.
-
-With AG‑UI, these become deliberate, well‑typed interactions rather than ad‑hoc wiring.
-
----
-
 ## Supported Frameworks
 
 AG-UI was born from an initial partnership between CopilotKit, LangGraph and CrewAI - and is steadily gaining integrations across the wider AI developer ecosystem.
@@ -198,103 +252,97 @@ AG-UI was born from an initial partnership between CopilotKit, LangGraph and Cre
 
 ---
 
-## Comparison with other protocols
-
-AG-UI focuses explicitly and specifically on the agent-user interactivity layer.
-It does not compete with protocols such as A2A (Agent-to-Agent protocol) and MCP
-(Model Context Protocol).
-
-For example, the same agent may communicate with another agent via A2A while
-communicating with the user via AG-UI, and while calling tools provided by an
-MCP server.
-
-These protocols serve complementary purposes in the agent ecosystem:
-
-- **AG-UI**: Handles human-in-the-loop interaction and streaming UI updates
-- **A2A**: Facilitates agent-to-agent communication and collaboration
-- **MCP**: Standardizes tool calls and context handling across different models
-
 ## Quick Start
 
 Choose the path that fits your needs:
 
-<CardGroup cols={2}>
- <Card
-    title="AG-UI Middleware Connectors"
-    icon="bolt"
-    href="/quickstart/middleware"
+<CardGroup cols={3}>
+  <Card
+    title="Build agentic applications"
+    icon="rocket"
+    href="/quickstart/applications"
     color="#3B82F6"
     iconType="solid"
   >
-    Connect AG-UI with existing protocols, in process agents or custom solutions
-    **using TypeScript**
+    Build agentic applications powered by AG-UI compatible agents.
   </Card>
 
   <Card
-    title="AG-UI Compatible Servers"
-    icon="wrench"
-    href="/quickstart/server"
+    title="Build new AG-UI integrations"
+    icon="plug"
+    href="/quickstart/introduction"
     color="#3B82F6"
     iconType="solid"
   >
-    Implement AG-UI compatible servers **using Python or TypeScript**
+    Build integrations for new agent frameworks, custom in-house solutions, or use AG-UI without any agent framework.
   </Card>
- 
+
+  <Card
+    title="Build AG-UI compatible clients"
+    icon="desktop"
+    href="/quickstart/clients"
+    color="#3B82F6"
+    iconType="solid"
+  >
+    Build new clients for AG-UI-compatible agents (web, mobile, slack, messaging, etc.)
+  </Card>
+
 </CardGroup>
 
-## Resources
+## Explore AG-UI
 
-Explore guides, tools, and integrations to help you build, optimize, and extend
-your AG-UI implementation. These resources cover everything from practical
-development workflows to debugging techniques.
+Dive deeper into AG-UI's core concepts and capabilities:
 
 <CardGroup cols={2}>
   <Card
-    title="Developing with Cursor"
-    icon="rocket"
+    title="Core architecture"
+    icon="sitemap"
     iconType="light"
     color="#3B82F6"
-    href="/tutorials/cursor"
+    href="/concepts/architecture"
   >
-    Use Cursor to build AG-UI implementations faster
+    Understand how AG-UI connects agents, protocols, and front-ends
   </Card>
+
   <Card
-    title="Troubleshooting AG-UI"
-    icon="bug"
+    title="Events"
+    icon="bolt"
     iconType="light"
     color="#3B82F6"
-    href="/tutorials/debugging"
+    href="/concepts/events"
   >
-    Fix common issues when working with AG-UI servers and clients
+    Learn about AG-UI's event-driven protocol
   </Card>
 </CardGroup>
 
-## Explore AG-UI
+## Resources
 
-Dive deeper into AG-UI's core concepts and capabilities:
+Explore guides, tools, and integrations to help you build, optimize, and extend
+your AG-UI implementation. These resources cover everything from practical
+development workflows to debugging techniques.
 
 <CardGroup cols={2}>
   <Card
-    title="Core architecture"
-    icon="sitemap"
+    title="Developing with Cursor"
+    icon="rocket"
     iconType="light"
     color="#3B82F6"
-    href="/docs/concepts/architecture"
+    href="/tutorials/cursor"
   >
-    Understand how AG-UI connects agents, protocols, and front-ends
+    Use Cursor to build AG-UI implementations faster
   </Card>
-
   <Card
-    title="Transports"
-    icon="network-wired"
+    title="Troubleshooting AG-UI"
+    icon="bug"
     iconType="light"
     color="#3B82F6"
-    href="/docs/concepts/transports"
+    href="/tutorials/debugging"
   >
-    Learn about AG-UI's communication mechanism
+    Fix common issues when working with AG-UI servers and clients
   </Card>
 </CardGroup>
 
+
 ## Contributing
 
 Want to contribute? Check out our
diff --git a/docs/quickstart/clients.mdx b/docs/quickstart/clients.mdx
index 1bdfd0a64..62b7e02d5 100644
--- a/docs/quickstart/clients.mdx
+++ b/docs/quickstart/clients.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Build clients"
 description:
-  "Build a conversational CLI agent from scratch using AG-UI and Mastra"
+  "Showcase: build a conversational CLI agent from scratch using AG-UI and Mastra"
 ---
 
 # Introduction