diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index bf0e8868..4bcf87af 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import AppBox from './app/AppBox.vue';
 
+import { CustomerBranch } from 'stores/customer/types';
+
 withDefaults(
   defineProps<{
     noDetail?: boolean;
@@ -19,6 +21,7 @@ withDefaults(
       code: string;
       detail?: { label: string; value: string }[];
     };
+    badge?: CustomerBranch[];
   }>(),
   {
     width: '300px',
@@ -215,12 +218,14 @@ defineEmits<{
         >
           <q-card-section class="q-pa-md">
             <div
-              v-for="v in [1, 2]"
-              :key="v"
+              v-for="(v, i) in badge"
+              :key="v.id"
               class="bordered row q-pa-sm q-mb-sm rounded bg-color-text-1"
             >
-              <div class="col-2 flex flex-center">{{ v }}</div>
-              <div class="col-10 rounded q-pa-sm bg-color-text-2">HQ0001</div>
+              <div class="col-2 flex flex-center">{{ i + 1 }}</div>
+              <div class="col-10 rounded q-pa-sm bg-color-text-2">
+                {{ v.branchNo }}
+              </div>
             </div>
           </q-card-section>
         </q-scroll-area>