diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 171190df0..a289cc1df 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,5 +1,6 @@
 .root {
-  @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  height: 100% !important;
 
   &:hover {
     & .squareBg:before {
@@ -119,17 +120,11 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  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;
-    }
-  }
+.product-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 5304f691e..44a93c1d7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -80,8 +80,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? '65vw' : '30vw'}
-            imgHeight={i === 0 ? '45vw' : '22vw'}
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
             priority
           />
         ))}