diff --git a/components/layouts/sidebar.tsx b/components/layouts/sidebar.tsx
index e68ec80..2186ec1 100644
--- a/components/layouts/sidebar.tsx
+++ b/components/layouts/sidebar.tsx
@@ -11,6 +11,7 @@ import IconMenuComponents from '@/components/icon/menu/icon-menu-components';
 import { usePathname } from 'next/navigation';
 import { getTranslation } from '@/i18n';
 import IconCaretDown from '../icon/icon-caret-down';
+import IconMinus from '../icon/icon-minus';
 
 const Sidebar = () => {
     const dispatch = useDispatch();
@@ -82,6 +83,54 @@ const Sidebar = () => {
                     </div>
                     <PerfectScrollbar className="relative h-[calc(100vh-80px)]">
                         <ul className="relative space-y-0.5 p-4 py-0 font-semibold">
+                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
+                                <IconMinus className="hidden h-5 w-4 flex-none" />
+                                <span>Customer</span>
+                            </h2>
+                            <li className="menu nav-item">
+                                <Link href="#" className="nav-link group">
+                                    <div className="flex items-center">
+                                        <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Sites</span>
+                                    </div>
+                                </Link>
+                            </li>
+                            <li className="menu nav-item">
+                                <Link href="#" className="nav-link group">
+                                    <div className="flex items-center">
+                                        <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Inverters</span>
+                                    </div>
+                                </Link>
+                            </li>
+                            <li className="menu nav-item">
+                                <button type="button" className={`nav-link group w-full`} onClick={() => toggleMenu('setting')}>
+                                    <div className="flex items-center">
+                                        <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Setting</span>
+                                    </div>
+
+                                    <div className={currentMenu !== 'setting' ? '-rotate-90 rtl:rotate-90' : ''}>
+                                        <IconCaretDown />
+                                    </div>
+                                </button>
+
+                                <AnimateHeight duration={300} height={currentMenu === 'setting' ? 'auto' : 0}>
+                                    <ul className="sub-menu text-gray-500">
+                                        <li>
+                                            <Link href="#">Profile</Link>
+                                        </li>
+                                    </ul>
+                                </AnimateHeight>
+                            </li>
+
+
+
+
+                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
+                                <IconMinus className="hidden h-5 w-4 flex-none" />
+                                <span>Admin</span>
+                            </h2>
                             <li className="menu nav-item">
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
@@ -161,6 +210,8 @@ const Sidebar = () => {
                                     </ul>
                                 </AnimateHeight>
                             </li>
+
+
                         </ul>
                     </PerfectScrollbar>
                 </div>