diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0e05fda1..368aed36 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -378,15 +378,20 @@ async function submitForm(
   }
 }
 
-async function fetchCard(id: string) {
+async function fetchCard(id: string, drawer = false) {
   const result = await branchStore.fetchById<Branch>(id);
 
   if (result) {
     showCurrentBranch.value = result;
-    openCardDetails.value = true;
-    openTableCard.value = false;
+
+    if (drawer) openBranchDrawer.value = true;
+    else {
+      openCardDetails.value = true;
+      openTableCard.value = false;
+    }
   }
 }
+
 async function fetchSubBranch(id: string) {
   const result = await branchStore.fetchById<BranchWithChildren>(id, {
     includeSubBranch: true,
@@ -436,7 +441,7 @@ onMounted(async () => {
       class="q-mb-md"
       :class="{ 'bg-card-branch-title': $q.dark.isActive }"
     >
-      <StatCardComponent :branch="branchStats" />
+      <StatCardComponent :branch="branchStats" :dark="$q.dark.isActive" />
     </AppBox>
 
     <AppBox bordered style="width: 100%" v-if="!branchData?.total">
@@ -704,7 +709,7 @@ onMounted(async () => {
           <AppBox>
             <TableCardComponent
               @navigate="(v) => fetchSubBranch(v.id)"
-              @show-info="(v) => fetchCard(v.id)"
+              @show-info="(v) => fetchCard(v.id, !subBranch)"
               :sub-branch="subBranch"
               :rows="rowsBranch"
             />
@@ -726,8 +731,9 @@ onMounted(async () => {
   </div>
 
   <DetailBranchDrawerComponent
+    v-if="showCurrentBranch"
     v-model:open="openBranchDrawer"
-    :data="showCurrentBranch as Branch"
+    :data="showCurrentBranch"
   />
 
   <FormDialog