diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 705db843..19959c3b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -266,31 +266,26 @@ async function openDialog(
         agencyFileList.value = result;
       }
     }
-  } if(userStore.userOption.hqOpts.length !== 0) {
-    
+  }
+  if (userStore.userOption.hqOpts.length !== 0) {
     hqId.value = userStore.userOption.hqOpts[0].value;
   }
-  if(userStore.userOption.hqOpts.length === 0) {
+  if (userStore.userOption.hqOpts.length === 0) {
     console.log('no hq');
 
-  dialog({
-    color: 'warning',
-    icon: 'mdi-alert',
-    title: t('warning'),
-    actionText: t('agree'),
-    persistent: true,
-    message: t('headquartersNotEstablished'),
-    action: async () => {
+    dialog({
+      color: 'warning',
+      icon: 'mdi-alert',
+      title: t('warning'),
+      actionText: t('agree'),
+      persistent: true,
+      message: t('headquartersNotEstablished'),
+      action: async () => {},
+    });
 
-    },
-  });
-
-
-    return
-    
+    return;
   }
 
-
   if (action === 'FORM') {
     modal.value = true;
   } else if (action === 'INFO') {
@@ -710,12 +705,12 @@ watch(inputSearch, async () => await fetchUserList());
 
     <!-- main -->
     <div
-      class="col surface-1 rounded justify-between column no-wrap bordered"
+      class="col surface-2 rounded justify-between column no-wrap bordered"
       style="overflow: hidden"
     >
       <div class="column">
         <div
-          class="row surface-2 justify-between full-width items-center"
+          class="row surface-3 justify-between full-width items-center"
           style="z-index: 1"
         >
           <div class="row q-py-sm q-px-md justify-between full-width">
@@ -939,7 +934,7 @@ watch(inputSearch, async () => await fetchUserList());
         </div>
       </div>
 
-      <div class="col scroll column">
+      <div class="col scroll column q-pa-md">
         <div v-if="userData && userData.total > 0 && !inputSearch">
           <q-table
             flat
@@ -1114,8 +1109,8 @@ watch(inputSearch, async () => await fetchUserList());
                               openDialog('INFO', props.row.id);
                             }
                           "
-                             v-close-popup
-                                    clickable
+                          v-close-popup
+                          clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1133,8 +1128,8 @@ watch(inputSearch, async () => await fetchUserList());
 
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-edit`"
-                             v-close-popup
-                                    clickable
+                          v-close-popup
+                          clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1157,8 +1152,7 @@ watch(inputSearch, async () => await fetchUserList());
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-delete`"
                           dense
-                             v-close-popup
-                          
+                          v-close-popup
                           :clickable="props.row.status === 'CREATED'"
                           class="row"
                           :class="{
@@ -1655,10 +1649,6 @@ watch(inputSearch, async () => await fetchUserList());
   opacity: 0;
 }
 
-
-
-
-
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 7e8936c1..55c88116 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1610,13 +1610,13 @@ watch([inputSearch, currentStatus], async () => {
 
       <!-- main -->
       <div
-        class="surface-1 bordered rounded col column"
+        class="surface-2 bordered rounded col column"
         style="overflow: hidden"
       >
         <!-- tabs -->
         <div class="column">
           <div
-            class="row justify-between full-width items-center surface-2"
+            class="row justify-between full-width items-center surface-3"
             style="z-index: 1"
           >
             <div class="row q-py-sm q-px-md justify-between full-width">
@@ -1783,7 +1783,10 @@ watch([inputSearch, currentStatus], async () => {
           class="col"
         >
           <template v-slot:before>
-            <div class="column q-pa-md" style="gap: var(--size-1)">
+            <div
+              class="column q-pa-md surface-1 full-height"
+              style="gap: var(--size-1)"
+            >
               <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
                   v-close-popup
@@ -1839,10 +1842,7 @@ watch([inputSearch, currentStatus], async () => {
                   v-if="listCustomer.length !== 0"
                   class="col q-pa-md scroll"
                 >
-                  <div
-                    class="row full-width customer-row"
-                    style="min-height: 250px"
-                  >
+                  <div class="row full-width customer-row">
                     <q-table
                       flat
                       bordered