diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 889bb301..9dbe28c4 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -10,18 +10,107 @@ defineProps<{
   mini?: boolean;
 }>();
 
+const role = ref();
+
 onMounted(async () => {
   const uid = getUserId();
-  const role = getRole();
+  role.value = getRole();
 
   if (!uid) return;
 
-  if (role?.includes('system')) {
+  if (role.value.includes('system')) {
     const result = await userBranch.fetchListOptionBranch();
     if (result && result.total > 0) currentMyBranch.value = result.result[0];
   }
   const result = await userBranch.fetchListMyBranch(uid);
   if (result && result.total > 0) currentMyBranch.value = result.result[0];
+
+  labelMenu.value = [
+    {
+      label: 'drawerDashboard',
+      icon: 'isax-element-35',
+      route: '',
+      isax: true,
+      disabled: true,
+    },
+    {
+      label: 'drawerBranchManagement',
+      icon: 'mdi-chart-donut',
+      route: '/branch-management',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
+    },
+    {
+      label: 'drawerPersonnelManagement',
+      icon: 'fa6-solid:building-user',
+      route: '/personnel-management',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
+    },
+    {
+      label: 'drawerCustomerManagement',
+      icon: 'isax-frame5',
+      route: '/customer-management',
+      isax: true,
+    },
+    {
+      label: 'drawerProductsAndServices',
+      icon: 'heroicons-truck-solid',
+      route: '/product-service',
+    },
+    {
+      label: 'menu.dms',
+      icon: 'mdi-folder-file',
+      route: '/document-management',
+    },
+    {
+      label: 'drawerQuotation',
+      icon: 'mdi-file-document',
+      route: '',
+      disabled: true,
+    },
+    {
+      label: 'drawerRequestList',
+      icon: 'isax-device-message5',
+      route: '',
+      disabled: true,
+      isax: true,
+    },
+    {
+      label: 'drawerWorkOrder',
+      icon: 'isax-receipt-2-15',
+      route: '',
+      disabled: true,
+      isax: true,
+    },
+    {
+      label: 'drawerInvoice',
+      icon: 'material-symbols:box',
+      route: '',
+      disabled: true,
+    },
+    {
+      label: 'drawerAccountingLedger',
+      icon: 'isax-dollar-circle4',
+      route: '',
+      isax: true,
+      disabled: true,
+    },
+    {
+      label: 'drawerReport',
+      icon: 'mdi-file-document',
+      route: '',
+      disabled: true,
+    },
+  ];
 });
 
 const router = useRouter();
@@ -42,80 +131,7 @@ const labelMenu = ref<
     disabled?: boolean;
     isax?: boolean;
   }[]
