diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index 85252ef..13fde84 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+
 // import
 
 import Tag from "~/components/global/Tag.vue";
@@ -34,7 +35,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
 <template>
     <NuxtLink :to="'/product/' + id">
         <div
-            class="group relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
+            class="group relative size-full aspect-square rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
         >
             <img
                 :id="`product-image-${id}`"
@@ -45,7 +46,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
 
             <div
                 v-if="darkLayer"
-                class="bg-linear-to-t inset-0 from-black/50 to-transparent to-40% absolute z-10 size-full"
+                class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
             />
 
             <div
@@ -62,25 +63,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     ? 'text-black'
                     : 'text-white'
             "
-                class="absolute inset-x-0 bottom-0 pb-6 px-6 flex flex-row-reverse justify-between items-end z-10"
+                class="absolute inset-x-0 bottom-0 pb-4 md:pb-6 px-4 md:px-6 flex flex-row-reverse justify-between items-end z-10"
             >
 
                 <div class="flex flex-col gap-2 items-start w-full">
-                <span class="typo-p-md font-medium">
+                <span class="typo-p-sm md:typo-p-md !font-medium">
                     {{ brand }}
                 </span>
-                    <span class="typo-sub-h-lg">
+                    <span class="typo-sub-h-md md:typo-sub-h-lg">
                     {{ title }}
                 </span>
                     <div class="flex items-center justify-between w-full mt-1">
-                        <div class="flex items-center gap-2 mt-1">
+                        <div class="flex items-center gap-2 md:mt-1">
                             <ColorCircle
                                 v-for="color in colors"
                                 :key="color"
                                 :style="{ backgroundColor: color }"
+                                class="!size-5 md:!size-6"
                             />
                         </div>
-                        <span class="typo-p-md font-medium whitespace-nowrap">
+                        <span class="typo-p-sm md:typo-p-md font-medium whitespace-nowrap">
                         {{ price }}
                     </span>
                     </div>