diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
new file mode 100644
index 00000000..42eacf22
--- /dev/null
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { dateFormat } from 'src/utils/datetime';
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+const branchCode = defineModel<string>('branchCode');
+const legalEntityCode = defineModel<string>('legalEntityCode');
+const taxNo = defineModel<string>('taxNo');
+const customerName = defineModel<string>('customerName');
+const customerEnglishName = defineModel<string>('customerEnglishName');
+const authorizedCapital = defineModel<string>('registeredCapital');
+const registerName = defineModel<string>('registerName');
+const registerDate = defineModel<Date | null>('registerDate');
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
+    <div class="col-9 row q-col-gutter-md">
+      <div class="row q-col-gutter-md">
+        <q-input
+          :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"
+        />
+      </div>
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('customerName')"
+        v-model="customerName"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('customerEnglishName')"
+        v-model="customerEnglishName"
+      />
+      <VueDatePicker
+        utc
+        autoApply
+        v-model="registerDate"
+        :locale="'th'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-3"
+      >
+        <template #year="{ value }">
+          {{ value + 543 }}
+        </template>
+        <template #trigger>
+          <q-input
+            id="input-start-date"
+            :label="$t('registerDate')"
+            :dense="dense"
+            :outlined="readonly ? false : outlined"
+            :readonly="readonly"
+            :borderless="readonly"
+            :model-value="registerDate ? dateFormat(registerDate) : ''"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="registerDate && !readonly"
+                name="mdi-close"
+                class="cursor-pointer"
+                size="xs"
+                @click="registerDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('authorizedCapital')"
+        v-model="authorizedCapital"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('registerName')"
+        v-model="registerName"
+      />
+    </div>
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style></style>
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
new file mode 100644
index 00000000..894cd157
--- /dev/null
+++ b/src/components/03_customer-management/ContactInformation.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+const mail = defineModel<string>('mail');
+const telephone = defineModel<string>('telephone');
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleContact`) }}</div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('formDialogInputEmail')"
+        v-model="mail"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('formDialogInputTelephone')"
+        v-model="telephone"
+      />
+    </div>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style></style>
diff --git a/src/components/03_customer-management/OtherInformation.vue b/src/components/03_customer-management/OtherInformation.vue
new file mode 100644
index 00000000..8acf8111
--- /dev/null
+++ b/src/components/03_customer-management/OtherInformation.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+const additionalEmployerDocument = defineModel<File | null>(
+  'additionalEmployerDocument',
+);
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-3 app-text-muted">• {{ $t(`otherDocument`) }}</div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-file
+        id="input-attchment"
+        :dense="dense"
+        :outlined="readonly ? false : outlined"
+        :readonly="readonly"
+        :borderless="readonly"
+        multiple
+        append
+        :label="$t('additionalEmployerDocument')"
+        class="col-6"
+        v-model="additionalEmployerDocument"
+      >
+        <template v-slot:prepend>
+          <Icon
+            icon="material-symbols:attach-file"
+            width="20px"
+            style="color: var(--brand-1)"
+          />
+        </template>
+      </q-file>
+    </div>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style></style>
diff --git a/src/i18n/en-US/customer-main-page.ts b/src/i18n/en-US/customer-main-page.ts
index ea1967ff..97bc8681 100644
--- a/src/i18n/en-US/customer-main-page.ts
+++ b/src/i18n/en-US/customer-main-page.ts
@@ -19,4 +19,15 @@ export default {
   payDay: 'Payday',
   payRate: 'Daily wage rate',
   salesPerson: 'Salesperson',
+
+  // เกี่ยวกับ About
+  about: 'About',
+  branchCode: 'Branch Code',
+  legalEntityCode: 'Legal Entity Code',
+  taxNo: 'Tax Identification Number',
+  customerName: 'Customer Thai Name',
+  customerEnglishName: 'Customer English Name',
+  registerDate: 'Register Date',
+  authorizedCapital: 'Registered Capital',
+  registerName: 'RegisterName',
 };
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 3e16333d..214e8000 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -8,6 +8,7 @@ import formDialog from './form-dialog';
 import status from './status';
 import customerMainPage from './customer-main-page';
 import employerDialog from './employer-dialog';
+import otherDocument from './other-document';
 export default {
   ok: 'Confirm',
   agree: 'Agree',
@@ -43,4 +44,5 @@ export default {
   ...formDialog,
   ...customerMainPage,
   ...employerDialog,
+  ...otherDocument,
 };
diff --git a/src/i18n/en-US/other-document.ts b/src/i18n/en-US/other-document.ts
new file mode 100644
index 00000000..55acbe1d
--- /dev/null
+++ b/src/i18n/en-US/other-document.ts
@@ -0,0 +1,4 @@
+export default {
+  otherDocument: 'Other Document',
+  additionalEmployerDocument: 'Additional Employer Documents',
+};
diff --git a/src/i18n/th-th/customer-main-page.ts b/src/i18n/th-th/customer-main-page.ts
index 9279c0f6..80bb20e0 100644
--- a/src/i18n/th-th/customer-main-page.ts
+++ b/src/i18n/th-th/customer-main-page.ts
@@ -27,4 +27,15 @@ export default {
   payRate: 'อัตราค่าจ้าง/วัน',
 
   salesPerson: 'พนักงานขาย',
+
+  // เกี่ยวกับ
+  about: 'เกี่ยวกับ',
+  branchCode: 'รหัสสาขา',
+  legalEntityCode: 'รหัสนิติบุคคล',
+  taxNo: 'เลขประจำตัวผู้เสียภาษี',
+  customerName: 'ชื่อลูกค้า ภาษาไทย',
+  customerEnglishName: 'ชื่อลูกค้า ภาษาอังกฤษ',
+  registerDate: 'จดทะเบียนเมื่อ',
+  authorizedCapital: 'ทุนจดทะเบียน',
+  registerName: 'จดทะเบียนชื่อ',
 };
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 74d6f0c8..61a1414f 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -8,6 +8,7 @@ import user from './user';
 import formDialog from './form-dialog';
 import status from './status';
 import employerDialog from './employer-dialog';
+import otherDocument from './other-document';
 export default {
   ok: 'ยืนยัน',
   agree: 'ตกลง',
@@ -43,4 +44,5 @@ export default {
   ...formDialog,
   ...customerMainPage,
   ...employerDialog,
+  ...otherDocument,
 };
diff --git a/src/i18n/th-th/other-document.ts b/src/i18n/th-th/other-document.ts
new file mode 100644
index 00000000..611a4ad1
--- /dev/null
+++ b/src/i18n/th-th/other-document.ts
@@ -0,0 +1,4 @@
+export default {
+  otherDocument: 'เอกสารอื่นๆ',
+  additionalEmployerDocument: 'เอกสารนายจ้างเพิ่มเติม',
+};
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 3a88b3d7..7006643a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -13,6 +13,9 @@ import BasicInformation from 'src/components/03_customer-management/BasicInforma
 import FormCustomerBranch from 'src/components/03_customer-management/FormCustomerBranch.vue';
 import TabComponent from 'src/components/TabComponent.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
+import AboutComponent from 'src/components/03_customer-management/AboutComponent.vue';
+import ContactComponent from 'src/components/03_customer-management/ContactInformation.vue';
+import OtherInformation from 'src/components/03_customer-management/OtherInformation.vue';
 import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
 
 const statusToggle = ref<boolean>(false);
@@ -217,6 +220,15 @@ function openDialogInputForm() {
           <template #businessInformation>
             <FormBusiness separator dense outlined />
           </template>
+          <template #about>
+            <AboutComponent dense outlined separator />
+          </template>
+          <template #contactInformation>
+            <ContactComponent dense outlined separator />
+          </template>
+          <template #otherDocuments>
+            <OtherInformation dense outlined />
+          </template>
         </TabComponent>
       </div>
     </template>