diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index f17ef2d4..d0b93aa8 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -858,54 +858,6 @@ watch(locale, () => {
                       dense
                     />
 
-                    <!-- <q-btn
-                      id="btn-filter"
-                      icon="mdi-tune-vertical-variant"
-                      size="sm"
-                      class="bordered rounded surface-1"
-                      :class="{ 'app-text-info': statusFilter !== 'all' }"
-                      unelevated
-                    >
-                      <q-menu class="bordered">
-                        <q-list v-close-popup dense>
-                          <q-item
-                            id="btn-filter-all"
-                            clickable
-                            class="flex items-center"
-                            :class="{
-                              'app-text-info': statusFilter === 'all',
-                            }"
-                            @click="statusFilter = 'all'"
-                          >
-                            {{ $t('all') }}
-                          </q-item>
-                          <q-item
-                            id="btn-filter-active"
-                            clickable
-                            class="flex items-center"
-                            :class="{
-                              'app-text-info': statusFilter === 'statusACTIVE',
-                            }"
-                            @click="statusFilter = 'statusACTIVE'"
-                          >
-                            {{ $t('statusACTIVE') }}
-                          </q-item>
-                          <q-item
-                            id="btn-filter-inactive"
-                            clickable
-                            class="flex items-center"
-                            :class="{
-                              'app-text-info':
-                                statusFilter === 'statusINACTIVE',
-                            }"
-                            @click="statusFilter = 'statusINACTIVE'"
-                          >
-                            {{ $t('statusINACTIVE') }}
-                          </q-item>
-                        </q-list>
-                      </q-menu>
-                    </q-btn> -->
-
                     <q-btn-toggle
                       v-model="modeView"
                       id="btn-mode"
@@ -1101,8 +1053,20 @@ watch(locale, () => {
                               dense
                               round
                               flat
-                              @click.stop
+                              @click.stop="
+                                () => {
+                                  triggerEdit(
+                                    'drawer',
+                                    props.row.id,
+                                    props.row.isHeadOffice
+                                      ? 'headOffice'
+                                      : 'subBranch',
+                                    props.row.code,
+                                  );
+                                }
+                              "
                             />
+
                             <q-btn
                               icon="mdi-dots-vertical"
                               size="sm"
@@ -1110,7 +1074,152 @@ watch(locale, () => {
                               round
                               flat
                               @click.stop
-                            />
+                            >
+                              <q-menu class="bordered">
+                                <q-list v-close-popup>
+                                  <q-item
+                                    :id="`view-detail-btn-${props.row.name}-view`"
+                                    @click.stop="
+                                      if (props.row.isHeadOffice) {
+                                        triggerEdit(
+                                          'drawer',
+                                          props.row.id,
+                                          'headOffice',
+                                          props.row.code,
+                                        );
+                                      } else {
+                                        triggerEdit(
+                                          'drawer',
+                                          props.row.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-${props.row.name}-edit`"
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                    @click="
+                                      () => {
+                                        if (props.row.isHeadOffice) {
+                                          triggerEdit(
+                                            'form',
+                                            props.row.id,
+                                            'headOffice',
+                                            props.row.code,
+                                          );
+                                        } else {
+                                          triggerEdit(
+                                            'form',
+                                            props.row.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-${props.row.name}-delete`"
+                                    dense
+                                    :clickable="props.row.status === 'CREATED'"
+                                    class="row"
+                                    :class="{
+                                      'surface-3':
+                                        props.row.status !== 'CREATED',
+                                      'app-text-muted':
+                                        props.row.status !== 'CREATED',
+                                    }"
+                                    style="white-space: nowrap"
+                                    @click="triggerDelete(props.row.id)"
+                                  >
+                                    <q-icon
+                                      name="mdi-trash-can-outline"
+                                      size="xs"
+                                      class="col-3"
+                                      :class="{
+                                        'app-text-negative':
+                                          props.row.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-${props.row.name}-status`"
+                                          dense
+                                          size="sm"
+                                          :label="
+                                            props.row.status !== 'INACTIVE'
+                                              ? $t('switchOnLabel')
+                                              : $t('switchOffLabel')
+                                          "
+                                          @click="
+                                            async () => {
+                                              const res =
+                                                await branchStore.editById(
+                                                  props.row.id,
+                                                  {
+                                                    status:
+                                                      props.row.status !==
+                                                      'INACTIVE'
+                                                        ? 'INACTIVE'
+                                                        : 'ACTIVE',
+                                                  },
+                                                );
+                                              if (res)
+                                                props.row.status = res.status;
+                                            }
+                                          "
+                                          :model-value="
+                                            props.row.status === 'CREATED' ||
+                                            props.row.status === 'ACTIVE'
+                                          "
+                                        />
+                                      </div>
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
                           </q-td>
                         </q-tr>
                       </template>
@@ -1170,7 +1279,154 @@ watch(locale, () => {
                                 );
                               }
                             "
-                          />
+                          >
+                            <template v-slot:action>
+                              <q-menu class="bordered">
+                                <q-list v-close-popup>
+                                  <q-item
+                                    :id="`view-detail-btn-${props.row.name}-view`"
+                                    @click.stop="
+                                      if (props.row.isHeadOffice) {
+                                        triggerEdit(
+                                          'drawer',
+                                          props.row.id,
+                                          'headOffice',
+                                          props.row.code,
+                                        );
+                                      } else {
+                                        triggerEdit(
+                                          'drawer',
+                                          props.row.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-${props.row.name}-edit`"
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                    @click="
+                                      () => {
+                                        if (props.row.isHeadOffice) {
+                                          triggerEdit(
+                                            'form',
+                                            props.row.id,
+                                            'headOffice',
+                                            props.row.code,
+                                          );
+                                        } else {
+                                          triggerEdit(
+                                            'form',
+                                            props.row.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-${props.row.name}-delete`"
+                                    dense
+                                    :clickable="props.row.status === 'CREATED'"
+                                    class="row"
+                                    :class="{
+                                      'surface-3':
+                                        props.row.status !== 'CREATED',
+                                      'app-text-muted':
+                                        props.row.status !== 'CREATED',
+                                    }"
+                                    style="white-space: nowrap"
+                                    @click="triggerDelete(props.row.id)"
+                                  >
+                                    <q-icon
+                                      name="mdi-trash-can-outline"
+                                      size="xs"
+                                      class="col-3"
+                                      :class="{
+                                        'app-text-negative':
+                                          props.row.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-${props.row.name}-status`"
+                                          dense
+                                          size="sm"
+                                          :label="
+                                            props.row.status !== 'INACTIVE'
+                                              ? $t('switchOnLabel')
+                                              : $t('switchOffLabel')
+                                          "
+                                          @click="
+                                            async () => {
+                                              const res =
+                                                await branchStore.editById(
+                                                  props.row.id,
+                                                  {
+                                                    status:
+                                                      props.row.status !==
+                                                      'INACTIVE'
+                                                        ? 'INACTIVE'
+                                                        : 'ACTIVE',
+                                                  },
+                                                );
+                                              if (res)
+                                                props.row.status = res.status;
+                                            }
+                                          "
+                                          :model-value="
+                                            props.row.status === 'CREATED' ||
+                                            props.row.status === 'ACTIVE'
+                                          "
+                                        />
+                                      </div>
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </template>
+                          </BranchCard>
                         </div>
                       </template>
                     </q-table>