diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 2eaee143d..14b164e23 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -120,3 +120,15 @@
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
+
+.imageContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center;
+
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+      padding-bottom: 0 !important;
+    }
+  }
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e60927ffb..15a4f6950 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -62,7 +62,7 @@ const ProductCard: FC<Props> = ({
             <Heart />
           </div>
         </div>
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
+        <div className={cn(s.imageContainer)}>
           <Image
             className={cn('w-full object-cover', s['product-image'])}
             src={src}