->([
-  {
-    label: 'drawerDashboard',
-    icon: 'isax-element-35',
-    route: '',
-    isax: true,
-    disabled: true,
-  },
-  {
-    label: 'drawerBranchManagement',
-    icon: 'mdi-chart-donut',
-    route: '/branch-management',
-  },
-  {
-    label: 'drawerPersonnelManagement',
-    icon: 'fa6-solid:building-user',
-    route: '/personnel-management',
-  },
-  {
-    label: 'drawerCustomerManagement',
-    icon: 'isax-frame5',
-    route: '/customer-management',
-    isax: true,
-  },
-  {
-    label: 'drawerProductsAndServices',
-    icon: 'heroicons-truck-solid',
-    route: '/product-service',
-  },
-  {
-    label: 'menu.dms',
-    icon: 'mdi-folder-file',
-    route: '/document-management',
-  },
-  {
-    label: 'drawerQuotation',
-    icon: 'mdi-file-document',
-    route: '',
-    disabled: true,
-  },
-  {
-    label: 'drawerRequestList',
-    icon: 'isax-device-message5',
-    route: '',
-    disabled: true,
-    isax: true,
-  },
-  {
-    label: 'drawerWorkOrder',
-    icon: 'isax-receipt-2-15',
-    route: '',
-    disabled: true,
-    isax: true,
-  },
-  {
-    label: 'drawerInvoice',
-    icon: 'material-symbols:box',
-    route: '',
-    disabled: true,
-  },
-  {
-    label: 'drawerAccountingLedger',
-    icon: 'isax-dollar-circle4',
-    route: '',
-    isax: true,
-    disabled: true,
-  },
-  {
-    label: 'drawerReport',
-    icon: 'mdi-file-document',
-    route: '',
-    disabled: true,
-  },
-]);
+>([]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
   default: true,
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 645e6676..b80bbdba 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -1,104 +1,121 @@
 <script setup lang="ts">
 import MenuItem from 'components/00_home/MenuItem.vue';
 import useUtilsStore from 'stores/utils';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import { getRole } from 'src/services/keycloak';
 
 const utilsStore = useUtilsStore();
-const menu = [
-  {
-    value: 'branch-management',
-    icon: 'mdi-chart-donut',
-    color: 'green',
-    title: 'mainBranchTitle',
-    caption: 'mainBranchCaption',
-  },
-  {
-    value: 'personnel-management',
-    icon: 'fa6-solid:building-user',
-    color: 'cyan',
-    title: 'mainPersonnelTitle',
-    caption: 'mainPersonnelCaption',
-  },
-  {
-    value: 'customer-management',
-    icon: 'isax-frame5',
-    color: 'cyan',
-    title: 'mainCustomerTitle',
-    caption: 'mainCustomerCaption',
-    isax: true,
-  },
-  {
-    value: 'product-service',
-    icon: 'heroicons-truck-solid',
-    color: 'orange',
-    title: 'mainProductTitle',
-    caption: 'mainProductCaption',
-  },
-  {
-    value: '',
-    icon: 'mdi-file-document',
-    color: 'violet',
-    title: 'mainQuotationTitle',
-    caption: 'mainQuotationCaption',
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'isax-device-message5',
-    color: 'purple',
-    title: 'mainRequestTitle',
-    caption: 'mainRequestCaption',
-    isax: true,
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'isax-receipt-2-15',
-    color: 'red',
-    title: 'mainOrderTitle',
-    caption: 'mainOrderCaption',
-    isax: true,
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'material-symbols:box',
-    color: 'camo',
-    title: 'mainReceiptTitle',
-    caption: 'mainReceiptCaption',
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'isax-dollar-circle4',
-    color: 'lime',
-    title: 'mainFinanceTitle',
-    caption: 'mainFinanceCaption',
-    isax: true,
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'isax-element-35',
-    color: 'cyan',
-    title: 'mainDashboardTitle',
-    caption: 'mainDashboardCaption',
-    isax: true,
-    disabled: true,
-  },
-  {
-    value: '',
-    icon: 'mdi-file-document',
-    color: 'indigo',
-    title: 'mainReportTitle',
-    caption: 'mainReportCaption',
-    disabled: true,
-  },
-] satisfies InstanceType<typeof MenuItem>['$props']['list'];
+const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
+const role = ref();
 
 onMounted(() => {
   utilsStore.currentTitle.title = '';
   utilsStore.currentTitle.path = [{ text: '' }];
+
+  role.value = getRole();
+  menu.value = [
+    {
+      value: 'branch-management',
+      icon: 'mdi-chart-donut',
+      color: 'green',
+      title: 'mainBranchTitle',
+      caption: 'mainBranchCaption',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
+    },
+    {
+      value: 'personnel-management',
+      icon: 'fa6-solid:building-user',
+      color: 'cyan',
+      title: 'mainPersonnelTitle',
+      caption: 'mainPersonnelCaption',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
+    },
+    {
+      value: 'customer-management',
+      icon: 'isax-frame5',
+      color: 'cyan',
+      title: 'mainCustomerTitle',
+      caption: 'mainCustomerCaption',
+      isax: true,
+    },
+    {
+      value: 'product-service',
+      icon: 'heroicons-truck-solid',
+      color: 'orange',
+      title: 'mainProductTitle',
+      caption: 'mainProductCaption',
+    },
+    {
+      value: '',
+      icon: 'mdi-file-document',
+      color: 'violet',
+      title: 'mainQuotationTitle',
+      caption: 'mainQuotationCaption',
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'isax-device-message5',
+      color: 'purple',
+      title: 'mainRequestTitle',
+      caption: 'mainRequestCaption',
+      isax: true,
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'isax-receipt-2-15',
+      color: 'red',
+      title: 'mainOrderTitle',
+      caption: 'mainOrderCaption',
+      isax: true,
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'material-symbols:box',
+      color: 'camo',
+      title: 'mainReceiptTitle',
+      caption: 'mainReceiptCaption',
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'isax-dollar-circle4',
+      color: 'lime',
+      title: 'mainFinanceTitle',
+      caption: 'mainFinanceCaption',
+      isax: true,
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'isax-element-35',
+      color: 'cyan',
+      title: 'mainDashboardTitle',
+      caption: 'mainDashboardCaption',
+      isax: true,
+      disabled: true,
+    },
+    {
+      value: '',
+      icon: 'mdi-file-document',
+      color: 'indigo',
+      title: 'mainReportTitle',
+      caption: 'mainReportCaption',
+      disabled: true,
+    },
+  ];
 });
 </script>