diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
new file mode 100644
index 00000000..d45762bb
--- /dev/null
+++ b/src/components/05_quotation/FormAbout.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import useBranchStore from 'src/stores/branch';
+import useCustomerStore from 'src/stores/customer';
+import SelectInput from '../shared/SelectInput.vue';
+import { QSelect } from 'quasar';
+
+const { locale } = useI18n({ useScope: 'global' });
+const branchStore = useBranchStore();
+const customerStore = useCustomerStore();
+
+const branch = defineModel<string>('branch');
+const customer = defineModel<string>('customer');
+const agentPrice = defineModel<boolean>('agentPrice');
+
+const branchOption = ref();
+const customerOption = ref();
+
+defineProps<{
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  employee?: boolean;
+  title?: string;
+  prefixId: string;
+}>();
+
+async function filter(
+  val: string,
+  update: (...args: unknown[]) => void,
+  type: 'branch' | 'customer',
+) {
+  update(
+    async () => {
+      const res =
+        type === 'branch'
+          ? await branchStore.fetchList({
+              query: val,
+              pageSize: 30,
+            })
+          : await customerStore.fetchList({
+              query: val,
+              pageSize: 30,
+            });
+      if (res) {
+        if (type === 'branch') {
+          branchOption.value = res.result.map((v) => ({
+            value: v.id,
+            label: v.name,
+            labelEN: v.nameEN,
+          }));
+        } else if (type === 'customer') {
+          customerOption.value = res.result.map((v) => ({
+            value: v.id,
+            label:
+              v.customerType === 'CORP'
+                ? v.branch[0].registerName
+                : `${v.branch[0].firstName} ${v.branch[0].lastName}`,
+            labelEN:
+              v.customerType === 'CORP'
+                ? v.branch[0].registerNameEN
+                : `${v.branch[0].firstNameEN} ${v.branch[0].lastNameEN}`,
+          }));
+        }
+      }
+    },
+
+    (ref: QSelect) => {
+      if (val !== '' && ref.options && ref.options?.length > 0) {
+        ref.setOptionIndex(-1);
+        ref.moveOptionSelection(1, true);
+      }
+    },
+  );
+}
+</script>
+<template>
+  <div class="row col-12">
+    <div class="col-12 row items-center q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-file-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`general.about`) }}
+      <div class="q-ml-md text-weight-regular">
+        <q-checkbox
+          :label="$t('productService.product.agentPrice')"
+          size="xs"
+          v-model="agentPrice"
+          style="font-size: 14px"
+        />
+      </div>
+    </div>
+    <div class="col-12 row q-col-gutter-sm">
+      <SelectInput
+        :readonly
+        incremental
+        v-model="branch"
+        id="quotation-branch"
+        class="col-md col-12"
+        :option="branchOption"
+        :label="$t('quotation.branch')"
+        :option-label="locale === 'eng' ? 'labelEN' : 'label'"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+        @filter="(val, update) => filter(val, update, 'branch')"
+      />
+
+      <SelectInput
+        :readonly
+        incremental
+        v-model="customer"
+        class="col-md col-12"
+        id="quotation-customer"
+        :option="customerOption"
+        :label="$t('quotation.customer')"
+        :option-label="locale === 'eng' ? 'labelEN' : 'label'"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+        @filter="(val, update) => filter(val, update, 'customer')"
+      >
+        <template #option="{ scope }">
+          <q-item clickable v-if="scope.index === 0">
+            <q-item-section>
+              {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
+            </q-item-section>
+          </q-item>
+          <q-separator v-if="scope.index === 0" />
+
+          <q-item clickable v-bind="scope.itemProps">
+            <q-item-section>
+              {{ locale === 'eng' ? scope.opt.labelEN : scope.opt.label }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </SelectInput>
+    </div>
+  </div>
+</template>
diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index 61a0682f..ec6d9fe7 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -44,7 +44,7 @@ export default {
     recordPerPage: 'Records per page',
     recordsPage: 'Showing {resultcurrentPage} out of {total} records',
     day: 'Days',
-    select: 'Select',
+    select: 'Select {msg}',
     selectAll: 'Select All',
     additional: 'Additional',
     editImage: 'Edit Image',
@@ -151,7 +151,7 @@ export default {
     addressNo: 'Address No.',
     moo: 'Moo',
     soi: 'Soi',
-    street: 'Street',
+    road: 'Road',
     province: 'Province',
     district: 'District',
     fullAddress: 'Full Address',
@@ -581,6 +581,8 @@ export default {
     branch: 'Branch that issues the quotation',
     customer: 'Customer',
     newCustomer: 'New Customer',
+    employeeList: 'Employee List',
+    employee: 'Employee',
     type: {
       all: 'All',
       fullAmountCash: 'Full Amount Cash',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index eeb23d0e..c223f284 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -44,7 +44,7 @@ export default {
     recordPerPage: 'แสดงทีละ',
     recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
     day: 'วัน',
-    select: 'เลือก',
+    select: 'เลือก{msg}',
     selectAll: 'เลือกทั้งหมด',
     additional: 'เพิ่มเติม',
     editImage: 'แก้ไขรูป',
@@ -151,7 +151,7 @@ export default {
     addressNo: 'บ้านเลขที่',
     moo: 'หมู่',
     soi: 'ซอย',
-    street: 'ถนน',
+    road: 'ถนน',
     province: 'จังหวัด',
     district: 'อำเภอ',
     fullAddress: 'ที่อยู่เต็ม',
@@ -579,6 +579,8 @@ export default {
     branch: 'สาขาที่ออกใบเสนอราคา',
     customer: 'ลูกค้า',
     newCustomer: 'ลูกค้าใหม่',
+    employeeList: 'รายชื่อแรงงาน',
+    employee: 'แรงงาน',
     type: {
       all: 'ทั้งหมด',
       fullAmountCash: 'เงินสดเต็มจำนวน',
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 52abccfe..202aa877 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1469,9 +1469,9 @@ watch(currentHq, () => {
                         >
                           {{
                             locale === 'eng'
-                              ? `${props.row.addressEN} ${props.row.mooEN && `Moo ${props.row.mooEN}`} ${props.row.soiEN && `Soi ${props.row.soiEN}`} ${props.row.streetEN && `${props.row.streetEN} Street`} ${props.row.subDistrict.nameEN} ${props.row.district.nameEN} ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}` ||
+                              ? `${props.row.addressEN}, ${props.row.mooEN && `${$t('form.moo')} ${props.row.mooEN},`} ${props.row.soiEN && `${$t('form.soi')} ${props.row.soiEN},`} ${props.row.moo && `${props.row.streetEN} Rd,`} ${props.row.subDistrict.nameEN}, ${props.row.district.nameEN}, ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}` ||
                                 '-'
-                              : `${props.row.address} ${props.row.moo && `หมู่ ${props.row.moo}`} ${props.row.soi && `ซอย ${props.row.soi}`} ${props.row.street && `ถนน ${props.row.street}`} ต.${props.row.subDistrict.name} อ.${props.row.district.name} จ.${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
+                              : `${props.row.address} ${props.row.moo && `${$t('form.moo')} ${props.row.moo}`} ${props.row.soi && `${$t('form.soi')} ${props.row.soi}`} ${props.row.street && `${$t('form.road')} ${props.row.street}`} ${$t('form.subDistrict')} ${props.row.subDistrict.name} ${$t('form.district')} ${props.row.district.name} ${$t('form.province')} ${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
                                 '-'
                           }}
                         </q-td>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fb7a434c..434b40ae 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1273,8 +1273,10 @@ const emptyCreateDialog = ref(false);
                         <q-td v-if="fieldSelected.includes('address')">
                           {{
                             locale === 'eng'
-                              ? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
-                              : `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
+                              ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                '-'
+                              : `${props.row.branch[0].address} ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo}`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi}`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street}`} ${$t('form.subDistrict')} ${props.row.branch[0].subDistrict.name} ${$t('form.district')} ${props.row.branch[0].district.name} ${$t('form.province')} ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                '-'
                           }}
                         </q-td>