diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index fc8b9ff3..440551f0 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { ref, onMounted, computed } from 'vue';
+import { Icon } from '@iconify/vue';
 
 import useBranchStore from 'stores/branch';
 
@@ -8,12 +9,14 @@ import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
+import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 
 import { BranchContactCreate } from 'stores/branch-contact/types';
 import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
 import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
+
+const { t } = useI18n();
 
 const profileFile = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>();
@@ -69,6 +72,18 @@ onMounted(async () => {
 watch(locale, () => {
   console.log(locale.value);
 });
+
+const currentHq = ref<{ id: string; code: string }>({
+  id: '',
+  code: '',
+});
+
+const beforeBranch = ref<{ id: string | undefined; code: string }>({
+  id: undefined,
+  code: '',
+});
+
+const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref([
   'branchLabelName',
@@ -82,8 +97,8 @@ const fieldSelectedBranch = ref<{
   label: string;
   value: string;
 }>({
-  label: 'ทั้งหมด',
-  value: 'all',
+  label: t('branchHQLabel'),
+  value: 'branchHQLabel',
 });
 
 const stats = ref<{ count: number; label: string }[]>([]);
@@ -103,10 +118,11 @@ const defaultFormData = {
   subDistrictId: '',
   districtId: '',
   provinceId: '',
-  contact: [{ lineId: '', telephoneNo: '' }],
+  contactName: '',
+  contact: [] as string[],
 };
 
-const formData = ref<BranchCreate & { contact: BranchContactCreate[] }>(
+const formData = ref<BranchCreate & { contact: string[] }>(
   structuredClone(defaultFormData),
 );
 
@@ -140,15 +156,6 @@ function clearData() {
         </div>
       </template>
       <template v-else>
-        <div
-          class="row bordered-b q-pa-md"
-          :style="{
-            color: 'var(--brand-1)',
-            backgroundColor: 'hsla(var(--info-bg) / .1)',
-          }"
-        >
-          <div class="text-h5"><q-icon name="mdi-home"></q-icon></div>
-        </div>
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <div class="tree-container q-pa-md bordered-r">
             <q-tree
@@ -257,8 +264,9 @@ function clearData() {
           </div>
           <div class="branch-wrapper q-pa-md">
             <div class="q-mb-md flex" style="gap: var(--size-4)">
-              <div style="flex-grow: 1">
+              <div style="flex-grow: 1; display: flex; align-items: center">
                 <q-select
+                  v-if="!currentHq.id"
                   outlined
                   v-model="fieldSelectedBranch"
                   :options="
@@ -267,7 +275,25 @@ function clearData() {
                   :label="$t('select')"
                   dense
                 />
+
+                <div v-else class="text-weight-bold text">
+                  {{ $t('branchInHQ') }}
+                  {{ currentHq.code }}
+                </div>
               </div>
+
+              <div
+                style="flex-grow: 1; display: flex; justify-content: flex-end"
+              >
+                <q-input
+                  style="width: 250px"
+                  outlined
+                  dense
+                  label="ค้นหา"
+                  v-model="inputSearch"
+                ></q-input>
+              </div>
+
               <div style="flex-grow: 1">
                 <q-select
                   :options="
@@ -287,13 +313,30 @@ function clearData() {
             <div class="branch-container">
               <BranchCard
                 v-for="item in branchData.result
+                  .filter((v) => {
+                    if (!!currentHq.id && currentHq.id === v.headOfficeId) {
+                      return true;
+                    }
+                    if (fieldSelectedBranch.value === 'all') {
+                      return true;
+                    }
+                    if (fieldSelectedBranch.value === 'branchHQLabel') {
+                      return v.isHeadOffice;
+                    }
+                    if (fieldSelectedBranch.value === 'branchLabel') {
+                      return !v.isHeadOffice;
+                    }
+                    return false;
+                  })
                   .map((v) => ({
                     id: v.id,
                     hq: v.isHeadOffice,
                     branchLabelCode: v.code,
                     branchLabelName:
                       $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                    branchLabelTel: v.telephoneNo,
+                    branchLabelTel: v.contact
+                      .map((c) => c.telephoneNo)
+                      .join(','),
                     branchLabelAddress:
                       $i18n.locale === 'en-US'
                         ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
@@ -302,15 +345,20 @@ function clearData() {
                       v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                     ),
                     branchLabelStatus: v.status,
-                  }))
-                  .filter(
-                    (b) =>
-                      fieldSelectedBranch.value === 'all' ||
-                      b.hq ===
-                        (fieldSelectedBranch.value === 'branchHQLabel'
-                          ? true
-                          : false),
-                  )"
+                  }))"
+                @click="
+                  () => {
+                    if (item.hq) {
+                      fieldSelectedBranch.value = '';
+                      currentHq = {
+                        id: item.id,
+                        code: item.branchLabelCode,
+                      };
+
+                      beforeBranch = currentHq;
+                    }
+                  }
+                "
                 :key="item.id"
                 :data="item"
                 :field-selected="fieldSelected"
@@ -325,6 +373,14 @@ function clearData() {
 </template>
 
 <style scoped>
+.color-icon-arrow {
+  color: var(--gray-3);
+}
+
+.color-icon-plus {
+  color: var(--cyan-6);
+}
+
 .tree-container {
   width: 100%;
   min-width: 300px;