diff --git a/docs/my-website/docs/proxy/high_availability_control_plane.md b/docs/my-website/docs/proxy/high_availability_control_plane.md
index 324fba3a180..456804c39e8 100644
--- a/docs/my-website/docs/proxy/high_availability_control_plane.md
+++ b/docs/my-website/docs/proxy/high_availability_control_plane.md
@@ -42,9 +42,9 @@ The **High Availability Control Plane** takes a different approach:
 
 <ControlPlaneArchitecture />
 
-The **control plane** is a LiteLLM instance that serves the admin UI and knows about all the workers. It does not proxy LLM requests, it is purely for administration.
+The **control plane** is a LiteLLM instance that serves the admin UI and knows about all the workers. It is **not a router** — it does not proxy or route any LLM requests. It exists purely so admins can switch between workers and manage them from a single UI.
 
-Each **worker** is a fully independent LiteLLM proxy that handles LLM requests for its region or team. Workers have their own users, keys, teams, and budgets.
+Each **worker** is a fully independent LiteLLM proxy that handles LLM requests for its region or team. Workers have their own database, Redis, master key, users, keys, teams, and budgets. No infrastructure is shared between workers.
 
 ## Setup
 
diff --git a/docs/my-website/src/components/ControlPlaneArchitecture/ControlPlaneArchitecture.tsx b/docs/my-website/src/components/ControlPlaneArchitecture/ControlPlaneArchitecture.tsx
index 5cc41979b02..d296e0ce29f 100644
--- a/docs/my-website/src/components/ControlPlaneArchitecture/ControlPlaneArchitecture.tsx
+++ b/docs/my-website/src/components/ControlPlaneArchitecture/ControlPlaneArchitecture.tsx
@@ -3,23 +3,56 @@ import styles from './styles.module.css';
 
 /* ────────────────────── Shared small pieces ────────────────────── */
 
