diff --git a/client/pages/docs/DocsOverview.tsx b/client/pages/docs/DocsOverview.tsx
index 9d87777c..14816d06 100644
--- a/client/pages/docs/DocsOverview.tsx
+++ b/client/pages/docs/DocsOverview.tsx
@@ -8,6 +8,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 import { Github, ExternalLink, Users } from "lucide-react";
+import DocsLayout from "@/components/docs/DocsLayout";
 import DocsHeroSection from "@/components/docs/DocsHeroSection";
 import QuickStartSection from "@/components/docs/QuickStartSection";
 import ResourceSectionsGrid from "@/components/docs/ResourceSectionsGrid";
@@ -17,7 +18,11 @@ import DocsSupportCTA from "@/components/docs/DocsSupportCTA";
 
 export default function DocsOverview() {
   return (
-    <div>
+    <DocsLayout
+      title="Documentation"
+      description="Learn how to build amazing applications with AeThex"
+      breadcrumbs={[{ label: "Overview" }]}
+    >
       <DocsHeroSection />
       <QuickStartSection />
       <ResourceSectionsGrid />
@@ -81,6 +86,6 @@ export default function DocsOverview() {
       </div>
 
       <DocsSupportCTA />
-    </div>
+    </DocsLayout>
   );
 }