diff --git a/src/routes/shop/[product].svelte b/src/routes/shop/[product].svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
new file mode 100644
index 0000000..8ace98a
--- /dev/null
+++ b/src/routes/shop/__layout.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import PosterProduct from '$components/organisms/PosterProduct.svelte'
+    import Poster from '$components/molecules/Poster.svelte'
+    import EmailForm from '$components/molecules/EmailForm.svelte'
+
+    export let shop: any
+    export let locations: any
+</script>
+
+<Metas
+    title="Houses Of"
+    description=""
+    image=""
+/>
+
+<main class="shop-page">
+    <section class="shop-page__intro">
+        <a href="/" class="back">
+            Back to Houses Of
+        </a>
+        <span class="shop-title">Shop</span>
+
+        <SiteTitle
+            variant="inline"
+        />
+
+        <header class="shop-page__header">
+            <div class="container">
+                <p class="text-label">Shop your city</p>
+                <nav>
+                    <ul>
+                        {#each locations as { name, slug }}
+                            <li>
+                                <a href="/shop/poster-{slug}">{name}</a>
+                            </li>
+                        {/each}
+                    </ul>
+                </nav>
+                <button class="cart">
+                    <span>2</span>
+                </button>
+            </div>
+        </header>
+
+        <Image
+            id={shop.page_heroimage.id}
+            alt="photo"
+            sizeKey="hero"
+            sizes={{
+                large: { width: 1800, height: 1200 },
+                medium: { width: 1200, height: 800 },
+                small: { width: 700, height: 700 },
+            }}
+        />
+    </section>
+
+    <section class="shop-page__about grid">
+        <p class="description text-normal">
+            Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.
+        </p>
+    </section>
+
+    <PosterProduct />
+
+    <section class="shop-page__posters grid">
+        <h3>View all of our available posters</h3>
+        <div class="set">
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+        </div>
+        <div class="subscribe">
+            <p>Subscribe to be notified when new posters become available</p>
+            <EmailForm />
+        </div>
+    </section>
+</main>
+
+<slot />
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, fetch, session, stuff }) {
+        const res = await fetchAPI(`
+            query {
+                shop {
+                    page_heroimage { id }
+                }
+
+                location (
+                    filter: { has_poster: { _eq: true }},
+                    sort: "name"
+                ) {
+                    name
+                    slug
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                shop: data.shop,
+                locations: data.location,
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/routes/shop/index.svelte b/src/routes/shop/index.svelte
index 0527b67..e69de29 100644
--- a/src/routes/shop/index.svelte
+++ b/src/routes/shop/index.svelte
@@ -1,120 +0,0 @@
-<script lang="ts">
-    import { getContext } from 'svelte'
-    import { page } from '$app/stores'
-    // Components
-    import Metas from '$components/Metas.svelte'
-    import SiteTitle from '$components/atoms/SiteTitle.svelte';
-    import Image from '$components/atoms/Image.svelte';
-import PosterProduct from '$components/organisms/PosterProduct.svelte';
-import Poster from '$components/molecules/Poster.svelte';
-import Newsletter from '$components/organisms/Newsletter.svelte';
-import EmailForm from '$components/molecules/EmailForm.svelte';
-
-    export let photos: any
-</script>
-
-<Metas
-    title="Houses Of"
-    description=""
-    image=""
-/>
-
-<main class="shop-page">
-    <header class="shop-page__header">
-        <p class="text-label">Shop your city</p>
-        <nav>
-            <ul>
-                <li>
-                    <a href="#">Bordeaux</a>
-                </li>
-                <li>
-                    <a href="#">Brisbane</a>
-                </li>
-                <li>
-                    <a href="#">Melbourne</a>
-                </li>
-                <li>
-                    <a href="#">Montpellier</a>
-                </li>
-                <li>
-                    <a href="#">Occitanie</a>
-                </li>
-                <li>
-                    <a href="#">Toulouse</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="cart">
-            <span>2 items</span>
-        </div>
-    </header>
-
-    <section class="shop-page__intro">
-        <Image
-            id="d439adf1-2391-415b-bb24-232839f142d4"
-            sizeKey="photo-list"
-            width={1600}
-            height={1000}
-            alt="photo"
-        />
-        <SiteTitle
-            variant="inline"
-        />
-    </section>
-
-    <section class="shop-page__about grid">
-        <p class="description text-normal">Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.</p>
-    </section>
-    <PosterProduct />
-
-    <section class="shop-page__posters grid">
-        <h3>View all of our available posters</h3>
-        <div class="set">
-            <Poster />
-            <Poster />
-            <Poster />
-            <Poster />
-            <Poster />
-            <Poster />
-        </div>
-        <div class="subscribe">
-            <p>Subscribe to be notified when new posters become available</p>
-            <EmailForm />
-        </div>
-    </section>
-</main>
-
-
-<script context="module" lang="ts">
-    import { fetchAPI } from '$utils/api'
-
-    export async function load ({ page, fetch, session, stuff }) {
-        const res = await fetchAPI(`
-            query {
-                photo (limit: 11, sort: ["-date_created"]) {
-                    slug
-                    title
-                    city
-                    location {
-                        name
-                        slug
-                        country {
-                            slug
-                            name
-                            flag { id }
-                        }
-                    }
-                    image { id }
-                }
-            }
-        `)
-
-        const { data } = res
-
-        return {
-            props: {
-                photos: data.photo,
-            }
-        }
-    }
-</script>