diff --git a/.env.example b/.env.example
index 46d641d54..bb67db43f 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
+COMPANY_NAME="shopware AG"
 TWITTER_CREATOR="@shopware"
 TWITTER_SITE="https://www.shopware.com/en/solutions/shopware-composable-frontends/"
 SITE_NAME="Next.js Commerce with Shopware Composable Frontends"
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
deleted file mode 100644
index a52b961a2..000000000
--- a/.github/workflows/e2e.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-name: e2e
-on:
-  schedule:
-    # Runs "at 09:00 and 15:00, Monday through Friday" (see https://crontab.guru)
-    - cron: '0 9,15 * * 1-5'
-jobs:
-  e2e:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cancel running workflows
-        uses: styfle/cancel-workflow-action@0.11.0
-        with:
-          access_token: ${{ github.token }}
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Set node version
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Set pnpm version
-        uses: pnpm/action-setup@v2
-        with:
-          run_install: false
-          version: 7
-      - name: Cache node_modules
-        id: node-modules-cache
-        uses: actions/cache@v3
-        with:
-          path: '**/node_modules'
-          key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install dependencies
-        if: steps.node-modules-cache.outputs.cache-hit != 'true'
-        run: pnpm install
-      - name: Get playwright version
-        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./node_modules/@playwright/test/package.json').version)")" >> $GITHUB_ENV
-      - name: Cache playwright
-        uses: actions/cache@v3
-        id: playwright-cache
-        with:
-          path: '~/.cache/ms-playwright'
-          key: playwright-cache-${{ env.PLAYWRIGHT_VERSION }}
-      - name: Install playwright browsers
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps
-      - name: Install playwright browser dependencies
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: npx playwright install-deps
-      - name: Run tests
-        run: pnpm test:e2e
diff --git a/app/(cms)/[...cms]/page.tsx b/app/(cms)/[...cms]/page.tsx
index 0a89ab4f8..8f915ba70 100644
--- a/app/(cms)/[...cms]/page.tsx
+++ b/app/(cms)/[...cms]/page.tsx
@@ -17,13 +17,6 @@ export async function generateMetadata({ params }: { params: { cms: string } }):
     title: page.seo?.title || page.title,
     description: page.seo?.description || page.bodySummary,
     openGraph: {
-      images: [
-        {
-          url: `/api/og?title=${encodeURIComponent(page.title)}`,
-          width: 1200,
-          height: 630
-        }
-      ],
       publishedTime: page.createdAt,
       modifiedTime: page.updatedAt,
       type: 'article'
diff --git a/app/(cms)/layout.tsx b/app/(cms)/layout.tsx
index e6d2b7dce..453253dca 100644
--- a/app/(cms)/layout.tsx
+++ b/app/(cms)/layout.tsx
@@ -4,7 +4,7 @@ import { Suspense } from 'react';
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense>
-      <div className="w-full bg-white dark:bg-black">
+      <div className="w-full">
         <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
           <Suspense>{children}</Suspense>
         </div>
diff --git a/app/globals.css b/app/globals.css
index c0eca5423..0a6d36768 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,8 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
 @supports (font: -apple-system-body) and (-webkit-appearance: none) {
   img[loading='lazy'] {
     clip-path: inset(0.6px);
   }
 }
+
+a,
+input,
+button {
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index b93239710..49d2d62f0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ const inter = Inter({
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-white text-black selection:bg-teal-300 dark:bg-black dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
+      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <Navbar />
         <Suspense>
           <main>{children}</main>
diff --git a/app/page.tsx b/app/page.tsx
index 5f357726a..cf07827bf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,13 +8,6 @@ export const runtime = 'edge';
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopware.',
   openGraph: {
-    images: [
-      {
-        url: `/api/og?title=${encodeURIComponent(process.env.SITE_NAME || '')}`,
-        width: 1200,
-        height: 630
-      }
-    ],
     type: 'website'
   }
 };
diff --git a/app/product/[...handle]/page.tsx b/app/product/[...handle]/page.tsx
index 4c54e2dfd..e29b6b705 100644
--- a/app/product/[...handle]/page.tsx
+++ b/app/product/[...handle]/page.tsx
@@ -2,16 +2,14 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
-import { AddToCart } from 'components/cart/add-to-cart';
-import Grid from 'components/grid';
+import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
-import { VariantSelector } from 'components/product/variant-selector';
-import ProductGridItems from 'components/layout/product-grid-items';
 import { Gallery } from 'components/product/gallery';
-import Prose from 'components/prose';
+import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopware';
-import { Image } from 'lib/shopware/types';
+import { Image } from 'lib/shopify/types';
+import Link from 'next/link';
 
 export const runtime = 'edge';
 
@@ -77,47 +75,36 @@ export default async function ProductPage({ params }: { params: { handle: string
   };
 
   return (
-    <div>
+    <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="lg:grid lg:grid-cols-6">
-        <div className="lg:col-span-4">
-          <Gallery
-            title={product.title}
-            amount={product.priceRange.maxVariantPrice.amount}
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-            images={product.images.map((image: Image) => ({
-              src: image.url,
-              altText: image.altText
-            }))}
-          />
-        </div>
-
-        <div className="p-6 lg:col-span-2">
-          <VariantSelector options={product.options} variants={product.variants} />
-
-          {product.descriptionHtml ? (
-            <Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
-          ) : null}
-
-          <AddToCart
-            product={product}
-            variants={product.variants}
-            availableForSale={product.availableForSale}
-          />
+      <div className="mx-auto max-w-screen-2xl px-4">
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+          <div className="lg:col-span-4">
+            <Gallery
+              images={product.images.map((image: Image) => ({
+                src: image.url,
+                altText: image.altText
+              }))}
+            />
+          </div>
+
+          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
+            <ProductDescription product={product} />
+          </div>
         </div>
+        <Suspense>
+          <RelatedProducts id={product.id} />
+        </Suspense>
       </div>
       <Suspense>
-        <RelatedProducts id={product.id} />
-        <Suspense>
-          <Footer />
-        </Suspense>
+        <Footer />
       </Suspense>
-    </div>
+    </>
   );
 }
 
@@ -127,11 +114,31 @@ async function RelatedProducts({ id }: { id: string }) {
   if (!relatedProducts.length) return null;
 
   return (
-    <div className="px-4 py-8">
-      <div className="mb-4 text-3xl font-bold">Related Products</div>
-      <Grid className="grid-cols-2 lg:grid-cols-5">
-        <ProductGridItems products={relatedProducts} />
-      </Grid>
+    <div className="py-8">
+      <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
+      <div className="flex w-full gap-4 overflow-x-auto pt-1">
+        {relatedProducts.map((product, i) => {
+          return (
+            <Link
+              key={i}
+              className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
+              href={`/product/${product.path}`}
+            >
+              <GridTileImage
+                alt={product.title}
+                label={{
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                width={600}
+                height={600}
+              />
+            </Link>
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/app/search/(collection)/[...collection]/page.tsx b/app/search/(collection)/[...collection]/page.tsx
index 7de68dae9..a86346b1f 100644
--- a/app/search/(collection)/[...collection]/page.tsx
+++ b/app/search/(collection)/[...collection]/page.tsx
@@ -50,8 +50,8 @@ export default async function CategoryPage({
       {products.length === 0 ? (
         <p className="py-3 text-lg">{`No products found in this collection`}</p>
       ) : (
-        <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
-          <div className="order-first flex-none md:w-1/6">
+        <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+          <div className="order-first w-full flex-none md:max-w-[125px]">
             <Collections collection={params.collection} />
           </div>
           <div className="order-last min-h-screen w-full md:order-none">
@@ -66,7 +66,7 @@ export default async function CategoryPage({
               />
             </nav>
           </div>
-          <div className="order-none md:order-last md:w-1/6 md:flex-none">
+          <div className="order-none flex-none md:order-last md:w-[125px]">
             <FilterList list={sorting} title="Sort by" />
           </div>
         </div>
diff --git a/app/search/loading.tsx b/app/search/loading.tsx
index 730c40184..aee859a1a 100644
--- a/app/search/loading.tsx
+++ b/app/search/loading.tsx
@@ -4,20 +4,23 @@ import { sorting } from 'lib/constants';
 
 export default function Loading() {
   return (
-    <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
-      <div className="order-first flex-none md:w-1/6"></div>
+    <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+      <div className="order-first w-full flex-none md:max-w-[125px]"></div>
       <div className="order-last min-h-screen w-full md:order-none">
         <Grid className="grid-cols-2 lg:grid-cols-3">
           {Array(12)
             .fill(0)
             .map((_, index) => {
               return (
-                <Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />
+                <Grid.Item
+                  key={index}
+                  className="animate-pulse bg-neutral-100 dark:bg-neutral-900"
+                />
               );
             })}
         </Grid>
       </div>
-      <div className="order-none md:order-last md:w-1/6 md:flex-none">
+      <div className="order-none flex-none md:order-last md:w-[125px]">
         <FilterList list={sorting} title="Sort by" />
       </div>
     </div>
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 13b1ac2f2..992806e69 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -43,7 +43,7 @@ export default async function SearchPage({
             ) : null}
             <p className="pt-4">Good place to add other suggest search terms ;)</p>
           </div>
-          <Grid className="grid-cols-2 lg:grid-cols-3">
+          <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
             <ProductGridItems products={products} />
           </Grid>
           <div className="order-none md:order-last md:w-1/6 md:flex-none">
diff --git a/components/carousel.tsx b/components/carousel.tsx
index 38b403d2e..f8aad2a0b 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -1,7 +1,7 @@
 import { getCollectionProducts } from 'lib/shopware';
 import { isSeoUrls } from 'lib/shopware/helpers';
-import Image from 'next/image';
 import Link from 'next/link';
+import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
   const collectionName = isSeoUrls()
@@ -14,28 +14,25 @@ export async function Carousel() {
   if (!products?.length) return null;
 
   return (
-    <div className="relative w-full overflow-hidden bg-white dark:bg-black">
-      <div className="flex animate-carousel">
+    <div className="w-full overflow-x-auto pb-6 pt-1">
+      <div className="flex animate-carousel gap-4">
         {[...products, ...products].map((product, i) => (
           <Link
             key={`${product.path}${i}`}
             href={`/product/${product.path}`}
-            className="relative mx-2 my-8 h-[30vh] w-1/2 flex-none md:w-1/3"
+            className="h-[30vh] w-2/3 flex-none md:w-1/3"
           >
-            {product.featuredImage ? (
-              <Image
-                alt={product.title}
-                className="h-full object-contain"
-                fill
-                sizes="33vw"
-                src={product.featuredImage.url}
-              />
-            ) : null}
-            <div className="absolute inset-y-0 right-0 flex items-center justify-center">
-              <div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white">
-                {product.title}
-              </div>
-            </div>
+            <GridTileImage
+              alt={product.title}
+              label={{
+                title: product.title,
+                amount: product.priceRange.maxVariantPrice.amount,
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
+              }}
+              src={product.featuredImage?.url}
+              width={600}
+              height={600}
+            />
           </Link>
         ))}
       </div>
diff --git a/components/cart/actions.ts b/components/cart/actions.ts
index d7ebe366b..f11328cfd 100644
--- a/components/cart/actions.ts
+++ b/components/cart/actions.ts
@@ -22,7 +22,20 @@ export const fetchCart = async function (cartId?: string): Promise<ExtendedCart
 };
 
 export const addItem = async (variantId: string | undefined): Promise<Error | undefined> => {
-  const cartId = cookies().get('sw-context-token')?.value;
+  let cartId = cookies().get('sw-context-token')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await fetchCart(cartId);
+  }
+
+  if (!cartId || !cart) {
+    cart = await fetchCart();
+    if (cart && cart.token) {
+      cartId = cart.token;
+      cookies().set('sw-context-token', cartId);
+    }
+  }
 
   if (!variantId) {
     return new Error('Missing variantId');
@@ -33,7 +46,6 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
     const apiClient = getApiClient(cartId);
 
     // this part allows us to click multiple times on addToCart and increase the qty with that
-    const cart = await fetchCart(cartId);
     const itemInCart = cart?.lineItems?.filter((item) => item.id === variantId) as
       | ExtendedLineItem
       | undefined;
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index 0f532d784..dc36182c1 100644
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@@ -1,14 +1,13 @@
 'use client';
 
+import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
+import { ProductVariant, Product } from 'lib/shopware/types';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
 
-import LoadingDots from 'components/loading-dots';
-import { Product } from 'lib/shopware/types';
-import { ProductVariant } from 'lib/shopware/types';
-
 export function AddToCart({
   product,
   variants,
@@ -53,15 +52,17 @@ export function AddToCart({
         });
       }}
       className={clsx(
-        'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
+        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
         {
           'cursor-not-allowed opacity-60': !availableForSale,
           'cursor-not-allowed': isPending
         }
       )}
     >
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-      {isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
     </button>
   );
 }
diff --git a/components/cart/close-cart.tsx b/components/cart/close-cart.tsx
new file mode 100644
index 000000000..515b94843
--- /dev/null
+++ b/components/cart/close-cart.tsx
@@ -0,0 +1,10 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function CloseCart({ className }: { className?: string }) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+    </div>
+  );
+}
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 395d96606..9b4bdd129 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -1,11 +1,11 @@
-import CloseIcon from 'components/icons/close';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import LoadingDots from 'components/loading-dots';
 import { useRouter } from 'next/navigation';
 
 import clsx from 'clsx';
+import { removeItem } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopware/types';
 import { useTransition } from 'react';
-import { removeItem } from 'components/cart/actions';
 
 export default function DeleteItemButton({ item }: { item: CartItem }) {
   const router = useRouter();
@@ -28,16 +28,16 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
       }}
       disabled={isPending}
       className={clsx(
-        'ease flex min-w-[36px] max-w-[36px] items-center justify-center border px-2 transition-all duration-200 hover:border-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-900',
+        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
         {
           'cursor-not-allowed px-0': isPending
         }
       )}
     >
       {isPending ? (
-        <LoadingDots className="bg-black dark:bg-white" />
+        <LoadingDots className="bg-white" />
       ) : (
-        <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4" />
+        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
       )}
     </button>
   );
diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
index 0bef12636..560f09db4 100644
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -1,10 +1,9 @@
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { removeItem, updateItemQuantity } from 'components/cart/actions';
-import MinusIcon from 'components/icons/minus';
-import PlusIcon from 'components/icons/plus';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopware/types';
 
@@ -42,7 +41,7 @@ export default function EditItemQuantityButton({
       }}
       disabled={isPending}
       className={clsx(
-        'ease flex min-w-[36px] max-w-[36px] items-center justify-center border px-2 transition-all duration-200 hover:border-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-900',
+        'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
         {
           'cursor-not-allowed': isPending,
           'ml-auto': type === 'minus'
@@ -52,9 +51,9 @@ export default function EditItemQuantityButton({
       {isPending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className="h-4 w-4" />
+        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
       ) : (
-        <MinusIcon className="h-4 w-4" />
+        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
       )}
     </button>
   );
diff --git a/components/cart/index.tsx b/components/cart/index.tsx
index 290111d15..0c732ca99 100644
--- a/components/cart/index.tsx
+++ b/components/cart/index.tsx
@@ -11,14 +11,6 @@ export default async function Cart() {
     resCart = await fetchCart(cartId);
   }
 
-  let newToken;
-  if (!cartId && !resCart) {
-    resCart = await fetchCart();
-    if (resCart?.token) {
-      newToken = resCart?.token;
-    }
-  }
-
   let cart;
   if (resCart) {
     cart = transformCart(resCart);
@@ -28,10 +20,5 @@ export default async function Cart() {
     return null;
   }
 
-  let cartIdUpdated = false;
-  if (cartId !== newToken) {
-    cartIdUpdated = true;
-  }
-
-  return <CartModal cart={cart} cartIdUpdated={cartIdUpdated} />;
+  return <CartModal cart={cart} />;
 }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 0d8bc29f6..7423bcbfd 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -1,63 +1,49 @@
 'use client';
 
 import { Dialog, Transition } from '@headlessui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-
-import CartIcon from 'components/icons/cart';
-import CloseIcon from 'components/icons/close';
-import ShoppingBagIcon from 'components/icons/shopping-bag';
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopware/types';
 import { createUrl } from 'lib/utils';
+import Image from 'next/image';
+import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
-import { useCookies } from 'react-cookie';
+import CloseCart from './close-cart';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
+import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {
   [key: string]: string;
 };
 
-export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdUpdated: boolean }) {
-  const [, setCookie] = useCookies(['sw-context-token']);
+export default function CartModal({ cart }: { cart: Cart | undefined }) {
   const [isOpen, setIsOpen] = useState(false);
-  const quantityRef = useRef(cart.totalQuantity);
+  const quantityRef = useRef(cart?.totalQuantity);
   const openCart = () => setIsOpen(true);
   const closeCart = () => setIsOpen(false);
 
-  useEffect(() => {
-    if (cartIdUpdated) {
-      setCookie('sw-context-token', cart.id, {
-        path: '/',
-        sameSite: 'strict',
-        secure: process.env.NODE_ENV === 'production'
-      });
-    }
-    return;
-  }, [setCookie, cartIdUpdated, cart.id]);
-
   useEffect(() => {
     // Open cart modal when when quantity changes.
-    if (cart.totalQuantity !== quantityRef.current) {
+    if (cart?.totalQuantity !== quantityRef.current) {
       // But only if it's not already open (quantity also changes when editing items in cart).
       if (!isOpen) {
         setIsOpen(true);
       }
 
       // Always update the quantity reference
-      quantityRef.current = cart.totalQuantity;
+      quantityRef.current = cart?.totalQuantity;
     }
-  }, [isOpen, cart, quantityRef]);
+  }, [isOpen, cart?.totalQuantity, quantityRef]);
 
   return (
     <>
-      <button aria-label="Open cart" onClick={openCart} data-testid="open-cart">
-        <CartIcon quantity={cart.totalQuantity} />
+      <button aria-label="Open cart" onClick={openCart}>
+        <OpenCart quantity={cart?.totalQuantity} />
       </button>
       <Transition show={isOpen}>
-        <Dialog onClose={closeCart} className="relative z-50" data-testid="cart">
+        <Dialog onClose={closeCart} className="relative z-50">
           <Transition.Child
             as={Fragment}
             enter="transition-all ease-in-out duration-300"
@@ -78,27 +64,23 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white p-6 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
-                <p className="text-lg font-bold">My Cart</p>
-                <button
-                  aria-label="Close cart"
-                  onClick={closeCart}
-                  className="text-black transition-colors hover:text-gray-500 dark:text-gray-100"
-                  data-testid="close-cart"
-                >
-                  <CloseIcon className="h-7" />
+                <p className="text-lg font-semibold">My Cart</p>
+
+                <button aria-label="Close cart" onClick={closeCart}>
+                  <CloseCart />
                 </button>
               </div>
 
-              {cart.lines.length === 0 ? (
+              {!cart || cart.lines.length === 0 ? (
                 <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
-                  <ShoppingBagIcon className="h-16" />
+                  <ShoppingCartIcon className="h-16" />
                   <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
                 </div>
               ) : (
-                <div className="flex h-full flex-col justify-between overflow-hidden">
-                  <ul className="flex-grow overflow-auto p-6">
+                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
+                  <ul className="flex-grow overflow-auto py-4">
                     {cart.lines.map((item, i) => {
                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
@@ -114,17 +96,22 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                       );
 
                       return (
-                        <li key={i} data-testid="cart-item">
-                          <Link
-                            className="flex flex-row space-x-4 py-4"
-                            href={merchandiseUrl}
-                            onClick={closeCart}
-                          >
-                            <div className="relative h-16 w-16 cursor-pointer overflow-hidden bg-white">
-                              {item.merchandise.product.featuredImage.url !== '' &&
-                              typeof item.merchandise.product.featuredImage.url !== 'undefined' ? (
+                        <li
+                          key={i}
+                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                        >
+                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                            <div className="absolute z-40 -mt-2 ml-[55px]">
+                              <DeleteItemButton item={item} />
+                            </div>
+                            <Link
+                              href={merchandiseUrl}
+                              onClick={closeCart}
+                              className="z-30 flex flex-row space-x-4"
+                            >
+                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                                 <Image
-                                  className="h-full w-full object-cover"
+                                  className="h-full w-full object-cover "
                                   width={64}
                                   height={64}
                                   alt={
@@ -133,61 +120,55 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                                   }
                                   src={item.merchandise.product.featuredImage.url}
                                 />
-                              ) : null}
-                            </div>
-                            <div className="flex flex-1 flex-col text-base">
-                              <span className="font-semibold">
-                                {item.merchandise.product.title}
-                              </span>
-                              {item.merchandise.title !== DEFAULT_OPTION ? (
-                                <p className="text-sm" data-testid="cart-product-variant">
-                                  {item.merchandise.title}
+                              </div>
+
+                              <div className="flex flex-1 flex-col text-base">
+                                <span className="leading-tight">
+                                  {item.merchandise.product.title}
+                                </span>
+                                {item.merchandise.title !== DEFAULT_OPTION ? (
+                                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                    {item.merchandise.title}
+                                  </p>
+                                ) : null}
+                              </div>
+                            </Link>
+                            <div className="flex h-16 flex-col justify-between">
+                              <Price
+                                className="flex justify-end space-y-2 text-right text-sm"
+                                amount={item.cost.totalAmount.amount}
+                                currencyCode={item.cost.totalAmount.currencyCode}
+                              />
+                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                                <EditItemQuantityButton item={item} type="minus" />
+                                <p className="w-6 text-center ">
+                                  <span className="w-full text-sm">{item.quantity}</span>
                                 </p>
-                              ) : null}
+                                <EditItemQuantityButton item={item} type="plus" />
+                              </div>
                             </div>
-                            <Price
-                              className="flex flex-col justify-between space-y-2 text-sm"
-                              amount={item.cost.totalAmount.amount}
-                              currencyCode={item.cost.totalAmount.currencyCode}
-                            />
-                          </Link>
-                          <div className="flex h-9 flex-row">
-                            <DeleteItemButton item={item} />
-                            <p className="ml-2 flex w-full items-center justify-center border dark:border-gray-700">
-                              <span className="w-full px-2">{item.quantity}</span>
-                            </p>
-                            <EditItemQuantityButton item={item} type="minus" />
-                            <EditItemQuantityButton item={item} type="plus" />
                           </div>
                         </li>
                       );
                     })}
                   </ul>
-                  <div className="border-t border-gray-200 pt-2 text-sm text-black dark:text-white">
-                    <div className="mb-2 flex items-center justify-between">
-                      <p>Subtotal</p>
-                      <Price
-                        className="text-right"
-                        amount={cart.cost.subtotalAmount.amount}
-                        currencyCode={cart.cost.subtotalAmount.currencyCode}
-                      />
-                    </div>
-                    <div className="mb-2 flex items-center justify-between">
+                  <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
                       <p>Taxes</p>
                       <Price
-                        className="text-right"
+                        className="text-right text-base text-black dark:text-white"
                         amount={cart.cost.totalTaxAmount.amount}
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
                     </div>
-                    <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Shipping</p>
                       <p className="text-right">Calculated at checkout</p>
                     </div>
-                    <div className="mb-2 flex items-center justify-between font-bold">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Total</p>
                       <Price
-                        className="text-right"
+                        className="text-right text-base text-black dark:text-white"
                         amount={cart.cost.totalAmount.amount}
                         currencyCode={cart.cost.totalAmount.currencyCode}
                       />
@@ -195,9 +176,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                   </div>
                   <a
                     href={cart.checkoutUrl}
-                    className="flex w-full items-center justify-center bg-black p-3 text-sm font-medium uppercase text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black"
+                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
                   >
-                    <span>Proceed to Checkout</span>
+                    Proceed to Checkout
                   </a>
                 </div>
               )}
diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx
new file mode 100644
index 000000000..fa8226ab5
--- /dev/null
+++ b/components/cart/open-cart.tsx
@@ -0,0 +1,24 @@
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function OpenCart({
+  className,
+  quantity
+}: {
+  className?: string;
+  quantity?: number;
+}) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <ShoppingCartIcon
+        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+      />
+
+      {quantity ? (
+        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
+          {quantity}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 07dc0d2a9..92681555a 100644
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 function Grid(props: React.ComponentProps<'ul'>) {
   return (
-    <ul {...props} className={clsx('grid grid-flow-row  gap-4 py-5', props.className)}>
+    <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
       {props.children}
     </ul>
   );
@@ -10,17 +10,12 @@ function Grid(props: React.ComponentProps<'ul'>) {
 
 function GridItem(props: React.ComponentProps<'li'>) {
   return (
-    <li
-      {...props}
-      className={clsx(
-        'relative aspect-square h-full w-full overflow-hidden transition-opacity',
-        props.className
-      )}
-    >
+    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
       {props.children}
     </li>
   );
 }
 
 Grid.Item = GridItem;
+
 export default Grid;
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 27242bef5..59a3e799f 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -4,15 +4,7 @@ import { isSeoUrls } from 'lib/shopware/helpers';
 import type { Product } from 'lib/shopware/types';
 import Link from 'next/link';
 
-function ThreeItemGridItem({
-  item,
-  size,
-  background
-}: {
-  item: Product;
-  size: 'full' | 'half';
-  background: 'white' | 'pink' | 'purple' | 'black';
-}) {
+function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
   return (
     <div
       className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
@@ -23,9 +15,9 @@ function ThreeItemGridItem({
           width={size === 'full' ? 1080 : 540}
           height={size === 'full' ? 1080 : 540}
           priority={true}
-          background={background}
           alt={item.title}
-          labels={{
+          label={{
+            position: size === 'full' ? 'center' : 'bottom',
             title: item.title as string,
             amount: item.priceRange.maxVariantPrice.amount,
             currencyCode: item.priceRange.maxVariantPrice.currencyCode
@@ -50,10 +42,10 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
-      <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
-      <ThreeItemGridItem size="half" item={secondProduct} background="black" />
-      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
+      <ThreeItemGridItem size="full" item={firstProduct} />
+      <ThreeItemGridItem size="half" item={secondProduct} />
+      <ThreeItemGridItem size="half" item={thirdProduct} />
     </section>
   );
 }
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index 3b6d7c2fa..783a919b1 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -1,70 +1,50 @@
 import clsx from 'clsx';
 import Image from 'next/image';
-
-import Price from 'components/price';
+import Label from '../label';
 
 export function GridTileImage({
   isInteractive = true,
-  background,
   active,
-  labels,
+  label,
   ...props
 }: {
   isInteractive?: boolean;
-  background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
   active?: boolean;
-  labels?: {
+  label?: {
     title: string;
     amount: string;
     currencyCode: string;
-    isSmall?: boolean;
+    position?: 'bottom' | 'center';
   };
 } & React.ComponentProps<typeof Image>) {
   return (
     <div
-      className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', {
-        'bg-white dark:bg-white': background === 'white',
-        'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink',
-        'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple',
-        'bg-gray-900 dark:bg-gray-900': background === 'black',
-        'bg-violetDark dark:bg-violetDark': background === 'purple-dark',
-        'bg-blue-500 dark:bg-blue-500': background === 'blue',
-        'bg-cyan-500 dark:bg-cyan-500': background === 'cyan',
-        'bg-gray-100 dark:bg-gray-100': background === 'gray',
-        'bg-gray-100 dark:bg-gray-900': !background,
-        relative: labels
-      })}
+      className={clsx(
+        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
+        {
+          relative: label,
+          'border-2 border-blue-600': active,
+          'border-neutral-200 dark:border-neutral-800': !active
+        }
+      )}
     >
-      {active !== undefined && active ? (
-        <span className="absolute h-full w-full bg-white opacity-25"></span>
-      ) : null}
       {props.src ? (
+        // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
         <Image
           className={clsx('relative h-full w-full object-contain', {
             'transition duration-300 ease-in-out hover:scale-105': isInteractive,
             'm-4 max-h-[8rem] min-h-[8rem]': props.width === 200 && props.height === 200 // this styling is for the thumbnails below gallery on product detail page
           })}
           {...props}
-          alt={props.title || ''}
         />
       ) : null}
-      {labels ? (
-        <div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
-          <h3
-            data-testid="product-name"
-            className={clsx(
-              'inline bg-white box-decoration-clone py-3 pl-5 font-semibold leading-loose shadow-[1.25rem_0_0] shadow-white dark:bg-black dark:shadow-black',
-              !labels.isSmall ? 'text-3xl' : 'text-lg'
-            )}
-          >
-            {labels.title}
-          </h3>
-          <Price
-            className="w-fit bg-white px-5 py-3 text-sm font-semibold dark:bg-black dark:text-white"
-            amount={labels.amount}
-            currencyCode={labels.currencyCode}
-          />
-        </div>
+      {label ? (
+        <Label
+          title={label.title}
+          amount={label.amount}
+          currencyCode={label.currencyCode}
+          position={label.position}
+        />
       ) : null}
     </div>
   );
diff --git a/components/icons/arrow-left.tsx b/components/icons/arrow-left.tsx
deleted file mode 100644
index 95d5af173..000000000
--- a/components/icons/arrow-left.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function ArrowLeftIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M19 12H5" />
-      <path d="M12 19L5 12L12 5" />
-    </svg>
-  );
-}
diff --git a/components/icons/caret-right.tsx b/components/icons/caret-right.tsx
deleted file mode 100644
index fbed04236..000000000
--- a/components/icons/caret-right.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function CaretRightIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M9 18l6-6-6-6" />
-    </svg>
-  );
-}
diff --git a/components/icons/cart.tsx b/components/icons/cart.tsx
deleted file mode 100644
index 52f761485..000000000
--- a/components/icons/cart.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-import ShoppingBagIcon from './shopping-bag';
-
-export default function CartIcon({
-  className,
-  quantity
-}: {
-  className?: string;
-  quantity?: number;
-}) {
-  return (
-    <div className="relative">
-      <ShoppingBagIcon
-        className={clsx(
-          'h-6 transition-all ease-in-out hover:scale-110 hover:text-gray-500 dark:hover:text-gray-300',
-          className
-        )}
-      />
-      {quantity ? (
-        <div className="absolute bottom-0 left-0 -mb-3 -ml-3 flex h-5 w-5 items-center justify-center rounded-full border-2 border-white bg-black text-xs text-white dark:border-black dark:bg-white dark:text-black">
-          {quantity}
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/components/icons/close.tsx b/components/icons/close.tsx
deleted file mode 100644
index a92a43154..000000000
--- a/components/icons/close.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function CloseIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
-    </svg>
-  );
-}
diff --git a/components/icons/logo.tsx b/components/icons/logo.tsx
index cdcfc8fe2..46fa02464 100644
--- a/components/icons/logo.tsx
+++ b/components/icons/logo.tsx
@@ -1,20 +1,16 @@
-export default function LogoIcon({ className }: { className?: string }) {
+import clsx from 'clsx';
+
+export default function LogoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       aria-label={`${process.env.SITE_NAME} logo`}
-      viewBox="0 0 32 32"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
+      viewBox="0 0 32 28"
+      {...props}
+      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
     >
-      <rect width="100%" height="100%" rx="16" className="fill-black dark:fill-white" />
-      <path
-        className=" fill-white dark:fill-black"
-        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      />
+      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
+      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
     </svg>
   );
 }
diff --git a/components/icons/menu.tsx b/components/icons/menu.tsx
deleted file mode 100644
index acaed1188..000000000
--- a/components/icons/menu.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function MenuIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M4 6h16M4 12h16m-7 6h7" />
-    </svg>
-  );
-}
diff --git a/components/icons/minus.tsx b/components/icons/minus.tsx
deleted file mode 100644
index 93c46e1dc..000000000
--- a/components/icons/minus.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function MinusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M5 12H19" />
-    </svg>
-  );
-}
diff --git a/components/icons/plus.tsx b/components/icons/plus.tsx
deleted file mode 100644
index 8ae449578..000000000
--- a/components/icons/plus.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function PlusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M12 5V19" />
-      <path d="M5 12H19" />
-    </svg>
-  );
-}
diff --git a/components/icons/search.tsx b/components/icons/search.tsx
deleted file mode 100644
index a03574025..000000000
--- a/components/icons/search.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function SearchIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-      />
-    </svg>
-  );
-}
diff --git a/components/icons/shopping-bag.tsx b/components/icons/shopping-bag.tsx
deleted file mode 100644
index a5dd1768e..000000000
--- a/components/icons/shopping-bag.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export default function ShoppingBagIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 22"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z" />
-      <path d="M1 5H19" />
-      <path d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9" />
-    </svg>
-  );
-}
diff --git a/components/icons/vercel.tsx b/components/icons/vercel.tsx
deleted file mode 100644
index 06e4d62da..000000000
--- a/components/icons/vercel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export default function VercelIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      aria-label="Vercel.com Logo"
-      viewBox="0 0 89 20"
-      fill="currentColor"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" />
-      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" />
-      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" />
-      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" />
-      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" />
-      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" />
-      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" />
-    </svg>
-  );
-}
diff --git a/components/label.tsx b/components/label.tsx
new file mode 100644
index 000000000..e49efce40
--- /dev/null
+++ b/components/label.tsx
@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import Price from './price';
+
+const Label = ({
+  title,
+  amount,
+  currencyCode,
+  position = 'bottom'
+}: {
+  title: string;
+  amount: string;
+  currencyCode: string;
+  position?: 'bottom' | 'center';
+}) => {
+  return (
+    <div
+      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
+        'lg:px-20 lg:pb-[35%]': position === 'center'
+      })}
+    >
+      <div className="flex items-center rounded-full border bg-white/70 p-1 text-[10px] font-semibold text-black backdrop-blur-md @[275px]/label:text-xs dark:border-neutral-800 dark:bg-black/70 dark:text-white">
+        <h3 className="mr-4 inline pl-2 leading-none tracking-tight">{title}</h3>
+        <Price
+          className="flex-none rounded-full bg-blue-600 p-2 text-white"
+          amount={amount}
+          currencyCode={currencyCode}
+          currencyCodeClassName="hidden @[275px]/label:inline"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Label;
diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx
new file mode 100644
index 000000000..696f61fc0
--- /dev/null
+++ b/components/layout/footer-menu.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import clsx from 'clsx';
+import { Menu } from 'lib/shopify/types';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const FooterMenuItem = ({ item }: { item: Menu }) => {
+  const pathname = usePathname();
+  const [active, setActive] = useState(pathname === item.path);
+
+  useEffect(() => {
+    setActive(pathname === item.path);
+  }, [pathname, item.path]);
+
+  return (
+    <li className="mt-2 first:mt-1">
+      <Link
+        href={item.path}
+        className={clsx(
+          'underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300',
+          {
+            'text-black dark:text-neutral-300': active
+          }
+        )}
+      >
+        {item.title}
+      </Link>
+    </li>
+  );
+};
+
+export default function FooterMenu({ menu }: { menu: Menu[] }) {
+  if (!menu.length) return null;
+
+  return (
+    <nav>
+      <ul>
+        {menu.map((item: Menu) => {
+          return <FooterMenuItem key={item.title} item={item} />;
+        })}
+      </ul>
+    </nav>
+  );
+}
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 47404d475..d6f7587e9 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -2,28 +2,30 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 import GitHubIcon from 'components/icons/github';
-import LogoIcon from 'components/icons/logo';
+import FooterMenu from 'components/layout/footer-menu';
+import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopware';
 import { Menu } from 'lib/shopware/types';
+import { Suspense } from 'react';
 
-const { SITE_NAME } = process.env;
+const { COMPANY_NAME, SITE_NAME } = process.env;
 
 export default async function Footer() {
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
+  const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
   const menu = await getMenu({ type: 'footer-navigation', depth: 2 });
+  const copyrightName = COMPANY_NAME || SITE_NAME || '';
 
   return (
     <footer className="border-t border-gray-700 bg-white text-black dark:bg-black dark:text-white">
       <div className="mx-auto w-full max-w-7xl px-6">
         <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
           <div className="col-span-1 lg:col-span-4">
-            <a className="flex flex-initial items-center font-bold" href="/">
-              <span className="mr-4">
-                <LogoIcon className="h-8" />
-              </span>
-              <span>{SITE_NAME}</span>
-            </a>
+            <Link className="flex items-center gap-2 text-black dark:text-white" href="/">
+              <LogoSquare size="sm" />
+              <span className="uppercase">{SITE_NAME}</span>
+            </Link>
           </div>
           {menu.map((item: Menu) => (
             <nav className="col-span-1 lg:col-span-3" key={item.title + item.type}>
@@ -64,9 +66,36 @@ export default async function Footer() {
             </a>
           </div>
         </div>
-        <div className="flex flex-col items-center justify-between space-y-4 pb-10 pt-6 text-sm md:flex-row">
+        <Suspense
+          fallback={
+            <div className="flex h-[188px] w-[200px] flex-col gap-2">
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+            </div>
+          }
+        >
+          <FooterMenu menu={menu} />
+        </Suspense>
+        <div className="md:ml-auto">
+          <a
+            className="flex items-center gap-2 hover:text-black dark:hover:text-neutral-300"
+            aria-label="Github Repository"
+            href="https://github.com/vercel/commerce"
+          >
+            <GitHubIcon className="h-6" />
+            <p>Source</p>
+          </a>
+        </div>
+      </div>
+      <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
           <p>
-            &copy; {copyrightDate} {SITE_NAME}. All rights reserved.
+            &copy; {copyrightDate} {copyrightName}
+            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
           <div className="flex items-center text-sm text-white dark:text-black">
             <span className="text-black dark:text-white">
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 301982468..19caed58f 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -1,51 +1,57 @@
-import Link from 'next/link';
-import { Suspense } from 'react';
-
 import Cart from 'components/cart';
-import CartIcon from 'components/icons/cart';
-import LogoIcon from 'components/icons/logo';
+import OpenCart from 'components/cart/open-cart';
+import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopware';
 import { Menu } from 'lib/shopware/types';
+import Link from 'next/link';
+import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
+const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
   const menu = await getMenu({ type: 'main-navigation' });
 
   return (
-    <nav className="relative flex items-center justify-between bg-white p-4 dark:bg-black lg:px-6">
-      <div className="block w-1/3 md:hidden">
+    <nav className="relative flex items-center justify-between p-4 lg:px-6">
+      <div className="block flex-none md:hidden">
         <MobileMenu menu={menu} />
       </div>
-      <div className="flex justify-self-center md:w-6/12 md:justify-self-start">
-        <div className="md:mr-4">
-          <Link href="/" aria-label="Go back home">
-            <LogoIcon className="h-8 transition-transform hover:scale-110" />
+      <div className="flex w-full items-center">
+        <div className="flex w-full md:w-1/3">
+          <Link
+            href="/"
+            aria-label="Go back home"
+            className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+          >
+            <LogoSquare />
+            <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
+              {SITE_NAME}
+            </div>
           </Link>
+          {menu.length ? (
+            <ul className="hidden text-sm md:flex md:items-center">
+              {menu.map((item: Menu) => (
+                <li key={item.title}>
+                  <Link
+                    href={item.path}
+                    className="mr-3 text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300 lg:mr-8"
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <div className="hidden justify-center md:flex md:w-1/3">
+          <Search />
+        </div>
+        <div className="flex justify-end md:w-1/3">
+          <Suspense fallback={<OpenCart />}>
+            <Cart />
+          </Suspense>
         </div>
-        {menu.length ? (
-          <ul className="hidden md:flex md:items-center">
-            {menu.map((item: Menu) => (
-              <li key={item.title}>
-                <Link
-                  href={item.path}
-                  className="rounded-lg px-2 py-1 text-gray-800 hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400"
-                >
-                  {item.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-      <div className="hidden w-3/12 md:block">
-        <Search />
-      </div>
-
-      <div className="flex w-3/12 justify-end">
-        <Suspense fallback={<CartIcon className="h-6" />}>
-          <Cart />
-        </Suspense>
       </div>
     </nav>
   );
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index ececc0a96..1f9862614 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -5,8 +5,7 @@ import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { Fragment, useEffect, useState } from 'react';
 
-import CloseIcon from 'components/icons/close';
-import MenuIcon from 'components/icons/menu';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopware/types';
 import Search from './search';
 
@@ -33,13 +32,8 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
 
   return (
     <>
-      <button
-        onClick={openMobileMenu}
-        aria-label="Open mobile menu"
-        className="md:hidden"
-        data-testid="open-mobile-menu"
-      >
-        <MenuIcon className="h-6" />
+      <button onClick={openMobileMenu} aria-label="Open mobile menu" className="md:hidden">
+        <Bars3Icon className="h-6" />
       </button>
       <Transition show={isOpen}>
         <Dialog onClose={closeMobileMenu} className="relative z-50">
@@ -65,13 +59,8 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
           >
             <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
               <div className="p-4">
-                <button
-                  className="mb-4"
-                  onClick={closeMobileMenu}
-                  aria-label="Close mobile menu"
-                  data-testid="close-mobile-menu"
-                >
-                  <CloseIcon className="h-6" />
+                <button className="mb-4" onClick={closeMobileMenu} aria-label="Close mobile menu">
+                  <XMarkIcon className="h-6" />
                 </button>
 
                 <div className="mb-4 w-full">
@@ -83,7 +72,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                       <li key={item.title}>
                         <Link
                           href={item.path}
-                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
+                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
                           onClick={closeMobileMenu}
                         >
                           {item.title}
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index fff895f43..e6d9ce307 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -1,13 +1,19 @@
 'use client';
 
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
-import SearchIcon from 'components/icons/search';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { createUrl } from 'lib/utils';
 
 export default function Search() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const [searchValue, setSearchValue] = useState('');
+
+  useEffect(() => {
+    setSearchValue(searchParams?.get('q') || '');
+  }, [searchParams, setSearchValue]);
 
   function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -26,20 +32,18 @@ export default function Search() {
   }
 
   return (
-    <form
-      onSubmit={onSubmit}
-      className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
-    >
+    <form onSubmit={onSubmit} className="relative w-full lg:w-[320px]">
       <input
         type="text"
         name="search"
         placeholder="Search for products..."
         autoComplete="off"
-        defaultValue={searchParams?.get('q') || ''}
-        className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
-        <SearchIcon className="h-5" />
+        <MagnifyingGlassIcon className="h-4" />
       </div>
     </form>
   );
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index e2fdf10cb..f2c55c55a 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -8,11 +8,10 @@ export default function ProductGridItems({ products }: { products: Product[] })
     <>
       {products.map((product) => (
         <Grid.Item key={product.path} className="animate-fadeIn">
-          <Link className="h-full w-full" href={`/product/${product.path}`}>
+          <Link className="inline-block h-full w-full" href={`/product/${product.path}`}>
             <GridTileImage
               alt={product.title}
-              labels={{
-                isSmall: true,
+              label={{
                 title: product.title,
                 amount: product.priceRange.maxVariantPrice.amount,
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
diff --git a/components/layout/search/collections.tsx b/components/layout/search/collections.tsx
index 2009790ee..cf628ab18 100644
--- a/components/layout/search/collections.tsx
+++ b/components/layout/search/collections.tsx
@@ -14,14 +14,14 @@ async function CollectionList({ collection }: { collection: string }) {
 }
 
 const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
-const activeAndTitles = 'bg-gray-800 dark:bg-gray-300';
-const items = 'bg-gray-400 dark:bg-gray-700';
+const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
+const items = 'bg-neutral-400 dark:bg-neutral-700';
 
 export default function Collections({ collection }: { collection: string }) {
   return (
     <Suspense
       fallback={
-        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 pl-10 lg:block">
+        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, items)} />
diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 6f3e37f26..31daa25ce 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -3,7 +3,7 @@
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
-import Caret from 'components/icons/caret-right';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -45,7 +45,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
-        <Caret className="h-4 rotate-90" />
+        <ChevronDownIcon className="h-4" />
       </div>
       {openSelect && (
         <div
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index d740faeaa..ac5002d68 100644
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -7,21 +7,19 @@ export type PathFilterItem = { title: string; path: string };
 
 function FilterItemList({ list }: { list: ListItem[] }) {
   return (
-    <div className="hidden md:block">
+    <>
       {list.map((item: ListItem, i) => (
         <FilterItem key={i} item={item} />
       ))}
-    </div>
+    </>
   );
 }
 
 export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
   return (
     <>
-      <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
-        {title ? (
-          <h3 className="hidden font-semibold text-black dark:text-white md:block">{title}</h3>
-        ) : null}
+      <nav>
+        {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>
diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index 6f02b9483..ff44627f1 100644
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -13,6 +13,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   const searchParams = useSearchParams();
   const [active, setActive] = useState(pathname === item.path);
   const newParams = new URLSearchParams(searchParams.toString());
+  const DynamicTag = active ? 'p' : Link;
 
   newParams.delete('q');
 
@@ -21,16 +22,18 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   }, [pathname, item.path]);
 
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
-      <Link
+    <li className="mt-2 flex text-black dark:text-white" key={item.title}>
+      <DynamicTag
         href={createUrl(item.path, newParams)}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
-        })}
+        className={clsx(
+          'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
+          {
+            'underline underline-offset-4': active
+          }
+        )}
       >
         {item.title}
-      </Link>
+      </DynamicTag>
     </li>
   );
 }
@@ -41,11 +44,6 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
   const [active, setActive] = useState(searchParams.get('sort') === item.slug);
   const q = searchParams.get('q');
   const page = searchParams.get('page');
-
-  useEffect(() => {
-    setActive(searchParams.get('sort') === item.slug);
-  }, [searchParams, item.slug]);
-
   const href =
     item.slug && item.slug.length
       ? createUrl(
@@ -57,19 +55,23 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
           })
         )
       : pathname;
+  const DynamicTag = active ? 'p' : Link;
+
+  useEffect(() => {
+    setActive(searchParams.get('sort') === item.slug);
+  }, [searchParams, item.slug]);
 
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
-      <Link
-        prefetch={false}
+    <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
+      <DynamicTag
+        prefetch={!active ? false : undefined}
         href={href}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
+        className={clsx('w-full', {
+          'underline underline-offset-4': active
         })}
       >
         {item.title}
-      </Link>
+      </DynamicTag>
     </li>
   );
 }
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
new file mode 100644
index 000000000..eccf5cba7
--- /dev/null
+++ b/components/logo-square.tsx
@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import LogoIcon from './icons/logo';
+
+export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
+  return (
+    <div
+      className={clsx(
+        'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
+        {
+          'h-[40px] w-[40px] rounded-xl': !size,
+          'h-[30px] w-[30px] rounded-lg': size === 'sm'
+        }
+      )}
+    >
+      <LogoIcon
+        className={clsx({
+          'h-[16px] w-[16px]': !size,
+          'h-[10px] w-[10px]': size === 'sm'
+        })}
+      />
+    </div>
+  );
+}
diff --git a/components/opengraph-image.tsx b/components/opengraph-image.tsx
index f5d29c7c7..17592bca8 100644
--- a/components/opengraph-image.tsx
+++ b/components/opengraph-image.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse } from 'next/server';
+import LogoIcon from './icons/logo';
 
 export type Props = {
   title?: string;
@@ -15,15 +16,9 @@ export default async function OpengraphImage(props?: Props): Promise<ImageRespon
   return new ImageResponse(
     (
       <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
-        <svg viewBox="0 0 32 32" width="140">
-          <rect width="100%" height="100%" rx="16" fill="white" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            fill="black"
-            d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-          />
-        </svg>
+        <div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl">
+          <LogoIcon width="64" height="58" fill="white" />
+        </div>
         <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
       </div>
     ),
diff --git a/components/price.tsx b/components/price.tsx
index 90f6558a0..e7090148d 100644
--- a/components/price.tsx
+++ b/components/price.tsx
@@ -1,17 +1,23 @@
+import clsx from 'clsx';
+
 const Price = ({
   amount,
+  className,
   currencyCode = 'USD',
-  ...props
+  currencyCodeClassName
 }: {
   amount: string;
+  className?: string;
   currencyCode: string;
+  currencyCodeClassName?: string;
 } & React.ComponentProps<'p'>) => (
-  <p suppressHydrationWarning={true} {...props}>
+  <p suppressHydrationWarning={true} className={className}>
     {`${new Intl.NumberFormat(undefined, {
       style: 'currency',
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
-    }).format(parseFloat(amount))} ${currencyCode}`}
+    }).format(parseFloat(amount))}`}
+    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
   </p>
 );
 
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 92cd9432b..18c19ef06 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -1,92 +1,77 @@
 'use client';
 
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { GridTileImage } from 'components/grid/tile';
+import Image from 'next/image';
 import { useState } from 'react';
 
-import clsx from 'clsx';
-import { GridTileImage } from 'components/grid/tile';
-import ArrowLeftIcon from 'components/icons/arrow-left';
-
-export function Gallery({
-  title,
-  amount,
-  currencyCode,
-  images
-}: {
-  title: string;
-  amount: string;
-  currencyCode: string;
-  images: { src: string; altText: string }[];
-}) {
-  const [currentImage, setCurrentImage] = useState(0);
+export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
   function handleNavigate(direction: 'next' | 'previous') {
     if (direction === 'next') {
-      setCurrentImage(currentImage + 1 < images.length ? currentImage + 1 : 0);
+      setCurrentImageIndex(currentImageIndex + 1 < images.length ? currentImageIndex + 1 : 0);
     } else {
-      setCurrentImage(currentImage === 0 ? images.length - 1 : currentImage - 1);
+      setCurrentImageIndex(currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1);
     }
   }
 
   const buttonClassName =
-    'px-9 cursor-pointer ease-in-and-out duration-200 transition-bg bg-[#7928ca] hover:bg-violetDark';
+    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
 
   return (
-    <div className="h-full">
-      <div className="relative h-full max-h-[600px] overflow-hidden">
-        {images[currentImage] && (
-          <GridTileImage
-            src={images[currentImage]?.src as string}
-            alt={images[currentImage]?.altText as string}
-            width={600}
+    <div className="mr-8 h-full">
+      <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
+        {images[currentImageIndex] && (
+          <Image
+            className="relative h-full w-full object-contain"
             height={600}
-            isInteractive={false}
+            width={600}
+            alt={images[currentImageIndex]?.altText as string}
+            src={images[currentImageIndex]?.src as string}
             priority={true}
-            background="purple"
-            labels={{
-              title,
-              amount,
-              currencyCode
-            }}
           />
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
-            <button
-              aria-label="Previous product image"
-              className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
-              onClick={() => handleNavigate('previous')}
-            >
-              <ArrowLeftIcon className="h-6" />
-            </button>
-            <button
-              aria-label="Next product image"
-              className={clsx(buttonClassName)}
-              onClick={() => handleNavigate('next')}
-            >
-              <ArrowLeftIcon className="h-6 rotate-180" />
-            </button>
+          <div className="absolute bottom-[15%] flex w-full justify-center">
+            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
+              <button
+                aria-label="Previous product image"
+                onClick={() => handleNavigate('previous')}
+                className={buttonClassName}
+              >
+                <ArrowLeftIcon className="h-5" />
+              </button>
+              <div className="mx-1 h-6 w-px bg-neutral-500"></div>
+              <button
+                aria-label="Next product image"
+                onClick={() => handleNavigate('next')}
+                className={buttonClassName}
+              >
+                <ArrowRightIcon className="h-5" />
+              </button>
+            </div>
           </div>
         ) : null}
       </div>
 
       {images.length > 1 ? (
-        <div className="flex">
+        <div className="flex items-center justify-center gap-2 overflow-auto py-1">
           {images.map((image, index) => {
-            const isActive = index === currentImage;
+            const isActive = index === currentImageIndex;
             return (
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="h-full w-1/4"
-                onClick={() => setCurrentImage(index)}
+                className="h-auto w-20"
+                onClick={() => setCurrentImageIndex(index)}
               >
                 <GridTileImage
-                  alt={image?.altText}
+                  alt={image.altText}
                   src={image.src}
                   width={200}
                   height={200}
-                  background="purple-dark"
                   active={isActive}
                 />
               </button>
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
new file mode 100644
index 000000000..a60e5e184
--- /dev/null
+++ b/components/product/product-description.tsx
@@ -0,0 +1,35 @@
+import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
+import Prose from 'components/prose';
+import { Product } from 'lib/shopware/types';
+import { VariantSelector } from './variant-selector';
+
+export function ProductDescription({ product }: { product: Product }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
+        <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
+          <Price
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+          />
+        </div>
+      </div>
+      <VariantSelector options={product.options} variants={product.variants} />
+
+      {product.descriptionHtml ? (
+        <Prose
+          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
+          html={product.descriptionHtml}
+        />
+      ) : null}
+
+      <AddToCart
+        product={product}
+        variants={product.variants}
+        availableForSale={product.availableForSale}
+      />
+    </>
+  );
+}
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index fd46261f9..00f6ee4ba 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -107,23 +107,27 @@ export function VariantSelector({
           )?.availableForSale;
 
           const DynamicTag = isAvailableForSale ? Link : 'p';
+          const dynamicProps = {
+            ...(isAvailableForSale && { scroll: false })
+          };
 
           return (
             <DynamicTag
               key={value}
+              aria-disabled={!isAvailableForSale}
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
-                'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
                 {
-                  'cursor-default ring-2 ring-black dark:ring-white': isActive,
-                  'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
+                  'cursor-default ring-2 ring-blue-600': isActive,
+                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
                     !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
+                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
                     !isAvailableForSale
                 }
               )}
-              data-testid={isActive ? 'selected-variant' : 'variant'}
+              {...dynamicProps}
             >
               {value}
             </DynamicTag>
diff --git a/components/prose.tsx b/components/prose.tsx
index 2445ee588..f910d2296 100644
--- a/components/prose.tsx
+++ b/components/prose.tsx
@@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
   return (
     <div
       className={clsx(
-        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-gray-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
         className
       )}
       dangerouslySetInnerHTML={{ __html: html as string }}
diff --git a/e2e/cart.spec.ts b/e2e/cart.spec.ts
deleted file mode 100644
index f7775ac1c..000000000
--- a/e2e/cart.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-const regex = (text: string) => new RegExp(text, 'gim');
-
-test('should be able to open and close cart', async ({ page }) => {
-  let cart;
-
-  await page.goto('/');
-
-  await page.getByTestId('open-cart').click();
-  cart = await page.getByTestId('cart');
-  await expect(cart).toBeVisible();
-  await expect(cart).toHaveText(regex('your cart is empty'));
-
-  await page.getByTestId('close-cart').click();
-  cart = await page.getByTestId('cart');
-  await expect(cart).toBeHidden();
-});
-
-test('should be able to add item to cart, without selecting a variant, assuming first variant', async ({
-  page
-}) => {
-  await page.goto('/');
-  await page.getByTestId('homepage-products').locator('a').first().click();
-
-  const productName = await page.getByTestId('product-name').first().innerText();
-  const firstVariant = await page.getByTestId('variant').first().innerText();
-
-  await page.getByRole('button', { name: regex('add to cart') }).click();
-
-  const cart = await page.getByTestId('cart');
-
-  await expect(cart).toBeVisible();
-
-  const cartItems = await page.getByTestId('cart-item').all();
-  let isItemInCart = false;
-
-  for (const item of cartItems) {
-    const cartProductName = await item.getByTestId('cart-product-name').innerText();
-    const cartProductVariant = await item.getByTestId('cart-product-variant').innerText();
-
-    if (cartProductName === productName && cartProductVariant === firstVariant) {
-      isItemInCart = true;
-      break;
-    }
-  }
-
-  await expect(isItemInCart).toBe(true);
-});
-
-test('should be able to add item to cart by selecting a variant', async ({ page }) => {
-  await page.goto('/');
-  await page.getByTestId('homepage-products').locator('a').first().click();
-
-  const selectedProductName = await page.getByTestId('product-name').first().innerText();
-  const secondVariant = await page.getByTestId('variant').nth(1);
-
-  await secondVariant.click();
-  const selectedProductVariant = await page.getByTestId('selected-variant').innerText();
-
-  await page.getByRole('button', { name: regex('add to cart') }).click();
-
-  const cart = await page.getByTestId('cart');
-
-  await expect(cart).toBeVisible();
-
-  const cartItem = await page.getByTestId('cart-item').first();
-  const cartItemProductName = await cartItem.getByTestId('cart-product-name').innerText();
-  const cartItemProductVariant = await cartItem.getByTestId('cart-product-variant').innerText();
-
-  await expect(cartItemProductName).toBe(selectedProductName);
-  await expect(cartItemProductVariant).toBe(selectedProductVariant);
-});
diff --git a/e2e/mobile-menu.spec.ts b/e2e/mobile-menu.spec.ts
deleted file mode 100644
index 0765f4d19..000000000
--- a/e2e/mobile-menu.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.use({ viewport: { width: 600, height: 900 } });
-test('should be able to open and close mobile menu', async ({ page }) => {
-  let mobileMenu;
-
-  await page.goto('/');
-
-  await page.getByTestId('open-mobile-menu').click();
-  mobileMenu = await page.getByTestId('mobile-menu');
-  await expect(mobileMenu).toBeVisible();
-
-  await page.getByTestId('close-mobile-menu').click();
-  mobileMenu = await page.getByTestId('mobile-menu');
-  await expect(mobileMenu).toBeHidden();
-});
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 2e23a7f78..64b5d24e8 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -23,6 +23,7 @@ import {
   Cart,
   Collection,
   Connection,
+  Image,
   Menu,
   Page,
   Product,
@@ -151,6 +152,18 @@ const reshapeCollections = (collections: ShopifyCollection[]) => {
   return reshapedCollections;
 };
 
+const reshapeImages = (images: Connection<Image>, productTitle: string) => {
+  const flattened = removeEdgesAndNodes(images);
+
+  return flattened.map((image) => {
+    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    return {
+      ...image,
+      altText: image.altText || `${productTitle} - ${filename}`
+    };
+  });
+};
+
 const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
   if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
     return undefined;
@@ -160,7 +173,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
 
   return {
     ...rest,
-    images: removeEdgesAndNodes(images),
+    images: reshapeImages(images, product.title),
     variants: removeEdgesAndNodes(variants)
   };
 };
@@ -234,15 +247,16 @@ export async function updateCart(
   return reshapeCart(res.body.data.cartLinesUpdate.cart);
 }
 
-export async function getCart(cartId: string): Promise<Cart | null> {
+export async function getCart(cartId: string): Promise<Cart | undefined> {
   const res = await shopifyFetch<ShopifyCartOperation>({
     query: getCartQuery,
     variables: { cartId },
     cache: 'no-store'
   });
 
+  // Old carts becomes `null` when you checkout.
   if (!res.body.data.cart) {
-    return null;
+    return undefined;
   }
 
   return reshapeCart(res.body.data.cart);
@@ -275,7 +289,7 @@ export async function getCollectionProducts({
     variables: {
       handle: collection,
       reverse,
-      sortKey
+      sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey
     }
   });
 
diff --git a/package.json b/package.json
index 5376c0e6a..db9cd20ca 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "private": true,
+  "packageManager": "pnpm@8.2.0",
   "engines": {
     "node": ">=18",
     "pnpm": ">=8"
@@ -12,29 +13,26 @@
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
     "start": "next start",
-    "test": "pnpm lint && pnpm prettier:check",
-    "test:e2e": "playwright test"
+    "test": "pnpm lint && pnpm prettier:check"
   },
   "lint-staged": {
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
+    "@heroicons/react": "^2.0.18",
     "@shopware/api-client": "0.0.0-canary-20230725064840",
-    "@vercel/og": "^0.5.9",
-    "clsx": "^1.2.1",
-    "is-empty-iterable": "^3.0.0",
+    "clsx": "^2.0.0",
     "next": "13.4.12",
     "react": "18.2.0",
-    "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
     "react-paginate": "^8.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.1",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "^20.4.4",
-    "@types/react": "18.2.15",
+    "@types/node": "20.4.4",
+    "@types/react": "18.2.16",
     "@types/react-dom": "18.2.7",
     "@vercel/git-hooks": "^1.0.0",
     "autoprefixer": "^10.4.14",
diff --git a/playwright.config.ts b/playwright.config.ts
deleted file mode 100644
index f98a725b5..000000000
--- a/playwright.config.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { PlaywrightTestConfig, devices } from '@playwright/test';
-import path from 'path';
-
-const baseURL = `http://localhost:${process.env.PORT || 3000}`;
-const config: PlaywrightTestConfig = {
-  testDir: path.join(__dirname, 'e2e'),
-  retries: 2,
-  outputDir: '.playwright',
-  webServer: {
-    command: 'pnpm build && pnpm start',
-    url: baseURL,
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
-  },
-  use: {
-    baseURL,
-    trace: 'retry-with-trace'
-  },
-  projects: [
-    {
-      name: 'Desktop Chrome',
-      use: {
-        ...devices['Desktop Chrome']
-      }
-    },
-    {
-      name: 'Desktop Safari',
-      use: {
-        ...devices['Desktop Safari']
-      }
-    },
-    {
-      name: 'Mobile Chrome',
-      use: {
-        ...devices['Pixel 5']
-      }
-    },
-    {
-      name: 'Mobile Safari',
-      use: devices['iPhone 12']
-    }
-  ]
-};
-
-export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cff2f7e5..3297d0d9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,27 +8,21 @@ dependencies:
   '@headlessui/react':
     specifier: ^1.7.15
     version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
+  '@heroicons/react':
+    specifier: ^2.0.18
+    version: 2.0.18(react@18.2.0)
   '@shopware/api-client':
     specifier: 0.0.0-canary-20230725064840
     version: 0.0.0-canary-20230725064840
-  '@vercel/og':
-    specifier: ^0.5.9
-    version: 0.5.9
   clsx:
-    specifier: ^1.2.1
-    version: 1.2.1
-  is-empty-iterable:
-    specifier: ^3.0.0
-    version: 3.0.0
+    specifier: ^2.0.0
+    version: 2.0.0
   next:
     specifier: 13.4.12
     version: 13.4.12(react-dom@18.2.0)(react@18.2.0)
   react:
     specifier: 18.2.0
     version: 18.2.0
-  react-cookie:
-    specifier: ^4.1.1
-    version: 4.1.1(react@18.2.0)
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
@@ -37,18 +31,18 @@ dependencies:
     version: 8.2.0(react@18.2.0)
 
 devDependencies:
-  '@playwright/test':
-    specifier: ^1.36.1
-    version: 1.36.1
+  '@tailwindcss/container-queries':
+    specifier: ^0.1.1
+    version: 0.1.1(tailwindcss@3.3.3)
   '@tailwindcss/typography':
     specifier: ^0.5.9
     version: 0.5.9(tailwindcss@3.3.3)
   '@types/node':
-    specifier: ^20.4.4
+    specifier: 20.4.4
     version: 20.4.4
   '@types/react':
-    specifier: 18.2.15
-    version: 18.2.15
+    specifier: 18.2.16
+    version: 18.2.16
   '@types/react-dom':
     specifier: 18.2.7
     version: 18.2.7
@@ -181,6 +175,14 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@heroicons/react@2.0.18(react@18.2.0):
+    resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}
@@ -359,22 +361,6 @@ packages:
       tslib: 2.6.0
     dev: true
 
-  /@playwright/test@1.36.1:
-    resolution: {integrity: sha512-YK7yGWK0N3C2QInPU6iaf/L3N95dlGdbsezLya4n0ZCh3IL7VgPGxC6Gnznh9ApWdOmkJeleT2kMTcWPRZvzqg==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      '@types/node': 20.4.4
-      playwright-core: 1.36.1
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
-  /@resvg/resvg-wasm@2.4.1:
-    resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==}
-    engines: {node: '>= 10'}
-    dev: false
-
   /@rushstack/eslint-patch@1.3.2:
     resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==}
     dev: true
@@ -385,21 +371,20 @@ packages:
       ofetch: 1.1.1
     dev: false
 
-  /@shuding/opentype.js@1.4.0-beta.0:
-    resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
-    engines: {node: '>= 8.0.0'}
-    hasBin: true
-    dependencies:
-      fflate: 0.7.4
-      string.prototype.codepointat: 0.2.1
-    dev: false
-
   /@swc/helpers@0.5.1:
     resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
     dependencies:
       tslib: 2.6.0
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.3.3
+    dev: true
+
   /@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
     resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
     peerDependencies:
@@ -412,17 +397,6 @@ packages:
       tailwindcss: 3.3.3
     dev: true
 
-  /@types/cookie@0.3.3:
-    resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
-    dev: false
-
-  /@types/hoist-non-react-statics@3.3.1:
-    resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
-    dependencies:
-      '@types/react': 18.2.15
-      hoist-non-react-statics: 3.3.2
-    dev: false
-
   /@types/json5@0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
@@ -437,22 +411,25 @@ packages:
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
 
   /@types/react-dom@18.2.7:
     resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
     dependencies:
-      '@types/react': 18.2.15
+      '@types/react': 18.2.16
     dev: true
 
-  /@types/react@18.2.15:
-    resolution: {integrity: sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==}
+  /@types/react@18.2.16:
+    resolution: {integrity: sha512-LLFWr12ZhBJ4YVw7neWLe6Pk7Ey5R9OCydfuMsz1L8bZxzaawJj2p06Q8/EFEHDeTBQNFLF62X+CG7B2zIyu0Q==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
+    dev: true
 
   /@types/scheduler@0.16.3:
     resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
 
   /@typescript-eslint/parser@5.62.0(eslint@8.45.0)(typescript@5.1.6):
     resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
@@ -521,15 +498,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /@vercel/og@0.5.9:
-    resolution: {integrity: sha512-CtjaV/BVHtNCjRtxGqn8Q6AKFLqcG34Byxr91+mY+4eqyp/09LVe9jEeY9WXjbaKvu8syWPMteTpY+YQUQYzSg==}
-    engines: {node: '>=16'}
-    dependencies:
-      '@resvg/resvg-wasm': 2.4.1
-      satori: 0.10.1
-      yoga-wasm-web: 0.3.3
-    dev: false
-
   /acorn-jsx@5.3.2(acorn@8.10.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -733,11 +701,6 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /base64-js@0.0.8:
-    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
   /big-integer@1.6.51:
     resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
     engines: {node: '>=0.6'}
@@ -816,10 +779,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /camelize@1.0.1:
-    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
-    dev: false
-
   /caniuse-lite@1.0.30001517:
     resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
 
@@ -904,8 +863,8 @@ packages:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
-  /clsx@1.2.1:
-    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
     engines: {node: '>=6'}
     dev: false
 
@@ -928,6 +887,7 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
 
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -947,11 +907,6 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /cookie@0.4.2:
-    resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
-    engines: {node: '>= 0.6'}
-    dev: false
-
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -961,27 +916,6 @@ packages:
       which: 2.0.2
     dev: true
 
-  /css-background-parser@0.1.0:
-    resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
-    dev: false
-
-  /css-box-shadow@1.0.0-3:
-    resolution: {integrity: sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==}
-    dev: false
-
-  /css-color-keywords@1.0.0:
-    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /css-to-react-native@3.2.0:
-    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
-    dependencies:
-      camelize: 1.0.1
-      css-color-keywords: 1.0.0
-      postcss-value-parser: 4.2.0
-    dev: false
-
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -990,6 +924,7 @@ packages:
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -1099,10 +1034,6 @@ packages:
     resolution: {integrity: sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==}
     dev: true
 
-  /emoji-regex@10.2.1:
-    resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
-    dev: false
-
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -1199,10 +1130,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-    dev: false
-
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -1577,10 +1504,6 @@ packages:
       reusify: 1.0.4
     dev: true
 
-  /fflate@0.7.4:
-    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
-    dev: false
-
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1836,17 +1759,6 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /hex-rgb@4.3.0:
-    resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-    dependencies:
-      react-is: 16.13.1
-    dev: false
-
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -1980,11 +1892,6 @@ packages:
     hasBin: true
     dev: true
 
-  /is-empty-iterable@3.0.0:
-    resolution: {integrity: sha512-ZXVNGZrRvda9spnGVME3nTYTyDNjCTrmRy3DfDjBaMQ7aftcPsy/vkJoLL47IwcAbgioIfGvjQJWdit8GiggPg==}
-    engines: {node: '>=12'}
-    dev: false
-
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2181,13 +2088,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /linebreak@1.1.0:
-    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
-    dependencies:
-      base64-js: 0.0.8
-      unicode-trie: 2.0.0
-    dev: false
-
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
@@ -2590,10 +2490,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /pako@0.2.9:
-    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
-    dev: false
-
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2601,13 +2497,6 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-css-color@0.2.1:
-    resolution: {integrity: sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==}
-    dependencies:
-      color-name: 1.1.4
-      hex-rgb: 4.3.0
-    dev: false
-
   /parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -2671,12 +2560,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /playwright-core@1.36.1:
-    resolution: {integrity: sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dev: true
-
   /pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -2749,6 +2632,7 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
 
   /postcss@8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@@ -2850,17 +2734,6 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
-  /react-cookie@4.1.1(react@18.2.0):
-    resolution: {integrity: sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==}
-    peerDependencies:
-      react: '>= 16.3.0'
-    dependencies:
-      '@types/hoist-non-react-statics': 3.3.1
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-      universal-cookie: 4.0.4
-    dev: false
-
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -3035,22 +2908,6 @@ packages:
       is-regex: 1.1.4
     dev: true
 
-  /satori@0.10.1:
-    resolution: {integrity: sha512-F4bTCkDp931tLb7+UCNPBuSQwXhikrUkI4fBQo6fA8lF0Evqqgg3nDyUpRktQpR5Ry1DIiIVqLyEwkAms87ykg==}
-    engines: {node: '>=16'}
-    dependencies:
-      '@shuding/opentype.js': 1.4.0-beta.0
-      css-background-parser: 0.1.0
-      css-box-shadow: 1.0.0-3
-      css-to-react-native: 3.2.0
-      emoji-regex: 10.2.1
-      escape-html: 1.0.3
-      linebreak: 1.1.0
-      parse-css-color: 0.2.1
-      postcss-value-parser: 4.2.0
-      yoga-wasm-web: 0.3.3
-    dev: false
-
   /scheduler@0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
@@ -3189,10 +3046,6 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
-  /string.prototype.codepointat@0.2.1:
-    resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
-    dev: false
-
   /string.prototype.matchall@4.0.8:
     resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
     dependencies:
@@ -3387,10 +3240,6 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
-  /tiny-inflate@1.0.3:
-    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
-    dev: false
-
   /titleize@3.0.0:
     resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
     engines: {node: '>=12'}
@@ -3517,20 +3366,6 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
-  /unicode-trie@2.0.0:
-    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
-    dependencies:
-      pako: 0.2.9
-      tiny-inflate: 1.0.3
-    dev: false
-
-  /universal-cookie@4.0.4:
-    resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
-    dependencies:
-      '@types/cookie': 0.3.3
-      cookie: 0.4.2
-    dev: false
-
   /untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
@@ -3637,10 +3472,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /yoga-wasm-web@0.3.3:
-    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
-    dev: false
-
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
diff --git a/tailwind.config.js b/tailwind.config.js
index 643aad5a8..0f10cf955 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,26 +1,13 @@
 const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './icons/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}'
-  ],
+  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       fontFamily: {
         sans: ['var(--font-inter)']
       },
-      colors: {
-        gray: colors.neutral,
-        hotPink: '#FF1966',
-        dark: '#111111',
-        light: '#FAFAFA',
-        violetDark: '#4c2889'
-      },
       keyframes: {
         fadeIn: {
           from: { opacity: 0 },
@@ -47,6 +34,7 @@ module.exports = {
     hoverOnlyWhenSupported: true
   },
   plugins: [
+    require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(