diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index c0b5ad12..205641d5 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -91,7 +91,7 @@ onMounted(async () => {});
 
   <div v-if="employee" class="col-9 row q-col-gutter-md">
     <q-select
-      id="select-employer-branch"
+      for="select-employer-branch"
       use-input
       input-debounce="0"
       :hide-dropdown-icon="readonly"
@@ -140,14 +140,12 @@ onMounted(async () => {});
 
             <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>
+                {{ $t('customerBranchName') }}:
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.customer.customerNameEN
+                    : scope.opt.customer.customerName
+                }}
               </div>
               <div v-if="scope.opt.province" class="col">
                 {{ $t('address') }}
@@ -171,6 +169,7 @@ onMounted(async () => {});
                     ? scope.opt.province.nameEN
                     : scope.opt.province.name
                 }}
+                {{ scope.opt.zipCode }}
               </div>
             </div>
           </div>
@@ -179,17 +178,16 @@ onMounted(async () => {});
       </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 v-if="scope.opt" class="row items-center no-wrap">
+          {{ scope.opt.code }}
+
+          {{ $t('branchName') }}:
+          {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+
           <div
             class="text-caption app-text-muted-2 ellipsis q-ml-sm"
-            style="max-width: 25vw; min-width: 0"
+            style="max-width: 24vw; min-width: 0"
+            v-if="scope.opt.customer && scope.opt.province"
           >
             {{ $t('customerBranchName') }}:
             {{
@@ -216,7 +214,8 @@ onMounted(async () => {});
                 ? scope.opt.province.nameEN
                 : scope.opt.province.name
             }}
-            <q-tooltip>
+            {{ scope.opt.zipCode }}
+            <q-tooltip v-if="scope.opt.customer && scope.opt.province">
               {{ $t('customerBranchName') }}:
               {{
                 $i18n.locale === 'en-US'
@@ -244,6 +243,7 @@ onMounted(async () => {});
                   ? scope.opt.province.nameEN
                   : scope.opt.province.name
               }}
+              {{ scope.opt.zipCode }}
             </q-tooltip>
           </div>
         </div>