diff --git a/.github/workflows/cut-versions.yml b/.github/workflows/cut-versions.yml
index edc66850..de936901 100644
--- a/.github/workflows/cut-versions.yml
+++ b/.github/workflows/cut-versions.yml
@@ -151,7 +151,7 @@ jobs:
 
           # Clean directories that will be re-synced (v0.4 nested paths)
           rm -rf docs/core-concepts/miden-base docs/core-concepts/miden-vm docs/core-concepts/miden-node docs/core-concepts/compiler
-          rm -rf docs/builder/tools/client
+          rm -rf docs/builder/tools/client docs/builder/client docs/builder/tools/cli
           # Note: docs/builder/tutorials is NOT fully cleaned to preserve local tutorials (e.g. miden-bank)
 
           # Core Concepts docs → docs/core-concepts/*
@@ -188,9 +188,15 @@ jobs:
           fi
 
           if [ -d "vendor/miden-client/docs/external/src" ]; then
-            mkdir -p docs/builder/tools/client
-            cp -r vendor/miden-client/docs/external/src/* docs/builder/tools/client/
-            echo "Synced miden-client → docs/builder/tools/client"
+            mkdir -p docs/builder/client
+            cp -r vendor/miden-client/docs/external/src/* docs/builder/client/
+            echo "Synced miden-client → docs/builder/client"
+
+            # Move CLI directory to Tools section
+            if [ -d "docs/builder/client/cli" ]; then
+              mv docs/builder/client/cli docs/builder/tools/cli
+              echo "Moved CLI docs → docs/builder/tools/cli"
+            fi
           fi
 
           echo "Content aggregation complete. Final docs structure:"
@@ -219,7 +225,8 @@ jobs:
           rm -rf docs/core-concepts/miden-vm
           rm -rf docs/core-concepts/miden-node
           rm -rf docs/core-concepts/compiler
-          rm -rf docs/builder/tools/client
+          rm -rf docs/builder/client
+          rm -rf docs/builder/tools/cli
           # Note: tutorials live in docs/builder/tutorials/ (authored content, not cleaned)
 
       - name: Commit snapshots
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index afd3ac04..2758bed6 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -147,7 +147,7 @@ jobs:
 
           # Clean directories that will be re-synced (v0.4 nested paths)
           rm -rf docs/core-concepts/miden-base docs/core-concepts/miden-vm docs/core-concepts/miden-node docs/core-concepts/compiler
-          rm -rf docs/builder/tools/client
+          rm -rf docs/builder/tools/client docs/builder/client docs/builder/tools/cli
           # Note: docs/builder/tutorials is NOT fully cleaned to preserve local tutorials (e.g. miden-bank)
 
           # Core Concepts docs → docs/core-concepts/*
@@ -184,9 +184,15 @@ jobs:
           fi
 
           if [ -d "vendor/miden-client/docs/external/src" ]; then
-            mkdir -p docs/builder/tools/client
-            cp -r vendor/miden-client/docs/external/src/* docs/builder/tools/client/
-            echo "Synced miden-client → docs/builder/tools/client"
+            mkdir -p docs/builder/client
+            cp -r vendor/miden-client/docs/external/src/* docs/builder/client/
+            echo "Synced miden-client → docs/builder/client"
+
+            # Move CLI directory to Tools section
+            if [ -d "docs/builder/client/cli" ]; then
+              mv docs/builder/client/cli docs/builder/tools/cli
+              echo "Moved CLI docs → docs/builder/tools/cli"
+            fi
           fi
 
           echo "Content aggregation complete. Final docs structure:"
diff --git a/docs/builder/index.md b/docs/builder/index.md
index 3affd88e..bead2d50 100644
--- a/docs/builder/index.md
+++ b/docs/builder/index.md
@@ -106,9 +106,9 @@ import DocCard from '@theme/DocCard';
     <DocCard
       item={{
         type: 'link',
-        href: './tools',
-        label: 'Tools',
-        description: 'Miden Client libraries, CLI, and developer tooling.',
+        href: './client',
+        label: 'Client SDKs',
+        description: 'Rust, TypeScript, and React SDKs for building on Miden.',
       }}
     />
   </div>
diff --git a/docs/builder/tools/explorer.md b/docs/builder/tools/explorer.md
new file mode 100644
index 00000000..e3fd4be2
--- /dev/null
+++ b/docs/builder/tools/explorer.md
@@ -0,0 +1,10 @@
+---
+title: Explorer
+sidebar_position: 4
+---
+
+# Miden Explorer
+
+The Miden Explorer is a block explorer for the Miden network. Use it to inspect blocks, transactions, accounts, and notes on testnet and devnet.
+
+**[Open the Explorer](https://explorer.testnet.miden.io/)**
diff --git a/docs/builder/tools/index.md b/docs/builder/tools/index.md
deleted file mode 100644
index 194cafcd..00000000
--- a/docs/builder/tools/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Tools
-sidebar_position: 1
----
-
-<!--
-ARCHITECTURE NOTE:
-Client documentation is canonical in versioned_docs/version-X.Y/miden-client/.
-This landing page exists only for the "current/next" version.
-Full client docs are available by selecting a released version.
--->
-
-# Tools
-
-:::info Version Note
-Full client documentation (Rust Client, Web Client, CLI reference) is available in **released versions only**. Please select a version from the dropdown (e.g., 0.12, 0.11) to access the complete client documentation.
-:::
-
-## Miden Client
-
-The Miden client has three main components:
-
-1. **Miden client library** - A Rust library for integrating with the Miden rollup
-2. **Miden client CLI** - Command-line interface for interacting with the network
-3. **Miden web client** - Browser-based interface for managing accounts and transactions
-
-## Additional Tools
-
-- **Playground** - Interactive environment for testing Miden assembly
-- **Explorer** - Block explorer for the Miden network
-- **[Miden Guardian](../miden-guardian/)** - Server and SDKs for backing up, syncing, and coordinating private account state (built by OpenZeppelin)
diff --git a/docs/builder/tools/playground.md b/docs/builder/tools/playground.md
new file mode 100644
index 00000000..b0500826
--- /dev/null
+++ b/docs/builder/tools/playground.md
@@ -0,0 +1,12 @@
+---
+title: Playground
+sidebar_position: 3
+---
+
+# Miden Playground
+
+The Miden Playground is an interactive browser-based environment for writing, compiling, and executing Miden assembly programs.
+
+Use it to experiment with Miden VM instructions, test note scripts, and prototype account code — without installing any tooling locally.
+
+**[Open the Playground](https://playground.miden.io/)**
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index ac81dc07..21522638 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -204,6 +204,13 @@ const config: Config = {
         { name: "twitter:card", content: "summary_large_image" },
         { name: "twitter:site", content: "@0xMiden" },
       ],
+      mermaid: {
+        theme: { light: "neutral", dark: "dark" },
+        options: {
+          fontFamily: '"Manrope", ui-sans-serif, system-ui, sans-serif',
+          fontSize: 14,
+        },
+      },
       colorMode: {
         defaultMode: "light",
         disableSwitch: false,
diff --git a/sidebars.ts b/sidebars.ts
index ba213719..ffb81c0a 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -5,7 +5,7 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
  *
  * - builderSidebar: Usage-focused docs (tutorials, guides, reference)
  *   Canonical source: docs/builder/ (get-started, smart-contracts, etc.)
- *   Ingested content: docs/builder/tutorials/, docs/builder/client/
+ *   Ingested content: docs/builder/tutorials/, docs/builder/client/, docs/builder/tools/cli/
  *
  * - coreConceptsSidebar: Architecture/internals (protocol, VM, proving)
  *   Canonical source: Landing page in docs/core-concepts/index.md
@@ -51,9 +51,14 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Tools",
-      link: { type: "doc", id: "builder/tools/index" },
       items: [{ type: "autogenerated", dirName: "builder/tools" }],
     },
+    {
+      type: "category",
+      label: "Client",
+      link: { type: "doc", id: "builder/client/index" },
+      items: [{ type: "autogenerated", dirName: "builder/client" }],
+    },
 
     // ── SOLUTIONS
     {
diff --git a/src/custom/_components.css b/src/custom/_components.css
index 9f8a9a1c..318c22c8 100644
--- a/src/custom/_components.css
+++ b/src/custom/_components.css
@@ -207,6 +207,276 @@
   padding-top: 0 !important;
 }
 
+/* ==========================================
+   10.2) MERMAID DIAGRAMS
+   ========================================== */
+
+/* ---- Container ---- */
+.theme-doc-markdown .docusaurus-mermaid-container {
+  --_mermaid-glow: var(--ifm-color-primary);
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  padding: 2.5rem 2rem;
+  border-radius: 20px;
+  border: 1px solid color-mix(in oklab, var(--_mermaid-glow) 20%, transparent);
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 20% 10%,
+      color-mix(in oklab, var(--_mermaid-glow) 10%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 85% 90%,
+      color-mix(in oklab, var(--_mermaid-glow) 6%, transparent),
+      transparent 70%
+    ),
+    var(--color-bg);
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--_mermaid-glow) 8%, transparent),
+    0 2px 4px rgba(0, 0, 0, 0.03),
+    0 8px 20px rgba(0, 0, 0, 0.04),
+    0 0 60px -10px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent);
+  backdrop-filter: blur(16px) saturate(1.3);
+  -webkit-backdrop-filter: blur(16px) saturate(1.3);
+  overflow-x: auto;
+  position: relative;
+}
+
+/* Top-edge glow bar */
+.theme-doc-markdown .docusaurus-mermaid-container::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 15%;
+  right: 15%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--_mermaid-glow) 50%, transparent) 30%,
+    var(--_mermaid-glow) 50%,
+    color-mix(in oklab, var(--_mermaid-glow) 50%, transparent) 70%,
+    transparent
+  );
+  border-radius: 2px;
+  filter: blur(0.5px);
+}
+
+/* Soft bloom behind the top bar */
+.theme-doc-markdown .docusaurus-mermaid-container::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 20%;
+  right: 20%;
+  height: 12px;
+  background: radial-gradient(
+    ellipse at 50% 0%,
+    color-mix(in oklab, var(--_mermaid-glow) 18%, transparent),
+    transparent 80%
+  );
+  pointer-events: none;
+}
+
+/* ---- Dark mode container ---- */
+[data-theme="dark"] .theme-doc-markdown .docusaurus-mermaid-container {
+  border-color: color-mix(in oklab, var(--_mermaid-glow) 25%, transparent);
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 20% 10%,
+      color-mix(in oklab, var(--_mermaid-glow) 12%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 85% 90%,
+      color-mix(in oklab, var(--_mermaid-glow) 8%, transparent),
+      transparent 70%
+    ),
+    var(--color-bg);
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklab, #fff 4%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--_mermaid-glow) 12%, transparent),
+    0 2px 4px rgba(0, 0, 0, 0.2),
+    0 8px 20px rgba(0, 0, 0, 0.15),
+    0 0 80px -10px color-mix(in oklab, var(--_mermaid-glow) 15%, transparent);
+}
+
+[data-theme="dark"] .theme-doc-markdown .docusaurus-mermaid-container::before {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--_mermaid-glow) 60%, transparent) 30%,
+    var(--_mermaid-glow) 50%,
+    color-mix(in oklab, var(--_mermaid-glow) 60%, transparent) 70%,
+    transparent
+  );
+}
+
+[data-theme="dark"] .theme-doc-markdown .docusaurus-mermaid-container::after {
+  background: radial-gradient(
+    ellipse at 50% 0%,
+    color-mix(in oklab, var(--_mermaid-glow) 25%, transparent),
+    transparent 80%
+  );
+}
+
+/* Center SVG */
+.theme-doc-markdown .docusaurus-mermaid-container svg {
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+/* ---- Flowchart nodes ---- */
+.docusaurus-mermaid-container .node rect,
+.docusaurus-mermaid-container .node polygon,
+.docusaurus-mermaid-container .node circle {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 12%, var(--color-surface)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 35%, transparent) !important;
+  stroke-width: 1.5px !important;
+  filter:
+    drop-shadow(0 1px 2px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent))
+    drop-shadow(0 4px 8px color-mix(in oklab, var(--_mermaid-glow) 6%, transparent));
+}
+
+.docusaurus-mermaid-container .nodeLabel {
+  color: var(--color-text) !important;
+  font-family: "Manrope", var(--font-sans) !important;
+  font-weight: 300 !important;
+  letter-spacing: -0.01em !important;
+}
+
+/* ---- Subgraph clusters ---- */
+.docusaurus-mermaid-container .cluster {
+  overflow: visible !important;
+}
+
+.docusaurus-mermaid-container .cluster rect {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 5%, var(--color-bg)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 18%, transparent) !important;
+  stroke-width: 1px !important;
+  stroke-dasharray: none !important;
+  filter: drop-shadow(0 2px 8px color-mix(in oklab, var(--_mermaid-glow) 6%, transparent));
+}
+
+.docusaurus-mermaid-container .cluster-label .nodeLabel {
+  font-family: "Manrope", var(--font-sans) !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  color: color-mix(in oklab, var(--_mermaid-glow) 75%, var(--color-text)) !important;
+  letter-spacing: 0.06em !important;
+  text-transform: none !important;
+}
+
+/* Ensure no italic on cluster title elements */
+.docusaurus-mermaid-container .cluster-label,
+.docusaurus-mermaid-container .cluster-label span,
+.docusaurus-mermaid-container .cluster-label p {
+  font-style: normal !important;
+}
+
+/* ---- Edges ---- */
+.docusaurus-mermaid-container .flowchart-link,
+.docusaurus-mermaid-container .edge-pattern-solid {
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 40%, var(--color-muted)) !important;
+  stroke-width: 1.5px !important;
+}
+
+.docusaurus-mermaid-container .edge-pattern-dotted {
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 30%, var(--color-muted)) !important;
+}
+
+/* Edge labels */
+.docusaurus-mermaid-container .edgeLabel {
+  background-color: transparent !important;
+  color: color-mix(in oklab, var(--_mermaid-glow) 60%, var(--color-muted)) !important;
+  font-family: "Manrope", var(--font-sans) !important;
+  font-weight: 300 !important;
+  font-style: normal !important;
+  letter-spacing: -0.01em !important;
+}
+
+.docusaurus-mermaid-container .edgeLabel .edgeLabel {
+  background-color: transparent !important;
+}
+
+/* Arrowheads */
+.docusaurus-mermaid-container .marker {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 60%, var(--color-muted)) !important;
+  stroke: none !important;
+}
+
+/* ---- Sequence diagrams ---- */
+.docusaurus-mermaid-container .actor {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 12%, var(--color-surface)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 35%, transparent) !important;
+  stroke-width: 1.5px !important;
+  filter:
+    drop-shadow(0 1px 2px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent))
+    drop-shadow(0 4px 8px color-mix(in oklab, var(--_mermaid-glow) 6%, transparent));
+}
+
+.docusaurus-mermaid-container text.actor {
+  font-family: "Manrope", var(--font-sans) !important;
+  fill: var(--color-text) !important;
+  font-weight: 300 !important;
+  letter-spacing: -0.02em !important;
+}
+
+.docusaurus-mermaid-container .messageLine0,
+.docusaurus-mermaid-container .messageLine1 {
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 35%, var(--color-muted)) !important;
+  stroke-width: 1.5px !important;
+}
+
+.docusaurus-mermaid-container .messageText {
+  font-family: "Manrope", var(--font-sans) !important;
+  fill: var(--color-text) !important;
+  font-weight: 300 !important;
+  letter-spacing: -0.01em !important;
+}
+
+.docusaurus-mermaid-container .loopLine {
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 20%, transparent) !important;
+}
+
+.docusaurus-mermaid-container .activation0,
+.docusaurus-mermaid-container .activation1,
+.docusaurus-mermaid-container .activation2 {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 15%, var(--color-surface)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 30%, transparent) !important;
+}
+
+/* ---- Dark mode element overrides ---- */
+[data-theme="dark"] .docusaurus-mermaid-container .node rect,
+[data-theme="dark"] .docusaurus-mermaid-container .node polygon,
+[data-theme="dark"] .docusaurus-mermaid-container .node circle {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 15%, var(--color-surface)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 40%, transparent) !important;
+  filter:
+    drop-shadow(0 1px 3px color-mix(in oklab, var(--_mermaid-glow) 15%, transparent))
+    drop-shadow(0 4px 12px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent));
+}
+
+[data-theme="dark"] .docusaurus-mermaid-container .cluster rect {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 8%, var(--color-bg)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 22%, transparent) !important;
+  filter: drop-shadow(0 2px 10px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent));
+}
+
+[data-theme="dark"] .docusaurus-mermaid-container .actor {
+  fill: color-mix(in oklab, var(--_mermaid-glow) 15%, var(--color-surface)) !important;
+  stroke: color-mix(in oklab, var(--_mermaid-glow) 40%, transparent) !important;
+  filter:
+    drop-shadow(0 1px 3px color-mix(in oklab, var(--_mermaid-glow) 15%, transparent))
+    drop-shadow(0 4px 12px color-mix(in oklab, var(--_mermaid-glow) 10%, transparent));
+}
+
+[data-theme="dark"] .docusaurus-mermaid-container .edgeLabel {
+  color: color-mix(in oklab, var(--_mermaid-glow) 65%, var(--color-muted)) !important;
+}
+
 /* ==========================================
    11) TABLES
    ========================================== */
@@ -241,7 +511,7 @@ tbody tr {
   /* line-height: 0 !important; */
   padding-top: 0.37rem !important;
   display: inline-block !important;
-  text-transform: uppercase !important;
+  text-transform: none !important;
   letter-spacing: 0.05em !important;
   margin-top: 0.571rem !important;
   margin-bottom: 0.571rem !important;
diff --git a/src/custom/styles.css b/src/custom/styles.css
index 3d6cf982..0eca7263 100644
--- a/src/custom/styles.css
+++ b/src/custom/styles.css
@@ -1,6 +1,7 @@
 /* Import Google Fonts */
 @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
 
 /* Design System */
 @import "./_tokens.css";