diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 3bbfe610..ded3f3d0 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -21,8 +21,8 @@ const addrOptions = reactive<{
 
 const passportType = defineModel<string>('passportType');
 const passportNumber = defineModel<string>('passportNumber');
-const passportIssueDate = defineModel<Date>('passportIssueDate');
-const passportExpiryDate = defineModel<Date>('passportExpiryDate');
+const passportIssueDate = defineModel<Date | null>('passportIssueDate');
+const passportExpiryDate = defineModel<Date | null>('passportExpiryDate');
 const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
 const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
 const previousPassportReference = defineModel<string>(
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 5b8b6cef..7e6418fd 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -21,12 +21,12 @@ const addrOptions = reactive<{
 
 const visaType = defineModel<string>('visaType');
 const visaNumber = defineModel<string>('visaNumber');
-const visaIssueDate = defineModel<Date>('visaIssueDate');
-const visaExpiryDate = defineModel<Date>('visaExpiryDate');
+const visaIssueDate = defineModel<Date | null>('visaIssueDate');
+const visaExpiryDate = defineModel<Date | null>('visaExpiryDate');
 const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
-const visaStayUntilDate = defineModel<Date>('visaStayUntilDate');
+const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
 const tm6Number = defineModel<string>('tm6Number');
-const entryDate = defineModel<Date>('entryDate');
+const entryDate = defineModel<Date | null>('entryDate');
 
 defineProps<{
   title?: string;
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 69f75831..74026b7c 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -108,10 +108,10 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
 const formDataEmployeeSameAddr = ref(false);
 const formDataEmployeeTab = ref('personalInfo');
 const formDataEmployee = ref<EmployeeCreate>({
-  image: new File([''], 'dummy.jpg'),
-  customerBranchId: '0b16ee4a-2ff3-40b8-b09d-c7589422d03d',
+  image: null,
+  customerBranchId: '',
   nrcNo: '',
-  dateOfBirth: new Date(),
+  dateOfBirth: null,
   gender: '',
   nationality: '',
 
@@ -126,20 +126,20 @@ const formDataEmployee = ref<EmployeeCreate>({
 
   passportType: '',
   passportNumber: '',
-  passportIssueDate: new Date(),
-  passportExpiryDate: new Date(),
+  passportIssueDate: null,
+  passportExpiryDate: null,
   passportIssuingCountry: '',
   passportIssuingPlace: '',
   previousPassportReference: '',
 
   visaType: '',
   visaNumber: '',
-  visaIssueDate: new Date(),
-  visaExpiryDate: new Date(),
+  visaIssueDate: null,
+  visaExpiryDate: null,
   visaIssuingPlace: '',
-  visaStayUntilDate: new Date(),
+  visaStayUntilDate: null,
   tm6Number: '',
-  entryDate: new Date(),
+  entryDate: null,
   workerStatus: '',
 
   subDistrictId: '',
@@ -424,18 +424,24 @@ function deleteBranchId(id: string) {
 }
 
 async function onSubmit() {
-  await create({
-    ...formData.value,
-    customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
-    image: profileSubmit.value ? profileFile.value ?? null : null,
-  });
-  clearForm();
-  const resultList = await fetchList({ includeBranch: true });
+  if (selectorLabel.value === 'EMPLOYER') {
+    await create({
+      ...formData.value,
+      customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
+      image: profileSubmit.value ? profileFile.value ?? null : null,
+    });
+    clearForm();
+    const resultList = await fetchList({ includeBranch: true });
 
-  if (resultList) listCustomer.value = resultList.result;
+    if (resultList) listCustomer.value = resultList.result;
+  }
 
   if (selectorLabel.value === 'EMPLOYEE') {
-    await employeeStore.create(formDataEmployee.value);
+    console.log(profileFile.value);
+    await employeeStore.create({
+      ...formDataEmployee.value,
+      image: profileSubmit.value ? profileFile.value ?? null : null,
+    });
     const resultList = await employeeStore.fetchList();
     if (resultList) listEmployee.value = resultList.result;
   }
@@ -891,6 +897,7 @@ watch(fieldSelectedCustomer, async () => {
             <PersonCard
               :list="
                 listEmployee.map((v: Employee) => ({
+                  img: v.profileImageUrl,
                   id: v.id,
                   name:
                     $i18n.locale === 'en-US'
@@ -1157,9 +1164,9 @@ watch(fieldSelectedCustomer, async () => {
     employee
     addressSeparator
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
+    v-model:modal="dialogEmployee"
     v-model:tabs-list="employeeTab"
     v-model:employee-tab="formDataEmployeeTab"
-    v-model:modal="dialogEmployee"
     v-model:same-with-employer="formDataEmployeeSameAddr"
     v-model:address="formDataEmployee.address"
     v-model:addressEN="formDataEmployee.addressEN"
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index d6a046e9..0eada4e7 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -56,9 +56,8 @@ const useEmployeeStore = defineStore('api-employee', () => {
     },
   ) {
     const { image, ...payload } = data;
-
     const res = await api.post<
-      Employee & { imageUrl: string; imageUploadUrl: string }
+      Employee & { profileImageUrl: string; profileImageUploadUrl: string }
     >('/employee', payload, {
       headers: {
         'X-Session-Id': flow?.sessionId,
@@ -67,12 +66,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
       },
     });
 
-    await axios
-      .put(res.data.imageUploadUrl, image, {
-        headers: { 'Content-Type': image.type },
-        onUploadProgress: (e) => console.log(e),
-      })
-      .catch((e) => console.error(e));
+    image &&
+      (await axios
+        .put(res.data.profileImageUploadUrl, image, {
+          headers: { 'Content-Type': image?.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e)));
 
     if (!res) return false;
 
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 974648ba..c1907069 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -46,14 +46,14 @@ export type Employee = {
 };
 
 export type EmployeeCreate = {
-  image: File;
+  image: File | null;
   customerBranchId: string;
 
   status?: Status;
 
   nrcNo: string;
 
-  dateOfBirth: Date;
+  dateOfBirth: Date | null;
   gender: string;
   nationality: string;
 
@@ -68,20 +68,20 @@ export type EmployeeCreate = {
 
   passportType: string;
   passportNumber: string;
-  passportIssueDate: Date;
-  passportExpiryDate: Date;
+  passportIssueDate: Date | null;
+  passportExpiryDate: Date | null;
   passportIssuingCountry: string;
   passportIssuingPlace: string;
   previousPassportReference?: string;
 
   visaType: string;
   visaNumber: string;
-  visaIssueDate: Date;
-  visaExpiryDate: Date;
+  visaIssueDate: Date | null;
+  visaExpiryDate: Date | null;
   visaIssuingPlace: string;
-  visaStayUntilDate: Date;
+  visaStayUntilDate: Date | null;
   tm6Number: string;
-  entryDate: Date;
+  entryDate: Date | null;
   workerStatus: string;
 
   subDistrictId?: string | null;
@@ -145,8 +145,8 @@ export type EmployeeCheckup = {
 };
 
 export type EmployeeCheckupCreate = {
-  coverageExpireDate?: Date;
-  coverageStartDate?: Date;
+  coverageExpireDate?: Date | null;
+  coverageStartDate?: Date | null;
   insuranceCompany?: string;
   medicalBenefitScheme?: string;
   remark?: string;
@@ -175,9 +175,9 @@ export type EmployeeWork = {
 };
 
 export type EmployeeWorkCreate = {
-  workEndDate?: Date;
-  workPermitExpireDate?: Date;
-  workPermitIssuDate?: Date;
+  workEndDate?: Date | null;
+  workPermitExpireDate?: Date | null;
+  workPermitIssuDate?: Date | null;
   workPermitNo?: string;
   workplace?: string;
   jobType?: string;