diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css
index bb90675a6..c08767195 100644
--- a/components/common/Layout/Layout.module.css
+++ b/components/common/Layout/Layout.module.css
@@ -1,4 +1,4 @@
 .root {
   @apply h-full bg-primary mx-auto transition-colors duration-150;
-  max-width: 2460px;
+  max-width: 1920px;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 445d6d626..bd6128542 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -53,7 +53,7 @@ const ProductCard: FC<Props> = ({
                 alt={product.name || 'Product Image'}
                 height={320}
                 width={320}
-                layout="fixed"
+                layout="responsive"
                 objectFit="cover"
                 {...imgProps}
               />
diff --git a/next.config.js b/next.config.js
index 6627e2e57..4f67e6556 100644
--- a/next.config.js
+++ b/next.config.js
@@ -38,15 +38,15 @@ module.exports = withCommerceConfig({
         },
     ].filter(Boolean)
   },
-  async redirects () {
-    return [
-      {
-        source: '/',
-        destination: '/search',
-        permanent: true,
-      }
-    ]
-  }
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: '/',
+  //       destination: '/search',
+  //       permanent: true,
+  //     },
+  //   ]
+  // },
 })
 
 // Don't delete this console log, useful to see the commerce config in Vercel deployments
diff --git a/pages/_index.tsx b/pages/_index.tsx
new file mode 100644
index 000000000..1dc80713b
--- /dev/null
+++ b/pages/_index.tsx
@@ -0,0 +1,103 @@
+import commerce from '@lib/api/commerce'
+import { Layout } from '@components/common'
+import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
+// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  const productsPromise = commerce.getAllProducts({
+    variables: { first: 6 },
+    config,
+    preview,
+    // Saleor provider only
+    ...({ featured: true } as any),
+  })
+  const pagesPromise = commerce.getAllPages({ config, preview })
+  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
+  const { products } = await productsPromise
+  const { pages } = await pagesPromise
+  const { categories, brands } = await siteInfoPromise
+
+  return {
+    props: {
+      products,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 60,
+  }
+}
+
+export default function Home({
+  products,
+  categories,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {categories.slice(0, 3).map((category: any, i: number) => (
+          <Link href={`/search/${category.slug}`}>
+            <a style={{ flex: 1 }}>
+              <Image
+                quality="100"
+                src={category.assets[0].source}
+                height={category.assets[0].height}
+                width={category.assets[0].width}
+                layout="responsive"
+                objectFit="cover"
+              />
+            </a>
+          </Link>
+        ))}
+      </div>
+      <Marquee variant="primary">
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard key={product.id} product={product} variant="slim" />
+        ))}
+      </Marquee>
+      <Hero
+        headline=" Dessert dragée halvah croissant."
+        description="Cupcake ipsum dolor sit amet lemon drops pastry cotton candy. Sweet carrot cake macaroon bonbon croissant fruitcake jujubes macaroon oat cake. Soufflé bonbon caramels jelly beans. Tiramisu sweet roll cheesecake pie carrot cake. "
+      />
+      {/* <Grid layout="B" variant="filled">
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee>
+        {products.slice(3).map((product: any, i: number) => (
+          <ProductCard key={product.id} product={product} variant="slim" />
+        ))}
+      </Marquee> */}
+      {/* <HomeAllProductsGrid
+        newestProducts={products}
+        categories={categories}
+        brands={brands}
+      /> */}
+    </>
+  )
+}
+
+Home.Layout = Layout
diff --git a/pages/index.tsx b/pages/index.tsx
index 1c9d0cb8b..47eb7cbd1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,104 +1,9 @@
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
-import { Grid, Marquee, Hero } from '@components/ui'
-// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import Image from 'next/image'
-import Link from 'next/link'
+import { getSearchStaticProps } from '@lib/search-props'
+import type { GetStaticPropsContext } from 'next'
+import Search from '@theme/search'
 
-export async function getStaticProps({
-  preview,
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
-    variables: { first: 6 },
-    config,
-    preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const { products } = await productsPromise
-  const { pages } = await pagesPromise
-  const { categories, brands } = await siteInfoPromise
-
-  return {
-    props: {
-      products,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 60,
-  }
+export async function getStaticProps(context: GetStaticPropsContext) {
+  return getSearchStaticProps(context)
 }
 
-export default function Home({
-  products,
-  categories,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          overflowX: 'hidden',
-          height: '30%',
-        }}
-      >
-        {categories.slice(0, 3).map((category: any, i: number) => (
-          <Link href={`/search/${category.slug}`}>
-            <a style={{ width: '33.33%' }}>
-              <Image
-                quality="100"
-                src={category.assets[0].source}
-                height={category.assets[0].height}
-                width={category.assets[0].height}
-                layout="responsive"
-                objectFit="cover"
-              />
-            </a>
-          </Link>
-        ))}
-      </div>
-      <Marquee variant="primary">
-        {products.slice(0, 3).map((product: any, i: number) => (
-          <ProductCard key={product.id} product={product} variant="slim" />
-        ))}
-      </Marquee>
-      <Hero
-        headline=" Dessert dragée halvah croissant."
-        description="Cupcake ipsum dolor sit amet lemon drops pastry cotton candy. Sweet carrot cake macaroon bonbon croissant fruitcake jujubes macaroon oat cake. Soufflé bonbon caramels jelly beans. Tiramisu sweet roll cheesecake pie carrot cake. "
-      />
-      {/* <Grid layout="B" variant="filled">
-        {products.slice(0, 3).map((product: any, i: number) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            imgProps={{
-              width: i === 0 ? 1080 : 540,
-              height: i === 0 ? 1080 : 540,
-            }}
-          />
-        ))}
-      </Grid>
-      <Marquee>
-        {products.slice(3).map((product: any, i: number) => (
-          <ProductCard key={product.id} product={product} variant="slim" />
-        ))}
-      </Marquee> */}
-      {/* <HomeAllProductsGrid
-        newestProducts={products}
-        categories={categories}
-        brands={brands}
-      /> */}
-    </>
-  )
-}
-
-Home.Layout = Layout
+export default Search