diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 5a90d3f7..a4041333 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -159,42 +159,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           ]"
           for="input-name-en"
         />
-
-        <q-select
-          v-if="
-            typeBranch !== 'headOffice' &&
-            isRoleInclude(['head_of_admin', 'head_of_account'])
-          "
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
-          class="col-2"
-          dense
-          for="input-branch-status"
-          :readonly="readonly || isRoleInclude(['head_of_account'])"
-          :options="['Virtual', 'Branch']"
-          :hide-dropdown-icon="readonly"
-          :label="$t('general.branchStatus')"
-          :model-value="virtual ? 'Virtual' : 'Branch'"
-          @update:model-value="(v) => (virtual = v === 'Virtual')"
-          :rules="[(val) => val && val.length > 0]"
-          :error-message="$t('form.error.required')"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
       </div>
 
       <div class="col-12 row q-col-gutter-sm">
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index ec3619a1..d1709858 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -262,7 +262,7 @@ function deleteFile(name: string) {
       </div>
 
       <q-file
-        v-if="userType"
+        v-if="userType && !readonly"
         ref="attachmentRef"
         for="input-attachment"
         :dense="dense"
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index da9a0c58..7c3dcb55 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -54,6 +54,7 @@ defineProps<{
   employeeOwnerOption?: CustomerBranch[];
   prefixId: string;
   showBtnSave?: boolean;
+  disableCustomerSelect?: boolean;
 }>();
 
 defineEmits<{
@@ -117,12 +118,16 @@ defineEmits<{
 
     <div class="col-12 row" style="gap: var(--size-2)">
       <SelectCustomer
+        id="form-select-customer-branch-id"
+        for="form-select-customer-branch-id"
         v-model:value="customerBranchId"
         v-model:value-option="currentCustomerBranch"
         :label="$t('customer.form.branchCode')"
         class="col-12 field-two"
+        simple
         required
         :readonly
+        :disabled="disableCustomerSelect && !readonly"
       />
 
       <q-input
diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index 661ea581..1fec0148 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -68,6 +68,8 @@ defineEmits<{
         :readonly
       />
       <SelectCustomer
+        id="about-select-customer-branch-id"
+        for="about-select-customer-branch-id"
         v-model:value="customerBranchId"
         :label="$t('quotation.customer')"
         :creatable-disabled-text="`(${$t('form.error.selectField', {
@@ -88,14 +90,14 @@ defineEmits<{
 
 <style scoped>
 :deep(
-    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
-  ) {
+  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
+) {
   padding-right: 4px;
 }
 
 :deep(
-    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
-  ) {
+  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
+) {
   padding-left: 4px;
 }
 </style>
diff --git a/src/components/07_agencies-management/FormBasicInfoAgencies.vue b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
index 1d80f5c3..966d64ab 100644
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import SelectInput from '../shared/SelectInput.vue';
 import useOptionStore from 'src/stores/options';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useInstitution } from 'src/stores/institution';
 
 const optionStore = useOptionStore();
 
@@ -10,6 +14,11 @@ defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
 }>();
+const emit = defineEmits<{
+  (e: 'deleteAttachment', name: string): void;
+}>();
+
+const attachmentRef = ref();
 
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
@@ -17,8 +26,19 @@ const nameEn = defineModel('nameEn', { default: '' });
 const contactName = defineModel('contactName', { default: '' });
 const email = defineModel('email', { default: '' });
 const contactTel = defineModel('contactTel', { default: '' });
+const attachment = defineModel<File[]>('attachment');
+const attachmentList =
+  defineModel<{ name: string; url: string }[]>('attachmentList');
 
 type Options = { label: string; value: string };
+
+function openNewTab(url: string) {
+  window.open(url, '_blank');
+}
+
+function deleteAttachment(name: string) {
+  emit('deleteAttachment', name);
+}
 </script>
 <template>
   <div class="row col-12">
@@ -162,6 +182,78 @@ type Options = { label: string; value: string };
           />
         </template>
       </q-input>
+
+      <q-file
+        v-if="!readonly"
+        ref="attachmentRef"
+        for="input-attachment"
+        dense
+        outlined
+        multiple
+        append
+        :readonly
+        :label="$t('personnel.form.attachment')"
+        class="col"
+        v-model="attachment"
+      >
+        <template v-slot:prepend>
+          <Icon
+            icon="material-symbols:attach-file"
+            width="20px"
+            style="color: var(--brand-1)"
+          />
+        </template>
+        <template v-slot:file="file">
+          <div class="row full-width items-center">
+            <span class="col ellipsis">
+              {{ file.file.name }}
+            </span>
+            <q-btn
+              dense
+              rounded
+              flat
+              padding="2 2"
+              class="app-text-muted"
+              icon="mdi-close-circle"
+              @click.stop="attachmentRef.removeAtIndex(file.index)"
+            />
+          </div>
+        </template>
+      </q-file>
+
+      <div v-if="attachmentList && attachmentList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            id="attachment-file"
+            for="attachment-file"
+            v-for="item in attachmentList"
+            clickable
+            :key="item.url"
+            class="items-center row"
+            @click="() => openNewTab(item.url)"
+          >
+            <q-item-section>
+              <div class="row items-center justify-between">
+                <div class="col">
+                  {{ item.name }}
+                </div>
+                <q-btn
+                  v-if="!readonly"
+                  id="delete-file"
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteAttachment(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index cbdb0819..83440005 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -12,7 +12,7 @@ import { formatAddress } from 'src/utils/address';
 import useOptionStore from 'stores/options';
 
 const optionStore = useOptionStore();
-defineProps<{
+const props = defineProps<{
   title?: string;
   addressTitle?: string;
   addressTitleEN?: string;
@@ -30,6 +30,7 @@ defineProps<{
 
   useEmployment?: boolean;
   useWorkPlace?: boolean;
+  useForeignAddress?: boolean;
 }>();
 
 const addressStore = useAddressStore();
@@ -57,6 +58,25 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
 
+const provinceTextEN = defineModel<string | null | undefined>(
+  'provinceTextEn',
+  {
+    default: '',
+  },
+);
+const districtTextEN = defineModel<string | null | undefined>(
+  'districtTextEn',
+  {
+    default: '',
+  },
+);
+const subDistrictTextEN = defineModel<string | null | undefined>(
+  'subDistrictTextEn',
+  {
+    default: '',
+  },
+);
+
 const homeCode = defineModel<string | null | undefined>('homeCode');
 const employmentOffice = defineModel<string | null | undefined>(
   'employmentOffice',
@@ -64,6 +84,7 @@ const employmentOffice = defineModel<string | null | undefined>(
 const employmentOfficeEN = defineModel<string | null | undefined>(
   'employmentOfficeEn',
 );
+const addressForeign = defineModel<boolean>('addressForeign');
 
 const addrOptions = reactive<{
   provinceOps: Province[];
@@ -78,14 +99,18 @@ const addrOptions = reactive<{
 const area = ref<Office[]>([]);
 
 const fullAddress = computed(() => {
-  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = subDistrictOptions.value.find(
-    (v) => v.id === subDistrictId.value,
-  );
+  const province = addressForeign.value
+    ? { id: '1', name: provinceId.value }
+    : provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = addressForeign.value
+    ? { id: '1', name: districtId.value }
+    : districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = addressForeign.value
+    ? { id: '1', name: subDistrictId.value }
+    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
 
-  if (province && district && sDistrict) {
-    const fullAddress = formatAddress({
+  if (province?.name && district?.name && sDistrict?.name) {
+    const fullAddressText = formatAddress({
       address: address.value,
       addressEN: addressEN.value,
       moo: moo.value ? moo.value : '',
@@ -97,21 +122,26 @@ const fullAddress = computed(() => {
       province: province as unknown as Province,
       district: district as unknown as District,
       subDistrict: sDistrict as unknown as SubDistrict,
+      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
     });
-    return fullAddress;
+    return fullAddressText;
   }
   return '-';
 });
 
 const fullAddressEN = computed(() => {
-  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = subDistrictOptions.value.find(
-    (v) => v.id === subDistrictId.value,
-  );
+  const province = addressForeign.value
+    ? { nameEN: provinceTextEN.value }
+    : provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = addressForeign.value
+    ? { nameEN: districtTextEN.value }
+    : districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = addressForeign.value
+    ? { nameEN: subDistrictTextEN.value }
+    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
 
-  if (province && district && sDistrict) {
-    const fullAddress = formatAddress({
+  if (province?.nameEN && district?.nameEN && sDistrict?.nameEN) {
+    const fullAddressText = formatAddress({
       address: address.value,
       addressEN: addressEN.value,
       moo: moo.value ? moo.value : '',
@@ -124,8 +154,9 @@ const fullAddressEN = computed(() => {
       district: district as unknown as District,
       subDistrict: sDistrict as unknown as SubDistrict,
       en: true,
+      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
     });
-    return fullAddress;
+    return fullAddressText;
   }
   return '-';
 });
@@ -149,7 +180,7 @@ async function fetchProvince() {
 }
 
 async function fetchDistrict() {
-  if (!provinceId.value) return;
+  if (!provinceId.value || addressForeign.value) return;
 
   const result = await addressStore.fetchDistrictByProvinceId(provinceId.value);
   if (result) addrOptions.districtOps = result;
@@ -168,7 +199,7 @@ async function fetchDistrict() {
 }
 
 async function fetchSubDistrict() {
-  if (!districtId.value) return;
+  if (!districtId.value || addressForeign.value) return;
   const result = await addressStore.fetchSubDistrictByProvinceId(
     districtId.value,
   );
@@ -255,6 +286,16 @@ onMounted(async () => {
   await fetchSubDistrict();
 });
 
+function clearAddress() {
+  provinceId.value = null;
+  districtId.value = null;
+  subDistrictId.value = null;
+  provinceTextEN.value = null;
+  districtTextEN.value = null;
+  subDistrictTextEN.value = null;
+  zipCode.value = null;
+}
+
 watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 
@@ -313,6 +354,15 @@ watchEffect(async () => {
           {{ $t('customerEmployee.form.addressCustom') }}
         </span>
       </div>
+
+      <div v-if="useForeignAddress" class="text-caption q-ml-md app-text-muted">
+        <q-checkbox
+          size="xs"
+          v-model="addressForeign"
+          @update:model-value="clearAddress"
+        />
+        {{ $t('personnel.form.addressForeign') }}
+      </div>
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
@@ -449,7 +499,24 @@ watchEffect(async () => {
             (v) => (typeof v === 'string' ? (street = v) : '')
           "
         />
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="provinceId"
+          :dense="dense"
+          :label="$t('form.province')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-province-${indexId}` : 'input-province'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -493,7 +560,24 @@ watchEffect(async () => {
           </template>
         </q-select>
 
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="districtId"
+          :dense="dense"
+          :label="$t('form.district')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-district-${indexId}` : 'input-district'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -536,7 +620,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="subDistrictId"
+          :dense="dense"
+          :label="$t('form.district')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-${indexId}` : 'input-sub-district'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -580,17 +682,27 @@ watchEffect(async () => {
           </template>
         </q-select>
         <q-input
+          :key="Number(addressForeign)"
+          hide-bottom-space
           :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
-          :disable="!readonly && !sameWithEmployer"
-          readonly
+          :disable="!addressForeign && !readonly && !sameWithEmployer"
+          :readonly="!addressForeign || readonly"
           :label="$t('form.zipCode')"
           class="col-md-3 col-6"
           :model-value="
-            addrOptions.subDistrictOps
-              ?.filter((x) => x.id === subDistrictId)
-              .map((x) => x.zipCode)[0] ?? ''
+            !addressForeign
+              ? (addrOptions.subDistrictOps
+                  ?.filter((x) => x.id === subDistrictId)
+                  .map((x) => x.zipCode)[0] ?? '')
+              : zipCode
+          "
+          @update:model-value="(v) => (zipCode = v.toString())"
+          :rules="
+            !addressForeign
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-input
@@ -689,7 +801,24 @@ watchEffect(async () => {
             (v) => (typeof v === 'string' ? (streetEN = v) : '')
           "
         />
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="provinceTextEN"
+          :dense="dense"
+          label="Province"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-province-en-${indexId}` : 'input-province-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -732,7 +861,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="districtTextEN"
+          :dense="dense"
+          label="District"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-district-en-${indexId}` : 'input-district-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -775,7 +922,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="subDistrictTextEN"
+          :dense="dense"
+          label="Sub-District"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-en-${indexId}` : 'input-sub-district-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -819,19 +984,28 @@ watchEffect(async () => {
           </template>
         </q-select>
         <q-input
+          :key="Number(addressForeign)"
           hide-bottom-space
           :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
-          readonly
-          :disable="!readonly && !sameWithEmployer"
+          :readonly="!addressForeign || readonly"
+          :disable="!addressForeign && !readonly && !sameWithEmployer"
           zip="zip-en"
           label="Zip Code"
           class="col-md-3 col-6"
           :model-value="
-            addrOptions.subDistrictOps
-              ?.filter((x) => x.id === subDistrictId)
-              .map((x) => x.zipCode)[0] ?? ''
+            !addressForeign
+              ? (addrOptions.subDistrictOps
+                  ?.filter((x) => x.id === subDistrictId)
+                  .map((x) => x.zipCode)[0] ?? '')
+              : zipCode
+          "
+          @update:model-value="(v) => (zipCode = v.toString())"
+          :rules="
+            !addressForeign
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-input
diff --git a/src/components/shared/select/SelectBusinessType.vue b/src/components/shared/select/SelectBusinessType.vue
index edef243e..d143a16a 100644
--- a/src/components/shared/select/SelectBusinessType.vue
+++ b/src/components/shared/select/SelectBusinessType.vue
@@ -79,7 +79,7 @@ function setDefaultValue() {
     v-model="value"
     incremental
     option-value="id"
-    :label
+    :label="label || $t('menu.manage.businessType')"
     :placeholder
     :readonly
     :disable="disabled"
@@ -92,21 +92,13 @@ function setDefaultValue() {
     @filter="filter"
   >
     <template #selected-item="{ opt }">
-      {{
-        (lang ?? $i18n.locale) !== 'eng'
-          ? opt.name + ' ' + opt.name
-          : opt.nameEN + ' ' + opt.nameEN
-      }}
+      {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
     </template>
 
     <template #option="{ opt, scope }">
       <q-item v-bind="scope.itemProps">
         <span class="row items-center">
-          {{
-            (lang ?? $i18n.locale) !== 'eng'
-              ? opt.name + ' ' + opt.name
-              : opt.nameEN + ' ' + opt.nameEN
-          }}
+          {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
         </span>
       </q-item>
 
diff --git a/src/components/shared/select/select.ts b/src/components/shared/select/select.ts
index 08fd88b2..cf1555cb 100644
--- a/src/components/shared/select/select.ts
+++ b/src/components/shared/select/select.ts
@@ -35,7 +35,13 @@ export const createSelect = <T extends Record<string, any>>(
   let previousSearch = '';
 
   watch(value, (v) => {
-    if (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
+    if (!v) return;
+
+    if (cache && cache.find((opt) => opt[valueField] === v)) {
+      valueOption.value = cache.find((opt) => opt[valueField] === v);
+      return;
+    }
+
     getSelectedOption();
   });
 
@@ -63,7 +69,15 @@ export const createSelect = <T extends Record<string, any>>(
     const currentValue = value.value;
 
     if (!currentValue) return;
-    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
+
+    const option = selectOptions.value.find(
+      (v) => v[valueField] === currentValue,
+    );
+
+    if (option) {
+      valueOption.value = option;
+      return;
+    }
     if (valueOption.value && valueOption.value[valueField] === currentValue) {
       return selectOptions.value.unshift(valueOption.value);
     }
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index d35ab235..39da457e 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -476,6 +476,7 @@ export default {
       blacklist: 'Black list',
       contactName: 'Contact Person',
       contactTel: 'Contact Number',
+      addressForeign: 'Use foreign address',
     },
   },
   customer: {
@@ -927,6 +928,7 @@ export default {
     contactName: 'Contact Person',
     contactTel: 'Contact Number',
     bankInfo: 'Bank Information',
+    attachment: 'Attachment',
   },
 
   requestList: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 57337ad1..0558bd78 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -472,6 +472,7 @@ export default {
       blacklist: 'แบล็คลิสต์',
       contactName: 'ชื่อผู้ติดต่อ',
       contactTel: 'เบอร์โทรศัพท์ผู้ติดต่อ',
+      addressForeign: 'ใช้ที่อยู่ต่างประเทศ',
     },
   },
   customer: {
@@ -798,7 +799,7 @@ export default {
     branch: 'สาขาที่ออกใบเสนอราคา',
     branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
     customer: 'ลูกค้า',
-    newCustomer: 'ลูกค้าใหม่',
+    newCustomer: 'แรงงานใหม่',
     employeeList: 'รายชื่อแรงงาน',
     employee: 'แรงงาน',
     employeeName: 'ชื่อ-นามสกุล แรงงาน',
@@ -924,6 +925,7 @@ export default {
     contactName: 'ชื่อผู้ติดต่อ',
     contactTel: 'เบอร์โทรผู้ติดต่อ',
     bankInfo: 'ข้อมูลธนาคาร',
+    attachment: 'เอกสารเพิ่มเติม',
   },
 
   requestList: {
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index cdfb0fb3..4c1676fc 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -157,6 +157,14 @@ const defaultFormData = {
   contactTel: '',
   remark: '',
   agencyStatus: '',
+  addressForeign: false,
+  provinceText: null,
+  districtText: null,
+  subDistrictText: null,
+  provinceTextEN: null,
+  districtTextEN: null,
+  subDistrictTextEN: null,
+  zipCodeText: null,
 };
 
 const formData = ref<UserCreate>({
@@ -209,6 +217,14 @@ const formData = ref<UserCreate>({
   contactTel: '',
   remark: '',
   agencyStatus: '',
+  addressForeign: false,
+  provinceText: null,
+  districtText: null,
+  subDistrictText: null,
+  provinceTextEN: null,
+  districtTextEN: null,
+  subDistrictTextEN: null,
+  zipCodeText: null,
 });
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@@ -431,6 +447,28 @@ async function onSubmit(excludeDialog?: boolean) {
       ...formData.value,
       checkpointEN: formData.value.checkpoint,
       status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
+      provinceId: formData.value.addressForeign
+        ? null
+        : formData.value.provinceId,
+      districtId: formData.value.addressForeign
+        ? null
+        : formData.value.districtId,
+      subDistrictId: formData.value.addressForeign
+        ? null
+        : formData.value.subDistrictId,
+
+      provinceText: formData.value.addressForeign
+        ? formData.value.provinceId
+        : null,
+      districtText: formData.value.addressForeign
+        ? formData.value.districtId
+        : null,
+      subDistrictText: formData.value.addressForeign
+        ? formData.value.subDistrictId
+        : null,
+      zipCodeText: formData.value.addressForeign
+        ? formData.value.zipCode
+        : null,
     } as const;
 
     await userStore.editById(currentUser.value.id, formDataEdit);
@@ -462,7 +500,31 @@ async function onSubmit(excludeDialog?: boolean) {
         : '';
     formData.value.checkpointEN = formData.value.checkpoint;
     const result = await userStore.create(
-      formData.value,
+      {
+        ...formData.value,
+        provinceId: formData.value.addressForeign
+          ? null
+          : formData.value.provinceId,
+        districtId: formData.value.addressForeign
+          ? null
+          : formData.value.districtId,
+        subDistrictId: formData.value.addressForeign
+          ? null
+          : formData.value.subDistrictId,
+
+        provinceText: formData.value.addressForeign
+          ? formData.value.provinceId
+          : null,
+        districtText: formData.value.addressForeign
+          ? formData.value.districtId
+          : null,
+        subDistrictText: formData.value.addressForeign
+          ? formData.value.subDistrictId
+          : null,
+        zipCodeText: formData.value.addressForeign
+          ? formData.value.zipCode
+          : null,
+      },
       onCreateImageList.value,
     );
 
@@ -560,12 +622,20 @@ async function assignFormData(idEdit: string) {
     currentUser.value = foundUser;
     formData.value = {
       branchId: foundUser.branch[0]?.id,
-      provinceId: foundUser.provinceId,
-      districtId: foundUser.districtId,
-      subDistrictId: foundUser.subDistrictId,
+      provinceId: foundUser.addressForeign
+        ? foundUser.provinceText
+        : foundUser.provinceId,
+      districtId: foundUser.addressForeign
+        ? foundUser.districtText
+        : foundUser.districtId,
+      subDistrictId: foundUser.addressForeign
+        ? foundUser.subDistrictText
+        : foundUser.subDistrictId,
       telephoneNo: foundUser.telephoneNo,
       email: foundUser.email,
-      zipCode: foundUser.zipCode,
+      zipCode: foundUser.addressForeign
+        ? foundUser.zipCodeText
+        : foundUser.zipCode,
       gender: foundUser.gender,
       addressEN: foundUser.addressEN,
       address: foundUser.address,
@@ -619,6 +689,10 @@ async function assignFormData(idEdit: string) {
         (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
       remark: foundUser.remark || '',
       agencyStatus: foundUser.agencyStatus || '',
+      addressForeign: foundUser.addressForeign || false,
+      provinceTextEN: foundUser.provinceTextEN,
+      districtTextEN: foundUser.districtTextEN,
+      subDistrictTextEN: foundUser.subDistrictTextEN,
     };
 
     formData.value.status === 'ACTIVE' || 'CREATED'
@@ -745,7 +819,17 @@ watch(
 
 watch(
   () => formData.value.userType,
-  async () => {
+  async (type) => {
+    if (type !== 'AGENCY') {
+      formData.value.addressForeign = false;
+      formData.value.provinceId = null;
+      formData.value.districtId = null;
+      formData.value.subDistrictId = null;
+      formData.value.provinceTextEN = null;
+      formData.value.districtTextEN = null;
+      formData.value.subDistrictTextEN = null;
+      formData.value.zipCodeText = null;
+    }
     if (!infoDrawerEdit.value) return;
     formData.value.registrationNo = null;
     formData.value.startDate = null;
@@ -1813,10 +1897,15 @@ watch(
               v-model:district-id="formData.districtId"
               v-model:sub-district-id="formData.subDistrictId"
               v-model:zip-code="formData.zipCode"
+              v-model:address-foreign="formData.addressForeign"
+              v-model:province-text-en="formData.provinceTextEN"
+              v-model:district-text-en="formData.districtTextEN"
+              v-model:sub-district-text-en="formData.subDistrictTextEN"
               :readonly="!infoDrawerEdit"
               prefix-id="drawer-info-personnel"
               :title="'personnel.form.addressInformation'"
               dense
+              :use-foreign-address="formData.userType === 'AGENCY'"
               class="q-mb-xl"
             />
             <FormByType
@@ -2042,8 +2131,13 @@ watch(
             v-model:district-id="formData.districtId"
             v-model:sub-district-id="formData.subDistrictId"
             v-model:zip-code="formData.zipCode"
+            v-model:address-foreign="formData.addressForeign"
+            v-model:province-text-en="formData.provinceTextEN"
+            v-model:district-text-en="formData.districtTextEN"
+            v-model:sub-district-text-en="formData.subDistrictTextEN"
             prefix-id="drawer-info-personnel"
             dense
+            :use-foreign-address="formData.userType === 'AGENCY'"
             class="q-mb-xl"
           />
           <FormByType
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index f24c6b3b..3ec63b43 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1266,15 +1266,19 @@ const emptyCreateDialog = ref(false);
                             class="ellipsis"
                           >
                             {{
-                              props.row.branch[0].businessType[
-                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                              ]
+                              props.row.branch[0].businessType
+                                ? props.row.branch[0].businessType[
+                                    $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                                  ]
+                                : '-'
                             }}
                             <q-tooltip>
                               {{
-                                props.row.branch[0].businessType[
-                                  $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                ]
+                                props.row.branch[0].businessType
+                                  ? props.row.branch[0].businessType[
+                                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                                    ]
+                                  : '-'
                               }}
                             </q-tooltip>
                           </q-td>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 50e0afcc..41420441 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2313,6 +2313,7 @@ function covertToNode() {
         >
           <MainButton
             solid
+            :disabled="selectedInstallment.length === 0"
             icon="mdi-account-multiple-check-outline"
             class="q-ml-sm"
             color="207 96% 32%"
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index cc7731e5..5f9f45b3 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -240,7 +240,7 @@ watch(
                   ? payTypeOption.filter((v) => v.value === 'Full')
                   : payTypeOption
               "
-              :readonly
+              :readonly="readonly || debitNote"
               id="pay-type"
               :model-value="payType"
               @update:model-value="
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index 39be19e7..b2e92761 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -51,6 +51,8 @@ const emit = defineEmits<{
 const selectedProductGroup = defineModel<string>('selectedProductGroup', {
   default: '',
 });
+
+const selectedProductGroupOption = ref<ProductGroup | undefined>();
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const productGroup = defineModel<ProductGroup[]>('productGroup', {
@@ -569,14 +571,18 @@ watch(
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.name || '-'
+                              )?.name ||
+                              selectedProductGroupOption?.name ||
+                              '-'
                             }}
                           </span>
                           <span class="text-caption app-text-muted">
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.code || '-'
+                              )?.code ||
+                              selectedProductGroupOption?.code ||
+                              '-'
                             }}
                           </span>
                         </div>
@@ -862,13 +868,13 @@ watch(
               <span class="q-pr-sm">
                 {{ $t('productService.group.title') }}
               </span>
-
               <SelectProductGroup
                 class="col-md-4 col-12"
                 :class="{ 'q-mb-sm': $q.screen.lt.md }"
                 id="product-group-select"
                 clearable
                 v-model:value="selectedProductGroup"
+                v-model:value-option="selectedProductGroupOption"
                 :placeholder="
                   !selectedProductGroup
                     ? $t('general.select', {
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index 7e973c23..e6adcbd3 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -21,6 +21,7 @@ import useOcrStore from 'stores/ocr';
 
 // NOTE: Import Components
 import {
+  AddButton,
   SaveButton,
   EditButton,
   UndoButton,
@@ -53,6 +54,9 @@ import { SideMenu } from 'src/components';
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
 import { AddressForm } from 'src/components/form';
 import ExpirationDate from 'src/components/03_customer-management/ExpirationDate.vue';
+import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
+import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
+import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -663,6 +667,7 @@ watch(
     :show="
       () => {
         employeeFormStore.resetFormDataEmployee(true);
+        setCurrentBranchId();
       }
     "
     :before-close="
@@ -1035,6 +1040,7 @@ watch(
             </div>
 
             <BasicInformation
+              disable-customer-select
               no-action
               id="form-information"
               prefix-id="form-employee"
diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index e1597b03..cda5b733 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -82,6 +82,7 @@ const emit = defineEmits<{
   (e: 'addImage'): void;
   (e: 'removeImage'): void;
   (e: 'submitImage', name: string): void;
+  (e: 'deleteAttachment', name: string): void;
 }>();
 
 const data = defineModel<InstitutionPayload>('data', {
@@ -121,6 +122,9 @@ const formBankBook = defineModel<BankBook[]>('formBankBook', {
     },
   ],
 });
+const attachment = defineModel<File[]>('attachment');
+const attachmentList =
+  defineModel<{ name: string; url: string }[]>('attachmentList');
 
 function viewImage() {
   imageState.imageDialog = true;
@@ -348,6 +352,7 @@ watch(
           v-model:contact-name="data.contactName"
           v-model:email="data.contactEmail"
           v-model:contact-tel="data.contactTel"
+          v-model:attachment="attachment"
         />
         <AddressForm
           id="agencies-form-address-info"
@@ -550,6 +555,9 @@ watch(
               v-model:contact-name="data.contactName"
               v-model:email="data.contactEmail"
               v-model:contact-tel="data.contactTel"
+              v-model:attachment="attachment"
+              :attachment-list="attachmentList"
+              @delete-attachment="(name) => $emit('deleteAttachment', name)"
             />
             <AddressForm
               id="agencies-address-info"
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 95feb0ea..436dcfdf 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -115,6 +115,8 @@ const blankFormData: InstitutionPayload = {
   ],
 };
 
+const attachment = ref<File[]>([]);
+const attachmentList = ref<{ name: string; url: string }[]>([]);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
@@ -145,6 +147,8 @@ function resetForm() {
   pageState.addModal = false;
   pageState.viewDrawer = false;
   currAgenciesData.value = undefined;
+  attachment.value = [];
+  attachmentList.value = [];
   formData.value = structuredClone(blankFormData);
 }
 
@@ -154,7 +158,7 @@ function undo() {
   pageState.isDrawerEdit = false;
 }
 
-function assignFormData(data: Institution) {
+async function assignFormData(data: Institution) {
   currAgenciesData.value = data;
   formData.value = {
     group: data.group,
@@ -187,6 +191,8 @@ function assignFormData(data: Institution) {
       bankUrl: `${baseUrl}/institution/${data.id}/bank-qr/${v.id}?ts=${Date.now()}`,
     })),
   };
+
+  await fetchAttachment();
 }
 
 async function submit(opt?: { selectedImage: string }) {
@@ -228,18 +234,29 @@ async function submit(opt?: { selectedImage: string }) {
     );
 
     if (ret) {
+      attachment.value.forEach(async (file) => {
+        await institutionStore.putAttachment({
+          parentId: ret.id || '',
+          name: file.name,
+          file: file,
+        });
+      });
       pageState.isDrawerEdit = false;
       currAgenciesData.value = ret;
       formData.value.selectedImage = ret.selectedImage;
       await fetchData($q.screen.xs);
+      attachment.value = [];
 
       if (refAgenciesDialog.value && opt?.selectedImage) {
         refAgenciesDialog.value.clearImageState();
       }
+      setTimeout(async () => {
+        await fetchAttachment();
+      }, 300);
       return;
     }
   } else {
-    await institutionStore.createInstitution(
+    const res = await institutionStore.createInstitution(
       {
         ...payload,
         code: formData.value.group || '',
@@ -247,6 +264,16 @@ async function submit(opt?: { selectedImage: string }) {
       imageListOnCreate.value,
     );
 
+    if (!res) return;
+
+    attachment.value.forEach(async (file) => {
+      await institutionStore.putAttachment({
+        parentId: res.id || '',
+        name: file.name,
+        file: file,
+      });
+    });
+
     await fetchData($q.screen.xs);
     pageState.addModal = false;
     return;
@@ -346,6 +373,49 @@ async function changeStatus(id?: string) {
   }
 }
 
+async function deleteAttachment(attachmentName: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: t('dialog.title.confirmDelete', {
+      msg: t('personnel.form.attachment'),
+    }),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      if (!currAgenciesData.value?.id) return;
+      institutionStore.delAttachment({
+        parentId: currAgenciesData.value?.id,
+        name: attachmentName,
+      });
+      setTimeout(async () => {
+        await fetchAttachment();
+      }, 300);
+    },
+    cancel: () => {},
+  });
+}
+
+async function fetchAttachment() {
+  const resAttachment = await institutionStore.listAttachment({
+    parentId: currAgenciesData.value.id,
+  });
+
+  if (!resAttachment) return;
+
+  attachmentList.value = await Promise.all(
+    resAttachment.map(async (f) => ({
+      name: f,
+      url: await institutionStore.getAttachment({
+        parentId: currAgenciesData.value.id,
+        name: f,
+        download: false,
+      }),
+    })),
+  );
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'agencies.title';
   navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
@@ -976,6 +1046,7 @@ watch(
       }
     "
     @change-status="triggerChangeStatus"
+    @delete-attachment="deleteAttachment"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     :hide-action="!canAccess('agencies', 'edit')"
@@ -985,6 +1056,8 @@ watch(
     v-model:form-bank-book="formData.bank"
     v-model:image-list-on-create="imageListOnCreate"
     v-model:deletes-status-qr-code-bank-imag="deletesStatusQrCodeBankImag"
+    v-model:attachment="attachment"
+    :attachment-list="attachmentList"
   />
 </template>
 <style scoped>
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index c147be95..631496d2 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -314,7 +314,7 @@ function handleCheckAll() {
           /> -->
           <AvatarGroup
             :data="[
-              ...responsiblePerson(props.row.quotation).user.map((v) => ({
+              ...(responsiblePerson(props.row.quotation)?.user.map((v) => ({
                 name:
                   $i18n.locale === 'eng'
                     ? `${v.firstNameEN} ${v.lastNameEN}`
@@ -324,11 +324,11 @@ function handleCheckAll() {
                     ? `/no-img-man.png`
                     : `/no-img-female.png`
                   : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
-              })),
-              ...responsiblePerson(props.row.quotation).group.map((g) => ({
+              })) || []),
+              ...(responsiblePerson(props.row.quotation)?.group.map((g) => ({
                 name: `${$t('general.group')} ${g.group}`,
                 imgUrl: '/img-group.png',
-              })),
+              })) || []),
             ]"
           ></AvatarGroup>
         </q-td>
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 8e013234..fae332e6 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -96,7 +96,7 @@ const pageState = reactive({
   mode: 'view' as 'view' | 'edit' | 'info',
 });
 
-const defaultRemark = '#[quotation-labor]<br/><br/>#[quotation-payment]';
+const defaultRemark = '';
 
 const formData = ref<CreditNotePayload>({
   quotationId: '',
@@ -798,16 +798,7 @@ onMounted(async () => {
             :default-remark="defaultRemark"
             :items="[]"
             :readonly="pageState.mode === 'info'"
-          >
-            <template #hint>
-              {{ $t('general.hintRemark') }}
-              <code>#[quotation-labor]</code>
-              {{ $t('general.quotationLabor') }}
-              {{ $t('general.or') }}
-              <code>#[quotation-payment]</code>
-              {{ $t('general.quotationPayment') }}
-            </template>
-          </RemarkExpansion>
+          ></RemarkExpansion>
 
           <QuotationFormReceipt
             v-if="creditNoteData && view === CreditNoteStatus.Success"
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 8806d04f..143d9f9b 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -218,7 +218,7 @@ const selectedWorkerItem = computed(() => {
       employeeName:
         locale.value === Lang.English
           ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName} ${e.lastName}`,
+          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
       birthDate: dateFormatJS({ date: e.dateOfBirth }),
       gender: e.gender,
       age: calculateAge(e.dateOfBirth),
@@ -235,11 +235,11 @@ const selectedWorkerItem = computed(() => {
     })),
 
     ...newWorkerList.value.map((v: any) => ({
-      foreignRefNo: v.passportNo,
+      foreignRefNo: v.passportNo || '-',
       employeeName:
         locale.value === Lang.English
           ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName} ${v.lastName}`,
+          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
       birthDate: dateFormatJS({ date: v.dateOfBirth }),
       gender: v.gender,
       age: calculateAge(v.dateOfBirth),
@@ -815,7 +815,7 @@ async function submit() {
         }),
         ...newWorkerList.value.map((v) => {
           const { attachment, ...payload } = v;
-          return payload;
+          return pageState.mode === 'edit' ? payload.id : payload;
         }),
       ]),
     ),
@@ -1046,7 +1046,11 @@ async function submitAccepted() {
               :status-active="i.active?.()"
               :status-done="i.status === 'done'"
               :status-waiting="i.status === 'waiting'"
-              @click="i.handler()"
+              @click="
+                () => {
+                  if (pageState.mode !== 'create') i.handler();
+                }
+              "
             />
           </nav>
           <!-- #TODO  add goToQuotation as @goto-quotation-->
@@ -1134,10 +1138,10 @@ async function submitAccepted() {
               view === QuotationStatus.Accepted
             "
             :total-price="summaryPrice.finalPrice"
+            :pay-split="[]"
             class="q-mb-md"
             v-model:pay-type="currentFormData.payCondition"
             v-model:pay-split-count="currentFormData.paySplitCount"
-            v-model:pay-split="currentFormData.paySplit"
             v-model:final-discount="currentFormData.discount"
             v-model:pay-bill-date="currentFormData.payBillDate"
             v-model:summary-price="summaryPrice"
@@ -1192,7 +1196,6 @@ async function submitAccepted() {
             "
           />
 
-          <!-- TODO: bind remark -->
           <RemarkExpansion
             v-if="
               view === QuotationStatus.Issued ||
@@ -1200,6 +1203,8 @@ async function submitAccepted() {
               view === QuotationStatus.PaymentPending
             "
             :readonly="readonly"
+            :final-price="summaryPrice.finalPrice"
+            :selected-worker
             v-model:remark="currentFormData.remark"
           />
 
diff --git a/src/pages/12_debit-note/document-view/MainPage.vue b/src/pages/12_debit-note/document-view/MainPage.vue
index 563b4d02..33faa935 100644
--- a/src/pages/12_debit-note/document-view/MainPage.vue
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@@ -492,9 +492,8 @@ function print() {
           v-html="
             convertTemplate(data?.remark || '', {
               'quotation-payment': {
-                paymentType: data?.payCondition || 'Full',
+                paymentType: 'Full',
                 amount: summaryPrice.finalPrice,
-                installments: data?.paySplit,
               },
               'quotation-labor': {
                 name:
diff --git a/src/pages/12_debit-note/expansion/RemarkExpansion.vue b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
index d33fcf73..0ed7d568 100644
--- a/src/pages/12_debit-note/expansion/RemarkExpansion.vue
+++ b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
@@ -1,9 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { convertTemplate } from 'src/utils/string-template';
+import { RequestWork } from 'src/stores/request-list';
+import { Employee } from 'src/stores/employee/types';
+
 defineProps<{
   readonly?: boolean;
+  items?: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
+  finalPrice?: number;
+  selectedWorker?: Employee[];
 }>();
 
 const remark = defineModel<string>('remark', { default: '' });
+const remarkWrite = ref<boolean>(false);
 </script>
 <template>
   <q-expansion-item
@@ -24,7 +36,23 @@ const remark = defineModel<string>('remark', { default: '' });
       <q-editor
         dense
         :readonly="readonly"
-        :model-value="remark"
+        :model-value="
+          !remarkWrite || readonly
+            ? convertTemplate(remark || '', {
+                'quotation-payment': {
+                  paymentType: 'Full',
+                  amount: finalPrice,
+                },
+                'quotation-labor': {
+                  name: selectedWorker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                  ),
+                },
+              })
+            : remark || ''
+        "
         min-height="5rem"
         class="full-width"
         toolbar-bg="input-border"
@@ -48,7 +76,36 @@ const remark = defineModel<string>('remark', { default: '' });
             remark = v;
           }
         "
-      />
+      >
+        <template v-if="!readonly" v-slot:toggle>
+          <div class="text-caption row no-wrap q-px-sm">
+            <MainButton
+              :solid="!remarkWrite"
+              icon="mdi-eye-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = false"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.view', { msg: $t('general.example') }) }}
+            </MainButton>
+            <MainButton
+              :solid="remarkWrite"
+              icon="mdi-pencil-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = true"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: !remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.edit') }}
+            </MainButton>
+          </div>
+        </template>
+      </q-editor>
     </main>
   </q-expansion-item>
 </template>
diff --git a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
index 51751014..d0ad1200 100644
--- a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
+++ b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AddButton } from 'components/button';
+import ToggleButton from 'src/components/button/ToggleButton.vue';
 import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';
 
 defineProps<{
@@ -48,8 +49,8 @@ const toggleWorker = defineModel<boolean>('toggleWorker');
             {{ $t('quotation.employeeList') }}
           </span>
           <template v-if="!readonly">
-            <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }}
+            <!-- <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }} -->
           </template>
         </div>
         <nav class="q-ml-auto">
diff --git a/src/stores/institution/index.ts b/src/stores/institution/index.ts
index 27766084..17305e62 100644
--- a/src/stores/institution/index.ts
+++ b/src/stores/institution/index.ts
@@ -5,9 +5,11 @@ import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import useFlowStore from '../flow';
 import { Status } from '../types';
+import { baseUrl, manageAttachment, manageFile, manageMeta } from '../utils';
 
 export const useInstitution = defineStore('institution-store', () => {
   const flowStore = useFlowStore();
+  const attachmentManager = manageAttachment(api, 'institution');
 
   const data = ref<Institution[]>([]);
   const page = ref<number>(1);
@@ -200,6 +202,7 @@ export const useInstitution = defineStore('institution-store', () => {
   }
 
   return {
+    ...attachmentManager,
     data,
     page,
     pageMax,
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 2f6daeb5..4fa53b50 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -61,6 +61,14 @@ export type User = {
   contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus;
+  addressForeign?: boolean;
+  provinceText?: string | null;
+  districtText?: string | null;
+  subDistrictText?: string | null;
+  provinceTextEN?: string | null;
+  districtTextEN?: string | null;
+  subDistrictTextEN?: string | null;
+  zipCodeText?: string | null;
 };
 
 export type UserCreate = {
@@ -113,6 +121,14 @@ export type UserCreate = {
   contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus | string;
+  addressForeign?: boolean;
+  provinceText?: string | null;
+  districtText?: string | null;
+  subDistrictText?: string | null;
+  provinceTextEN?: string | null;
+  districtTextEN?: string | null;
+  subDistrictTextEN?: string | null;
+  zipCodeText?: string | null;
 };
 
 export enum AgencyStatus {
diff --git a/src/utils/address.ts b/src/utils/address.ts
index 2ee2da4b..1dd50990 100644
--- a/src/utils/address.ts
+++ b/src/utils/address.ts
@@ -14,6 +14,7 @@ export function formatAddress(opt: {
   district?: District | null;
   subDistrict?: SubDistrict | null;
   en?: boolean;
+  zipCode?: string;
 }) {
   const { t } = useI18n();
   let addressParts: string[];
@@ -58,7 +59,9 @@ export function formatAddress(opt: {
     // );
   }
 
-  if (opt.subDistrict) addressParts.push(`${opt.subDistrict.zipCode}`);
+  if (opt.subDistrict && !opt.zipCode)
+    addressParts.push(`${opt.subDistrict.zipCode}`);
+  if (opt.zipCode) addressParts.push(`${opt.zipCode}`);
 
   return addressParts.join(' ');
 }
diff --git a/src/utils/string-template.ts b/src/utils/string-template.ts
index b62164f2..b4fbcab0 100644
--- a/src/utils/string-template.ts
+++ b/src/utils/string-template.ts
@@ -74,7 +74,7 @@ const templates = {
             const branch = v.request.quotation.customerBranch;
             return (
               `${i + 1}. ` +
-              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `นายจ้าง ${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : branch.registerName}_` +
+              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : branch.registerName}_` +
               `${employee.namePrefix}. ${employee.firstNameEN} ${employee.lastNameEN} `.toUpperCase() +
               `${!!v.failedType && v.failedType !== 'other' ? `${i18n.global.t(`taskOrder.${v.failedType}`)}` : !!v.failedComment ? v.failedComment : ''}`
             );