diff --git a/assets/base.css b/assets/base.css
index eb303268d..2f8ae3738 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -18,7 +18,7 @@
 
   --accent-0: #fff;
   --accent-1: #fafafa;
-  --accent-2: #eaeaea;
+  --accent-2: #e2e2e2;
   --accent-3: #b4afaf;
   --accent-4: #888888;
   --accent-5: #666666;
@@ -27,8 +27,6 @@
   --accent-8: #111111;
   --accent-9: #000;
 
-  --font-sans: 'Inter', sans-serif;
-
   --cyan: #22b8cf;
   --green: #37b679;
   --purple: #f81ce5;
@@ -39,46 +37,53 @@
   --violet-dark: #4c2889;
 }
 
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
+@layer base {
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+    letter-spacing: -0.025em;
+  }
 
-html {
-  height: 100%;
-  box-sizing: border-box;
-  touch-action: manipulation;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  @apply text-html;
-}
-@screen lg {
   html {
-    @apply text-html-lg;
+    height: 100%;
+    box-sizing: border-box;
+    touch-action: manipulation;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    @apply text-html;
+  }
+  @screen lg {
+    html {
+      @apply text-html-lg;
+    }
+  }
+
+  html,
+  body {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--primary);
+    color: var(--text-primary);
+    overscroll-behavior-x: none;
+  }
+
+  body {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+  }
+
+  a {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 }
 
-html,
-body {
-  font-family: var(--font-sans);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--primary);
-  color: var(--text-primary);
-  overscroll-behavior-x: none;
-}
 
-body {
-  position: relative;
-  min-height: 100%;
-  margin: 0;
-}
-
-a {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+.tag {
+  @apply inline-block py-2 px-5 text-4xl border border-black rounded-full;
 }
 
 .animated {
diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
index 0a40bff2e..4e0cabe60 100644
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
+++ b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
@@ -57,11 +57,6 @@ const HomeAllProductsGrid: FC<Props> = ({
             <ProductCard
               key={product.path}
               product={product}
-              variant="simple"
-              imgProps={{
-                width: 480,
-                height: 480,
-              }}
             />
           ))}
         </Grid>
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index d5d441fea..4573efe15 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,114 +1,19 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
-  bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer inline-block bg-accent-1;
+  transition-transform ease-linear cursor-pointer inline-block;
   height: 100% !important;
 }
 
