diff --git a/app/wall/[handle]/page.tsx b/app/wall/[handle]/page.tsx
new file mode 100644
index 000000000..3ae1bbf2c
--- /dev/null
+++ b/app/wall/[handle]/page.tsx
@@ -0,0 +1,145 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+import { GridTileImage } from 'components/grid/tile';
+import Footer from 'components/layout/footer';
+import { Gallery } from 'components/product/gallery';
+import { ProductDescription } from 'components/product/product-description';
+import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { getProduct, getProductRecommendations } from 'lib/shopify';
+import { Image } from 'lib/shopify/types';
+import Link from 'next/link';
+
+export const runtime = 'edge';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string };
+}): Promise<Metadata> {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const { url, width, height, altText: alt } = product.featuredImage || {};
+  const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    robots: {
+      index: hide,
+      follow: hide,
+      googleBot: {
+        index: hide,
+        follow: hide
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage({ params }: { params: { handle: string } }) {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.title,
+    description: product.description,
+    image: product.featuredImage.url,
+    offers: {
+      '@type': 'AggregateOffer',
+      availability: product.availableForSale
+        ? 'https://schema.org/InStock'
+        : 'https://schema.org/OutOfStock',
+      priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+      highPrice: product.priceRange.maxVariantPrice.amount,
+      lowPrice: product.priceRange.minVariantPrice.amount
+    }
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <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-3">
+            <Gallery
+              images={product.images.map((image: Image) => ({
+                src: image.url,
+                altText: image.altText
+              }))}
+            />
+          </div>
+          
+          <div className="lg:col-span-3 lg:grid lg:grid-cols-6">
+            <div className="py-6 lg:col-span-4 lg:col-start-2">
+              <ProductDescription product={product} />
+            </div>
+          </div>
+        </div>
+        <Suspense>
+          <RelatedProducts id={product.id} />
+        </Suspense>
+      </div>
+      <Suspense>
+        <Footer />
+      </Suspense>
+    </>
+  );
+}
+
+async function RelatedProducts({ id }: { id: string }) {
+  const relatedProducts = await getProductRecommendations(id);
+
+  if (!relatedProducts.length) return null;
+
+  return (
+    <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={`/products/${product.handle}`}
+            >
+              <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/wall/[handle]/sku/page.tsx b/app/wall/[handle]/sku/page.tsx
new file mode 100644
index 000000000..182dc89c8
--- /dev/null
+++ b/app/wall/[handle]/sku/page.tsx
@@ -0,0 +1,55 @@
+import { ProductSKUs } from "components/product/sku-generator";
+import { HIDDEN_PRODUCT_TAG } from "lib/constants";
+import { getProduct } from "lib/shopify";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string };
+}): Promise<Metadata> {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const { url, width, height, altText: alt } = product.featuredImage || {};
+  const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    robots: {
+      index: hide,
+      follow: hide,
+      googleBot: {
+        index: hide,
+        follow: hide
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ViewSKUs({ params }: { params: { handle: string } }) {
+  const product = await getProduct(params.handle);  
+  
+  if (!product) return  
+  
+  return (
+    <>
+      <ProductSKUs productTitle={product.title} noTitle={true} />
+    </>
+  )
+};
\ No newline at end of file
diff --git a/app/wall/page.tsx b/app/wall/page.tsx
new file mode 100644
index 000000000..d9dc93ac2
--- /dev/null
+++ b/app/wall/page.tsx
@@ -0,0 +1,37 @@
+import Grid from 'components/grid';
+import Footer from 'components/layout/footer';
+import ProductGridItems from 'components/layout/product-grid-items';
+import { getLiveWallProducts } from 'lib/utils';
+import { Suspense } from 'react';
+
+export const runtime = 'edge';
+
+export const metadata = {
+  description: 'scape²: art for the wall',
+  openGraph: {
+    type: 'website'
+  }
+};
+
+export default async function Wardrobe() {
+  const liveProducts  = await getLiveWallProducts({});
+  
+  return (
+    <>
+      <Suspense>
+        {/* <Carousel /> carousel highlighting quality,  */}
+        <h2 className='text-3xl flex justify-center my-10'>art for the wall</h2>
+        {liveProducts.length > 0 ? (
+          <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 m-6">
+            <ProductGridItems products={liveProducts} />
+          </Grid>
+        ) : <section className='container my-16'>
+            <h2 className='text-3xl flex justify-center my-16'>coming soon</h2>
+          </section>}
+        <Suspense>
+          <Footer />
+        </Suspense>
+      </Suspense>
+    </>
+  );
+}