diff --git a/frontend/components/product/ProductCard.vue b/frontend/components/product/ProductCard.vue
new file mode 100644
index 0000000..00051b8
--- /dev/null
+++ b/frontend/components/product/ProductCard.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+
+// import
+
+import Tag from "~/components/ui/Tag.vue";
+import Rate from "~/components/ui/Rate.vue";
+import ColorCircle from "~/components/ui/ColorCircle.vue";
+
+// types
+
+type Props = {
+    brand: string;
+    title: string;
+    colors: string[];
+    price: number;
+    picture: string;
+    tag?: string;
+    rate?: number;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div class="relative h-[500px] w-[400px] rounded-2xl bg-black/10 overflow-hidden p-6">
+        <img
+            src="~/assets/img/product-2.jpg"
+            class="size-full object-cover absolute inset-0"
+            alt="product-background"
+        />
+        <div class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0">
+            <Rate v-if="rate">
+                {{ rate }}
+            </Rate>
+            <Tag v-if="tag">
+                {{ tag }}
+            </Tag>
+        </div>
+        <div class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center">
+            <span class="typo-p-md">
+                ${{ price }}
+            </span>
+            <div class="flex flex-col gap-2 items-end">
+                <span class="typo-p-md ">
+                    {{ brand }}
+                </span>
+                <span class="typo-sub-h-md">
+                    {{ title }}
+                </span>
+                <div class="flex items-center gap-2 mt-1">
+                    <ColorCircle
+                        v-for="color in colors"
+                        :key="color"
+                        :style="{backgroundColor: color}"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file