diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx
new file mode 100644
index 000000000..10f310062
--- /dev/null
+++ b/app/[locale]/products/page.tsx
@@ -0,0 +1,45 @@
+import { ThreeItemGrid } from 'components/grid/three-items';
+import Footer from 'components/layout/footer';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+
+import Navbar from 'components/layout/navbar';
+import { getCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
+import { Suspense } from 'react';
+
+export const runtime = 'edge';
+const { SITE_NAME } = process.env;
+
+export const metadata = {
+  title: SITE_NAME,
+  description: SITE_NAME,
+  openGraph: {
+    type: 'website'
+  }
+};
+
+export default async function ProductPage({
+  params: { locale }
+}: {
+  params: { locale?: SupportedLocale };
+}) {
+  const cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
+  return (
+    <div className="relative h-screen overflow-scroll">
+      <Navbar cart={cart} locale={locale} />
+      <div className="py-24 md:py-48">
+        <ThreeItemGrid lang={locale} />
+      </div>
+
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 4eeb514ec..cdf50edea 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -22,7 +22,7 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
           alt={item.title}
         />
       </Link>
-      <div className="font-multilingual max-w-sm pt-4">
+      <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
         <Label
           title={item.title as string}
           amount={item.priceRange.maxVariantPrice.amount}
diff --git a/components/layout/menu/modal.tsx b/components/layout/menu/modal.tsx
index c60200a55..75f7216d1 100644
--- a/components/layout/menu/modal.tsx
+++ b/components/layout/menu/modal.tsx
@@ -31,9 +31,6 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
 
       <Transition show={isOpen} as={Fragment}>
         <Dialog onClose={() => setIsOpen(false)}>
-          {/*
-          Use one Transition.Child to apply one transition to the backdrop...
-        */}
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -49,104 +46,104 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
+            enterFrom="opacity-0"
             enterTo="opacity-100 scale-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
+            leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-30 backdrop-blur-sm">
+            <div className="fixed inset-0 z-30 bg-dark/80 backdrop-blur-sm">
               <Dialog.Panel>
-                <div
-                  className={clsx(
-                    'fixed right-5 top-6 z-40 px-2 py-1',
-                    scrolled ? 'md:top-6' : 'md:top-0'
-                  )}
-                >
-                  <div className="flex flex-row space-x-6">
+                <div className="z-40 mx-auto max-w-screen-xl px-6">
+                  <div
+                    className={clsx(
+                      'flex flex-row justify-end space-x-6 px-2',
+                      scrolled ? 'py-0' : 'py-0 md:py-6'
+                    )}
+                  >
                     <LanguageControl lang={locale as SupportedLocale} />
 
-                    <button ref={closeButtonRef} onClick={close} className="">
+                    <button ref={closeButtonRef} onClick={close}>
                       <CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" />
                     </button>
                   </div>
-                </div>
 
-                <div className="fixed inset-0 grid grid-cols-1 place-content-center bg-dark/80">
-                  <div className="flex flex-row justify-end">
-                    <nav className="flex flex-col space-y-4 px-6 text-right">
-                      <div>
-                        <Link
-                          href="/products"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.products')}
-                        </Link>
-                      </div>
+                  <div className="grid h-[calc(100vh-124px)] grid-cols-1 place-content-center">
+                    <div className="flex flex-row justify-end">
+                      <nav className="flex flex-col space-y-4 px-4 text-right">
+                        <div>
+                          <Link
+                            href="/products"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.products')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/shop-list"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.shops')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/shop-list"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.shops')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/about"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.about')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/about"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.about')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/bar"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.bar')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/bar"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.bar')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/concept"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.concept')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/concept"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.concept')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/stories"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.stories')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/stories"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.stories')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/company"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.company')}
-                        </Link>
-                      </div>
+                        <div>
+                          <Link
+                            href="/company"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.company')}
+                          </Link>
+                        </div>
 
-                      <div>
-                        <Link
-                          href="/contact"
-                          className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                        >
-                          {t('menu.contact')}
-                        </Link>
-                      </div>
-                    </nav>
+                        <div>
+                          <Link
+                            href="/contact"
+                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                          >
+                            {t('menu.contact')}
+                          </Link>
+                        </div>
+                      </nav>
+                    </div>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index f45df36e7..99d239edd 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -6,6 +6,7 @@ import CartModal from 'components/cart/modal';
 import OpenCart from 'components/cart/open-cart';
 import LogoNamemark from 'components/icons/namemark';
 import { Cart } from 'lib/shopify/types';
+import Link from 'next/link';
 import { Suspense } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { MenuModal } from '../menu/modal';
@@ -19,7 +20,7 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
 
   return (
     <div ref={ref}>
-      <div className="fixed top-0 z-20 w-full bg-dark/20 backdrop-blur-sm">
+      <div className="fixed top-0 z-20 w-full bg-dark/70 backdrop-blur-sm">
         <Transition
           show={!!ref && !inView}
           enter="transition ease duration-150 transform"
@@ -31,13 +32,15 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
         >
           <div className="mx-auto flex max-w-screen-xl flex-row items-start justify-between">
             <div className="px-4 py-2">
-              <LogoNamemark className={clsx('w-[260px]', 'fill-current')} />
+              <Link href="/">
+                <LogoNamemark className={clsx('w-[260px]', 'fill-current')} />
+              </Link>
             </div>
             <nav className="flex flex-row items-center space-x-4 px-6">
               <Suspense fallback={<OpenCart />}>
                 <div className="flex flex-col-reverse items-center justify-center space-y-2 px-2 md:flex-row md:space-x-6">
                   <CartModal cart={cart} />
-                  <MenuModal scrolled={inView} />
+                  <MenuModal scrolled={!inView} />
                 </div>
               </Suspense>
             </nav>
@@ -48,21 +51,25 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
         className={clsx('mx-auto flex max-w-screen-xl flex-row items-start justify-between px-6')}
       >
         <div>
-          <LogoNamemark
-            className={clsx(
-              inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
-              'fill-current pt-4 transition-all duration-150 md:pt-12'
-            )}
-          />
+          <Link href="/">
+            <LogoNamemark
+              className={clsx(
+                inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
+                'fill-current pt-4 transition-all duration-150 md:pt-12'
+              )}
+            />
+          </Link>
         </div>
-        <nav className="flex flex-row space-x-4 px-2 md:pt-6">
-          <LanguageControl lang={locale} />
-          <Suspense fallback={<OpenCart />}>
-            <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6">
+        <nav className="flex flex-row items-center space-x-4 px-2 md:pt-6">
+          <div className="hidden md:block">
+            <LanguageControl lang={locale} />
+          </div>
+          <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6 md:space-y-0">
+            <Suspense fallback={<OpenCart />}>
               <CartModal cart={cart} />
-              <MenuModal scrolled={inView} />
-            </div>
-          </Suspense>
+            </Suspense>
+            <MenuModal scrolled={!inView} />
+          </div>
         </nav>
       </div>
     </div>