diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 15912ef4..b22673f9 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1224,7 +1224,7 @@ watch(
             </template>
 
             <template v-slot:item="props">
-              <div class="col-md-3 col-12">
+              <div class="col-md-3 col-sm-6 col-12">
                 <PersonCard
                   :data="{
                     code: props.row.code,
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 825849ed..067ef49e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1841,7 +1841,7 @@ watch(
         >
           <template v-slot:before>
             <div
-              class="column q-pa-md surface-1 full-height"
+              class="column q-pa-md surface-1 full-height full-width"
               style="gap: var(--size-1)"
             >
               <template v-if="selectorLabel === 'EMPLOYER'">
@@ -1851,12 +1851,12 @@ watch(
                   v-for="v in fieldCustomer"
                   :key="v"
                   dense
-                  class="no-padding flex items-center rounded"
+                  class="no-padding items-center rounded full-width"
                   active-class="employer-active"
                   :active="fieldSelectedCustomer.value === v"
                   @click="fieldSelectedCustomer = { label: v, value: v }"
                 >
-                  <span class="q-px-md">
+                  <span class="q-px-md ellipsis">
                     {{ $t(v) }}
                   </span>
                 </q-item>
@@ -1866,11 +1866,11 @@ watch(
                   active
                   dense
                   active-class="employer-active"
-                  class="no-padding flex items-center rounded"
+                  class="no-padding items-center rounded full-width"
                   v-close-popup
                   clickable
                 >
-                  <span class="q-px-md">
+                  <span class="q-px-md ellipsis">
                     {{ $t('totalEmployee') }}
                   </span>
                 </q-item>
@@ -2170,7 +2170,7 @@ watch(
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-12 col-md-3">
+                      <div class="col-12 col-md-3 col-sm-6">
                         <PersonCard
                           :field-selected="fieldSelected"
                           history
@@ -2638,7 +2638,7 @@ watch(
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-12 col-md-3">
+                      <div class="col-12 col-md-3 col-sm-6">
                         <PersonCard
                           :field-selected="fieldSelected"
                           history