-.root:hover {
-  & .productImage {
-    transform: scale(1.2625);
-  }
-
-  & .header .name span,
-  & .header .price,
-  & .wishlistButton {
-    @apply bg-secondary text-secondary;
-  }
-
-  &:nth-child(6n + 1) .header .name span,
-  &:nth-child(6n + 1) .header .price,
-  &:nth-child(6n + 1) .wishlistButton {
-    @apply bg-violet text-white;
-  }
-
-  &:nth-child(6n + 5) .header .name span,
-  &:nth-child(6n + 5) .header .price,
-  &:nth-child(6n + 5) .wishlistButton {
-    @apply bg-blue text-white;
-  }
-
-  &:nth-child(6n + 3) .header .name span,
-  &:nth-child(6n + 3) .header .price,
-  &:nth-child(6n + 3) .wishlistButton {
-    @apply bg-pink text-white;
-  }
-
-  &:nth-child(6n + 6) .header .name span,
-  &:nth-child(6n + 6) .header .price,
-  &:nth-child(6n + 6) .wishlistButton {
-    @apply bg-cyan text-white;
-  }
-}
-
-.header {
-  @apply transition-colors ease-in-out duration-500
-  absolute top-0 left-0 z-20 pr-16;
-}
-
-.header .name {
-  @apply pt-0 max-w-full w-full leading-extra-loose
-  transition-colors ease-in-out duration-500;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-}
-
-.header .name span {
-  @apply py-4 px-6 bg-primary text-primary font-bold
-  transition-colors ease-in-out duration-500;
-  font-size: inherit;
-  letter-spacing: inherit;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.header .price {
-  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
-  font-semibold inline-block tracking-wide
-  transition-colors ease-in-out duration-500;
-}
-
 .imageContainer {
-  @apply flex items-center justify-center overflow-hidden;
+  @apply relative flex items-center justify-center bg-primary-2 mb-4;
+  padding: 12% 15%;
+}
+.imageContainerInner {
+  @apply relative w-full;
+  padding-bottom: 100%;
 }
 
-.imageContainer > div {
-  min-width: 100%;
-}
-
-.imageContainer .productImage {
-  @apply transform transition-transform duration-500
-  object-cover scale-120;
-}
-
-.root .wishlistButton {
-  @apply top-0 right-0 z-30 absolute;
-}
-
-/* Variant Simple */
-.simple .header .name {
-  @apply pt-2 text-lg leading-10 -mt-1;
-}
-
-.simple .header .price {
-  @apply text-sm;
-}
-
-/* Variant Slim */
-.slim {
-  @apply bg-transparent relative overflow-hidden
-  box-border;
-}
-
-.slim .header {
-  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
-}
-
-.slim span {
-  @apply bg-accent-9 text-accent-0 inline-block p-3
-  font-bold text-xl break-words;
-}
-
-.root:global(.secondary) .header span {
-  @apply bg-accent-0 text-accent-9;
+.typeIcon {
+  @apply absolute bg-accent-2 rounded-full p-1.5 -bottom-2 right-2.5;
+  font-size: 0;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 3e5c58887..ff760bfe5 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -3,27 +3,20 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/image'
-import WishlistButton from '@components/wishlist/WishlistButton'
+import Image from 'next/image'
 import usePrice from '@framework/product/use-price'
-import ProductTag from '../ProductTag'
 
 interface Props {
   className?: string
   product: Product
   noNameTag?: boolean
-  imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
-  variant?: 'default' | 'slim' | 'simple'
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
 
 const ProductCard: FC<Props> = ({
   product,
-  imgProps,
   className,
-  noNameTag = false,
-  variant = 'default',
 }) => {
   const { price } = usePrice({
     amount: product.price.value,
@@ -33,97 +26,40 @@ const ProductCard: FC<Props> = ({
 
   const rootClassName = cn(
     s.root,
-    { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
     className
   )
 
   return (
     <Link href={`/products/${product.slug}`}>
       <a className={rootClassName}>
-        {variant === 'slim' && (
-          <>
-            <div className={s.header}>
-              <span>{product.name}</span>
-            </div>
+        <div className={s.imageContainer}>
+          <div className={s.imageContainerInner}>
             {product?.images && (
               <Image
-                quality="85"
-                src={product.images[0]?.url || placeholderImg}
                 alt={product.name || 'Product Image'}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
+                className={s.productImage}
+                src={product.images[0]?.url || placeholderImg}
+                quality="85"
+                layout="fill"
+                objectFit="contain"
               />
             )}
-          </>
-        )}
-
-        {variant === 'simple' && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0]}
-              />
-            )}
-            {!noNameTag && (
-              <div className={s.header}>
-                <h3 className={s.name}>
-                  <span>{product.name}</span>
-                </h3>
-                <div className={s.price}>
-                  {`${price} ${product.price?.currencyCode}`}
-                </div>
-              </div>
-            )}
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              )}
-            </div>
-          </>
-        )}
-
-        {variant === 'default' && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
-            <ProductTag
-              name={product.name}
-              price={`${price} ${product.price?.currencyCode}`}
+          </div>
+          <div className={s.typeIcon}>
+            <Image
+              src="/icon-audiobook.svg"
+              width={22}
+              height={23}
             />
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              )}
-            </div>
-          </>
-        )}
+          </div>
+        </div>
+        <div className="font-bold line-clamp-3">
+          {product.name}
+        </div>
+        <div className="italic">
+          Author (missing data)
+        </div>
+        <div>{price}</div>
       </a>
     </Link>
   )
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 0b3ebf564..36c721cbe 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -38,7 +38,7 @@
 }
 
 .relatedProductsGrid {
-  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-6 md:gap-7;
 }
 
 @screen lg {
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index f689030d6..c88f26300 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -67,18 +67,13 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
             {relatedProducts.map((p) => (
               <div
                 key={p.path}
-                className="animated fadeIn bg-accent-0 border border-accent-2"
+                className="animated fadeIn"
               >
                 <ProductCard
                   noNameTag
                   product={p}
                   key={p.path}
-                  variant="simple"
                   className="animated fadeIn"
-                  imgProps={{
-                    width: 300,
-                    height: 300,
-                  }}
                 />
               </div>
             ))}
diff --git a/components/search.tsx b/components/search.tsx
index 0a653c6cd..c4f200779 100644
--- a/components/search.tsx
+++ b/components/search.tsx
@@ -313,17 +313,12 @@ export default function Search({ categories, brands }: SearchPropsType) {
             </div>
           )}
           {data ? (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
               {data.products.map((product: Product) => (
                 <ProductCard
-                  variant="simple"
                   key={product.path}
                   className="animated fadeIn"
                   product={product}
-                  imgProps={{
-                    width: 480,
-                    height: 480,
-                  }}
                 />
               ))}
             </div>
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css
index 27e4c5b19..74a7dd5cf 100644
--- a/components/ui/Grid/Grid.module.css
+++ b/components/ui/Grid/Grid.module.css
@@ -1,8 +1,8 @@
 .root {
-  @apply grid grid-cols-1 gap-0;
+  @apply grid grid-cols-2 gap-0;
 
   @screen lg {
-    @apply grid-cols-3 grid-rows-2;
+    @apply grid-cols-6;
   }
 
   & > * {
@@ -24,7 +24,7 @@
 }
 
 .layoutNormal {
-  @apply gap-3;
+  @apply gap-6;
 }
 
 @screen md {
diff --git a/package.json b/package.json
index 0a682a5b6..ee407ba97 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@react-spring/web": "^9.2.1",
+    "@tailwindcss/line-clamp": "^0.2.1",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.6",
     "body-scroll-lock": "^3.1.5",
diff --git a/pages/index.tsx b/pages/index.tsx
index b399923f7..de9049b13 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,7 @@
 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 { Grid, Container, Marquee } from '@components/ui'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 export async function getStaticProps({
@@ -15,8 +14,6 @@ export async function getStaticProps({
     variables: { first: 6 },
     config,
     preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
   })
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
@@ -40,49 +37,26 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <Grid 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 variant="secondary">
-        {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}
-      /> */}
+      <Container className="py-12">
+        <h3 className="tag">New releases</h3>
+        <Grid layout="normal" className="mt-8 mb-16">
+          {products.slice(0, 6).map((product: any, i: number) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+            />
+          ))}
+        </Grid>
+        <h3 className="tag">Bestsellers</h3>
+        <Grid layout="normal" className="mt-8 mb-16">
+          {products.slice(0, 6).map((product: any, i: number) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+            />
+          ))}
+        </Grid>
+      </Container>
     </>
   )
 }
diff --git a/pages/products/[slug].tsx b/pages/products/[slug].tsx
index 87a340664..5283d9a31 100644
--- a/pages/products/[slug].tsx
+++ b/pages/products/[slug].tsx
@@ -24,7 +24,7 @@ export async function getStaticProps({
   })
 
   const allProductsPromise = commerce.getAllProducts({
-    variables: { first: 4 },
+    variables: { first: 6 },
     config,
     preview,
   })
diff --git a/public/icon-audiobook.svg b/public/icon-audiobook.svg
new file mode 100644
index 000000000..a26afdaf2
--- /dev/null
+++ b/public/icon-audiobook.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="32" viewBox="3 2.5 26 27.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M16 4.5c-4.4183 0-8 3.58172-8 8v2c0 .5523-.44772 1-1 1s-1-.4477-1-1v-2c0-5.52285 4.4772-10 10-10s10 4.47715 10 10v2c0 .5523-.4477 1-1 1s-1-.4477-1-1v-2c0-4.41828-3.5817-8-8-8zM9 25v-3.5c0-1.1046-.89543-2-2-2s-2 .8954-2 2V25c0 1.1046.89543 2 2 2s2-.8954 2-2zm-2-7.5c-2.20914 0-4 1.7909-4 4V25c0 2.2091 1.79086 4 4 4s4-1.7909 4-4v-3.5c0-2.2091-1.79086-4-4-4zm20 4V25c0 1.1046-.8954 2-2 2s-2-.8954-2-2v-3.5c0-1.1046.8954-2 2-2s2 .8954 2 2zm-6 0c0-2.2091 1.7909-4 4-4 2.2091 0 4 1.7909 4 4V25c0 2.2091-1.7909 4-4 4-2.2091 0-4-1.7909-4-4v-3.5z"></path>
+</svg>
diff --git a/public/icon-ebook.svg b/public/icon-ebook.svg
new file mode 100644
index 000000000..d44ea0939
--- /dev/null
+++ b/public/icon-ebook.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="32" viewBox="6 3 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.5 5h-13C8.67157 5 8 5.67157 8 6.5v20c0 .8284.67157 1.5 1.5 1.5h13c.8284 0 1.5-.6716 1.5-1.5v-20c0-.82843-.6716-1.5-1.5-1.5zm-13-2C7.567 3 6 4.567 6 6.5v20C6 28.433 7.567 30 9.5 30h13c1.933 0 3.5-1.567 3.5-3.5v-20C26 4.567 24.433 3 22.5 3h-13zM22 9c0 .55228-.4477 1-1 1H11c-.5523 0-1-.44772-1-1s.4477-1 1-1h10c.5523 0 1 .44772 1 1zm-1 5c.5523 0 1-.4477 1-1s-.4477-1-1-1H11c-.5523 0-1 .4477-1 1s.4477 1 1 1h10zm-2.5 3c0 .5523-.4477 1-1 1H11c-.5523 0-1-.4477-1-1s.4477-1 1-1h6.5c.5523 0 1 .4477 1 1zM16 26c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z"></path>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5467f9270..9c6130792 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: [require('@tailwindcss/line-clamp')],
   future: {
     purgeLayersByDefault: true,
     applyComplexClasses: true,
@@ -58,9 +59,13 @@ module.exports = {
         magical:
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
+      fontFamily: {
+        sans: '"Inter","Helvetica Neue",HelveticaNeue,"TeX Gyre Heros",TeXGyreHeros,FreeSans,"Nimbus Sans L","Liberation Sans",Arimo,Helvetica,sans-serif',
+      },
       fontSize: {
         html: '15px',
         'html-lg': '18px',
+        '4xl': '2rem',
       },
       lineHeight: {
         'extra-loose': '2.2',
@@ -68,6 +73,12 @@ module.exports = {
       scale: {
         120: '1.2',
       },
+      width: {
+        '9/12': '75%',
+      },
+      height: {
+        '9/12': '75%',
+      },
     },
   },
 }