diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index 7cec2e45..bb79f8c5 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -52,6 +52,7 @@ const currentCustomerUrlImage = defineModel<string | null>(
 );
 
 const currentStatus = ref<Status | 'All'>('All');
+const currentBtnOpen = ref<boolean[]>([]);
 const totalBranch = ref(0);
 
 const currentPageBranch = ref<number>(1);
@@ -83,6 +84,10 @@ onMounted(async () => {
   customerBranchFormState.value.currentCustomerId = parts[4];
 
   await fetchList();
+
+  branch.value?.forEach((v) => {
+    currentBtnOpen.value.push(false);
+  });
 });
 
 const columns = [
@@ -451,12 +456,19 @@ watch([customerId, inputSearch, currentStatus], async () => {
                 dense
                 round
                 flat
-                @click="() => {}"
+                @click="
+                  () => {
+                    currentBtnOpen[props.rowIndex] =
+                      !currentBtnOpen[props.rowIndex];
+                  }
+                "
               />
             </q-td>
           </q-tr>
 
-          <q-tr>asdadadasd</q-tr>
+          <q-tr v-if="currentBtnOpen[props.rowIndex]" class="q-pa-sm">
+            {{ props.rowIndex }}
+          </q-tr>
         </template>
         <template #item="props">
           <div class="col-12 col-md-6">