diff --git a/ui/src/pages/memberList.vue b/ui/src/pages/memberList.vue
index 1a8e369..45033dd 100644
--- a/ui/src/pages/memberList.vue
+++ b/ui/src/pages/memberList.vue
@@ -31,6 +31,7 @@ import Badge from "@/components/ui/badge/Badge.vue";
 import Input from "@/components/ui/input/Input.vue";
 import Spinner from "@/components/ui/spinner/Spinner.vue";
 import DischargeMember from "@/components/members/DischargeMember.vue";
+import MemberCard from "@/components/members/MemberCard.vue";
 
 // --- State ---
 const router = useRouter();
@@ -221,7 +222,8 @@ function handleDischargeSuccess(data) {
                         <template v-if="isLoaded">
                             <TableRow v-for="member in paginatedMembers" :key="member.member_id"
                                 class="group cursor-pointer hover:bg-muted/30 transition-colors">
-                                <TableCell class="font-medium py-4">{{ member.member_name }}</TableCell>
+                                <TableCell class="font-medium"><MemberCard :member-id="member.member_id"></MemberCard></TableCell>
+                                <!-- <TableCell class="font-medium py-4">{{ member.displayName || member.member_name }}</TableCell> -->
                                 <TableCell>{{ member.rank }}</TableCell>
                                 <TableCell>{{ member.unit }}</TableCell>
                                 <TableCell>