diff --git a/frontend/components/product/ProductVariant.vue b/frontend/components/product/ProductVariant.vue
new file mode 100644
index 0000000..20d8586
--- /dev/null
+++ b/frontend/components/product/ProductVariant.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    isSelected: boolean;
+    variantDetail: ProductVariant;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div
+        :class="[
+            isSelected ? 'border-blue-500' : 'border-slate-300',
+            variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100'
+        ]"
+        class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
+    >
+        <div>
+            <div
+                :class="[
+                    isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300',
+                    variantDetail.in_stock > 0 ? '' : '!ring-slate-100 !bg-slate-300-100'
+                ]"
+                class="size-3 mt-2 ring-2 ring-offset-2 rounded-full "
+            >
+
+            </div>
+        </div>
+        <div class="w-full">
+            <div class="w-full flex justify-between items-center gap-2">
+                <span class="text-xl font-medium">
+                    {{ variantDetail.price }}
+                </span>
+                <div
+                    v-if="variantDetail.discount > 0"
+                    :class="variantDetail.in_stock > 0 ? 'bg-blue-500' :'bg-slate-400/60'"
+                    class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
+                >
+                    <template v-if="variantDetail.in_stock > 0">
+                        <Icon name="material-symbols:percent" class="size-3.5" />
+                        <span class="mt-px">
+                            {{ variantDetail.discount }}
+                        </span>
+                    </template>
+
+                    <span v-else class="mt-px">
+                        اتمام موجودی
+                    </span>
+                </div>
+            </div>
+            <div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
+
+                <div
+                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"
+                >
+                    <span>رنگ</span>
+                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />
+                </div>
+
+                <div
+                    v-for="attribute in variantDetail.product_attributes"
+                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"
+                >
+                    <span>{{ attribute.attribute_type.name }}</span>
+                    <span>{{ attribute.value }}</span>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file