diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index e597ac0..b389edc 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -1,73 +1,61 @@
-import { Link, useLocation } from 'react-router-dom';
-import { cn } from '@/lib/utils';
+"use client"
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
-  onLinkClick?: () => void;
+import React from "react"
+import { Link, useLocation } from "react-router-dom"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+// Define the structure for navigation items
+interface NavItem {
+  href: string
+  title: string
+  icon: React.ElementType // Using React.ElementType for the icon component
 }
 
-export function SidebarNav({ className, onLinkClick, ...props }: SidebarNavProps) {
-  const { pathname } = useLocation();
+// Navigation items for the sidebar
+const navItems: NavItem[] = [
+  {
+    href: "/dashboard",
+    title: "Dashboard",
+    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.LayoutDashboard }))),
+  },
+  {
+    href: "/suppliers",
+    title: "Suppliers",
+    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Building2 }))),
+  },
+]
 
-  const navItems = [
-    {
-      title: 'Dashboard',
-      href: '/',
-    },
-    {
-      title: 'Stock',
-      href: '/stock',
-    },
-    {
-      title: 'Book Out Stock',
-      href: '/book-out',
-    },
-    {
-      title: 'Customers',
-      href: '/customers',
-    },
-    {
-      title: 'Suppliers', // New nav item
-      href: '/suppliers',
-    },
-    {
-      title: 'Reports',
-      href: '/reports',
-    },
-    {
-      title: 'Purchase Orders',
-      href: '/purchase-orders',
-    },
-    {
-      title: 'Products',
-      href: '/products',
-    },
-    {
-      title: 'Orders',
-      href: '/orders',
-    },
-    {
-      title: 'Settings',
-      href: '/settings',
-    },
-  ];
+interface SidebarNavProps {
+  className?: string
+  onLinkClick?: () => void // Added onLinkClick prop
+}
+
+export function SidebarNav({ className, onLinkClick }: SidebarNavProps) {
+  const location = useLocation()
 
   return (
-    <nav className={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)} {...props}>
-      {navItems.map((item) => (
-        <Link
-          key={item.href}
-          to={item.href}
-          onClick={onLinkClick}
-          className={cn(
-            'inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 px-4 py-2 justify-start',
-            pathname === item.href
-              ? 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground'
-              : 'text-primary-foreground hover:bg-primary/10 hover:text-primary-foreground'
-          )}
-        >
-          {item.title}
-        </Link>
-      ))}
+    <nav className={cn("space-y-4", className)}>
+      <ScrollArea className="h-[calc(100vh-100px)]"> {/* Adjust height as needed */}
+        <div className="space-y-2">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              to={item.href}
+              onClick={onLinkClick} // Pass the prop down
+              className={cn(
+                "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-foreground",
+                location.pathname === item.href ? "bg-accent text-foreground" : "text-muted-foreground"
+              )}
+            >
+              {/* Render the icon dynamically */}
+              <item.icon className="h-4 w-4" />
+              {item.title}
+            </Link>
+          ))}
+        </div>
+      </ScrollArea>
     </nav>
-  );
+  )
 }
\ No newline at end of file