diff --git a/client/pages/docs/DocsOverview.tsx b/client/pages/docs/DocsOverview.tsx
index eb548a75..c6806493 100644
--- a/client/pages/docs/DocsOverview.tsx
+++ b/client/pages/docs/DocsOverview.tsx
@@ -6,195 +6,14 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Link } from "react-router-dom";
-import {
-  BookOpen,
-  Code,
-  Terminal,
-  Video,
-  LayoutDashboard,
-  FileText,
-  ArrowRight,
-  Rocket,
-  Zap,
-  Shield,
-  Users,
-  Play,
-  Download,
-  Github,
-  ExternalLink,
-  Link as LinkIcon,
-  Headphones,
-} from "lucide-react";
-
-const quickStartCards = [
-  {
-    title: "Platform tour",
-    description: "Walk through dashboard, passport, and community experiences",
-    icon: LayoutDashboard,
-    href: "/docs/platform",
-    duration: "6 min read",
-    difficulty: "Beginner",
-    isNew: true,
-  },
-  {
-    title: "Project setup",
-    description: "Launch your first AeThex project with guided onboarding",
-    icon: Rocket,
-    href: "/docs/getting-started",
-    duration: "5 min read",
-    difficulty: "Beginner",
-  },
-  {
-    title: "First tutorial",
-    description:
-      "Follow your first interactive tutorial to build something amazing",
-    icon: Play,
-    href: "/docs/tutorials",
-    duration: "15 min",
-    difficulty: "Beginner",
-  },
-  {
-    title: "API integration",
-    description: "Learn how to integrate with AeThex APIs and services",
-    icon: Code,
-    href: "/docs/api",
-    duration: "10 min read",
-    difficulty: "Intermediate",
-  },
-  {
-    title: "CLI tools",
-    description: "Master the command line tools for efficient development",
-    icon: Terminal,
-    href: "/docs/cli",
-    duration: "8 min read",
-    difficulty: "Intermediate",
-  },
-  {
-    title: "Platform integrations",
-    description: "Embed partner agents and automate external workflows",
-    icon: LinkIcon,
-    href: "/docs/integrations",
-    duration: "7 min read",
-    difficulty: "Intermediate",
-  },
-];
-
-const resourceSections = [
-  {
-    title: "Tutorials & Guides",
-    description: "Step-by-step tutorials and comprehensive guides",
-    icon: Video,
-    href: "/docs/tutorials",
-    items: [
-      "Platform Quick Start",
-      "Game Development",
-      "AI Integration",
-      "Performance Optimization",
-    ],
-    badge: "6 tutorials",
-  },
-  {
-    title: "Platform Experience",
-    description: "Understand dashboard, passport, and collaboration spaces",
-    icon: LayoutDashboard,
-    href: "/docs/platform",
-    items: ["Dashboard", "Passport", "Community", "Mentorship"],
-    badge: "New",
-  },
-  {
-    title: "API Reference",
-    description: "Complete API documentation with examples",
-    icon: Code,
-    href: "/docs/api",
-    items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
-    badge: "40+ endpoints",
-  },
-  {
-    title: "Examples",
-    description: "Ready-to-use code examples and templates",
-    icon: FileText,
-    href: "/docs/examples",
-    items: [
-      "React Components",
-      "Game Templates",
-      "API Integration",
-      "Deployment Scripts",
-    ],
-    badge: "25+ examples",
-  },
-  {
-    title: "Integrations",
-    description: "Embed partner tooling and automate external workflows",
-    icon: LinkIcon,
-    href: "/docs/integrations",
-    items: [
-      "HelloSkip agent",
-      "Theming hooks",
-      "Status preflights",
-      "Troubleshooting",
-    ],
-    badge: "Updated",
-  },
-];
-
-const learningResources = [
-  {
-    title: "Video tutorials",
-    description: "Visual learning with step-by-step walkthroughs",
-    icon: Video,
-    count: "50+ videos",
-    link: "/tutorials",
-    color: "from-red-500 to-pink-600",
-  },
-  {
-    title: "Podcast series",
-    description: "Deep dives into AeThex technology and strategy",
-    icon: Headphones,
-    count: "20+ episodes",
-    link: "/blog",
-    color: "from-purple-500 to-indigo-600",
-  },
-  {
-    title: "Code examples",
-    description: "Production-ready snippets maintained by the platform team",
-    icon: Github,
-    count: "100+ repos",
-    link: "/docs/examples",
-    color: "from-green-500 to-emerald-600",
-  },
-  {
-    title: "Downloads",
-    description: "SDKs, design kits, and tooling for every platform",
-    icon: Download,
-    count: "Latest releases",
-    link: "/docs/getting-started#setup-workflow",
-    color: "from-blue-500 to-cyan-600",
-  },
-];
-
-const featuredUpdates = [
-  {
-    title: "New AI Integration Tutorials",
-    description: "Learn how to integrate cutting-edge AI features",
-    date: "2 days ago",
-    type: "Tutorial",
-    isNew: true,
-  },
-  {
-    title: "API v2.1 Documentation",
-    description: "Updated API docs with new endpoints and features",
-    date: "1 week ago",
-    type: "API",
-  },
-  {
-    title: "Performance Best Practices",
-    description: "New guide on optimizing application performance",
-    date: "2 weeks ago",
-    type: "Guide",
-  },
-];
+import { Github, ExternalLink, Users } from "lucide-react";
+import DocsHeroSection from "@/components/docs/DocsHeroSection";
+import QuickStartSection from "@/components/docs/QuickStartSection";
+import ResourceSectionsGrid from "@/components/docs/ResourceSectionsGrid";
+import LearningResourcesGrid from "@/components/docs/LearningResourcesGrid";
+import RecentUpdatesSection from "@/components/docs/RecentUpdatesSection";
+import DocsSupportCTA from "@/components/docs/DocsSupportCTA";
 
 export default function DocsOverview() {
   return (