diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 45fdaa86..b3f9ff0a 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -533,7 +533,7 @@ watch(locale, () => {
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <q-splitter
             v-model="splitterModel"
-            :limits="[25, 80]"
+            :limits="[0, 100]"
             style="width: 100%"
           >
             <template v-slot:before>
@@ -1226,7 +1226,7 @@ watch(locale, () => {
                       </template>
 
                       <template v-slot:item="props">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6">
                           <BranchCard
                             :id="`branch-card-${props.row.name}`"
                             @click="
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 0faf0fb6..79d1fc0c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -616,12 +616,12 @@ watch(inputSearch, async () => await fetchUserList());
 
     <!-- main -->
     <div
-      class="col surface-1 rounded justify-between column no-wrap"
+      class="col surface-1 rounded justify-between column no-wrap bordered"
       style="overflow: hidden"
     >
       <div class="column">
         <div
-          class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+          class="row surface-2 justify-between full-width items-center"
           style="z-index: 1"
         >
           <div class="row q-py-sm q-px-md justify-between full-width">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d19cff6e..576d9e90 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1500,7 +1500,7 @@ watch([inputSearch, currentStatus], async () => {
         <!-- tabs -->
         <div class="column">
           <div
-            class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+            class="row justify-between full-width items-center surface-2"
             style="z-index: 1"
           >
             <div class="row q-py-sm q-px-md justify-between full-width">
@@ -1664,8 +1664,8 @@ watch([inputSearch, currentStatus], async () => {
           class="col"
         >
           <template v-slot:before>
-            <div class="column q-pa-md q-gutter-y-sm">
-              <div v-if="selectorLabel === 'EMPLOYER'">
+            <div class="column q-pa-md" style="gap: var(--size-1)">
+              <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
                   v-for="v in fieldCustomer"
                   :key="v"
@@ -1680,8 +1680,8 @@ watch([inputSearch, currentStatus], async () => {
                     {{ $t(v) }}
                   </span>
                 </q-item>
-              </div>
-              <div v-else>
+              </template>
+              <template v-else>
                 <q-item
                   active
                   dense
@@ -1693,12 +1693,12 @@ watch([inputSearch, currentStatus], async () => {
                     {{ $t('totalEmployee') }}
                   </span>
                 </q-item>
-              </div>
+              </template>
             </div>
           </template>
 
           <template v-slot:after>
-            <div class="column full-height surface-2">
+            <div class="column full-height">
               <!-- employer -->
               <template
                 v-if="