diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index ffdb1cb6..4592986c 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { baseUrl } from 'src/stores/utils';
+
 defineProps<{
   inactive?: boolean;
   color?: 'none' | 'hq' | 'br';
@@ -22,8 +24,6 @@ defineProps<{
   )[];
   footer?: boolean;
 }>();
-
-const baseUrl = import.meta.env.VITE_API_BASE_URL;
 </script>
 
 <template>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 12caf845..5e770b65 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -17,7 +17,7 @@ import {
 } from 'stores/branch/types';
 import { Status } from 'src/stores/types';
 
-import useUtilsStore, { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog, baseUrl } from 'src/stores/utils';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
@@ -1067,12 +1067,35 @@ watch(currentHq, () => {
                                 margin-bottom: var(--size-2);
                               "
                             >
-                              <div class="branch-card__icon">
-                                <q-icon
+                              <div class="">
+                                <q-img
+                                  :src="
+                                    baseUrl +
+                                    `/branch/${props.row.id}/branch-image`
+                                  "
+                                  style="
+                                    height: 3rem;
+                                    width: 3rem;
+                                    border-radius: 50%;
+                                    aspect-ratio: 1;
+                                    overflow: visible;
+                                  "
+                                >
+                                  <template #error>
+                                    <div class="branch-card__icon">
+                                      <q-icon
+                                        size="sm"
+                                        name="mdi-office-building-outline"
+                                      />
+                                    </div>
+                                  </template>
+                                </q-img>
+
+                                <!-- <q-icon
                                   size="md"
                                   style="scale: 0.8"
                                   name="mdi-office-building-outline"
-                                />
+                                /> -->
                               </div>
                             </div>
                             <div class="col">
@@ -1997,9 +2020,14 @@ watch(currentHq, () => {
 .branch-card__icon {
   background-color: hsla(var(--_branch-card-bg) / 0.15);
   border-radius: 50%;
-  padding: var(--size-1);
+  padding: var(--size-2);
   position: relative;
+  width: 3rem;
   transform: rotate(45deg);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &::after {
     content: ' ';
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index b289f934..c3a15b43 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -4,6 +4,8 @@ import { ComposerTranslation, useI18n } from 'vue-i18n';
 import { defineStore } from 'pinia';
 import { Ref, ref } from 'vue';
 
+export const baseUrl = import.meta.env.VITE_API_BASE_URL;
+
 export function dialog(opts: {
   title: string;
   message: string;