diff --git a/components/layout/nav-item.tsx b/components/layout/nav-item.tsx
new file mode 100644
index 0000000..07b48b7
--- /dev/null
+++ b/components/layout/nav-item.tsx
@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+interface NavItemProps {
+  href: string;
+  icon: React.ElementType;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const NavItem: React.FC<NavItemProps> = ({
+  href,
+  icon: Icon,
+  children,
+  onClick,
+}) => (
+  <Link
+    href={href}
+    onClick={onClick}
+    className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
+  >
+    <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
+    {children}
+  </Link>
+);
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 042856d..5ac09fc 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { fetchData } from '@/lib/data-service';
-
+import { fetchData } from "@/lib/data-service";
 import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -16,25 +15,39 @@ import {
   Menu,
 } from "lucide-react";
 
-interface NavItemProps {
+import { NavItem } from "./nav-item";
+
+interface SidebarItem {
+  name: string;
   href: string;
   icon: React.ElementType;
-  children: React.ReactNode;
-  onClick?: () => void;
 }
 
-const NavItem = ({ href, icon: Icon, children, onClick }: NavItemProps) => (
-  <Link
-    href={href}
-    onClick={onClick}
-    className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
-  >
-    <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
-    {children}
-  </Link>
-);
+interface SidebarSection {
+  title: string;
+  items: SidebarItem[];
+}
 
-function Sidebar() {
+const sidebarConfig: SidebarSection[] = [
+  {
+    title: "Overview",
+    items: [
+      { name: "Dashboard", href: "/dashboard", icon: Home },
+      { name: "Orders", href: "/dashboard/orders", icon: Package },
+    ],
+  },
+  {
+    title: "Management",
+    items: [
+      { name: "Products", href: "/dashboard/products", icon: Box },
+      { name: "Shipping", href: "/dashboard/shipping", icon: Truck },
+      { name: "Storefront", href: "/dashboard/storefront", icon: Settings },
+    ],
+  },
+];
+
+
+const Sidebar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const router = useRouter();
 
@@ -49,7 +62,8 @@ function Sidebar() {
 
       if (!res.ok) throw new Error("Logout failed");
 
-      document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
+      document.cookie =
+        "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
       router.push("/login");
     } catch (error) {
       console.error("Logout error:", error);
@@ -58,14 +72,7 @@ function Sidebar() {
 
   return (
     <>
-      <button
-        type="button"
-        className="lg:hidden fixed top-4 left-4 z-[70] p-2 rounded-lg bg-white dark:bg-[#0F0F12] shadow-md"
-        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-      >
-        <Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
-      </button>
-
+      {/* Sidebar Navigation */}
       <nav
         className={`
           fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
@@ -74,6 +81,7 @@ function Sidebar() {
         `}
       >
         <div className="h-full flex flex-col">
+          {/* Brand Logo */}
           <Link
             href="/dashboard"
             className="h-16 px-6 flex items-center border-b border-gray-200 dark:border-[#1F1F23]"
@@ -86,39 +94,30 @@ function Sidebar() {
             </div>
           </Link>
 
+          {/* Sidebar Navigation Items */}
           <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
-            <div>
-              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                Overview
+            {sidebarConfig.map((section, index) => (
+              <div key={index}>
+                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                  {section.title}
+                </div>
+                <div className="space-y-1">
+                  {section.items.map((item, idx) => (
+                    <NavItem
+                      key={idx}
+                      href={item.href}
+                      icon={item.icon}
+                      onClick={() => setIsMobileMenuOpen(false)}
+                    >
+                      {item.name}
+                    </NavItem>
+                  ))}
+                </div>
               </div>
-              <div className="space-y-1">
-                <NavItem href="/dashboard" icon={Home} onClick={() => setIsMobileMenuOpen(false)}>
-                  Dashboard
-                </NavItem>
-                <NavItem href="/dashboard/orders" icon={Package} onClick={() => setIsMobileMenuOpen(false)}>
-                  Orders
-                </NavItem>
-              </div>
-            </div>
-
-            <div>
-              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                Management
-              </div>
-              <div className="space-y-1">
-                <NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
-                  Products
-                </NavItem>
-                <NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
-                  Shipping
-                </NavItem>
-                <NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
-                  Storefront
-                </NavItem>
-              </div>
-            </div>
+            ))}
           </div>
 
+          {/* Logout Button */}
           <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
             <button
               onClick={handleLogout}
@@ -131,6 +130,7 @@ function Sidebar() {
         </div>
       </nav>
 
+      {/* Mobile Menu Overlay */}
       {isMobileMenuOpen && (
         <div
           className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
@@ -139,6 +139,6 @@ function Sidebar() {
       )}
     </>
   );
-}
+};
 
 export default Sidebar;