diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 96927cb0..c7997277 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -6,16 +6,19 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  typeCustomer?: string;
 }>();
 
 const branchCode = defineModel<string>('branchCode');
 const legalEntityCode = defineModel<string>('legalEntityCode');
-const taxNo = defineModel<string>('taxNo');
+const taxNo = defineModel<string | null | undefined>('taxNo');
 const customerName = defineModel<string>('customerName');
 const customerEnglishName = defineModel<string>('customerEnglishName');
 const authorizedCapital = defineModel<string>('authorizedCapital');
 const registerName = defineModel<string>('registerName');
 const registerDate = defineModel<Date | null>('registerDate');
+
+const employerBranchCode = defineModel<string>('employerBranchCode');
 </script>
 
 <template>
@@ -23,47 +26,64 @@ const registerDate = defineModel<Date | null>('registerDate');
     <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        v-if="typeCustomer === 'customerNaturalPerson'"
         :dense="dense"
         :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-3"
-        :label="$t('branchCode')"
-        v-model="branchCode"
-      />
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-4"
-        :label="$t('legalEntityCode')"
-        v-model="legalEntityCode"
-      />
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-5"
-        :label="$t('taxNo')"
-        v-model="taxNo"
-      />
-
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
+        :readonly="true"
         :borderless="readonly"
         hide-bottom-space
         class="col-6"
+        :label="$t('formDialogEmployerRanchCode')"
+        v-model="employerBranchCode"
+      />
+
+      <div class="row q-col-gutter-md">
+        <q-input
+          v-if="typeCustomer === 'customerLegalEntity'"
+          :dense="dense"
+          :outlined="!readonly"
+          :readonly="true"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('branchCode')"
+          v-model="branchCode"
+        />
+        <q-input
+          v-if="typeCustomer === 'customerLegalEntity'"
+          :dense="dense"
+          :outlined="!readonly"
+          :readonly="true"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('legalEntityCode')"
+          v-model="legalEntityCode"
+        />
+        <q-input
+          v-if="typeCustomer === 'customerLegalEntity'"
+          :dense="dense"
+          :outlined="!readonly"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-5"
+          :label="$t('taxNo')"
+          v-model="taxNo"
+        />
+      </div>
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col"
         :label="$t('customerName')"
         v-model="customerName"
       />
       <q-input
+        v-if="typeCustomer === 'customerLegalEntity'"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -74,6 +94,7 @@ const registerDate = defineModel<Date | null>('registerDate');
         v-model="customerEnglishName"
       />
       <VueDatePicker
+        v-if="typeCustomer === 'customerLegalEntity'"
         :teleport="true"
         utc
         autoApply
@@ -117,6 +138,7 @@ const registerDate = defineModel<Date | null>('registerDate');
         </template>
       </VueDatePicker>
       <q-input
+        v-if="typeCustomer === 'customerLegalEntity'"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -127,6 +149,7 @@ const registerDate = defineModel<Date | null>('registerDate');
         v-model="authorizedCapital"
       />
       <q-input
+        v-if="typeCustomer === 'customerLegalEntity'"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 2cb8d614..ab96b0a9 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-const thaiName = ref<string>('');
-const EngName = ref<string>('');
+const customerName = defineModel<string>('customerName');
+const customerNameEn = defineModel<string>('customerNameEn');
+const taxNo = defineModel<string | null | undefined>('taxNo');
+
+const employerID = defineModel<string>('employerID');
 
 defineProps<{
   title?: string;
@@ -9,6 +11,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  typeCustomer?: string;
 }>();
 </script>
 
@@ -17,6 +20,29 @@ defineProps<{
     • {{ $t(`formDialogTitleInformation`) }}
   </div>
   <div class="col-9 row q-col-gutter-md">
+    <q-input
+      v-if="typeCustomer === 'customerNaturalPerson'"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="true"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogEmployerID')"
+      v-model="employerID"
+    />
+    <q-input
+      v-if="typeCustomer === 'customerNaturalPerson'"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('taxNo')"
+      v-model="taxNo"
+    />
+
     <q-input
       :dense="dense"
       :outlined="!readonly"
@@ -25,7 +51,7 @@ defineProps<{
       hide-bottom-space
       class="col-6"
       :label="$t('corporationThaiName')"
-      v-model="thaiName"
+      v-model="customerName"
     />
     <q-input
       :dense="dense"
@@ -35,7 +61,7 @@ defineProps<{
       hide-bottom-space
       class="col-6"
       :label="$t('corporationEnglishName')"
-      v-model="EngName"
+      v-model="customerNameEn"
     />
   </div>