diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 789a1add..16615f18 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -3,7 +3,7 @@ import { baseUrl } from 'stores/utils';
 
 defineProps<{
   inactive?: boolean;
-  color?: 'none' | 'hq' | 'br';
+  color?: 'none' | 'hq' | 'br' | 'br-virtual';
   data: {
     branchLabelCode: string;
     branchLabelName: string;
@@ -96,6 +96,7 @@ defineProps<{
         'branchLabelTel',
         'branchLabelType',
       ]"
+      :key="key"
       class="branch-card__data"
     >
       <div>{{ $t(`branch.card.${key}`) }}</div>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 6140d56a..373adb67 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1362,7 +1362,13 @@ watch(currentHq, () => {
                             }
                           "
                           :metadata="props.row"
-                          :color="props.row.isHeadOffice ? 'hq' : 'br'"
+                          :color="
+                            props.row.isHeadOffice
+                              ? 'hq'
+                              : props.row.virtual
+                                ? 'br-virtual'
+                                : 'br'
+                          "
                           :key="props.row.id"
                           :data="{
                             branchLabelCode: props.row.code,
@@ -1500,18 +1506,22 @@ watch(currentHq, () => {
         :color="`hsla(var(${
           formTypeBranch === 'headOffice'
             ? '--pink-6'
-            : $q.dark.isActive
-              ? '--violet-10'
-              : '--violet-11'
+            : formData.virtual
+              ? '--blue-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
         }-hsl)/1)`"
         :bg-color="`hsla(var(${
           imageUrl
             ? '--gray-0'
             : formTypeBranch === 'headOffice'
               ? '--pink-6'
-              : $q.dark.isActive
-                ? '--violet-10'
-                : '--violet-11'
+              : formData.virtual
+                ? '--blue-6'
+                : $q.dark.isActive
+                  ? '--violet-10'
+                  : '--violet-11'
         }-hsl)/${imageUrl ? '0' : '0.15'})`"
         :menu="formMenuIcon"
         @view="imageDialog = true"
@@ -1702,18 +1712,22 @@ watch(currentHq, () => {
           :color="`hsla(var(${
             formTypeBranch === 'headOffice'
               ? '--pink-6'
-              : $q.dark.isActive
-                ? '--violet-10'
-                : '--violet-11'
+              : formData.virtual
+                ? '--blue-6'
+                : $q.dark.isActive
+                  ? '--violet-10'
+                  : '--violet-11'
           }-hsl)/1)`"
           :bg-color="`hsla(var(${
             imageUrl
               ? '--gray-0'
               : formTypeBranch === 'headOffice'
                 ? '--pink-6'
-                : $q.dark.isActive
-                  ? '--violet-10'
-                  : '--violet-11'
+                : formData.virtual
+                  ? '--blue-6'
+                  : $q.dark.isActive
+                    ? '--violet-10'
+                    : '--violet-11'
           }-hsl)/${imageUrl ? '0' : '0.15'})`"
           v-model:toggle-status="formData.status"
           @view="imageDialog = true"
@@ -2066,20 +2080,24 @@ watch(currentHq, () => {
           :style="`background: hsla(var(${
             formTypeBranch === 'headOffice'
               ? '--pink-6'
-              : $q.dark.isActive
-                ? '--violet-10'
-                : '--violet-11'
+              : formData.virtual
+                ? '--blue-6'
+                : $q.dark.isActive
+                  ? '--violet-10'
+                  : '--violet-11'
           }-hsl)/0.15)`"
         >
           <q-icon
-            size="15rem"
+            size="3rem"
             name="mdi-office-building-outline"
             :style="`color: hsla(var(${
               formTypeBranch === 'headOffice'
                 ? '--pink-6'
-                : $q.dark.isActive
-                  ? '--violet-10'
-                  : '--violet-11'
+                : formData.virtual
+                  ? '--blue-6'
+                  : $q.dark.isActive
+                    ? '--violet-10'
+                    : '--violet-11'
             }-hsl)/1)`"
           ></q-icon>
         </div>