diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 440551f0..57ea8d13 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -78,8 +78,8 @@ const currentHq = ref<{ id: string; code: string }>({
   code: '',
 });
 
-const beforeBranch = ref<{ id: string | undefined; code: string }>({
-  id: undefined,
+const beforeBranch = ref<{ id: string; code: string }>({
+  id: '',
   code: '',
 });
 
@@ -158,109 +158,175 @@ function clearData() {
       <template v-else>
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <div class="tree-container q-pa-md bordered-r">
-            <q-tree
-              :nodes="treeData"
-              node-key="id"
-              label-key="name"
-              children-key="branch"
-            >
-              <template #default-header="{ node }">
-                <div class="row items-center justify-between full-width">
-                  <span>{{ node.name }}</span>
-                  <div class="q-gutter-xs" @click.stop>
-                    <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
-                    <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
-                      <q-menu class="bordered">
-                        <q-list v-close-popup>
-                          <q-item
-                            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
-                            clickable
-                            dense
-                            class="row q-py-sm"
-                            style="white-space: nowrap"
-                          >
-                            <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
-                            dense
-                            clickable
-                            class="row"
-                            style="white-space: nowrap"
-                          >
-                            <q-icon
-                              name="mdi-trash-can-outline"
-                              size="xs"
-                              class="col-3"
-                              style="color: hsl(var(--red-6-hsl))"
-                            />
-                            <span class="col-9 q-px-md flex items-center">
-                              {{ $t('delete') }}
-                            </span>
-                          </q-item>
+            <div class="row">
+              <Icon
+                icon="ep:arrow-left-bold"
+                width="21px"
+                class="q-mr-sm"
+                :class="{
+                  'color-icon-arrow ': !currentHq.id,
+                  'cursor-pointer': currentHq.id,
+                }"
+                @click="
+                  () => {
+                    if (currentHq.id) {
+                      beforeBranch = currentHq;
+                      currentHq = { id: '', code: '' };
+                      fieldSelectedBranch = {
+                        label: t('branchHQLabel'),
+                        value: 'branchHQLabel',
+                      };
+                    }
+                  }
+                "
+              />
 
-                          <q-item dense>
-                            <q-item-section class="q-py-sm">
-                              <div class="q-pa-sm surface-2 rounded">
-                                <q-toggle
-                                  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>
+              <Icon
+                icon="ep:arrow-right-bold"
+                width="21px"
+                class="q-mr-md"
+                :class="{
+                  'color-icon-arrow ': !beforeBranch.id,
+                  'cursor-pointer': beforeBranch.id,
+                }"
+                @click="
+                  () => {
+                    if (beforeBranch.id) {
+                      currentHq = beforeBranch;
+                      beforeBranch = { id: '', code: '' };
+                      fieldSelectedBranch = {
+                        label: '',
+                        value: '',
+                      };
+                    }
+                  }
+                "
+              />
+
+              <q-space />
+
+              <Icon
+                icon="pixelarticons:plus"
+                height="26"
+                class="color-icon-plus cursor-pointer"
+              />
+            </div>
+
+            <div class="bordered rounded q-mt-md">
+              <div
+                class="bordered-b q-pl-sm text-weight-bold surface-0"
+                style="height: 50px; display: flex; align-items: center"
+              >
+                <Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
+                ทั้งหมด
+              </div>
+
+              <q-tree
+                :nodes="treeData"
+                node-key="id"
+                label-key="name"
+                children-key="branch"
+              >
+                <template #default-header="{ node }">
+                  <div
+                    class="row items-center justify-between full-width no-wrap"
+                  >
+                    <span>{{ node.name }}</span>
+                    <div class="q-gutter-xs flex no-wrap" @click.stop>
+                      <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
+                      <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
+                        <q-menu class="bordered">
+                          <q-list v-close-popup>
+                            <q-item
+                              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
+                              clickable
+                              dense
+                              class="row q-py-sm"
+                              style="white-space: nowrap"
+                            >
+                              <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
+                              dense
+                              clickable
+                              class="row"
+                              style="white-space: nowrap"
+                            >
+                              <q-icon
+                                name="mdi-trash-can-outline"
+                                size="xs"
+                                class="col-3"
+                                style="color: hsl(var(--red-6-hsl))"
+                              />
+                              <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
+                                    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>
-              </template>
-            </q-tree>
+                </template>
+              </q-tree>
+            </div>
           </div>
           <div class="branch-wrapper q-pa-md">
             <div class="q-mb-md flex" style="gap: var(--size-4)">
@@ -355,7 +421,10 @@ function clearData() {
                         code: item.branchLabelCode,
                       };
 
-                      beforeBranch = currentHq;
+                      beforeBranch = {
+                        id: '',
+                        code: '',
+                      };
                     }
                   }
                 "