diff --git a/next.config.ts b/next.config.ts
index 3b1c083..fd8137d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,5 @@
 import type { NextConfig } from 'next'
 import createMDX from '@next/mdx'
-import rehypeSlug from 'rehype-slug'
 
 const nextConfig: NextConfig = {
   /* config options here */
@@ -10,7 +9,7 @@ const nextConfig: NextConfig = {
 const withMDX = createMDX({
   extension : /\.mdx?$/,
   options: {
-    rehypePlugins: [rehypeSlug],
+    rehypePlugins: [['rehype-slug', {}]],
   },
 })
 
diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
new file mode 100644
index 0000000..541a219
--- /dev/null
+++ b/src/components/docs-footer.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ThumbsUp, ThumbsDown, Github, ChevronLeft, ChevronRight } from 'lucide-react'
+import { docsConfig, type NavItemWithChildren, type NavItem } from '@/config/docs'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+export function DocsFooter() {
+  const pathname = usePathname()
+  const [feedback, setFeedback] = React.useState<'yes' | 'no' | null>(null)
+
+  // Flatten the sidebarNav to get a sequential list of links
+  const flattenedLinks = React.useMemo(() => {
+    const links: NavItem[] = []
+    
+    // We only care about sidebarNav because it dictates the reading flow
+    const flatten = (items: NavItemWithChildren[]) => {
+      for (const item of items) {
+        if (item.href) {
+          links.push(item)
+        }
+        if (item.items && item.items.length > 0) {
+          flatten(item.items)
+        }
+      }
+    }
+    
+    flatten(docsConfig.sidebarNav)
+    return links
+  }, [])
+
+  // Find current index
+  const currentIndex = flattenedLinks.findIndex((link) => link.href === pathname)
+  const prevLink = currentIndex > 0 ? flattenedLinks[currentIndex - 1] : null
+  const nextLink = currentIndex >= 0 && currentIndex < flattenedLinks.length - 1 ? flattenedLinks[currentIndex + 1] : null
+
+  return (
+    <footer className="mt-16 mb-8">
+      {/* Feedback & GitHub section */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 py-6 border-t border-zinc-200 dark:border-zinc-800">
+        <div className="flex items-center gap-4">
+          <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">Was this page helpful?</span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className={cn("h-8 px-3 gap-2", feedback === 'yes' && "bg-sky-50 text-sky-700 border-sky-200 hover:bg-sky-50 hover:text-sky-700 dark:bg-sky-950/50 dark:text-sky-300 dark:border-sky-800")}
+              onClick={() => setFeedback('yes')}
+            >
+              <ThumbsUp className="h-3.5 w-3.5" />
+              Yes
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className={cn("h-8 px-3 gap-2", feedback === 'no' && "bg-rose-50 text-rose-700 border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:bg-rose-950/50 dark:text-rose-300 dark:border-rose-800")}
+              onClick={() => setFeedback('no')}
+            >
+              <ThumbsDown className="h-3.5 w-3.5" />
+              No
+            </Button>
+          </div>
+        </div>
+
+        <Link
+          href="https://github.com/neurolab-0x/docs"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50 transition-colors"
+        >
+          <Github className="h-4 w-4" />
+          Edit this page on GitHub
+        </Link>
+      </div>
+
+      {/* Pagination section */}
+      {(prevLink || nextLink) && (
+        <div className="grid sm:grid-cols-2 gap-4 mt-6">
+          {prevLink ? (
+            <Link
+              href={prevLink.href!}
+              className="group flex flex-col items-start gap-2 rounded-xl border border-zinc-200 p-6 hover:border-zinc-300 hover:bg-zinc-50 transition-all dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50"
+            >
+              <span className="flex items-center gap-1 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                <ChevronLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
+                Previous
+              </span>
+              <span className="font-semibold text-zinc-900 dark:text-zinc-100">{prevLink.title}</span>
+            </Link>
+          ) : (
+            <div />
+          )}
+
+          {nextLink ? (
+            <Link
+              href={nextLink.href!}
+              className="group flex flex-col items-end gap-2 rounded-xl border border-zinc-200 p-6 hover:border-zinc-300 hover:bg-zinc-50 transition-all dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50 text-right"
+            >
+              <span className="flex items-center gap-1 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                Next
+                <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+              </span>
+              <span className="font-semibold text-zinc-900 dark:text-zinc-100">{nextLink.title}</span>
+            </Link>
+          ) : (
+            <div />
+          )}
+        </div>
+      )}
+    </footer>
+  )
+}
diff --git a/src/components/docs-layout.tsx b/src/components/docs-layout.tsx
index 0b9324e..8c38231 100644
--- a/src/components/docs-layout.tsx
+++ b/src/components/docs-layout.tsx
@@ -3,6 +3,7 @@
 import { DocsSidebar } from '@/components/docs-sidebar'
 import { SiteHeader } from '@/components/site-header'
 import { TableOfContents } from '@/components/toc'
+import { DocsFooter } from '@/components/docs-footer'
 
 interface DocsLayoutProps {
   children: React.ReactNode
@@ -16,7 +17,10 @@ export function DocsLayout({ children }: DocsLayoutProps) {
         <div className='container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10 xl:grid-cols-[240px_minmax(0,1fr)_200px]'>
           <DocsSidebar />
           <main className='relative py-8 lg:py-12'>
-            <div className='mx-auto w-full max-w-4xl min-w-0'>{children}</div>
+            <div className='mx-auto w-full max-w-4xl min-w-0'>
+              {children}
+              <DocsFooter />
+            </div>
           </main>
           <aside className='hidden text-sm xl:block sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto pt-12 pb-8 pl-4 pr-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'>
             <TableOfContents />
diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx
index cae2d95..a560ec8 100644
--- a/src/components/docs-sidebar.tsx
+++ b/src/components/docs-sidebar.tsx
@@ -16,7 +16,7 @@ export function DocsSidebar() {
         <div className='w-full'>
           {docsConfig.sidebarNav.map((section, index) => (
             <div key={index} className='pb-6'>
-              <h4 className='mb-1 px-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100'>
+              <h4 className='px-2 py-2 text-md font-semibold text-zinc-900 dark:text-zinc-100'>
                 {section.title}
               </h4>
               {section.items?.length ? (
@@ -73,7 +73,7 @@ function SidebarNavItem({ item, pathname }: { item: NavItemWithChildren; pathnam
               'flex w-full items-center rounded-md border border-transparent px-2 py-1.5 pr-8 transition-colors',
               item.disabled && 'cursor-not-allowed opacity-60',
               isActive
-                ? 'bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800/50 dark:text-zinc-50'
+                ? 'bg-zinc-100 font-semibold text-zinc-900 dark:bg-zinc-800/50 dark:text-zinc-50'
                 : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-50',
             )}
             target={item.external ? '_blank' : ''}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index f0b7864..a7fb2f1 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -2,80 +2,87 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Github, Star } from 'lucide-react'
+import { Github, Brain } from 'lucide-react'
 import { docsConfig } from '@/config/docs'
 import { MobileNav } from '@/components/mobile-nav'
 import { Search } from '@/components/search'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 export function SiteHeader() {
   const pathname = usePathname()
 
   return (
-    <header className='sticky top-0 z-50 w-full border-b border-zinc-200/80 bg-white/90 backdrop-blur-md dark:border-zinc-800 dark:bg-zinc-950/85'>
-      <div className='container flex h-16 items-center gap-3'>
-        <MobileNav />
+    <header className='sticky top-0 z-50 w-full border-b border-zinc-200/40 bg-white/60 backdrop-blur-xl supports-[backdrop-filter]:bg-white/60 dark:border-zinc-800/40 dark:bg-zinc-950/60'>
+      <div className='container mx-auto flex h-14 max-w-screen-2xl items-center justify-between px-4 sm:px-8'>
+        
+        {/* Left Section: Logo & Desktop Nav */}
+        <div className='flex items-center gap-6 md:gap-8'>
+          <div className='flex items-center gap-2'>
+            <MobileNav />
+            <Link href='/' className='flex items-center gap-2.5 transition-opacity hover:opacity-80'>
 
-        <Link href='/' className='flex min-w-0 items-center gap-3'>
-          <span className='min-w-0'>
-            <span className='block truncate font-sans text-lg font-semibold text-zinc-950 dark:text-zinc-50'>
-              NeuroLab Docs
-            </span>
-          </span>
-        </Link>
+              <span className='hidden sm:inline-block font-sans text-base font-bold tracking-tight text-zinc-950 dark:text-zinc-50'>
+                NeuroLab Documentation
+              </span>
+            </Link>
+          </div>
 
-        <nav className='ml-4 hidden items-center gap-1 lg:flex'>
-          {docsConfig.mainNav.map((item) => {
-            const allMainHrefs = docsConfig.mainNav.map((n) => n.href).filter(Boolean) as string[]
-            const isActive =
-              pathname === item.href ||
-              (!!item.href &&
-                item.href !== '/' &&
-                pathname.startsWith(item.href) &&
-                !allMainHrefs.some(
-                  (other) =>
-                    other !== item.href &&
-                    pathname.startsWith(other) &&
-                    other.length > item.href!.length
-                ))
+          <nav className='hidden items-center gap-1.5 lg:flex'>
+            {docsConfig.mainNav.map((item) => {
+              const allMainHrefs = docsConfig.mainNav.map((n) => n.href).filter(Boolean) as string[]
+              const isActive =
+                pathname === item.href ||
+                (!!item.href &&
+                  item.href !== '/' &&
+                  pathname.startsWith(item.href) &&
+                  !allMainHrefs.some(
+                    (other) =>
+                      other !== item.href &&
+                      pathname.startsWith(other) &&
+                      other.length > item.href!.length
+                  ))
 
-            return (
-              <Link
-                key={item.href}
-                href={item.href || '/'}
-                className={cn(
-                  'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                  isActive
-                    ? 'bg-zinc-100 text-zinc-950 dark:bg-zinc-900 dark:text-zinc-50'
-                    : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-zinc-50',
-                )}
-                target={item.external ? '_blank' : undefined}
-                rel={item.external ? 'noreferrer' : undefined}
-              >
-                {item.title}
-              </Link>
-            )
-          })}
-        </nav>
-
-        <div className='ml-auto hidden md:block'>
-          <Search />
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href || '/'}
+                  className={cn(
+                    'rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200',
+                    isActive
+                      ? 'bg-zinc-100 text-zinc-950 dark:bg-zinc-800/50 dark:text-zinc-50'
+                      : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-50',
+                  )}
+                  target={item.external ? '_blank' : undefined}
+                  rel={item.external ? 'noreferrer' : undefined}
+                >
+                  {item.title}
+                </Link>
+              )
+            })}
+          </nav>
         </div>
 
-        <Link
-          href='https://github.com/neurolab-0x'
-          target='_blank'
-          rel='noreferrer'
-          className='hidden items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-600 transition-colors hover:border-zinc-300 hover:text-zinc-950 md:flex dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:text-zinc-50'
-        >
-          <Github className='size-4' />
-          221K{' '}
-          <Star className='size-4 text-zinc-600 transition-colors hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50' />
-        </Link>
+        {/* Right Section: Search & Actions */}
+        <div className='flex items-center justify-end gap-2 sm:gap-4'>
+          <div className='hidden w-full md:block md:w-auto md:max-w-xs'>
+            <Search />
+          </div>
+
+          <div className='flex items-center gap-0.5'>
+            <Link
+              href='https://github.com/neurolab-0x'
+              target='_blank'
+              rel='noreferrer'
+              className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "size-9 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50")}
+            >
+              <Github className='size-4' />
+              <span className='sr-only'>GitHub</span>
+            </Link>
 
-        <div className='rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950'>
-          <ThemeToggle />
+            <ThemeToggle />
+          </div>
         </div>
       </div>
     </header>
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 586e17d..1a13178 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -11,8 +11,9 @@ export function ThemeToggle() {
   return (
     <Button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className=""
+      className="size-9 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
       variant="ghost"
+      size="icon"
     >
       <Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
diff --git a/src/config/docs.ts b/src/config/docs.ts
index b336a74..2acedf1 100644
--- a/src/config/docs.ts
+++ b/src/config/docs.ts
@@ -86,9 +86,9 @@ export const docsConfig: DocsConfig = {
               items: []
             },
             {
-              title : 'Orchestration Backend',
-              href : '/docs/architecture/orchestration-backend',
-              items : []
+              title: 'Orchestration Backend',
+              href: '/docs/architecture/orchestration-backend',
+              items: []
             },
             {
               title: 'Web UI',
@@ -219,7 +219,7 @@ export const docsConfig: DocsConfig = {
           defaultOpen: true,
           items: [
             {
-              title: 'All',
+              title: 'Introduction',
               href: '/docs/api/backend',
               items: [],
             },
@@ -233,11 +233,31 @@ export const docsConfig: DocsConfig = {
               href: '/docs/api/backend/users',
               items: [],
             },
+            {
+              title: 'Appointments',
+              href: '/docs/api/backend/appointments',
+              items: []
+            },
             {
               title: 'Organizations',
               href: '/docs/api/backend/organizations',
               items: [],
             },
+            {
+              title: 'Devices',
+              href: '/docs/api/backend/device',
+              items: []
+            },
+            {
+              title: 'Reports',
+              href: '/docs/api/backend/reports',
+              items: []
+            },
+            {
+              title : 'Sessions',
+              href : '/docs/api/backend/sessions',
+              items : []
+            },
             {
               title: 'Billing & Subscriptions',
               href: '/docs/api/backend/billing',
@@ -257,5 +277,9 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title : 'Workflows',
+      items : []
+    }
   ],
 }