diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 6aa47567..7309a511 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -65,6 +65,7 @@ const columns = [
 const modal = ref<boolean>(false);
 const hideStat = ref(false);
 const currentStatus = ref<Status | 'All'>('All');
+const expandedTree = ref<string[]>([]);
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
@@ -594,186 +595,235 @@ watch(locale, () => {
                 </div>
 
                 <div class="col">
-                  <div class="scroll">
+                  <div class="scroll q-pa-md">
                     <q-tree
                       :nodes="treeData"
                       node-key="id"
                       label-key="name"
                       children-key="branch"
+                      v-model:expanded="expandedTree"
+                      color="info"
                       style="color: var(--foreground)"
                     >
                       <template #default-header="{ node }">
-                        <div
-                          class="row items-center justify-between full-width no-wrap"
-                        >
-                          <span>{{ node.name }}</span>
+                        <div class="column full-width">
                           <div
-                            class="row q-gutter-xs items-center no-wrap"
-                            @click.stop
+                            class="row col items-center justify-between full-width no-wrap"
+                            @click.stop="
+                              () => {
+                                if (
+                                  node.isHeadOffice &&
+                                  node._count.branch !== 0 &&
+                                  currentHq.id === node.id
+                                ) {
+                                  expandedTree = expandedTree.filter(
+                                    (i) => node.id !== i,
+                                  );
+                                  fieldSelectedBranch.value = 'branchHQLabel';
+
+                                  currentHq = {
+                                    id: '',
+                                    code: '',
+                                  };
+                                  return;
+                                }
+
+                                if (
+                                  node.isHeadOffice &&
+                                  node._count.branch !== 0 &&
+                                  currentHq.id !== node.id
+                                ) {
+                                  expandedTree = [];
+                                  expandedTree.push(node.id);
+                                  fieldSelectedBranch.value = '';
+                                  inputSearch = '';
+                                  currentHq = {
+                                    id: node.id,
+                                    code: node.code,
+                                  };
+                                  beforeBranch = {
+                                    id: '',
+                                    code: '',
+                                  };
+                                }
+                              }
+                            "
                           >
-                            <q-btn
-                              v-if="node.isHeadOffice"
-                              :id="`create-sub-branch-btn-${node.name}`"
-                              @click.stop="
-                                triggerCreate('subBranch', node.id, node.code)
-                              "
-                              icon="mdi-file-plus-outline"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                            />
-
-                            <q-btn
-                              :id="`view-detail-btn-${node.name}`"
-                              icon="mdi-dots-vertical"
-                              size="sm"
-                              dense
-                              round
-                              flat
+                            <span>{{ node.name }}</span>
+                            <div
+                              class="row q-gutter-xs items-center no-wrap"
+                              @click.stop
                             >
-                              <q-menu class="bordered">
-                                <q-list v-close-popup>
-                                  <q-item
-                                    :id="`view-detail-btn-${node.name}-view`"
-                                    @click.stop="
-                                      if (node.isHeadOffice) {
-                                        triggerEdit(
-                                          'drawer',
-                                          node.id,
-                                          'headOffice',
-                                          node.code,
-                                        );
-                                      } else {
-                                        triggerEdit(
-                                          'drawer',
-                                          node.id,
-                                          'subBranch',
-                                        );
-                                      }
-                                    "
-                                    clickable
-                                    dense
-                                    class="row q-py-sm"
-                                    style="white-space: nowrap"
-                                  >
-                                    <q-icon
-                                      name="mdi-eye-outline"
-                                      class="col-3"
-                                      size="xs"
-                                      style="color: hsl(var(--green-6-hsl))"
-                                    />
-                                    <span
-                                      class="col-9 q-px-md flex items-center"
-                                    >
-                                      {{ $t('viewDetail') }}
-                                    </span>
-                                  </q-item>
+                              <q-btn
+                                v-if="node.isHeadOffice"
+                                :id="`create-sub-branch-btn-${node.name}`"
+                                @click.stop="
+                                  triggerCreate('subBranch', node.id, node.code)
+                                "
+                                icon="mdi-file-plus-outline"
+                                size="sm"
+                                dense
+                                round
+                                flat
+                              />
 
-                                  <q-item
-                                    :id="`view-detail-btn-${node.name}-edit`"
-                                    clickable
-                                    dense
-                                    class="row q-py-sm"
-                                    style="white-space: nowrap"
-                                    @click="
-                                      () => {
+                              <q-btn
+                                :id="`view-detail-btn-${node.name}`"
+                                icon="mdi-dots-vertical"
+                                size="sm"
+                                dense
+                                round
+                                flat
+                              >
+                                <q-menu class="bordered">
+                                  <q-list v-close-popup>
+                                    <q-item
+                                      :id="`view-detail-btn-${node.name}-view`"
+                                      @click.stop="
                                         if (node.isHeadOffice) {
                                           triggerEdit(
-                                            'form',
+                                            'drawer',
                                             node.id,
                                             'headOffice',
                                             node.code,
                                           );
                                         } else {
                                           triggerEdit(
-                                            'form',
+                                            'drawer',
                                             node.id,
                                             'subBranch',
                                           );
                                         }
-                                      }
-                                    "
-                                  >
-                                    <q-icon
-                                      name="mdi-pencil-outline"
-                                      class="col-3"
-                                      size="xs"
-                                      style="color: hsl(var(--cyan-6-hsl))"
-                                    />
-                                    <span
-                                      class="col-9 q-px-md flex items-center"
+                                      "
+                                      clickable
+                                      dense
+                                      class="row q-py-sm"
+                                      style="white-space: nowrap"
                                     >
-                                      {{ $t('edit') }}
-                                    </span>
-                                  </q-item>
-                                  <q-item
-                                    :id="`view-detail-btn-${node.name}-delete`"
-                                    dense
-                                    :clickable="node.status === 'CREATED'"
-                                    class="row"
-                                    :class="{
-                                      'surface-3': node.status !== 'CREATED',
-                                      'app-text-muted':
-                                        node.status !== 'CREATED',
-                                    }"
-                                    style="white-space: nowrap"
-                                    @click="triggerDelete(node.id)"
-                                  >
-                                    <q-icon
-                                      name="mdi-trash-can-outline"
-                                      size="xs"
-                                      class="col-3"
-                                      :class="{
-                                        'app-text-negative':
-                                          node.status === 'CREATED',
-                                      }"
-                                    />
-                                    <span
-                                      class="col-9 q-px-md flex items-center"
-                                    >
-                                      {{ $t('delete') }}
-                                    </span>
-                                  </q-item>
+                                      <q-icon
+                                        name="mdi-eye-outline"
+                                        class="col-3"
+                                        size="xs"
+                                        style="color: hsl(var(--green-6-hsl))"
+                                      />
+                                      <span
+                                        class="col-9 q-px-md flex items-center"
+                                      >
+                                        {{ $t('viewDetail') }}
+                                      </span>
+                                    </q-item>
 
-                                  <q-item dense>
-                                    <q-item-section class="q-py-sm">
-                                      <div class="q-pa-sm surface-2 rounded">
-                                        <q-toggle
-                                          :id="`view-detail-btn-${node.name}-status`"
-                                          dense
-                                          size="sm"
-                                          :label="
-                                            node.status !== 'INACTIVE'
-                                              ? $t('switchOnLabel')
-                                              : $t('switchOffLabel')
-                                          "
-                                          @click="
-                                            async () => {
-                                              const res =
-                                                await branchStore.editById(
-                                                  node.id,
-                                                  {
-                                                    status:
-                                                      node.status !== 'INACTIVE'
-                                                        ? 'INACTIVE'
-                                                        : 'ACTIVE',
-                                                  },
-                                                );
-                                              if (res) node.status = res.status;
-                                            }
-                                          "
-                                          :model-value="
-                                            node.status === 'CREATED' ||
-                                            node.status === 'ACTIVE'
-                                          "
-                                        />
-                                      </div>
-                                    </q-item-section>
-                                  </q-item>
-                                </q-list>
-                              </q-menu>
-                            </q-btn>
+                                    <q-item
+                                      :id="`view-detail-btn-${node.name}-edit`"
+                                      clickable
+                                      dense
+                                      class="row q-py-sm"
+                                      style="white-space: nowrap"
+                                      @click="
+                                        () => {
+                                          if (node.isHeadOffice) {
+                                            triggerEdit(
+                                              'form',
+                                              node.id,
+                                              'headOffice',
+                                              node.code,
+                                            );
+                                          } else {
+                                            triggerEdit(
+                                              'form',
+                                              node.id,
+                                              'subBranch',
+                                            );
+                                          }
+                                        }
+                                      "
+                                    >
+                                      <q-icon
+                                        name="mdi-pencil-outline"
+                                        class="col-3"
+                                        size="xs"
+                                        style="color: hsl(var(--cyan-6-hsl))"
+                                      />
+                                      <span
+                                        class="col-9 q-px-md flex items-center"
+                                      >
+                                        {{ $t('edit') }}
+                                      </span>
+                                    </q-item>
+                                    <q-item
+                                      :id="`view-detail-btn-${node.name}-delete`"
+                                      dense
+                                      :clickable="node.status === 'CREATED'"
+                                      class="row"
+                                      :class="{
+                                        'surface-3': node.status !== 'CREATED',
+                                        'app-text-muted':
+                                          node.status !== 'CREATED',
+                                      }"
+                                      style="white-space: nowrap"
+                                      @click="triggerDelete(node.id)"
+                                    >
+                                      <q-icon
+                                        name="mdi-trash-can-outline"
+                                        size="xs"
+                                        class="col-3"
+                                        :class="{
+                                          'app-text-negative':
+                                            node.status === 'CREATED',
+                                        }"
+                                      />
+                                      <span
+                                        class="col-9 q-px-md flex items-center"
+                                      >
+                                        {{ $t('delete') }}
+                                      </span>
+                                    </q-item>
+
+                                    <q-item dense>
+                                      <q-item-section class="q-py-sm">
+                                        <div class="q-pa-sm surface-2 rounded">
+                                          <q-toggle
+                                            :id="`view-detail-btn-${node.name}-status`"
+                                            dense
+                                            size="sm"
+                                            :label="
+                                              node.status !== 'INACTIVE'
+                                                ? $t('switchOnLabel')
+                                                : $t('switchOffLabel')
+                                            "
+                                            @click="
+                                              async () => {
+                                                const res =
+                                                  await branchStore.editById(
+                                                    node.id,
+                                                    {
+                                                      status:
+                                                        node.status !==
+                                                        'INACTIVE'
+                                                          ? 'INACTIVE'
+                                                          : 'ACTIVE',
+                                                    },
+                                                  );
+                                                if (res)
+                                                  node.status = res.status;
+                                              }
+                                            "
+                                            :model-value="
+                                              node.status === 'CREATED' ||
+                                              node.status === 'ACTIVE'
+                                            "
+                                          />
+                                        </div>
+                                      </q-item-section>
+                                    </q-item>
+                                  </q-list>
+                                </q-menu>
+                              </q-btn>
+                            </div>
+                          </div>
+
+                          <div class="row col items-center app-text-muted">
+                            {{ node.code }}
                           </div>
                         </div>
                       </template>
