diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index f052258..b927d2d 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -9,7 +9,8 @@ import { useImageColor } from "~/composables/global/useImageColor";
 // types
 
 type Props = {
-    id: number;
+    id: number | string;
+    slug: string;
     title: string;
     colors: string[];
     price: string;
@@ -37,7 +38,7 @@ const limitedColors = computed(() => {
 
 <template>
     <li class="w-full">
-        <NuxtLink :to="'/product/' + id">
+        <NuxtLink :to="'/product/' + slug">
             <div class="@container group">
                 <div
                     class="group relative size-full aspect-square rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"