diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b7485046..d795e773 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -25,6 +25,7 @@ import FormBranchContact from 'components/01_branch-management/FormBranchContact
 import FormImage from 'components/01_branch-management/FormImage.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
+import TreeCompoent from 'src/components/TreeCompoent.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -675,268 +676,84 @@ watch(currentHq, () => {
 
                 <div class="col full-width scroll">
                   <div class="q-pa-md">
-                    <q-tree
-                      :nodes="treeData"
+                    <TreeCompoent
+                      v-model:nodes="treeData"
+                      v-model:expanded-tree="expandedTree"
                       node-key="id"
                       label-key="name"
                       children-key="branch"
-                      color="transparent"
-                      v-model:expanded="expandedTree"
-                      style="color: var(--foreground)"
-                    >
-                      <template #default-header="{ node }">
-                        <div
-                          class="full-width q-py-xs"
-                          :class="{
-                            'clickable-node': node.isHeadOffice,
-                            'active-node': expandedTree[0] === node.id,
-                          }"
-                          v-touch-hold.mouse="handleHold(node)"
-                          @click.stop="
-                            () => {
-                              if (
-                                node.isHeadOffice &&
-                                node._count.branch !== 0 &&
-                                currentHq.id === node.id
-                              ) {
-                                expandedTree = expandedTree.filter(
-                                  (i) => node.id !== i,
-                                );
-                                fieldSelectedBranch.value = 'branchHQLabel';
+                      type-tree="branch"
+                      @handle-hold="(v) => handleHold(v)"
+                      @select="
+                        (v) => {
+                          if (
+                            v.isHeadOffice &&
+                            v._count.branch !== 0 &&
+                            currentHq.id === v.id
+                          ) {
+                            expandedTree = expandedTree.filter(
+                              (i) => v.id !== i,
+                            );
+                            fieldSelectedBranch.value = 'branchHQLabel';
 
-                                currentHq = {
-                                  id: '',
-                                  code: '',
-                                };
-                                return;
-                              }
+                            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: '',
-                                };
-                              }
-                            }
-                          "
-                        >
-                          <div
-                            class="row col items-center justify-between full-width no-wrap"
-                          >
-                            <q-icon
-                              v-if="
-                                node.isHeadOffice && node._count.branch !== 0
-                              "
-                              name="mdi-triangle-down"
-                              size="12px"
-                              class="app-text-muted q-mr-md q-ml-sm"
-                              :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
-                            />
-                            <div
-                              class="col row"
-                              :style="`padding-left:${node.isHeadOffice && node._count.branch === 0 ? '36px' : ''}`"
-                            >
-                              <span
-                                class="ellipsis col-12"
-                                style="white-space: nowrap"
-                                :class="{
-                                  'text-weight-bold':
-                                    expandedTree[0] === node.id,
-                                  'app-text-info': expandedTree[0] === node.id,
-                                }"
-                              >
-                                {{ node.name }}
-                              </span>
-                              <span
-                                class="app-text-muted text-caption ellipsis"
-                              >
-                                {{ node.code }}
-                              </span>
-                            </div>
-
-                            <div
-                              class="row q-gutter-xs items-center no-wrap"
-                              @click.stop
-                              v-if="$q.screen.gt.xs"
-                            >
-                              <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"
-                                class="app-text-muted-2"
-                                size="sm"
-                                dense
-                                round
-                                flat
-                              />
-
-                              <q-btn
-                                :id="`view-detail-btn-${node.name}`"
-                                icon="mdi-dots-vertical"
-                                class="app-text-muted-2"
-                                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(
-                                            '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-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 triggerChangeStatus(
-                                                    node.id,
-                                                    node.status,
-                                                  );
-                                                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>
-                      </template>
-                    </q-tree>
+                          if (
+                            v.isHeadOffice &&
+                            v._count.branch !== 0 &&
+                            currentHq.id !== v.id
+                          ) {
+                            expandedTree = [];
+                            expandedTree.push(v.id);
+                            fieldSelectedBranch.value = '';
+                            inputSearch = '';
+                            currentHq = {
+                              id: v.id,
+                              code: v.code,
+                            };
+                            beforeBranch = {
+                              id: '',
+                              code: '',
+                            };
+                          }
+                        }
+                      "
+                      @create="(v) => triggerCreate('subBranch', v.id, v.code)"
+                      @view="
+                        (v) => {
+                          if (v.isHeadOffice) {
+                            triggerEdit('drawer', v.id, 'headOffice', v.code);
+                          } else {
+                            triggerEdit('drawer', v.id, 'subBranch');
+                          }
+                        }
+                      "
+                      @edit="
+                        (v) => {
+                          if (v.isHeadOffice) {
+                            triggerEdit('form', v.id, 'headOffice', v.code);
+                          } else {
+                            triggerEdit('form', v.id, 'subBranch');
+                          }
+                        }
+                      "
+                      @delete="
+                        (v) => {
+                          triggerDelete(v.id);
+                        }
+                      "
+                      @change-status="
+                        async (v) => {
+                          const res = await triggerChangeStatus(v.id, v.status);
+                          if (res) v.status = res.status;
+                        }
+                      "
+                    />
                   </div>
                 </div>
               </div>
@@ -1226,6 +1043,7 @@ watch(currentHq, () => {
                                       );
                                     }
                                   "
+                                  v-close-popup
                                   clickable
                                   dense
                                   class="row q-py-sm"
@@ -1244,6 +1062,7 @@ watch(currentHq, () => {
 
                                 <q-item
                                   :id="`view-detail-btn-${props.row.name}-edit`"
+                                  v-close-popup
                                   clickable
                                   dense
                                   class="row q-py-sm"
@@ -1280,6 +1099,7 @@ watch(currentHq, () => {
                                 <q-item
                                   :id="`view-detail-btn-${props.row.name}-delete`"
                                   dense
+                                  v-close-popup
                                   :clickable="props.row.status === 'CREATED'"
                                   class="row"
                                   :class="{