diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index a216407..e597ac0 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -1,101 +1,73 @@
-"use client"
+import { Link, useLocation } from 'react-router-dom';
+import { cn } from '@/lib/utils';
 
-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
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+  onLinkClick?: () => void;
 }
 
-// Navigation items for the sidebar
-const navItems: NavItem[] = [
-  {
-    href: "/dashboard",
-    title: "Dashboard",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.LayoutDashboard }))),
-  },
-  {
-    href: "/stock",
-    title: "Stock",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Package }))),
-  },
-  {
-    href: "/book-out",
-    title: "Book Out",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.LogOut }))),
-  },
-  {
-    href: "/customers",
-    title: "Customers",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Users }))),
-  },
-  {
-    href: "/suppliers",
-    title: "Suppliers",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Building2 }))),
-  },
-  {
-    href: "/purchase-orders",
-    title: "Purchase Orders",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Receipt }))),
-  },
-  {
-    href: "/reports",
-    title: "Reports",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.FileText }))),
-  },
-  {
-    href: "/products", // Restored Products link
-    title: "Products",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Box }))),
-  },
-  {
-    href: "/orders", // Restored Orders link
-    title: "Orders",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.ShoppingCart }))),
-  },
-  {
-    href: "/settings",
-    title: "Settings",
-    icon: React.lazy(() => import("lucide-react").then(mod => ({ default: mod.Settings }))),
-  },
-]
+export function SidebarNav({ className, onLinkClick, ...props }: SidebarNavProps) {
+  const { pathname } = useLocation();
 
-interface SidebarNavProps {
-  className?: string
-  onLinkClick?: () => void // Added onLinkClick prop
-}
-
-export function SidebarNav({ className, onLinkClick }: SidebarNavProps) {
-  const location = useLocation()
+  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',
+    },
+  ];
 
   return (
-    <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 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>
-  )
+  );
 }
\ No newline at end of file