diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 0997332..d60c324 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -124,21 +124,20 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
         )}
       >
         {/* Collapse Toggle Button */}
-        <Button
-          variant="ghost"
-          size="icon"
+        <button
           onClick={() => setCollapsed(!collapsed)}
           className={cn(
-            "absolute -right-3 top-6 w-6 h-6 rounded-full border border-border bg-card shadow-sm",
-            "hover:bg-accent z-50"
+            "absolute -right-4 top-8 w-8 h-8 rounded-full border-2 border-blue-500 bg-blue-500 text-white shadow-lg",
+            "hover:bg-blue-600 hover:scale-110 transition-all z-50 flex items-center justify-center"
           )}
+          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         >
           {collapsed ? (
-            <ChevronRight className="w-3 h-3" />
+            <ChevronRight className="w-5 h-5" />
           ) : (
-            <ChevronLeft className="w-3 h-3" />
+            <ChevronLeft className="w-5 h-5" />
           )}
-        </Button>
+        </button>
 
         <SidebarContent pathname={pathname} collapsed={collapsed} />
       </div>