diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index ee2f8cb..99109ec 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -15,13 +15,14 @@ import DiscountSubMenu from './components/DiscountSubMenu'
 import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
 import { usePermissions } from '@/hooks/usePermissions'
 import { PermissionEnum } from '@/pages/roles/enum/Enum'
+import Skeleton from 'react-loading-skeleton'
 
 const SideBar: FC = () => {
 
     const { t } = useTranslation('global')
     const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
     const location = useLocation()
-    const { checkPermission } = usePermissions()
+    const { checkPermission, isLoading } = usePermissions()
 
     const isActive = (name: string) => {
         return location.pathname.includes(name)
@@ -72,9 +73,26 @@ const SideBar: FC = () => {
                         {t('sidebar.menu')}
                     </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
-                        {
-                            checkPermission(PermissionEnum.MANAGE_REPORTS) && (
+                    {isLoading ? (
+                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
+                            {Array.from({ length: 8 }).map((_, index) => (
+                                <div key={index} className={clx(
+                                    'flex gap-9',
+                                    hasSubMenu && 'flex-col items-center'
+                                )}>
+                                    <div className={clx(
+                                        'flex gap-3 items-center',
+                                        hasSubMenu && 'flex-col'
+                                    )}>
+                                        <Skeleton circle width={20} height={20} />
+                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className='text-xs text-[#8C90A3]'>
+                            {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
                                 <SideBarItem
                                     icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.mainpage')}
@@ -82,142 +100,142 @@ const SideBar: FC = () => {
                                     link={Pages.dashboard}
                                     activeName=''
                                 />
-                            )
-                        }
+                            )}
 
-                        {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
-                            <SideBarItem
-                                icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.orders')}
-                                isActive={isActive('orders')}
-                                link={Pages.orders.list}
-                                name='orders'
-                                activeName='orders'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_FOODS) && (
-                            <SideBarItem
-                                icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.foods')}
-                                isActive={isActive('foods')}
-                                link={Pages.foods.list}
-                                activeName='foods'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
-                            <SideBarItem
-                                icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.schedule')}
-                                isActive={isActive('schedule')}
-                                link={Pages.schedule.list}
-                                name='schedule'
-                                activeName='schedule'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
-                            <SideBarItem
-                                icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.payment_methods')}
-                                isActive={isActive('payment_methods')}
-                                link={Pages.payment_methods.list}
-                                name='payment_methods'
-                                activeName='payment_methods'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_USERS) && (
-                            <SideBarItem
-                                icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.customers')}
-                                isActive={isActive('customers')}
-                                link={Pages.customers.list}
-                                name='customers'
-                                activeName='customers'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
-                            <SideBarItem
-                                icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.reviews')}
-                                isActive={isActive('reviews')}
-                                link={Pages.reviews.list}
-                                name='reviews'
-                                activeName='reviews'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_PAGER) && (
-                            <SideBarItem
-                                icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.pagers')}
-                                isActive={isActive('pagers')}
-                                link={Pages.pagers.list}
-                                name='pagers'
-                                activeName='pagers'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_ADMINS) && (
-                            <SideBarItem
-                                icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.admins')}
-                                isActive={isActive('admins')}
-                                link={Pages.admins.list}
-                                name='admins'
-                                activeName='admins'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
-                            <SideBarItem
-                                icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.shipment_methods')}
-                                isActive={isActive('shipment_methods')}
-                                link={Pages.shipment_methods.list}
-                                name='shipment_methods'
-                                activeName='shipment_methods'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_COUPONS) && (
-                            <SideBarItem
-                                icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.discount')}
-                                isActive={isActive('discounts')}
-                                link={Pages.coupons.list}
-                                name='discounts'
-                                activeName='discounts'
-                            />
-                        )}
-
-                        {checkPermission(PermissionEnum.MANAGE_ROLES) && (
-                            <SideBarItem
-                                icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.roles')}
-                                isActive={isActive('roles')}
-                                link={Pages.roles.list}
-                                name='roles'
-                                activeName='roles'
-                            />
-                        )}
-
-                        {
-                            checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
+                            {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
                                 <SideBarItem
-                                    icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                    title={t('sidebar.notifications')}
-                                    isActive={isActive('notifications')}
-                                    link={Pages.notifications.list}
-                                    name='notifications'
-                                    activeName='notifications'
+                                    icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.orders')}
+                                    isActive={isActive('orders')}
+                                    link={Pages.orders.list}
+                                    name='orders'
+                                    activeName='orders'
                                 />
-                            )
-                        }
-                    </div>
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_FOODS) && (
+                                <SideBarItem
+                                    icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.foods')}
+                                    isActive={isActive('foods')}
+                                    link={Pages.foods.list}
+                                    activeName='foods'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
+                                <SideBarItem
+                                    icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.schedule')}
+                                    isActive={isActive('schedule')}
+                                    link={Pages.schedule.list}
+                                    name='schedule'
+                                    activeName='schedule'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
+                                <SideBarItem
+                                    icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.payment_methods')}
+                                    isActive={isActive('payment_methods')}
+                                    link={Pages.payment_methods.list}
+                                    name='payment_methods'
+                                    activeName='payment_methods'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_USERS) && (
+                                <SideBarItem
+                                    icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.customers')}
+                                    isActive={isActive('customers')}
+                                    link={Pages.customers.list}
+                                    name='customers'
+                                    activeName='customers'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
+                                <SideBarItem
+                                    icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.reviews')}
+                                    isActive={isActive('reviews')}
+                                    link={Pages.reviews.list}
+                                    name='reviews'
+                                    activeName='reviews'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_PAGER) && (
+                                <SideBarItem
+                                    icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.pagers')}
+                                    isActive={isActive('pagers')}
+                                    link={Pages.pagers.list}
+                                    name='pagers'
+                                    activeName='pagers'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_ADMINS) && (
+                                <SideBarItem
+                                    icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.admins')}
+                                    isActive={isActive('admins')}
+                                    link={Pages.admins.list}
+                                    name='admins'
+                                    activeName='admins'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
+                                <SideBarItem
+                                    icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.shipment_methods')}
+                                    isActive={isActive('shipment_methods')}
+                                    link={Pages.shipment_methods.list}
+                                    name='shipment_methods'
+                                    activeName='shipment_methods'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_COUPONS) && (
+                                <SideBarItem
+                                    icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.discount')}
+                                    isActive={isActive('discounts')}
+                                    link={Pages.coupons.list}
+                                    name='discounts'
+                                    activeName='discounts'
+                                />
+                            )}
+
+                            {checkPermission(PermissionEnum.MANAGE_ROLES) && (
+                                <SideBarItem
+                                    icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.roles')}
+                                    isActive={isActive('roles')}
+                                    link={Pages.roles.list}
+                                    name='roles'
+                                    activeName='roles'
+                                />
+                            )}
+
+                            {
+                                checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
+                                    <SideBarItem
+                                        icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.notifications')}
+                                        isActive={isActive('notifications')}
+                                        link={Pages.notifications.list}
+                                        name='notifications'
+                                        activeName='notifications'
+                                    />
+                                )
+                            }
+                        </div>
+                    )}
 
                     <div className={clx(
                         'mt-10 px-12 text-header text-sm font-normal',
@@ -226,59 +244,107 @@ const SideBar: FC = () => {
                         {t('sidebar.other')}
                     </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
-                        {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
-                            <SideBarItem
-                                icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.statistics')}
-                                isActive={isActive('statistics')}
-                                link={Pages.statistics.list}
-                                activeName='statistics'
-                            />
-                        )} */}
-                        {/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
-                            <SideBarItem
-                                icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.comments')}
-                                isActive={isActive('comments')}
-                                link={Pages.comments.list}
-                                activeName='comments'
-                            />
-                        )} */}
-
-                        {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
-                            <SideBarItem
-                                icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.reports')}
-                                isActive={isActive('reports')}
-                                link={Pages.reports.list}
-                                activeName='reports'
-                            />
-                        )}
-                    </div>
-
-                    <div className='flex-1 flex flex-col justify-end mt-14'>
+                    {isLoading ? (
+                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
+                            <div className={clx(
+                                'flex gap-9',
+                                hasSubMenu && 'flex-col items-center'
+                            )}>
+                                <div className={clx(
+                                    'flex gap-3 items-center',
+                                    hasSubMenu && 'flex-col'
+                                )}>
+                                    <Skeleton circle width={20} height={20} />
+                                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
                         <div className='text-xs text-[#8C90A3]'>
-                            {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
+                            {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
                                 <SideBarItem
-                                    icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                    title={t('sidebar.setting')}
-                                    isActive={isActive('setting')}
-                                    link={Pages.setting}
-                                    activeName='settings'
+                                    icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.statistics')}
+                                    isActive={isActive('statistics')}
+                                    link={Pages.statistics.list}
+                                    activeName='statistics'
+                                />
+                            )} */}
+                            {/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
+                                <SideBarItem
+                                    icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.comments')}
+                                    isActive={isActive('comments')}
+                                    link={Pages.comments.list}
+                                    activeName='comments'
+                                />
+                            )} */}
+
+                            {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
+                                <SideBarItem
+                                    icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                    title={t('sidebar.reports')}
+                                    isActive={isActive('reports')}
+                                    link={Pages.reports.list}
+                                    activeName='reports'
                                 />
                             )}
                         </div>
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.logout')}
-                                isActive={isActive('logout')}
-                                link={`#`}
-                                isLogout
-                                activeName=''
-                            />
-                        </div>
+                    )}
+
+                    <div className='flex-1 flex flex-col justify-end mt-14'>
+                        {isLoading ? (
+                            <div className='text-xs text-[#8C90A3] px-12 space-y-4'>
+                                <div className={clx(
+                                    'flex gap-9',
+                                    hasSubMenu && 'flex-col items-center'
+                                )}>
+                                    <div className={clx(
+                                        'flex gap-3 items-center',
+                                        hasSubMenu && 'flex-col'
+                                    )}>
+                                        <Skeleton circle width={20} height={20} />
+                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                                    </div>
+                                </div>
+                                <div className={clx(
+                                    'flex gap-9',
+                                    hasSubMenu && 'flex-col items-center'
+                                )}>
+                                    <div className={clx(
+                                        'flex gap-3 items-center',
+                                        hasSubMenu && 'flex-col'
+                                    )}>
+                                        <Skeleton circle width={20} height={20} />
+                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                <div className='text-xs text-[#8C90A3]'>
+                                    {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
+                                        <SideBarItem
+                                            icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                            title={t('sidebar.setting')}
+                                            isActive={isActive('setting')}
+                                            link={Pages.setting}
+                                            activeName='settings'
+                                        />
+                                    )}
+                                </div>
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.logout')}
+                                        isActive={isActive('logout')}
+                                        link={`#`}
+                                        isLogout
+                                        activeName=''
+                                    />
+                                </div>
+                            </>
+                        )}
                     </div>
                 </div>
             </div>