diff --git a/frontend/components/global/ProductsGrid.vue b/frontend/components/global/ProductsGrid.vue
index 2edbb1f..c2bdc18 100644
--- a/frontend/components/global/ProductsGrid.vue
+++ b/frontend/components/global/ProductsGrid.vue
@@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
             </NuxtLink>
         </div>
         <ul
-            class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8"
+            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8"
         >
             <ProductCard
                 v-for="product in products"
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index f96e0dc..60643be 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -38,9 +38,9 @@ const limitedColors = computed(() => {
 <template>
     <li class="w-full">
         <NuxtLink :to="'/product/' + id">
-            <div class="@container">
+            <div class="@container group">
                 <div
-                    class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
+                    class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
                 >
                     <NuxtImg
                         :id="`product-image-${id}`"
@@ -49,10 +49,10 @@ const limitedColors = computed(() => {
                         alt="product-background"
                     />
 
-                    <div
+                    <!-- <div
                         v-if="darkLayer"
                         class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
-                    />
+                    /> -->
 
                     <div
                         class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
@@ -66,38 +66,27 @@ const limitedColors = computed(() => {
                         </Tag>
                     </div>
                     <div
-                        :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
-                        class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
+                        class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]: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="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
-                                {{ title }}
-                            </span>
-                            <div class="flex items-center justify-between w-full mt-1">
-                                <div class="flex items-center gap-2 @[280px]:mt-1">
-                                    <ColorCircle
-                                        v-for="color in limitedColors"
-                                        :key="color"
-                                        :style="{ backgroundColor: color }"
-                                        class="!size-5 @[280px]:!size-6"
-                                    />
-                                </div>
-                                <span
-                                    class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap"
-                                >
-                                    {{ price }}
-                                </span>
-                            </div>
+                        <div
+                            class="items-center flex gap-2 @[280px]:mt-1  transition-all translate-y-1 group-hover:translate-y-0 "
+                        >
+                            <ColorCircle
+                                v-for="color in limitedColors"
+                                :key="color"
+                                :style="{ backgroundColor: color }"
+                                class="!size-5 @[280px]:!size-6"
+                            />
                         </div>
                     </div>
                 </div>
 
-                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
-                    <span class="typo-sub-h-sm w-full truncate">
+                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
+                    <span class="typo-sub-h-sm font-normal w-full truncate">
                         {{ title }}
                     </span>
-                    <div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
-                        <span class="typo-p-xs !font-semibold whitespace-nowrap">
+                    <div class="flex items-center justify-between w-full mt-1">
+                        <span class="typo-p-xs !font-bold whitespace-nowrap">
                             {{ price }}
                         </span>
                     </div>