diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 56e2d65b..e262d354 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -448,8 +448,6 @@ async function triggerEdit(
       currentHq.value = currentEdit.value;
     }
   }
-  console.log(formData.value);
-
   formTypeBranch.value = typeBranch;
 }
 
@@ -468,6 +466,17 @@ function triggerDelete(id: string) {
         modalDrawer.value = false;
         await calculateStats();
 
+        const branchLength = treeData.value.find(
+          (node) => node.id === expandedTree.value[0],
+        )?.branch.length;
+        if (branchLength === 0) {
+          expandedTree.value = [];
+          fieldSelectedBranch.value.value = 'branchHQLabel';
+          currentHq.value = {
+            id: '',
+            code: '',
+          };
+        }
         flowStore.rotate();
       },
       cancel: () => {},
@@ -1535,8 +1544,20 @@ watch(currentHq, () => {
         :hideFade="imageUrl === '' || imageUrl === null"
         :img="imageUrl || null"
         icon="mdi-office-building-outline"
-        color="hsla(var(--pink-6-hsl)/1)"
-        bgColor="hsla(var(--pink-6-hsl)/0.15)"
+        :color="`hsla(var(${
+          formTypeBranch === 'headOffice'
+            ? '--pink-6'
+            : $q.dark.isActive
+              ? '--violet-10'
+              : '--violet-11'
+        }-hsl)/1)`"
+        :bg-color="`hsla(var(${
+          formTypeBranch === 'headOffice'
+            ? '--pink-6'
+            : $q.dark.isActive
+              ? '--violet-10'
+              : '--violet-11'
+        }-hsl)/0.15)`"
         :menu="formMenuIcon"
         @view="imageDialog = true"
         @edit="refImageUpload && refImageUpload.browse()"
@@ -1702,8 +1723,20 @@ watch(currentHq, () => {
           :title="formData.name"
           :caption="formData.code"
           icon="mdi-office-building-outline"
-          color="hsla(var(--pink-6-hsl)/1)"
-          bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          :color="`hsla(var(${
+            formTypeBranch === 'headOffice'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/1)`"
+          :bg-color="`hsla(var(${
+            formTypeBranch === 'headOffice'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/0.15)`"
           v-model:toggle-status="formData.status"
           @view="imageDialog = true"
           @edit="refImageUpload && refImageUpload.browse()"
@@ -1993,12 +2026,24 @@ watch(currentHq, () => {
       <div class="full-height full-width" style="background: white">
         <div
           class="full-height full-width flex justify-center items-center"
-          style="background: hsla(var(--pink-6-hsl) / 0.15)"
+          :style="`background: hsla(var(${
+            formTypeBranch === 'headOffice'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/0.15)`"
         >
           <q-icon
             size="15rem"
             name="mdi-office-building-outline"
-            style="color: hsla(var(--pink-6-hsl) / 1)"
+            :style="`color: hsla(var(${
+              formTypeBranch === 'headOffice'
+                ? '--pink-6'
+                : $q.dark.isActive
+                  ? '--violet-10'
+                  : '--violet-11'
+            }-hsl)/1)`"
           ></q-icon>
         </div>
       </div>