diff --git a/client/components/docs/DocsLayout.tsx b/client/components/docs/DocsLayout.tsx
index 4ec7457b..ce17df61 100644
--- a/client/components/docs/DocsLayout.tsx
+++ b/client/components/docs/DocsLayout.tsx
@@ -26,61 +26,16 @@ interface DocNavItem {
   description?: string;
 }
 
-const docNavigation: DocNavItem[] = [
-  {
-    title: "Overview",
-    path: "/docs",
-    icon: <BookOpen className="h-5 w-5" />,
-    description: "Get started with AeThex",
-  },
-  {
-    title: "Getting Started",
-    path: "/docs/getting-started",
-    icon: <Zap className="h-5 w-5" />,
-    description: "Quick start guide",
-  },
-  {
-    title: "Platform",
-    path: "/docs/platform",
-    icon: <Layers className="h-5 w-5" />,
-    description: "Platform architecture & features",
-  },
-  {
-    title: "API Reference",
-    path: "/docs/api",
-    icon: <Code2 className="h-5 w-5" />,
-    description: "Complete API documentation",
-  },
-  {
-    title: "CLI",
-    path: "/docs/cli",
-    icon: <GitBranch className="h-5 w-5" />,
-    description: "Command line tools",
-  },
-  {
-    title: "Tutorials",
-    path: "/docs/tutorials",
-    icon: <BookMarked className="h-5 w-5" />,
-    description: "Step-by-step guides",
-  },
-  {
-    title: "Examples",
-    path: "/docs/examples",
-    icon: <FileText className="h-5 w-5" />,
-    description: "Code examples",
-  },
-  {
-    title: "Integrations",
-    path: "/docs/integrations",
-    icon: <Zap className="h-5 w-5" />,
-    description: "Third-party integrations",
-  },
-  {
-    title: "Curriculum",
-    path: "/docs/curriculum",
-    icon: <BookOpen className="h-5 w-5" />,
-    description: "Learning paths",
-  },
+const docNavigation: Omit<DocNavItem, "icon">[] = [
+  { title: "Overview", path: "/docs", description: "Get started with AeThex" },
+  { title: "Getting Started", path: "/docs/getting-started", description: "Quick start guide" },
+  { title: "Platform", path: "/docs/platform", description: "Platform architecture & features" },
+  { title: "API Reference", path: "/docs/api", description: "Complete API documentation" },
+  { title: "CLI", path: "/docs/cli", description: "Command line tools" },
+  { title: "Tutorials", path: "/docs/tutorials", description: "Step-by-step guides" },
+  { title: "Examples", path: "/docs/examples", description: "Code examples" },
+  { title: "Integrations", path: "/docs/integrations", description: "Third-party integrations" },
+  { title: "Curriculum", path: "/docs/curriculum", description: "Learning paths" },
 ];
 
 interface DocsLayoutProps {
@@ -103,15 +58,27 @@ function DocsLayoutContent({
   const location = useLocation();
   const { colors, toggleTheme, theme } = useDocsTheme();
 
+  const navWithIcons: DocNavItem[] = useMemo(() => [
+    { ...docNavigation[0], icon: <BookOpen className="h-5 w-5" /> },
+    { ...docNavigation[1], icon: <Zap className="h-5 w-5" /> },
+    { ...docNavigation[2], icon: <Layers className="h-5 w-5" /> },
+    { ...docNavigation[3], icon: <Code2 className="h-5 w-5" /> },
+    { ...docNavigation[4], icon: <GitBranch className="h-5 w-5" /> },
+    { ...docNavigation[5], icon: <BookMarked className="h-5 w-5" /> },
+    { ...docNavigation[6], icon: <FileText className="h-5 w-5" /> },
+    { ...docNavigation[7], icon: <Zap className="h-5 w-5" /> },
+    { ...docNavigation[8], icon: <BookOpen className="h-5 w-5" /> },
+  ], []);
+
   const filteredNav = useMemo(() => {
-    if (!searchQuery) return docNavigation;
+    if (!searchQuery) return navWithIcons;
     const query = searchQuery.toLowerCase();
-    return docNavigation.filter(
+    return navWithIcons.filter(
       (item) =>
         item.title.toLowerCase().includes(query) ||
         item.description?.toLowerCase().includes(query),
     );
-  }, [searchQuery]);
+  }, [searchQuery, navWithIcons]);
 
   const isCurrentPage = (path: string) => location.pathname === path;