diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
index 464087ebc..ec2f8ea49 100644
--- a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
+++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
@@ -4,20 +4,20 @@
   @screen md {
     @apply flex-row;
   }
-}
 
-.asideWrapper {
-  @apply pr-3 w-full relative;
+  & .asideWrapper {
+    @apply pr-3 w-full relative;
 
-  @screen md {
-    @apply w-48;
-  }
-}
-
-.aside {
-  @apply flex flex-row w-full justify-around mb-12;
-
-  @screen md {
-    @apply mb-0 block sticky top-32;
+    @screen md {
+      @apply w-48;
+    }
+  }
+
+  & .aside {
+    @apply flex flex-row w-full justify-around mb-12;
+
+    @screen md {
+      @apply mb-0 block sticky top-32;
+    }
   }
 }
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index e46f6ba5c..0c8dd1c04 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,19 @@
 }
 
 .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 z-10;
+  @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;
+      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 8c5787d17..345c31177 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
             variant={p.variants.edges?.[0]!}
           />
         </div>
-        <div className={cn(s.imageContainer)}>
+        <div className={s.imageContainer}>
           <EnhancedImage
             alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}
diff --git a/pages/index.tsx b/pages/index.tsx
index e06598798..dc3f97679 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -79,8 +79,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
           />
         ))}