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..3bbfe610 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -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..5b8b6cef 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -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>