diff --git a/web/app/docs/layout.tsx b/web/app/docs/layout.tsx
index 1da0de0..a3b6328 100644
--- a/web/app/docs/layout.tsx
+++ b/web/app/docs/layout.tsx
@@ -1,6 +1,7 @@
 import type React from "react"
 import DocSidebar from "@/components/DocSidebar"
 import Footer from "@/components/footer"
+import { DocNavigation } from "@/components/ui/doc-navigation"
 
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -8,10 +9,14 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
       <div className="flex flex-col lg:flex-row flex-1 pt-16 lg:pt-0">
         <DocSidebar />
         <main className="flex-1 p-4 lg:p-6 pt-6 lg:pt-6 overflow-y-auto">
-          <div className="max-w-3xl mx-auto" style={{ maxWidth: "980px" }}>{children}</div>
+          <div className="max-w-3xl mx-auto" style={{ maxWidth: "980px" }}>
+            {children}
+            <DocNavigation />
+          </div>
         </main>
       </div>
       <Footer />
     </div>
   )
 }
+
diff --git a/web/components/DocSidebar.tsx b/web/components/DocSidebar.tsx
index 4eb163e..d1136a2 100644
--- a/web/components/DocSidebar.tsx
+++ b/web/components/DocSidebar.tsx
@@ -16,7 +16,7 @@ interface MenuItem {
   submenu?: SubMenuItem[]
 }
 
-const sidebarItems: MenuItem[] = [
+export const sidebarItems: MenuItem[] = [
   { title: "Introduction", href: "/docs/introduction" },
   { title: "Installation", href: "/docs/installation" },
   {
diff --git a/web/components/ui/doc-navigation.tsx b/web/components/ui/doc-navigation.tsx
new file mode 100644
index 0000000..87b268c
--- /dev/null
+++ b/web/components/ui/doc-navigation.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import Link from "next/link"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { usePathname } from "next/navigation"
+import { sidebarItems } from "@/components/DocSidebar"
+
+interface DocNavigationProps {
+  className?: string
+}
+
+export function DocNavigation({ className }: DocNavigationProps) {
+  const pathname = usePathname()
+
+  const flattenSidebarItems = () => {
+    const flatItems: Array<{ title: string; href: string; section?: string }> = []
+
+    sidebarItems.forEach((item) => {
+      if (item.href) {
+        flatItems.push({ title: item.title, href: item.href })
+      }
+
+      if (item.submenu) {
+        item.submenu.forEach((subItem) => {
+          flatItems.push({
+            title: subItem.title,
+            href: subItem.href,
+            section: item.title, 
+          })
+        })
+      }
+    })
+
+    return flatItems
+  }
+
+  const allPages = flattenSidebarItems()
+
+  const currentPageIndex = allPages.findIndex((page) => page.href === pathname)
+
+  const prevPage = currentPageIndex > 0 ? allPages[currentPageIndex - 1] : null
+  const nextPage = currentPageIndex < allPages.length - 1 ? allPages[currentPageIndex + 1] : null
+
+  if (!prevPage && !nextPage) return null
+
+  return (
+    <div className={`mt-16 ${className || ""}`}>
+
+      <div className="w-full h-0.5 bg-gray-300 mb-8"></div>
+
+      <div className="flex flex-col sm:flex-row justify-between gap-4">
+        {prevPage ? (
+          <Link
+            href={prevPage.href}
+            className="flex items-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all duration-200 group w-full sm:w-[calc(50%-0.5rem)] sm:max-w-[calc(50%-0.5rem)]"
+          >
+            <ChevronLeft className="h-5 w-5 mr-2 text-gray-500 group-hover:text-blue-500 flex-shrink-0" />
+            <div className="min-w-0 overflow-hidden">
+              <div className="text-sm text-gray-500 group-hover:text-blue-600 truncate">
+                {prevPage.section ? `${prevPage.section}: ` : ""}Previous
+              </div>
+              <div className="font-medium group-hover:text-blue-700 truncate">{prevPage.title}</div>
+            </div>
+          </Link>
+        ) : (
+          <div className="hidden sm:block sm:w-[calc(50%-0.5rem)]"></div> 
+        )}
+
+        {nextPage ? (
+          <Link
+            href={nextPage.href}
+            className="flex items-center justify-end p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all duration-200 group sm:text-right w-full sm:w-[calc(50%-0.5rem)] sm:max-w-[calc(50%-0.5rem)] ml-auto"
+          >
+            <div className="min-w-0 overflow-hidden">
+              <div className="text-sm text-gray-500 group-hover:text-blue-600 truncate">
+                {nextPage.section ? `${nextPage.section}: ` : ""}Next
+              </div>
+              <div className="font-medium group-hover:text-blue-700 truncate">{nextPage.title}</div>
+            </div>
+            <ChevronRight className="h-5 w-5 ml-2 text-gray-500 group-hover:text-blue-500 flex-shrink-0" />
+          </Link>
+        ) : (
+          <div className="hidden sm:block sm:w-[calc(50%-0.5rem)]"></div> 
+        )}
+      </div>
+    </div>
+  )
+}