diff --git a/src/components/01_branch-management/TableCardComponent.vue b/src/components/01_branch-management/TableCardComponent.vue
index c2ba92b6..a6e06a8b 100644
--- a/src/components/01_branch-management/TableCardComponent.vue
+++ b/src/components/01_branch-management/TableCardComponent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { QTableProps } from 'quasar';
 import { ref } from 'vue';
 
@@ -10,9 +11,9 @@ const props = defineProps<{
     name: string;
     branchName: string;
     address: string;
-    phonNumber: string;
-    Headquarters: string;
-    type: string;
+    telephoneNo: string;
+    code: string;
+    type: boolean;
     status: string;
   }[];
 }>();
@@ -35,8 +36,8 @@ const columns = [
     sortable: true,
   },
   { name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
-  { name: 'phonNumber', label: 'เบอร์โทร', field: 'phonNumber' },
-  { name: 'Headquarters', label: 'สำนักงานใหญ่', field: 'Headquarters' },
+  { name: 'telephoneNo', label: 'เบอร์โทร', field: 'telephoneNo' },
+  { name: 'code', label: 'สำนักงานใหญ่', field: 'code' },
   { name: 'type', label: 'ประเภท', field: 'type' },
   { name: 'status', label: 'สถานะ', field: 'status' },
 ] satisfies QTableProps['columns'];
@@ -58,7 +59,7 @@ const filter = ref('');
       hide-header
     >
       <template v-slot:item="prop">
-        <div class="q-pr-sm">
+        <div class="q-pr-sm q-pb-md">
           <q-card class="bordered" style="width: 340px">
             <q-item
               class="bordered"
@@ -77,14 +78,31 @@ const filter = ref('');
 
               <q-item-section>
                 <div class="row">
-                  {{ v }}
+                  <div v-if="k !== 'type'">
+                    {{ v }}
+                  </div>
+                  <div v-else>
+                    <div v-if="v">สำนักงานใหญ่</div>
+                    <div v-else>สาขา</div>
+                  </div>
+
                   <q-space />
 
-                  <iconify-icon
-                    class="cursor-pointer"
-                    v-if="i === 0"
-                    width="20px"
+                  <q-space />
+
+                  <Icon
                     icon="mdi:navigate-next"
+                    class="cursor-pointer"
+                    v-if="i === 0 && !subBranch"
+                    width="20px"
+                    @click="$emit('navigate', prop.row)"
+                  />
+                  <Icon
+                    icon="mdi:navigate-next"
+                    class="cursor-pointer"
+                    v-if="i === 0 && subBranch"
+                    width="20px"
+                    @click="$emit('showCard', prop.row)"
                   />
                 </div>
               </q-item-section>