diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 0883bb83..c0b5ad12 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -97,7 +97,7 @@ onMounted(async () => {});
       :hide-dropdown-icon="readonly"
       :dense="dense"
       :outlined="!readonly"
-      :readonly="readonly"
+      :readonly="readonly || customerBranch !== undefined"
       :borderless="readonly"
       hide-bottom-space
       class="col-12"
@@ -123,63 +123,140 @@ onMounted(async () => {});
           !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
       ]"
     >
-      <template v-slot:before-options>
-        <q-item>
-          <div
-            class="row items-center col-12 app-text-muted text-weight-medium"
-          >
-            <div class="col-4">{{ $t('branchCode') }}</div>
-            <div class="col">{{ $t('name') }}</div>
-            <div class="col">{{ $t('address') }}</div>
-          </div>
-        </q-item>
-      </template>
-
       <template v-slot:option="scope">
-        <q-item v-bind="scope.itemProps">
-          <div v-if="scope.opt" class="row items-center col-12">
-            <div class="col-4">
-              {{ scope.opt.code }}
-            </div>
-            <div class="col">
+        <q-item
+          v-if="scope.opt"
+          v-bind="scope.itemProps"
+          class="row items-start col-12 no-padding"
+        >
+          <div class="q-ma-sm">
+            <i class="isax isax-frame5" style="color: var(--brand-1)" />
+          </div>
+          <div class="q-mt-sm">
+            <div>
+              {{ scope.opt.code }} {{ $t('branchName') }}:
               {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
             </div>
-            <div v-if="scope.opt.province" class="col">
+
+            <div class="text-caption app-text-muted-2 q-mb-xs">
+              <div v-if="scope.opt.customer" class="col column">
+                <span>
+                  {{ $t('customerBranchName') }}:
+                  {{
+                    $i18n.locale === 'en-US'
+                      ? scope.opt.customer.customerNameEN
+                      : scope.opt.customer.customerName
+                  }}
+                </span>
+              </div>
+              <div v-if="scope.opt.province" class="col">
+                {{ $t('address') }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.addressEN
+                    : scope.opt.address
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.subDistrict.nameEN
+                    : scope.opt.subDistrict.name
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.district.nameEN
+                    : scope.opt.district.name
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.province.nameEN
+                    : scope.opt.province.name
+                }}
+              </div>
+            </div>
+          </div>
+        </q-item>
+        <q-separator class="q-mx-sm" />
+      </template>
+
+      <template v-slot:selected-item="scope">
+        <div v-if="scope.opt" class="row items-center">
+          <div>
+            {{ scope.opt.code }}
+          </div>
+          <div>
+            {{ $t('branchName') }}:
+            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+          </div>
+          <div
+            class="text-caption app-text-muted-2 ellipsis q-ml-sm"
+            style="max-width: 25vw; min-width: 0"
+          >
+            {{ $t('customerBranchName') }}:
+            {{
+              $i18n.locale === 'en-US'
+                ? scope.opt.customer.customerNameEN
+                : scope.opt.customer.customerName
+            }}
+            {{ $t('address') }}
+            {{
+              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
+            }}
+            {{
+              $i18n.locale === 'en-US'
+                ? scope.opt.subDistrict.nameEN
+                : scope.opt.subDistrict.name
+            }}
+            {{
+              $i18n.locale === 'en-US'
+                ? scope.opt.district.nameEN
+                : scope.opt.district.name
+            }}
+            {{
+              $i18n.locale === 'en-US'
+                ? scope.opt.province.nameEN
+                : scope.opt.province.name
+            }}
+            <q-tooltip>
+              {{ $t('customerBranchName') }}:
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.customer.customerNameEN
+                  : scope.opt.customer.customerName
+              }}
+              {{ $t('address') }}
               {{
                 $i18n.locale === 'en-US'
                   ? scope.opt.addressEN
                   : scope.opt.address
               }}
-              ({{
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.subDistrict.nameEN
+                  : scope.opt.subDistrict.name
+              }}
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.district.nameEN
+                  : scope.opt.district.name
+              }}
+              {{
                 $i18n.locale === 'en-US'
                   ? scope.opt.province.nameEN
                   : scope.opt.province.name
-              }})
-            </div>
-          </div>
-        </q-item>
-      </template>
-
-      <template v-slot:selected-item="scope">
-        <div v-if="scope.opt" class="row items-center col-12">
-          <div class="col-4">
-            {{ scope.opt.code }}
-          </div>
-          <div class="col">
-            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
-          </div>
-          <div v-if="scope.opt.province" class="col">
-            {{
-              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
-            }}
-            ({{
-              $i18n.locale === 'en-US'
-                ? scope.opt.province.nameEN
-                : scope.opt.province.name
-            }})
+              }}
+            </q-tooltip>
           </div>
         </div>
       </template>
+
+      <template v-slot:append>
+        <q-icon
+          v-if="!readonly && customerBranch"
+          name="mdi-close-circle"
+          @click.stop="customerBranch = undefined"
+          class="cursor-pointer clear-btn"
+        />
+      </template>
     </q-select>
     <q-input
       for="input-employeeID"
@@ -217,4 +294,12 @@ onMounted(async () => {});
   />
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.clear-btn {
+  opacity: 50%;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    opacity: 100%;
+  }
+}
+</style>