diff --git a/client/pages/docs/DocsApiReference.tsx b/client/pages/docs/DocsApiReference.tsx
index 8d9653e9..e8de109e 100644
--- a/client/pages/docs/DocsApiReference.tsx
+++ b/client/pages/docs/DocsApiReference.tsx
@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import { Link } from "react-router-dom";
 import {
   Card,
@@ -104,6 +105,11 @@ const errorExamples = [
 
 export default function DocsApiReference() {
   return (
+    <DocsLayout
+      title="API Reference"
+      description="Complete API documentation with examples"
+      breadcrumbs={[{ label: "API Reference" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-blue-600/20 text-blue-200 uppercase tracking-wide">
@@ -337,5 +343,6 @@ export default function DocsApiReference() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }
diff --git a/client/pages/docs/DocsCli.tsx b/client/pages/docs/DocsCli.tsx
index 7186ae08..f935db82 100644
--- a/client/pages/docs/DocsCli.tsx
+++ b/client/pages/docs/DocsCli.tsx
@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import {
   Card,
   CardContent,
@@ -82,6 +83,11 @@ const automationTips = [
 
 export default function DocsCli() {
   return (
+    <DocsLayout
+      title="CLI Reference"
+      description="Command-line interface documentation and commands"
+      breadcrumbs={[{ label: "CLI" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
@@ -281,5 +287,6 @@ export default function DocsCli() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }
diff --git a/client/pages/docs/DocsExamples.tsx b/client/pages/docs/DocsExamples.tsx
index 6db6de7d..46594cba 100644
--- a/client/pages/docs/DocsExamples.tsx
+++ b/client/pages/docs/DocsExamples.tsx
@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import { Link } from "react-router-dom";
 import {
   Card,
@@ -136,6 +137,11 @@ const integrationIdeas = [
 
 export default function DocsExamples() {
   return (
+    <DocsLayout
+      title="Code Examples"
+      description="Production-ready code examples and snippets"
+      breadcrumbs={[{ label: "Examples" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-emerald-500/20 text-emerald-100 uppercase tracking-wide">
@@ -293,5 +299,6 @@ export default function DocsExamples() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }