diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index f2a6fa31..6961ac19 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -18,7 +18,11 @@ withDefaults(
 </script>
 
 <template>
-  <div class="full-width rounded" :style="`border:1px solid ${color}`">
+  <div
+    class="full-width rounded hover-card"
+    :style="`border:1px solid ${color}`"
+    @click="$emit('onClick')"
+  >
     <div class="q-pa-md row justify-between items-center">
       <q-btn
         round
@@ -27,7 +31,11 @@ withDefaults(
         flat
         :style="`color:${color};background-color:var(--surface-0)`"
       />
-      <AllAroundBtn :label="'viewDetail'" :color="color" />
+      <AllAroundBtn
+        :label="'viewDetail'"
+        :color="color"
+        @view-detail="$emit('viewDetail')"
+      />
     </div>
     <div class="q-px-md">
       <div class="text-subtitle1 text-bold">{{ title }}</div>
@@ -70,4 +78,10 @@ withDefaults(
   border-radius: 0 0 var(--radius-2) var(--radius-2);
   font-size: 16px;
 }
+
+.hover-card:hover {
+  cursor: pointer;
+  opacity: 0.8;
+  box-shadow: var(--shadow-3);
+}
 </style>