diff --git a/content/docs/Components/Sections/navbar.mdx b/content/docs/Components/Sections/navbar.mdx
index 9fb2f60..3d05ba4 100644
--- a/content/docs/Components/Sections/navbar.mdx
+++ b/content/docs/Components/Sections/navbar.mdx
@@ -7,15 +7,18 @@ import Navbar from '../../../../app/Components/Sections/Navbar';
 
 ## Component
 
-<StyledContainer code={`"use client"
+<StyledContainer code={`'use client'
+
 import { useState, useEffect, useRef } from 'react'
-import { Menu, Search, X } from 'lucide-react'
+import { Menu, Search, X, Sun, Moon } from 'lucide-react'
 import Link from 'next/link'
+import { useTheme } from './ThemeContext'
 
 export default function Navbar() {
   const [isSearchOpen, setIsSearchOpen] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const mobileMenuRef = useRef<HTMLDivElement>(null)
+  const { theme, toggleTheme } = useTheme()
 
   const toggleSearch = () => setIsSearchOpen(!isSearchOpen)
   const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen)
@@ -41,12 +44,12 @@ export default function Navbar() {
   ]
 
   return (
-    <nav className="bg-white shadow-sm rounded-xl">
+    <nav className="bg-white dark:bg-gray-800 shadow-sm rounded-xl transition-colors duration-200">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
             <Link href="/" className="flex-shrink-0" prefetch={false}>
-              <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
             </Link>
@@ -56,7 +59,7 @@ export default function Navbar() {
                   <Link
                     key={item.name}
                     href={item.href}
-                    className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                    className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline"
                     prefetch={false}
                   >
                     {item.name}
@@ -65,28 +68,33 @@ export default function Navbar() {
               </div>
             </div>
           </div>
-          <div className="hidden md:flex items-center">
+          <div className="hidden md:flex items-center space-x-4">
             <div className="relative flex items-center">
               <input
                 type="search"
                 placeholder="Search..."
-                className={\`px-3 py-2 pr-10 rounded-md text-sm bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out text-gray-900 \${ 
-                isSearchOpen ? 'w-64 opacity-100' : 'w-0 opacity-0' 
-                }\`}
+                className={\`px-3 py-2 pr-10 rounded-md text-sm bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out \${isSearchOpen ? 'w-64 opacity-100' : 'w-0 opacity-0'}\`}
               />
               <button
                 onClick={toggleSearch}
-                className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 absolute right-0"
+                className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 absolute right-0"
                 aria-label="Search"
               >
                 <Search className="h-5 w-5" />
               </button>
             </div>
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label={\`Switch to \${theme === 'light' ? 'dark' : 'light'} mode\`}
+            >
+              {theme === 'light' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
+            </button>
           </div>
           <div className="md:hidden">
             <button
               onClick={toggleMobileMenu}
-              className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
               aria-label="Open menu"
             >
               <Menu className="h-5 w-5" />
@@ -97,20 +105,19 @@ export default function Navbar() {
 
       {/* Mobile menu */}
       <div
-        className={\`fixed inset-y-0 right-0 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out \${ 
-        isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full' 
-        } z-50\`}
+        ref={mobileMenuRef}
+        className={\`fixed inset-y-0 right-0 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 ease-in-out \${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'} z-50\`}
       >
         <div className="p-6">
           <div className="flex items-center justify-between mb-8">
             <Link href="/" className="flex-shrink-0" prefetch={false}>
-              <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
             </Link>
             <button
               onClick={toggleMobileMenu}
-              className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
               aria-label="Close menu"
             >
               <X className="h-5 w-5" />
@@ -121,28 +128,37 @@ export default function Navbar() {
               <Link
                 key={item.name}
                 href={item.href}
-                className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors"
+                className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors no-underline"
                 prefetch={false}
               >
                 {item.name}
               </Link>
             ))}
           </nav>
-          <div className="mt-6">
+          <div className="mt-6 space-y-4">
             <div className="relative">
               <input
                 type="search"
                 placeholder="Search..."
-                className="w-full px-3 py-2 rounded-md text-sm bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
+                className="w-full px-3 py-2 rounded-md text-sm bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
               />
-              <Search className="absolute right-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Search className="absolute right-3 top-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
             </div>
+            <button
+              onClick={toggleTheme}
+              className="w-full p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center"
+              aria-label={\`Switch to \${theme === 'light' ? 'dark' : 'light'} mode\`}
+            >
+              {theme === 'light' ? <Moon className="h-5 w-5 mr-2" /> : <Sun className="h-5 w-5 mr-2" />}
+              {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
+            </button>
           </div>
         </div>
       </div>
     </nav>
   )
-}`}>
+}
+`}>
     <Navbar />
 </StyledContainer>