diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index ed2bbdb6..ff2c8a35 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -60,7 +60,7 @@ onMounted(async () => {
 watch(locale, () => {
   console.log(locale.value);
 });
-
+const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref([
   'branchLabelName',
   'branchLabelTel',
@@ -69,6 +69,14 @@ const fieldDisplay = ref([
   'branchLabelStatus',
 ]);
 const fieldSelected = ref<string[]>(fieldDisplay.value);
+const fieldSelectedBranch = ref<{
+  label: string;
+  value: string;
+}>({
+  label: 'ทั้งหมด',
+  value: 'all',
+});
+
 const stats = ref<{ count: number; label: string }[]>([]);
 
 const defaultFormData = {
@@ -155,16 +163,12 @@ function clearData() {
             <div class="q-mb-md flex" style="gap: var(--size-4)">
               <div style="flex-grow: 1">
                 <q-select
-                  :options="
-                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
-                  "
-                  v-model="fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
                   outlined
-                  multiple
+                  v-model="fieldSelectedBranch"
+                  :options="
+                    fieldBranch.map((v) => ({ label: $t(v), value: v }))
+                  "
+                  :label="$t('select')"
                   dense
                 />
               </div>
@@ -186,21 +190,31 @@ function clearData() {
             </div>
             <div class="branch-container">
               <BranchCard
-                v-for="item in branchData.result.map((v) => ({
-                  id: v.id,
-                  hq: v.isHeadOffice,
-                  branchLabelCode: v.code,
-                  branchLabelName: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                  branchLabelTel: v.telephoneNo,
-                  branchLabelAddress:
-                    $i18n.locale === 'en-US'
-                      ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
-                      : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
-                  branchLabelType: $t(
-                    v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
-                  ),
-                  branchLabelStatus: v.status,
-                }))"
+                v-for="item in branchData.result
+                  .map((v) => ({
+                    id: v.id,
+                    hq: v.isHeadOffice,
+                    branchLabelCode: v.code,
+                    branchLabelName:
+                      $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                    branchLabelTel: v.telephoneNo,
+                    branchLabelAddress:
+                      $i18n.locale === 'en-US'
+                        ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
+                        : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
+                    branchLabelType: $t(
+                      v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
+                    ),
+                    branchLabelStatus: v.status,
+                  }))
+                  .filter(
+                    (b) =>
+                      fieldSelectedBranch.value === 'all' ||
+                      b.hq ===
+                        (fieldSelectedBranch.value === 'branchHQLabel'
+                          ? true
+                          : false),
+                  )"
                 :key="item.id"
                 :data="item"
                 :field-selected="fieldSelected"