diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 74026b7c..d0baceec 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -342,7 +342,6 @@ function onCloseBranch() {
 }
 
 function clearForm() {
-  customerType.value = 'CORP';
   dialogInputForm.value = false;
   formData.value = {
     status: 'CREATED',
@@ -718,7 +717,10 @@ watch(fieldSelectedCustomer, async () => {
                     v.name === 'CORP'
                       ? statsCustomerType?.CORP ?? 0
                       : statsCustomerType?.PERS ?? 0,
-                  label: v.name,
+                  label:
+                    v.name === 'CORP'
+                      ? 'customerLegalEntity'
+                      : 'customerNaturalPerson',
                   color: v.name === 'CORP' ? 'purple' : 'green',
                 }))
               "
@@ -858,15 +860,22 @@ watch(fieldSelectedCustomer, async () => {
                 () => {
                   if (!listCustomer) return;
 
+                  const { branch, ...payload } = i;
+                  currentCustomer = payload;
+
                   currentCustomerId = i.id;
 
                   assignFormData(i);
+
                   infoDrawerEdit = true;
                   openDialogInputForm('INFO', i.id);
                 }
               "
               @view-card="
                 () => {
+                  const { branch, ...payload } = i;
+                  currentCustomer = payload;
+
                   currentCustomerId = i.id;
                   customerType = i.customerType;
                   assignFormData(i);
@@ -1549,26 +1558,20 @@ watch(fieldSelectedCustomer, async () => {
           <div class="q-ma-md">
             <AppBox class="surface-1" style="padding: 0">
               <UsersDetailCardComponent
+                v-if="!!currentCustomer"
                 no-bg
                 no-detail
                 no-hover
-                color="purple"
+                :color="
+                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+                "
                 :metadata="{ id: '1', disabled: false }"
                 :list="{
-                  id: '2',
-                  type: 'PERS',
-                  name: 'เจมส์ บอน',
+                  id: '1',
+                  type: currentCustomer.customerType,
+                  name: currentCustomer.customerName,
+                  imageUrl: currentCustomer.imageUrl,
                   code: 'HQ006',
-                  detail: [
-                    {
-                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                      value: 'บริษัทเฟรบเป้',
-                    },
-                    {
-                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                      value: 'บริษัทเฟรบเป้',
-                    },
-                  ],
                 }"
                 @enter-card="openDialogInputForm"
               />
@@ -1745,26 +1748,20 @@ watch(fieldSelectedCustomer, async () => {
           <div class="q-ma-md">
             <AppBox class="surface-1" style="padding: 0">
               <UsersDetailCardComponent
+                v-if="!!currentCustomer"
                 no-bg
                 no-detail
                 no-hover
-                color="purple"
+                :color="
+                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+                "
                 :metadata="{ id: '1', disabled: false }"
                 :list="{
-                  id: '2',
-                  type: 'PERS',
-                  name: 'เจมส์ บอน',
+                  id: '1',
+                  type: currentCustomer.customerType,
+                  name: currentCustomer.customerName,
+                  imageUrl: currentCustomer.imageUrl,
                   code: 'HQ006',
-                  detail: [
-                    {
-                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                      value: 'บริษัทเฟรบเป้',
-                    },
-                    {
-                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                      value: 'บริษัทเฟรบเป้',
-                    },
-                  ],
                 }"
                 @enter-card="openDialogInputForm"
               />