diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 3acc6700..b7849dbe 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -16,6 +16,7 @@ import {
   Branch,
   BankBook,
 } from 'stores/branch/types';
+import { formatAddress } from 'src/utils/address';
 
 import NoData from 'src/components/NoData.vue';
 import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
@@ -1456,12 +1457,39 @@ watch(currentHq, () => {
                           v-if="fieldSelected.includes('branchLabelAddress')"
                         >
                           {{
-                            locale === 'eng'
-                              ? `${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 && `${$t('form.moo')} ${props.row.moo},`} ${props.row.soi && `${$t('form.soi')} ${props.row.soi},`} ${props.row.street && `${$t('form.road')} ${props.row.street},`} ${props.row.subDistrict.name}, ${props.row.district.name}, ${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
-                                '-'
+                            formatAddress({
+                              address: props.row.address,
+                              addressEN: props.row.addressEN,
+                              moo: props.row.moo,
+                              mooEN: props.row.mooEN,
+                              soi: props.row.soi,
+                              soiEN: props.row.soiEN,
+                              street: props.row.street,
+                              streetEN: props.row.streetEN,
+                              province: props.row.province,
+                              district: props.row.district,
+                              subDistrict: props.row.subDistrict,
+                              en: $i18n.locale === 'eng',
+                            })
                           }}
+                          <q-tooltip>
+                            {{
+                              formatAddress({
+                                address: props.row.address,
+                                addressEN: props.row.addressEN,
+                                moo: props.row.moo,
+                                mooEN: props.row.mooEN,
+                                soi: props.row.soi,
+                                soiEN: props.row.soiEN,
+                                street: props.row.street,
+                                streetEN: props.row.streetEN,
+                                province: props.row.province,
+                                district: props.row.district,
+                                subDistrict: props.row.subDistrict,
+                                en: $i18n.locale === 'eng',
+                              })
+                            }}
+                          </q-tooltip>
                         </q-td>
                         <q-td>
                           <KebabAction
@@ -1520,9 +1548,9 @@ watch(currentHq, () => {
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-12 col-md-6">
+                      <div class="col-12 col-md-6 column">
                         <BranchCard
-                          class="surface-1"
+                          class="surface-1 col"
                           :virtual-branch="props.row.virtual"
                           :id="`branch-card-${props.row.name}`"
                           :class="{
@@ -1571,12 +1599,20 @@ watch(currentHq, () => {
                                 .map((c: BranchContact) => c.telephoneNo || '-')
                                 .join(','),
                             contactName: props.row.contactName || '-',
-                            branchLabelAddress:
-                              $i18n.locale === 'eng'
-                                ? `${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 && `${$t('form.moo')} ${props.row.moo},`} ${props.row.soi && `${$t('form.soi')} ${props.row.soi},`} ${props.row.street && `${$t('form.road')} ${props.row.street},`} ${props.row.subDistrict.name}, ${props.row.district.name}, ${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
-                                  '-',
+                            branchLabelAddress: formatAddress({
+                              address: props.row.address,
+                              addressEN: props.row.addressEN,
+                              moo: props.row.moo,
+                              mooEN: props.row.mooEN,
+                              soi: props.row.soi,
+                              soiEN: props.row.soiEN,
+                              street: props.row.street,
+                              streetEN: props.row.streetEN,
+                              province: props.row.province,
+                              district: props.row.district,
+                              subDistrict: props.row.subDistrict,
+                              en: $i18n.locale === 'eng',
+                            }),
                             branchImgUrl: `/branch/${props.row.id}/branch`,
                           }"
                           :field-selected="fieldSelected"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a86f6884..dd52d6b6 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -52,6 +52,7 @@ import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee
 import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
 import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
 import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import { formatAddress } from 'src/utils/address';
 import {
   UploadFileGroup,
   FormTm6,
@@ -1291,19 +1292,37 @@ const emptyCreateDialog = ref(false);
 
                         <q-td v-if="fieldSelected.includes('address')">
                           {{
-                            locale === 'eng'
-                              ? `${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},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                '-'
+                            formatAddress({
+                              address: props.row.branch[0].address,
+                              addressEN: props.row.branch[0].addressEN,
+                              moo: props.row.branch[0].moo,
+                              mooEN: props.row.branch[0].mooEN,
+                              soi: props.row.branch[0].soi,
+                              soiEN: props.row.branch[0].soiEN,
+                              street: props.row.branch[0].street,
+                              streetEN: props.row.branch[0].streetEN,
+                              province: props.row.branch[0].province,
+                              district: props.row.branch[0].district,
+                              subDistrict: props.row.branch[0].subDistrict,
+                              en: $i18n.locale === 'eng',
+                            })
                           }}
                           <q-tooltip>
                             {{
-                              locale === 'eng'
-                                ? `${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},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                  '-'
+                              formatAddress({
+                                address: props.row.branch[0].address,
+                                addressEN: props.row.branch[0].addressEN,
+                                moo: props.row.branch[0].moo,
+                                mooEN: props.row.branch[0].mooEN,
+                                soi: props.row.branch[0].soi,
+                                soiEN: props.row.branch[0].soiEN,
+                                street: props.row.branch[0].street,
+                                streetEN: props.row.branch[0].streetEN,
+                                province: props.row.branch[0].province,
+                                district: props.row.branch[0].district,
+                                subDistrict: props.row.branch[0].subDistrict,
+                                en: $i18n.locale === 'eng',
+                              })
                             }}
                           </q-tooltip>
                         </q-td>
@@ -1447,10 +1466,10 @@ const emptyCreateDialog = ref(false);
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-12 col-md-6">
+                      <div class="col-12 col-md-6 column">
                         <BranchCard
                           i18n-key="customer.table"
-                          class="surface-1"
+                          class="surface-1 col"
                           :virtual-branch="props.row.virtual"
                           :id="`branch-card-${props.row.name}`"
                           :class="{
@@ -1489,6 +1508,7 @@ const emptyCreateDialog = ref(false);
                             })
                           "
                         >
+                          <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt dolores reprehenderit consequatur totam quidem minima esse quo ex labore ea! Laborum aliquid optio, quia voluptatem quis voluptas. Libero, placeat voluptatum? -->
                           <template #image>
                             <q-avatar size="3rem">
                               <q-img
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7115c010..f13d9693 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2182,8 +2182,9 @@ watch(
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-12 col-md-6 col-lg-4">
+                      <div class="col-12 col-md-6 col-lg-4 column">
                         <ProductCardComponent
+                          class="col"
                           :count-product="props.row._count.product"
                           :count-type="props.row._count.type"
                           :count-service="props.row._count.service"
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index b43a9a8d..52532f6d 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -10,6 +10,7 @@ import { baseUrl } from 'src/stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { useInstitution } from 'src/stores/institution';
 import { Institution, InstitutionPayload } from 'src/stores/institution/types';
+import { formatAddress } from 'src/utils/address';
 
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
@@ -536,19 +537,37 @@ watch(
                 </q-td>
                 <q-td v-if="fieldSelected.includes('address')">
                   {{
-                    $i18n.locale === 'eng'
-                      ? `${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 && `${$t('form.moo')} ${props.row.moo},`} ${props.row.soi && `${$t('form.soi')} ${props.row.soi},`} ${props.row.street && `${$t('form.road')} ${props.row.street},`} ${props.row.subDistrict?.name}, ${props.row.district?.name}, ${props.row.province?.name} ${props.row.subDistrict?.zipCode}` ||
-                        '-'
+                    formatAddress({
+                      address: props.row.address,
+                      addressEN: props.row.addressEN,
+                      moo: props.row.moo,
+                      mooEN: props.row.mooEN,
+                      soi: props.row.soi,
+                      soiEN: props.row.soiEN,
+                      street: props.row.street,
+                      streetEN: props.row.streetEN,
+                      province: props.row.province,
+                      district: props.row.district,
+                      subDistrict: props.row.subDistrict,
+                      en: $i18n.locale === 'eng',
+                    })
                   }}
                   <q-tooltip>
                     {{
-                      $i18n.locale === 'eng'
-                        ? `${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 && `${$t('form.moo')} ${props.row.moo},`} ${props.row.soi && `${$t('form.soi')} ${props.row.soi},`} ${props.row.street && `${$t('form.road')} ${props.row.street},`} ${props.row.subDistrict?.name}, ${props.row.district?.name}, ${props.row.province?.name} ${props.row.subDistrict?.zipCode}` ||
-                          '-'
+                      formatAddress({
+                        address: props.row.address,
+                        addressEN: props.row.addressEN,
+                        moo: props.row.moo,
+                        mooEN: props.row.mooEN,
+                        soi: props.row.soi,
+                        soiEN: props.row.soiEN,
+                        street: props.row.street,
+                        streetEN: props.row.streetEN,
+                        province: props.row.province,
+                        district: props.row.district,
+                        subDistrict: props.row.subDistrict,
+                        en: $i18n.locale === 'eng',
+                      })
                     }}
                   </q-tooltip>
                 </q-td>