diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 293c687..e0ad80d 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -8,6 +8,7 @@ import {
   PanelRightClose
 } from 'lucide-react';
 import { navigationItems } from './type';
+import { Tooltip } from "antd";
 
 interface SidebarProps {
   collapsed: boolean;
@@ -31,18 +32,20 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
         <div className="flex h-full flex-col">
           {/* Toggle Button */}
           <div className="flex h-16 items-center px-4">
-            <Button
-              data-alt="toggle-sidebar"
-              variant="ghost"
-              size="icon"
-              className={cn(
-                'h-4 w-4 rounded-full transition-transform duration-300 text-gray-300',
-                !collapsed && 'rotate-180'
-              )}
-              onClick={() => onToggle(!collapsed)}
-            >
-              <PanelRightClose className="h-4 w-4" />
-            </Button>
+            <Tooltip placement="right" title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}>
+              <Button
+                data-alt="toggle-sidebar"
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  'h-4 w-4 rounded-full transition-transform duration-300 text-gray-300',
+                  !collapsed && 'rotate-180'
+                )}
+                onClick={() => onToggle(!collapsed)}
+              >
+                <PanelRightClose className="h-4 w-4" />
+              </Button>
+            </Tooltip>
           </div>
 
           {/* Navigation */}
@@ -52,20 +55,22 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
                 {section.items.map((item) => {
                   const isActive = pathname === item.href;
                   return (
-                    <Link key={item.name} href={item.href}>
-                      <Button
-                        data-alt={`nav-item-${item.name}`}
-                        variant={isActive ? 'secondary' : 'ghost'}
-                        className={cn(
-                          'w-full justify-start',
-                          collapsed ? 'px-3' : 'px-4',
-                          isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
-                        )}
-                      >
-                        <item.icon className={cn('h-4 w-4 shrink-0 text-gray-300', !collapsed && 'mr-2')} />
-                        {!collapsed && <span>{item.name}</span>}
-                      </Button>
-                    </Link>
+                    <Tooltip placement="right" title={item.name} key={item.name}>
+                      <Link href={item.href}>
+                        <Button
+                          data-alt={`nav-item-${item.name}`}
+                          variant={isActive ? 'secondary' : 'ghost'}
+                          className={cn(
+                            'w-full justify-start',
+                            collapsed ? 'px-3' : 'px-4',
+                            isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
+                          )}
+                        >
+                          <item.icon className={cn('h-4 w-4 shrink-0 text-gray-300', !collapsed && 'mr-2')} />
+                          {!collapsed && <span>{item.name}</span>}
+                        </Button>
+                      </Link>
+                    </Tooltip>
                   );
                 })}
               </div>