diff --git a/frontend/components/product/ProductVariant.vue b/frontend/components/product/ProductVariant.vue
index 4f06799..3e16e09 100644
--- a/frontend/components/product/ProductVariant.vue
+++ b/frontend/components/product/ProductVariant.vue
@@ -34,7 +34,7 @@ defineProps<Props>();
         </div>
         <div class="w-full">
             <div class="w-full flex justify-between items-center gap-2">
-                <span class="text-xl font-medium">
+                <span class="text-md sm:text-xl font-medium">
                     {{ variantDetail.price }}
                 </span>
                 <div
@@ -68,7 +68,7 @@ defineProps<Props>();
 
                 <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]"
+                    class="flex items-center gap-2 text-xs sm:text-sm rounded-full border border-slate-400 px-3 sm:px-4 h-[35px] sm:h-[40px]"
                 >
                     <span>{{ attribute.attribute_type.name }}</span>
                     <span>{{ attribute.value }}</span>