diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index ce416225..ab17ebcd 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -7,6 +7,7 @@ import { Icon } from '@iconify/vue';
 
 defineProps<{
   list: {
+    id: string;
     name: string;
     detail: { label: string; value: string }[];
     male?: boolean;
@@ -18,6 +19,11 @@ defineProps<{
   detailColumnCount?: number;
 }>();
 
+defineEmits<{
+  (e: 'deleteCard', id: string): void;
+  (e: 'updateCard', id: string): void;
+}>();
+
 const status = ref(false);
 </script>
 
@@ -55,7 +61,11 @@ const status = ref(false);
                     {{ $t('edit') }}
                   </q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup>
+                <q-item
+                  clickable
+                  @click="$emit('deleteCard', v.id)"
+                  v-close-popup
+                >
                   <q-item-section class="col-4">
                     <q-icon
                       class="full-width"