diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 80ebd178c..76cf24464 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -39,10 +39,10 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
       </div>
 
       <div className="absolute top-0 left-0 w-full h-full z-0">
-        <img
+        {/* <img
           className="object-cover object-center w-full"
           src={productData.images.edges[0].node.urlSmall}
-        />
+        /> */}
       </div>
     </div>
   )
diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/product/ProductGrid/ProductGrid.module.css
index 86cf8b966..e9543e144 100644
--- a/components/product/ProductGrid/ProductGrid.module.css
+++ b/components/product/ProductGrid/ProductGrid.module.css
@@ -1,29 +1,26 @@
 .root {
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
-  min-height: calc((100vh - 80px - 56px) * 2);
+  --row-height: calc(100vh - 80px - 56px);
+  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;
 
   & > * {
     @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
   }
 
-  & > div:nth-child(1),
-  & > div:nth-child(5) {
-    @apply row-span-2 lg:col-span-2 h-full;
+  & > div:nth-child(6n + 1) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    min-height: var(--row-height);
   }
 
-  & > div:nth-child(1) {
-    @apply bg-violet;
+  & > div:nth-child(6n + 5) {
+    @apply row-span-2 lg:col-span-2 bg-blue;
+    min-height: var(--row-height);
   }
 
-  & > div:nth-child(3) {
+  & > div:nth-child(6n + 3) {
     @apply bg-pink;
   }
 
-  & > div:nth-child(5) {
-    @apply bg-blue;
-  }
-
-  & > div:nth-child(6) {
+  & > div:nth-child(6n + 6) {
     @apply bg-cyan;
   }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index c89c02ce6..2878aacf1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,22 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
 export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  return <ProductGrid products={products} />
+  return (
+    <>
+      <ProductGrid
+        products={[
+          ...products,
+          ...products,
+          ...products,
+          ...products,
+          ...products,
+          ...products,
+        ]}
+      />
+      <div>asdsasad</div>
+      <ProductGrid products={products.slice(3)} />
+    </>
+  )
 }
 
 Home.Layout = Layout