diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 36e7b9c0..3021c1ce 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -12,7 +12,12 @@ import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import { dialog, notify, resetScrollBar } from 'stores/utils';
+import {
+  dialog,
+  notify,
+  resetScrollBar,
+  capitalizeFirstLetter,
+} from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
@@ -21,6 +26,7 @@ import {
   Customer,
   CustomerBranch,
   CustomerBranchCreate,
+  CustomerType,
 } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
 import {
@@ -627,7 +633,8 @@ function customerFormUndo(close = true) {
 async function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
-  customerFormData.value.customerType = customerType;
+  customerFormData.value.customerType =
+    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
 }
 
 function createEmployeeForm() {
@@ -705,7 +712,7 @@ watch(
     const isEdit =
       employeeFormState.value.drawerModal &&
       employeeFormState.value.isEmployeeEdit;
-    let currentFormDate = toISOStringWithTimezone(new Date(v));
+    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
     let currentDate: string = '';
 
     if (isEdit && employeeFormState.value.currentEmployee) {
@@ -1268,7 +1275,11 @@ const emptyCreateDialog = ref(false);
                                 {{
                                   props.row.customerType === 'CORP'
                                     ? props.row.branch[0]?.registerNameEN || '-'
-                                    : props.row.branch[0]?.firstNameEN +
+                                    : capitalizeFirstLetter(
+                                        props.row.branch[0].namePrefix,
+                                      ) +
+                                        ' ' +
+                                        props.row.branch[0]?.firstNameEN +
                                         ' ' +
                                         props.row.branch[0]?.lastNameEN || '-'
                                 }}
@@ -1513,7 +1524,7 @@ const emptyCreateDialog = ref(false);
                         <BranchCard
                           i18n-key="customer.table"
                           class="surface-1 col"
-                          :virtual-branch="props.row.virtual"
+                          :virtual-branch="false"
                           :id="`branch-card-${props.row.name}`"
                           :class="{
                             'cursor-pointer': props.row._count.branch !== 0,
@@ -2269,7 +2280,6 @@ const emptyCreateDialog = ref(false);
                   v-model:customer-branch="customerFormData.customerBranch[idx]"
                   :onCreate="customerFormState.dialogType === 'create'"
                   :customer-type="customerFormData.customerType"
-                  :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
                   :readonly="customerFormState.branchIndex !== idx"
                   :action-disabled="
                     !customerFormState.readonly ||
@@ -3306,6 +3316,7 @@ const emptyCreateDialog = ref(false);
 
               <FormEmployeeVisa
                 v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                :key="index"
                 prefix-id="drawer-info-employee"
                 id="form-visa"
                 dense
@@ -3661,25 +3672,24 @@ const emptyCreateDialog = ref(false);
         {{ $t('general.image') }}
         {{
           $i18n.locale === 'eng'
-            ? `${customerFormData.firstNameEN} ${customerFormData.lastNameEN}`
-            : `${customerFormData.firstName} ${customerFormData.lastName}`
+            ? customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerNameEN || '-'
+              : customerFormData?.customerBranch?.[0].firstNameEN +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastNameEN || '-'
+            : customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerName || '-'
+              : customerFormData?.customerBranch?.[0].firstName +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastName || '-'
         }}
       </span>
     </template>
     <template #error>
       <div class="full-height full-width" style="background: white">
-        <div
-          class="full-height full-width flex justify-center items-center"
-          :style="`background: ${
-            customerFormData.gender
-              ? customerFormData.customerType === 'CORP'
-                ? '#5f1775'
-                : '#347454'
-              : `hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`
-          }`"
-        >
+        <div class="full-height full-width flex justify-center items-center">
           <q-img
-            :src="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.gender : 'male'}.png`"
+            :src="`/images/customer-${customerFormData.customerType}-avartar-male.png`"
             fit="contain"
             style="height: 100%"
           >
@@ -3754,7 +3764,7 @@ const emptyCreateDialog = ref(false);
           imageList ? (imageList.selectedImage = v) : '';
           employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
           employeeFormStore.resetFormDataEmployee();
-          await employeeFormStore.submitPersonal();
+          await employeeFormStore.submitPersonal(onCreateImageList);
           employeeFormState.imageDialog = false;
           refreshImageState = false;
           employeeFormState.isEmployeeEdit = false;
@@ -3797,9 +3807,10 @@ const emptyCreateDialog = ref(false);
     hide-action
     v-model:drawer-open="customerFormState.drawerModal"
     :title="
-      customerFormData.customerType === 'CORP'
-        ? customerFormData.customerBranch[0]?.registerName
-        : customerNameInfo
+      customerFormData.customerType === 'CORP' &&
+      customerFormData.customerBranch
+        ? customerFormData.customerBranch[0]?.registerName || '-'
+        : customerNameInfo || '-'
     "
     :badge-label="
       customerFormData.customerType === 'CORP'
@@ -4144,7 +4155,6 @@ const emptyCreateDialog = ref(false);
                       customerFormData.customerBranch[idx]
                     "
                     :customer-type="customerFormData.customerType"
-                    :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
                     :action-disabled="
                       !customerFormState.readonly ||
                       (customerFormState.branchIndex !== -1 &&
@@ -4964,7 +4974,7 @@ const emptyCreateDialog = ref(false);
                 "
               >
                 <template #form="{ mode, meta, isEdit }">
-                  <FormCitizen
+                  <!-- <FormCitizen
                     v-if="mode === 'citizen' && meta"
                     orc
                     ra
@@ -4976,7 +4986,7 @@ const emptyCreateDialog = ref(false);
                     v-model:last-name="meta.lastName"
                     v-model:last-name-en="meta.lastNameEN"
                     v-model:address="meta.address"
-                  />
+                  /> -->
 
                   <FormEmployeePassport
                     v-if="mode === 'passport' && meta"
@@ -5057,6 +5067,7 @@ const emptyCreateDialog = ref(false);
                   v-for="(
                     value, index
                   ) in currentFromDataEmployee.employeePassport"
+                  :key="index"
                 >
                   <FormEmployeePassport
                     v-if="value !== undefined"
@@ -5211,6 +5222,7 @@ const emptyCreateDialog = ref(false);
                 </div>
                 <FormEmployeeVisa
                   v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                  :key="index"
                   prefix-id="drawer-info-employee"
                   id="form-visa"
                   dense
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 186d5fb3..774c9937 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -47,7 +47,6 @@ defineEmits<{
 withDefaults(
   defineProps<{
     index: number;
-    customerName: string;
     readonly?: boolean;
     prefixId?: string;
     onCreate?: boolean;
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 6aa719cc..d2804641 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -533,3 +533,7 @@ export function changeMode(mode: string) {
     return;
   }
 }
+
+export function capitalizeFirstLetter(val: string) {
+  return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+}