-function InfraChip({ color, label }: { color: string; label: string }) {
-  const dotClass =
+function InfraBox({ icon, label, color }: { icon: string; label: string; color: 'green' | 'blue' | 'orange' }) {
+  const colorClass =
     color === 'green'
-      ? styles.infraDotGreen
+      ? styles.infraBoxGreen
       : color === 'blue'
-        ? styles.infraDotBlue
-        : styles.infraDotOrange;
+        ? styles.infraBoxBlue
+        : styles.infraBoxOrange;
 
   return (
-    <span className={styles.infraChip}>
-      <span className={`${styles.infraDot} ${dotClass}`} />
-      {label}
-    </span>
+    <div className={`${styles.infraBox} ${colorClass}`}>
+      <span className={styles.infraBoxIcon}>{icon}</span>
+      <span className={styles.infraBoxLabel}>{label}</span>
+    </div>
   );
 }
 
-/* ────────────────────── Architecture tab ────────────────────── */
+/* ────────────────────── Worker column with infra ────────────────────── */
+
+function WorkerColumn({
+  name,
+  region,
+  subtitle,
+  nodeClass,
+  badgeClass,
+}: {
+  name: string;
+  region: string;
+  subtitle: string;
+  nodeClass: string;
+  badgeClass: string;
+}) {
+  return (
+    <div className={styles.workerColumn}>
+      <div className={`${styles.node} ${styles.nodeWorker} ${nodeClass}`}>
+        <div className={styles.nodeHeader}>
+          <span className={styles.nodeTitle}>{name}</span>
+          <span className={`${styles.badge} ${badgeClass}`}>{region}</span>
+        </div>
+        <div className={styles.nodeSubtitle}>{subtitle}</div>
+        <div className={styles.nodeCaption}>Handles LLM requests</div>
+      </div>
+      <div className={styles.infraStack}>
+        <InfraBox icon="🗄" label="Own Database" color="green" />
+        <InfraBox icon="⚡" label="Own Redis" color="orange" />
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────── Architecture diagram ────────────────────── */
 
 function ArchitectureView() {
   return (
@@ -36,49 +69,41 @@ function ArchitectureView() {
       <div className={`${styles.node} ${styles.nodeControlPlane}`}>
         <div className={styles.nodeHeader}>
           <span className={styles.nodeTitle}>Control Plane</span>
-          <span className={`${styles.badge} ${styles.badgeBlue}`}>UI</span>
+          <span className={`${styles.badge} ${styles.badgeBlue}`}>ADMIN UI ONLY</span>
         </div>
         <div className={styles.nodeSubtitle}>cp.example.com</div>
-        <div className={styles.infraRow}>
-          <InfraChip color="green" label="Own DB" />
-          <InfraChip color="orange" label="Own Redis" />
-          <InfraChip color="blue" label="Own Key" />
+        <div className={styles.nodeCaption}>
+          Not a router — does not proxy LLM requests.
+          <br />
+          Lets admins switch between workers to manage them.
         </div>
       </div>
 
-      {/* Branch connector */}
-      <div className={styles.connectorBranch}>
-        <div className={`${styles.branchLeg} ${styles.branchLegLeft}`} />
-        <div className={`${styles.branchLeg} ${styles.branchLegRight}`} />
+      {/* Branch connector with label */}
+      <div className={styles.connectorBranchLabeled}>
+        <span className={styles.connectorLabel}>UI management only</span>
+        <div className={styles.connectorBranch}>
+          <div className={`${styles.branchLeg} ${styles.branchLegLeft}`} />
+          <div className={`${styles.branchLeg} ${styles.branchLegRight}`} />
+        </div>
       </div>
 
       {/* Workers */}
       <div className={styles.workersRow}>
-        <div className={`${styles.node} ${styles.nodeWorker} ${styles.nodeWorkerA}`}>
-          <div className={styles.nodeHeader}>
-            <span className={styles.nodeTitle}>Worker A</span>
-            <span className={`${styles.badge} ${styles.badgeGreen}`}>US East</span>
-          </div>
-          <div className={styles.nodeSubtitle}>worker-a.example.com</div>
-          <div className={styles.infraRow}>
-            <InfraChip color="green" label="Own DB" />
-            <InfraChip color="orange" label="Own Redis" />
-            <InfraChip color="blue" label="Own Key" />
-          </div>
-        </div>
-
-        <div className={`${styles.node} ${styles.nodeWorker} ${styles.nodeWorkerB}`}>
-          <div className={styles.nodeHeader}>
-            <span className={styles.nodeTitle}>Worker B</span>
-            <span className={`${styles.badge} ${styles.badgePurple}`}>EU West</span>
-          </div>
-          <div className={styles.nodeSubtitle}>worker-b.example.com</div>
-          <div className={styles.infraRow}>
-            <InfraChip color="green" label="Own DB" />
-            <InfraChip color="orange" label="Own Redis" />
-            <InfraChip color="blue" label="Own Key" />
-          </div>
-        </div>
+        <WorkerColumn
+          name="Worker A"
+          region="US East"
+          subtitle="worker-a.example.com"
+          nodeClass={styles.nodeWorkerA}
+          badgeClass={styles.badgeGreen}
+        />
+        <WorkerColumn
+          name="Worker B"
+          region="EU West"
+          subtitle="worker-b.example.com"
+          nodeClass={styles.nodeWorkerB}
+          badgeClass={styles.badgePurple}
+        />
       </div>
     </div>
   );
diff --git a/docs/my-website/src/components/ControlPlaneArchitecture/styles.module.css b/docs/my-website/src/components/ControlPlaneArchitecture/styles.module.css
index 8400a8920e0..03713648734 100644
--- a/docs/my-website/src/components/ControlPlaneArchitecture/styles.module.css
+++ b/docs/my-website/src/components/ControlPlaneArchitecture/styles.module.css
@@ -284,45 +284,67 @@
   color: var(--cp-purple);
 }
 
-/* ── Infrastructure chips ── */
-.infraRow {
-  display: flex;
-  gap: 0.4rem;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 0.5rem;
+/* ── Node caption ── */
+.nodeCaption {
+  font-size: 0.72rem;
+  color: var(--cp-text-muted);
+  margin-top: 0.4rem;
+  line-height: 1.4;
+  font-style: italic;
 }
 
-.infraChip {
+/* ── Infrastructure boxes (per-worker) ── */
+.infraStack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 0.5rem;
+  width: 100%;
+}
+
+.infraBox {
   display: flex;
   align-items: center;
-  gap: 0.3rem;
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--cp-text-secondary);
-  background: var(--cp-infra-bg);
-  border: 1px solid var(--cp-infra-border);
-  border-radius: 6px;
-  padding: 0.2rem 0.5rem;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 8px;
+  border: 1.5px solid var(--cp-border);
+  background: var(--cp-card-bg);
 }
 
-.infraDot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+.infraBoxGreen {
+  border-color: var(--cp-green);
+  background: var(--cp-green-light);
+}
+
+.infraBoxBlue {
+  border-color: var(--cp-accent);
+  background: var(--cp-accent-light);
+}
+
+.infraBoxOrange {
+  border-color: var(--cp-orange);
+  background: var(--cp-orange-light);
+}
+
+.infraBoxIcon {
+  font-size: 0.85rem;
   flex-shrink: 0;
 }
 
-.infraDotGreen {
-  background: var(--cp-green);
+.infraBoxLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cp-text);
 }
 
-.infraDotBlue {
-  background: var(--cp-accent);
-}
-
-.infraDotOrange {
-  background: var(--cp-orange);
+/* ── Worker column (card + infra stack) ── */
+.workerColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 220px;
+  max-width: 260px;
 }
 
 /* ── Workers row ── */
@@ -333,6 +355,24 @@
   flex-wrap: wrap;
 }
 
+/* ── Connector with label ── */
+.connectorBranchLabeled {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 700px;
+}
+
+.connectorLabel {
+  font-size: 0.7rem;
+  color: var(--cp-text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
 /* ── Animated flow ── */
 .flowLabel {
   font-size: 0.7rem;
@@ -511,6 +551,12 @@
     max-width: 260px;
   }
 
+  .workerColumn {
+    min-width: auto;
+    width: 100%;
+    max-width: 280px;
+  }
+
   .connectorBranch {
     display: none;
   }