diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index 9604d04a..6aa9fdaf 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -136,10 +136,10 @@ watch([inputSearch, currentStatus], async () => {
 
 <template>
   <div
-    class="row justify-between bordered-b surface-3 full-width no-wrap"
+    class="row justify-between bordered-b surface-3 full-width"
     style="z-index: 1"
   >
-    <div class="row items-center col-12 col-sm">
+    <div class="row items-center col-12 col-md">
       <q-btn
         round
         icon="mdi-arrow-left"
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index ac6a4317..146adef7 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -20,6 +20,7 @@ defineProps<{
   noBg?: boolean;
   history?: boolean;
   prefixId: string;
+  separateEnter?: boolean;
 }>();
 
 defineEmits<{
@@ -28,6 +29,7 @@ defineEmits<{
   (e: 'deleteCard'): void;
   (e: 'updateCard', action: 'FORM' | 'INFO', isEdit?: boolean): void;
   (e: 'enterCard', action: 'FORM' | 'INFO'): void;
+  (e: 'viewCard', action: 'FORM' | 'INFO'): void;
   (e: 'toggleStatus', status: boolean): void;
 }>();
 </script>
@@ -89,7 +91,12 @@ defineEmits<{
                 dense
                 class="row q-py-sm"
                 style="white-space: nowrap"
-                @click.stop="$emit('enterCard', 'INFO')"
+                v-close-popup
+                @click.stop="
+                  separateEnter
+                    ? $emit('viewCard', 'INFO')
+                    : $emit('enterCard', 'INFO')
+                "
               >
                 <q-icon
                   name="mdi-eye-outline"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 85c60e10..68137766 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2290,6 +2290,7 @@ watch(isMainPage, () => {
                         <PersonCard
                           :id="`card-${props.row.customerName}`"
                           :field-selected="fieldSelected"
+                          separateEnter
                           history
                           :prefix-id="
                             props.row.customerNameEN ?? props.rowIndex
@@ -2360,6 +2361,18 @@ watch(isMainPage, () => {
                               isMainPage = false;
                             }
                           "
+                          @view-card="
+                            () => {
+                              if (!listCustomer) return;
+                              customerType = props.row.customerType;
+                              const { branch, ...payload } = props.row;
+                              currentCustomer = payload;
+                              currentCustomerId = props.row.id;
+                              assignFormData(props.row.id);
+                              infoDrawerEdit = true;
+                              openDialogInputForm('INFO', props.row.id);
+                            }
+                          "
                           @delete-card="deleteCustomerById(props.row.id)"
                           @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)