diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 7f5abdd7..f90aa693 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
@@ -21,11 +22,16 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 
 import { CustomerCreate } from 'stores/customer/types';
+import useCustomerStore from 'src/stores/customer';
 
+const userCustomer = useCustomerStore();
+const { create } = userCustomer;
 const formData = ref<CustomerCreate>({
+  status: 'CREATED',
   customerType: 'CORP',
   customerName: '',
   customerNameEN: '',
+  taxNo: '',
   customerBranch: [
     {
       address: '',
@@ -36,13 +42,13 @@ const formData = ref<CustomerCreate>({
       zipCode: '',
       email: '',
       telephoneNo: '',
-      status: 'CREATED',
       name: '',
+      status: 'CREATED',
       taxNo: '',
       nameEN: '',
       legalPersonNo: '',
       registerName: '',
-      registerDate: null,
+      registerDate: new Date(),
       authorizedCapital: '',
       employmentOffice: '',
       bussinessType: '',
@@ -53,7 +59,6 @@ const formData = ref<CustomerCreate>({
       saleEmployee: '',
       payDate: '',
       wageDate: '',
-      file: new File([''], 'dummy.jpg'),
     },
   ],
   image: new File([''], 'dummy.jpg'),
@@ -122,9 +127,9 @@ const selectorList = computed(() => [
   { label: 'WORKER', count: 0 },
 ]);
 
-const customerType = ref<'customerLegalEntity' | 'customerNaturalPerson'>(
-  'customerLegalEntity',
-);
+const customerType = ref<
+  'customerLegalEntity' | 'customerNaturalPerson' | undefined
+>('customerLegalEntity');
 
 function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') {
   customerType.value = type;
@@ -149,6 +154,58 @@ function onClose() {
   infoDrawer.value = false;
   dialogInputForm.value = false;
 }
+
+function clearForm() {
+  customerType.value = undefined;
+  dialogInputForm.value = false;
+  formData.value = {
+    status: 'CREATED',
+    customerType: 'CORP',
+    customerName: '',
+    customerNameEN: '',
+    taxNo: '',
+    customerBranch: [
+      {
+        address: '',
+        addressEN: '',
+        provinceId: '',
+        districtId: '',
+        subDistrictId: '',
+        zipCode: '',
+        email: '',
+        telephoneNo: '',
+        name: '',
+        status: 'CREATED',
+        taxNo: '',
+        nameEN: '',
+        legalPersonNo: '',
+        registerName: '',
+        registerDate: null,
+        authorizedCapital: '',
+        employmentOffice: '',
+        bussinessType: '',
+        bussinessTypeEN: '',
+        jobPosition: '',
+        jobPositionEN: '',
+        jobDescription: '',
+        saleEmployee: '',
+        payDate: '',
+        wageDate: '',
+      },
+    ],
+    image: new File([''], 'dummy.jpg'),
+  };
+}
+
+async function onSubmit() {
+  await create({
+    ...formData.value,
+    customerType:
+      customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS',
+    image: (profileFile.value ?? new File([''], 'dummy.jpg')) as File,
+  });
+  clearForm();
+}
 </script>
 
 <template>
@@ -305,6 +362,12 @@ function onClose() {
     v-model:modal="dialogInputForm"
     :title="`เพิ่มนายจ้าง`"
     :customer-label="customerType"
+    :submit="
+      () => {
+        onSubmit();
+      }
+    "
+    :close="() => {}"
   >
     <template #prepend>
       <ProfileUpload
@@ -316,7 +379,15 @@ function onClose() {
     </template>
 
     <template #information>
-      <BasicInformation dense outlined separator />
+      <BasicInformation
+        dense
+        outlined
+        separator
+        :type-customer="customerType"
+        v-model:customer-name="formData.customerName"
+        v-model:customer-name-en="formData.customerNameEN"
+        v-model:tax-no="formData.taxNo"
+      />
     </template>
 
     <template #address>
@@ -355,6 +426,29 @@ function onClose() {
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
+              v-model:employment-office="
+                formData.customerBranch[indexTab].employmentOffice
+              "
+              v-model:bussiness-type="
+                formData.customerBranch[indexTab].bussinessType
+              "
+              v-model:bussiness-type-en="
+                formData.customerBranch[indexTab].bussinessTypeEN
+              "
+              v-model:job-position="
+                formData.customerBranch[indexTab].jobPosition
+              "
+              v-model:job-position-en="
+                formData.customerBranch[indexTab].jobPositionEN
+              "
+              v-model:job-description="
+                formData.customerBranch[indexTab].jobDescription
+              "
+              v-model:sale-employee="
+                formData.customerBranch[indexTab].saleEmployee
+              "
+              v-model:pay-date="formData.customerBranch[indexTab].payDate"
+              v-model:wage-date="formData.customerBranch[indexTab].wageDate"
               separator
               dense
               outlined
@@ -365,6 +459,8 @@ function onClose() {
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
+              :type-customer="customerType"
+              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
               v-model:customer-name="formData.customerBranch[indexTab].name"
               v-model:customer-english-name="
                 formData.customerBranch[indexTab].nameEN
@@ -401,9 +497,6 @@ function onClose() {
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
-              v-model:file-employer-document="
-                formData.customerBranch[indexTab].file
-              "
               dense
               outlined
             />