diff --git a/src/features/admin/components/AdminSidebar.js b/src/features/admin/components/AdminSidebar.js
index 69e7f08..743f353 100644
--- a/src/features/admin/components/AdminSidebar.js
+++ b/src/features/admin/components/AdminSidebar.js
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import * as Icons from '@zen/core/shared/icons';
 import { ChevronDownIcon } from '@zen/core/shared/icons';
 
@@ -25,6 +25,7 @@ function resolveIcon(iconNameOrComponent) {
 
 const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledModules, navigationSections: serverNavigationSections }) => {
     const pathname = usePathname();
+    const router = useRouter();
     
     // State to manage collapsed sections (all open by default)
     const [collapsedSections, setCollapsedSections] = useState(new Set());
@@ -143,7 +144,12 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
         return (
             <div key={section.id}>
                 <button
-                    onClick={() => toggleSection(section.id)}
+                    onClick={() => {
+                        if (isCollapsed && section.items.length > 0) {
+                            router.push(section.items[0].href);
+                        }
+                        toggleSection(section.id);
+                    }}
                     className="cursor-pointer w-full flex items-center justify-between border-y border-neutral-200 dark:border-neutral-800/70 px-4 py-2.5 -mb-[1px] text-[13px] text-neutral-900 dark:text-white tracking-wide hover:text-neutral-500 dark:hover:text-neutral-300 transition-colorsduration-0"
                 >
                     <div className="flex items-center">