diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 57387cc1..6e0ea200 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -341,7 +341,8 @@ const formDataEmployeeOwner = ref<{
   subDistrictId: string;
   zipCode: string;
 }>();
-const formDataEmployee = ref<EmployeeCreate>({
+const formDataEmployee = ref<EmployeeCreate >({
+  code:'',
   image: null,
   customerBranchId: '',
   nrcNo: '',
@@ -723,6 +724,7 @@ function clearFormEmployee() {
   formDataEmployeeOwner.value = undefined;
 
   formDataEmployee.value = {
+    code:'',
     image: null,
     customerBranchId: '',
     nrcNo: '',
@@ -1221,7 +1223,10 @@ async function assignFormDataEmployee(id: string) {
       zipCode: foundBranch.zipCode,
     };
 
+    
+
     formDataEmployee.value = {
+      code: foundEmployee.code,
       image: null,
       customerBranchId: foundEmployee.customerBranchId,
       nrcNo: foundEmployee.nrcNo,
@@ -2169,86 +2174,6 @@ watch([inputSearch, currentStatus], async () => {
                         </div>
                       </template>
                     </q-table>
-
-                    <!-- <UsersDetailCardComponent
-                      v-for="i in listCustomer"
-                      :key="i.id"
-                      class="hover-card"
-                      :color="i.customerType === 'CORP' ? 'purple' : 'green'"
-                      :metadata="{
-                        id: i.id,
-                        disabled:
-                          i.status === 'ACTIVE' || i.status === 'CREATED',
-                      }"
-                      :badge="i.branch"
-                      :list="{
-                        id: i.id,
-                        imageUrl: i.imageUrl,
-                        type: i.customerType,
-                        name: i.customerName === '' ? '-' : i.customerName,
-                        code: i.code,
-                        status: i.status,
-
-                        detail: [
-                          {
-                            label: 'customerNameTh',
-                            value: i.customerName,
-                          },
-                          {
-                            label: 'customerNameEn',
-                            value: i.customerNameEN,
-                          },
-                        ],
-                      }"
-                      @enter-card="
-                        () => {
-                          currentCustomerName = i.customerName;
-                          customerType = i.customerType;
-                          currentCustomerUrlImage = i.imageUrl;
-                          currentCustomerId = i.id;
-
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-                          isMainPage = false;
-                        }
-                      "
-                      @update-card="
-                        () => {
-                          if (!listCustomer) return;
-
-                          customerType = i.customerType;
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-
-                          currentCustomerId = i.id;
-
-                          assignFormData(i.id);
-
-                          infoDrawerEdit = true;
-                          openDialogInputForm('INFO', i.id);
-                        }
-                      "
-                      @view-card="
-                        () => {
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-
-                          currentCustomerId = i.id;
-                          customerType = i.customerType;
-                          assignFormData(i.id);
-                          openDialogInputForm('INFO', i.id);
-                        }
-                      "
-                      @delete-card="deleteCustomerById(i.id)"
-                      @toggle-status="
-                        () => {
-                          toggleStatusCustomer(
-                            i.id,
-                            i.status === 'ACTIVE' ? true : false,
-                          );
-                        }
-                      "
-                    /> -->
                   </div>
                 </div>
 
@@ -2618,9 +2543,9 @@ watch([inputSearch, currentStatus], async () => {
                             code: props.row.code,
                             name:
                               $i18n.locale === 'en-US'
-                                ? `${props.row.firstName} ${props.row.lastName} `.trim()
-                                : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
-                            img: props.row.imageUrl,
+                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
+                                :  `${props.row.firstName} ${props.row.lastName} `.trim() ,
+                            img: props.row.profileImageUrl,
                             male: props.row.gender === 'male',
                             female: props.row.gender === 'female',
                             detail: [
@@ -3879,20 +3804,29 @@ watch([inputSearch, currentStatus], async () => {
       <template #person-card>
         <div class="q-ma-md">
           <AppBox class="surface-1" style="padding: 0">
-            <!-- <PersonCard -->
-            <!--   :can-edit-profile="infoDrawerEmployeeEdit" -->
-            <!--   no-hover -->
-            <!--   no-action -->
-            <!--   no-detail -->
+             <PersonCard 
+               :can-edit-profile="infoDrawerEmployeeEdit" 
+               no-hover 
+               no-action 
+               no-detail 
+              :data="
+              {
+                name:formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+                code:formDataEmployee.code ,
+                male: formDataEmployee.gender === 'male',
+                female: formDataEmployee.gender === 'female',
+                img: profileUrl || undefined,
 
-            <!--   :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" -->
-            <!--   :gridColumns="1" -->
-            <!--   @edit-profile=" -->
-            <!--     () => { -->
-            <!--       inputFile.click(); -->
-            <!--     } -->
-            <!--   " -->
-            <!-- /> -->
+              }
+              "
+               :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" 
+               :gridColumns="1" 
+               @edit-profile=" 
+                 () => { 
+                   inputFile.click(); 
+                 } 
+               " 
+             /> 
           </AppBox>
         </div>
       </template>