diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 4b090166..4a162080 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -224,6 +224,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-select
           id="select-province-en"
+          hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -246,6 +247,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-select
           id="select-district-en"
+          hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -268,6 +270,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-select
           id="select-sub-district-en"
+          hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -290,6 +293,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
+          hide-bottom-space
           for="input-zip-code"
           :dense="dense"
           :outlined="readonly ? false : outlined"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 9fe0e5e3..17af05ca 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -135,12 +135,17 @@ defineProps<{
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputBirthDate')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
           :borderless="readonly"
           :model-value="birthDate ? dateFormat(birthDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -150,15 +155,6 @@ defineProps<{
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="birthDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="birthDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
@@ -175,6 +171,7 @@ defineProps<{
     <q-select
       v-if="employee"
       id="select-gender"
+      hide-bottom-space
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -188,10 +185,15 @@ defineProps<{
       option-value="value"
       v-model="gender"
       :options="userStore.userOption.genderOpts"
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputGender'),
+      ]"
     />
     <q-select
       v-if="employee"
       id="select-nationality"
+      hide-bottom-space
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -206,6 +208,10 @@ defineProps<{
       option-value="label"
       v-model="nationality"
       :options="userStore.userOption.nationalityOpts"
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputNationality'),
+      ]"
     />
   </div>
   <q-separator
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index d000b881..848e3a5d 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 const customerName = defineModel<string>('customerName');
 const customerNameEn = defineModel<string>('customerNameEn');
 const taxNo = defineModel<string | null | undefined>('taxNo');
@@ -10,6 +12,13 @@ const customerBranchId = defineModel<string>('customerBranchId');
 const employeeID = defineModel<string>('employeeID');
 const nrcNo = defineModel<string>('nrcNo');
 
+const branchOption = ref([
+  {
+    label: 'uuu',
+    value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
+  },
+]);
+
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -72,16 +81,27 @@ defineProps<{
 
   <div v-if="employee" class="col-9 row q-col-gutter-md">
     <q-select
+      id="select-employer-branch"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      :label="$t('formDialogEmployerID')"
+      :label="$t('formDialogEmployerBranchCode')"
       v-model="customerBranchId"
+      option-label="label"
+      option-value="value"
+      emit-value
+      map-options
+      :options="branchOption"
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
+      ]"
     />
     <q-input
+      for="input-employeeID"
       :dense="dense"
       :outlined="!readonly"
       :readonly="true"
@@ -90,9 +110,9 @@ defineProps<{
       class="col-3"
       :label="$t('formDialogEmployeeID')"
       v-model="employeeID"
-      for="input-employeeID"
     />
     <q-input
+      for="input-nrcNo"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -101,6 +121,10 @@ defineProps<{
       class="col-6"
       :label="$t('formDialogEmployeeNRCNo')"
       v-model="nrcNo"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogEmployeeNRCNo'),
+      ]"
     />
   </div>
 
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 36c4f837..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>(
@@ -53,7 +53,7 @@ onMounted(async () => {
   <div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-select
-      id="select-positionName"
+      id="select-passport-type"
       :dense="dense"
       :readonly="readonly"
       :outlined="readonly ? false : outlined"
@@ -69,9 +69,13 @@ onMounted(async () => {
       class="col-3"
       :options="addrOptions.provinceOps"
       lazy-rules
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
+      ]"
     />
     <q-input
-      for="input-ownerName"
+      for="input-passport-no"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -80,9 +84,13 @@ onMounted(async () => {
       class="col-3"
       :label="$t('formDialogInputPassportNo')"
       v-model="passportNumber"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
+      ]"
     />
     <q-input
-      for="input-ownerName"
+      for="input-passport-ref"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -91,20 +99,28 @@ onMounted(async () => {
       class="col-6"
       :label="$t('formDialogInputPassportRef')"
       v-model="previousPassportReference"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogInputPassportRef'),
+      ]"
     />
     <q-input
-      for="input-ownerName"
+      for="input-passport-place"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      :label="$t('formDialogInputWPasspornPlace')"
+      :label="$t('formDialogInputWPassportPlace')"
       v-model="passportIssuingPlace"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
+      ]"
     />
     <q-select
-      id="select-jobType"
+      id="select-passport-country"
       :dense="dense"
       :readonly="readonly"
       :outlined="readonly ? false : outlined"
@@ -120,9 +136,13 @@ onMounted(async () => {
       class="col-3"
       :options="addrOptions.provinceOps"
       lazy-rules
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
+      ]"
     />
     <VueDatePicker
-      id="date-picker-workEndDate"
+      id="date-picker-passport-issueance"
       utc
       autoApply
       :teleport="true"
@@ -138,12 +158,18 @@ onMounted(async () => {
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputPassportIssuance')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
           :borderless="readonly"
           :model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val ||
+              $t('selectValidate') + $t('formDialogInputPassportIssuance'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -153,20 +179,11 @@ onMounted(async () => {
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="passportIssueDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="passportIssueDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
     <VueDatePicker
-      id="date-picker-workPermitIssuDate"
+      id="date-picker-passport-expire"
       utc
       autoApply
       :teleport="true"
@@ -182,6 +199,7 @@ onMounted(async () => {
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputPassportExpire')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
@@ -190,6 +208,11 @@ onMounted(async () => {
           :model-value="
             passportExpiryDate ? dateFormat(passportExpiryDate) : ''
           "
+          :rules="[
+            (val: string) =>
+              !!val ||
+              $t('selectValidate') + $t('formDialogInputPassportExpire'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -199,15 +222,6 @@ onMounted(async () => {
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="passportExpiryDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="passportExpiryDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
@@ -215,8 +229,8 @@ onMounted(async () => {
 
   <q-separator
     v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
   />
 </template>
 
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 3bb7fb90..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;
@@ -52,7 +52,7 @@ onMounted(async () => {
   <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-select
-      id="select-positionName"
+      id="select-visa-type"
       :dense="dense"
       :readonly="readonly"
       :outlined="readonly ? false : outlined"
@@ -68,9 +68,13 @@ onMounted(async () => {
       class="col-3"
       :options="addrOptions.provinceOps"
       lazy-rules
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
+      ]"
     />
     <q-input
-      for="input-ownerName"
+      for="input-visa-no"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -79,9 +83,13 @@ onMounted(async () => {
       class="col-3"
       :label="$t('formDialogInputVisaNo')"
       v-model="visaNumber"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
+      ]"
     />
     <VueDatePicker
-      id="date-picker-workPermitIssuDate"
+      id="date-picker-visa-issuance"
       utc
       autoApply
       :teleport="true"
@@ -97,12 +105,17 @@ onMounted(async () => {
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputVisaIssuance')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -112,20 +125,11 @@ onMounted(async () => {
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="visaIssueDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="visaIssueDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
     <VueDatePicker
-      id="date-picker-workPermitIssuDate"
+      id="date-picker-visa-expire"
       utc
       autoApply
       :teleport="true"
@@ -141,12 +145,17 @@ onMounted(async () => {
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputVisaExpire')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -156,20 +165,11 @@ onMounted(async () => {
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="visaExpiryDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="visaExpiryDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
     <q-input
-      for="input-ownerName"
+      for="input-visa-place"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -178,9 +178,13 @@ onMounted(async () => {
       class="col-6"
       :label="$t('formDialogInputVisaPlace')"
       v-model="visaIssuingPlace"
+      :rules="[
+        (val: string) =>
+          !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
+      ]"
     />
     <VueDatePicker
-      id="date-picker-workPermitIssuDate"
+      id="date-picker-visa-until"
       utc
       autoApply
       :teleport="true"
@@ -196,12 +200,18 @@ onMounted(async () => {
       <template #trigger>
         <q-input
           id="input-birth-date"
+          hide-bottom-space
           :label="$t('formDialogInputVisaStayUntil')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val ||
+              $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -224,7 +234,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <q-input
-      for="input-ownerName"
+      for="input-tm6"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -233,9 +243,13 @@ onMounted(async () => {
       class="col-6"
       :label="$t('formDialogInputVisaTM6')"
       v-model="tm6Number"
+      :rules="[
+        (val: string) =>
+          !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
+      ]"
     />
     <VueDatePicker
-      id="date-picker-workPermitIssuDate"
+      id="date-picker-visa-enter"
       utc
       autoApply
       :teleport="true"
@@ -257,6 +271,10 @@ onMounted(async () => {
           :readonly="readonly"
           :borderless="readonly"
           :model-value="entryDate ? dateFormat(entryDate) : ''"
+          :rules="[
+            (val: string) =>
+              !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
+          ]"
         >
           <template v-slot:prepend>
             <q-icon
@@ -266,15 +284,6 @@ onMounted(async () => {
               color="positive"
             />
           </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="entryDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="entryDate = undefined"
-            />
-          </template>
         </q-input>
       </template>
     </VueDatePicker>
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;