diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 3e6ad422..bb67b394 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -11,6 +11,7 @@ defineProps<{
     branchLabelStatus: string;
   };
   fieldSelected?: string[];
+  inactive?: boolean;
 }>();
 </script>
 
@@ -18,6 +19,7 @@ defineProps<{
   <div
     class="branch-card rounded bordered"
     :class="{
+      'branch-card__inactive': inactive,
       'branch-card__hq': data.hq,
       'branch-card__br': !data.hq,
     }"
@@ -45,10 +47,11 @@ defineProps<{
         <q-btn
           @click="$emit('view-detail', data)"
           :label="$t('viewDetail')"
+          rounded
           outline
           dense
           no-caps
-          class="q-px-md"
+          class="q-px-md text-caption"
           v-if="i === 0"
         />
       </div>
@@ -69,6 +72,11 @@ defineProps<{
     --_branch-card-row-bg: var(--violet-11-hsl);
   }
 
+  &.branch-card__inactive {
+    filter: grayscale(100%);
+    opacity: 0.6;
+  }
+
   display: flex;
   flex-direction: column;
   overflow: hidden;