diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 452f961c..e5b4de3b 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1293,8 +1293,8 @@ watch(locale, () => {
                             "
                           >
                             <template v-slot:action>
-                              <q-menu class="bordered">
-                                <q-list v-close-popup>
+                              <q-menu  class="bordered" >
+                                <q-list>
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-view`"
                                     @click.stop="
@@ -1313,6 +1313,7 @@ watch(locale, () => {
                                         );
                                       }
                                     "
+                                    v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -1333,6 +1334,7 @@ watch(locale, () => {
 
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-edit`"
+                                     v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -1371,6 +1373,7 @@ watch(locale, () => {
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-delete`"
                                     dense
+                                    v-close-popup
                                     :clickable="props.row.status === 'CREATED'"
                                     class="row"
                                     :class="{
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 9de4b7e0..893f9366 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -942,7 +942,8 @@ watch(inputSearch, async () => await fetchUserList());
               })
             "
             :columns="columns"
-            card-container-class="q-col-gutter-md  full-width "
+            class="full-width"
+            card-container-class="q-gutter-md  "
             row-key="name"
             :rows-per-page-options="[0]"
             hide-pagination
@@ -1090,7 +1091,8 @@ watch(inputSearch, async () => await fetchUserList());
                               openDialog('INFO', props.row.id);
                             }
                           "
-                          clickable
+                             v-close-popup
+                                    clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1108,7 +1110,8 @@ watch(inputSearch, async () => await fetchUserList());
 
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-edit`"
-                          clickable
+                             v-close-popup
+                                    clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1131,6 +1134,8 @@ watch(inputSearch, async () => await fetchUserList());
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-delete`"
                           dense
+                             v-close-popup
+                          
                           :clickable="props.row.status === 'CREATED'"
                           class="row"
                           :class="{
@@ -1627,6 +1632,10 @@ 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 d9fbb506..dc49a079 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1773,9 +1773,11 @@ watch([inputSearch, currentStatus], async () => {
             <div class="column q-pa-md" style="gap: var(--size-1)">
               <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
+                   v-close-popup
+                                    clickable
                   v-for="v in fieldCustomer"
                   :key="v"
-                  clickable
+                
                   dense
                   class="no-padding flex items-center rounded"
                   active-class="employer-active"
@@ -1791,9 +1793,11 @@ watch([inputSearch, currentStatus], async () => {
                 <q-item
                   active
                   dense
-                  clickable
+                
                   active-class="employer-active"
                   class="no-padding flex items-center rounded"
+                     v-close-popup
+                                    clickable
                 >
                   <span class="q-px-md">
                     {{ $t('totalEmployee') }}
@@ -1984,6 +1988,7 @@ watch([inputSearch, currentStatus], async () => {
                                         );
                                       }
                                     "
+                                      v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2004,6 +2009,7 @@ watch([inputSearch, currentStatus], async () => {
 
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-edit`"
+                                       v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2044,6 +2050,8 @@ watch([inputSearch, currentStatus], async () => {
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-delete`"
                                     dense
+                                       v-close-popup
+                                   
                                     :clickable="props.row.status === 'CREATED'"
                                     class="row"
                                     :class="{
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 9100443f..3eb36657 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1621,6 +1621,8 @@ watch(inputSearchProductAndService, async () => {
                       <q-menu class="bordered">
                         <q-list v-close-popup>
                           <q-item
+                             v-close-popup
+                                    clickable
                             :id="`view-detail-btn-${props.row.name}-view`"
                             @click.stop="
                               () => {
@@ -1644,7 +1646,7 @@ watch(inputSearchProductAndService, async () => {
                                 }
                               }
                             "
-                            clickable
+                       
                             dense
                             class="row q-py-sm"
                             style="white-space: nowrap"
@@ -1661,8 +1663,10 @@ watch(inputSearchProductAndService, async () => {
                           </q-item>
 
                           <q-item
+
                             :id="`view-detail-btn-${props.row.name}-edit`"
-                            clickable
+                              v-close-popup
+                                    clickable
                             dense
                             class="row q-py-sm"
                             style="white-space: nowrap"
@@ -1697,6 +1701,8 @@ watch(inputSearchProductAndService, async () => {
                             </span>
                           </q-item>
                           <q-item
+                             v-close-popup
+                           
                             :id="`view-detail-btn-${props.row.name}-delete`"
                             dense
                             :clickable="props.row.status === 'CREATED'"
@@ -2047,6 +2053,7 @@ watch(inputSearchProductAndService, async () => {
               <q-menu class="bordered">
                 <q-list v-close-popup dense>
                   <q-item
+                  
                     clickable
                     class="flex items-center"
                     @click="
@@ -2454,6 +2461,7 @@ watch(inputSearchProductAndService, async () => {
                         <q-menu class="bordered">
                           <q-list v-close-popup>
                             <q-item
+
                               :id="`view-detail-btn-${props.row.name}-view`"
                               @click.stop="
                                 async () => {
@@ -2471,7 +2479,8 @@ watch(inputSearchProductAndService, async () => {
                                   await fetchListOfOptionBranch();
                                 }
                               "
-                              clickable
+                               v-close-popup
+                                    clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2489,7 +2498,8 @@ watch(inputSearchProductAndService, async () => {
 
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-edit`"
-                              clickable
+                               v-close-popup
+                                    clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2525,6 +2535,8 @@ watch(inputSearchProductAndService, async () => {
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-delete`"
                               dense
+                                 v-close-popup
+                                   
                               :clickable="props.row.status === 'CREATED'"
                               class="row"
                               :class="{