@@ -1683,6 +1733,14 @@ watch(locale, () => {
   opacity: 0;
 }
 
+:deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
+  color: var(--foreground);
+}
+
+:deep(.q-tree__node-header:before) {
+  color: var(--foreground);
+}
+
 :deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
   padding-block: 8px;
 }
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index f7a618e3..4338cbf7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1678,6 +1678,8 @@ watch([inputSearch, currentStatus], async () => {
               style="white-space: nowrap"
             >
               <q-select
+                id="select-status"
+                for="select-status"
                 v-model="currentStatus"
                 outlined
                 dense
@@ -1694,8 +1696,8 @@ watch([inputSearch, currentStatus], async () => {
                 ]"
               ></q-select>
               <q-select
-                v-if="modeView === false"
                 id="select-field"
+                v-if="modeView === false"
                 for="select-field"
                 class="q-mx-sm col"
                 :options="
@@ -1729,6 +1731,7 @@ watch([inputSearch, currentStatus], async () => {
               >
                 <template v-slot:folder>
                   <q-icon
+                    id="icon-mode-grid"
                     name="mdi-view-grid-outline"
                     size="16px"
                     class="q-px-sm q-py-xs rounded"
@@ -1745,6 +1748,7 @@ watch([inputSearch, currentStatus], async () => {
                 </template>
                 <template v-slot:list>
                   <q-icon
+                    id="icon-mode-list"
                     name="mdi-format-list-bulleted"
                     class="q-px-sm q-py-xs rounded"
                     size="16px"