diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 412721464..0c8dd1c04 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -123,10 +123,16 @@
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
 
-.product-image {
-  margin: auto;
-
-  & div {
-    margin: auto;
+.imageContainer {
+  & > div {
+    & > div {
+      height: 100%;
+      margin: 0 auto;
+    }
   }
 }
+
+.product-image {
+  height: 120% !important;
+  top: -10% !important;
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 3243e8261..808e37063 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -70,15 +70,17 @@ const ProductCard: FC<Props> = ({
             variant={p.variants.edges?.[0]!}
           />
         </div>
-        <EnhancedImage
-          alt={p.name}
-          className={cn('w-full object-cover', s['product-image'])}
-          src={src}
-          width={imgWidth}
-          height={imgHeight}
-          priority={priority}
-          quality="90"
-        />
+        <div className={s.imageContainer}>
+          <EnhancedImage
+            alt={p.name}
+            className={cn('w-full object-cover', s['product-image'])}
+            src={src}
+            width={imgWidth}
+            height={imgHeight}
+            priority={priority}
+            quality="90"
+          />
+        </div>
       </a>
     </Link>
   )