diff --git a/app/(home)/layout.js b/app/(home)/layout.js
new file mode 100644
index 000000000..569c5f763
--- /dev/null
+++ b/app/(home)/layout.js
@@ -0,0 +1,14 @@
+import { TypesNav } from '/components/home.js';
+
+export default function HomeLayout({ children }) {
+    return (
+        <>
+            <header>
+                <nav>
+                    <TypesNav />
+                </nav>
+            </header>
+            <main>{children}</main>
+        </>
+    );
+}
diff --git a/app/page.js b/app/(home)/page.js
similarity index 100%
rename from app/page.js
rename to app/(home)/page.js
diff --git a/app/search/[collection]/page.js b/app/(home)/search/[collection]/page.js
similarity index 100%
rename from app/search/[collection]/page.js
rename to app/(home)/search/[collection]/page.js
diff --git a/app/(page)/layout.js b/app/(page)/layout.js
new file mode 100644
index 000000000..4c312f151
--- /dev/null
+++ b/app/(page)/layout.js
@@ -0,0 +1,12 @@
+export default function ProductLayout({ children }) {
+    return (
+        <>
+            {/* <header> */}
+            {/*     <nav> */}
+            {/*         <a>back</a> */}
+            {/*     </nav> */}
+            {/* </header> */}
+            <main>{children}</main>
+        </>
+    );
+}
diff --git a/app/(page)/product/[handle]/page.js b/app/(page)/product/[handle]/page.js
new file mode 100644
index 000000000..7da10da04
--- /dev/null
+++ b/app/(page)/product/[handle]/page.js
@@ -0,0 +1,17 @@
+import { getProducts } from 'lib/shopify';
+
+export async function generateStaticParams() {
+    const products = await getProducts({
+        sortKey: 'UPDATED_AT',
+        reverse: false,
+        query: '',
+    });
+
+    console.log({ products });
+
+    return products.map(product => ({ product: product.handle }));
+}
+
+export default async function ProductPage({ params: { handle } }) {
+    return <h1>{handle}</h1>;
+}
diff --git a/app/layout.js b/app/layout.js
index 1e34aa55b..0a6c987eb 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,14 +1,7 @@
-import { TypesNav } from '/components/home.js';
-
 export default function RootLayout({ children }) {
     return (
         <html lang='en'>
-            <body>
-                <nav>
-                    <TypesNav />
-                </nav>
-                <main>{children}</main>
-            </body>
+            <body>{children}</body>
         </html>
     );
 }
diff --git a/components/home.js b/components/home.js
index c1ee30c72..0b7a1dc7a 100644
--- a/components/home.js
+++ b/components/home.js
@@ -61,7 +61,7 @@ export async function HomeProduct({ product }) {
     const collections = product?.collections?.nodes;
 
     return (
-        <Link href={`/${product?.handle}`}>
+        <Link href={`/product/${product?.handle}`}>
             <Image
                 src={featuredImage?.url}
                 alt={featuredImage?.altText}
