diff --git a/public/images/output.gif b/public/images/output.gif
new file mode 100644
index 0000000..da217c3
Binary files /dev/null and b/public/images/output.gif differ
diff --git a/public/images/output_pixelated.gif b/public/images/output_pixelated.gif
deleted file mode 100644
index 981c312..0000000
Binary files a/public/images/output_pixelated.gif and /dev/null differ
diff --git a/src/App.vue b/src/App.vue
index 7757ff4..d736311 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,11 @@
     <lenis root :options="{ duration: 1 }">
         <div :class="classes" :style="styles" id="container">
             <suspense>
-                <layout />
+                <site-header />
+            </suspense>
+
+            <suspense>
+                <router-view />
             </suspense>
         </div>
     </lenis>
diff --git a/src/components.d.ts b/src/components.d.ts
index 3343586..dd8c032 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,11 +11,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Dl: typeof import('./components/Dl.vue')['default']
     DlRow: typeof import('./components/DlRow.vue')['default']
     InfiniteScrollContainer: typeof import('./components/InfiniteScrollContainer.vue')['default']
-    InfiniteScrollDemo: typeof import('./components/InfiniteScrollDemo.vue')['default']
-    Layout: typeof import('./components/Layout.vue')['default']
     Lenis: typeof import('./components/Lenis.vue')['default']
     LoadingSpinner: typeof import('./components/LoadingSpinner.vue')['default']
     MosaicModal: typeof import('./components/MosaicModal.vue')['default']
diff --git a/src/components/InfiniteScrollContainer.vue b/src/components/InfiniteScrollContainer.vue
index eaea32e..fbac68a 100644
--- a/src/components/InfiniteScrollContainer.vue
+++ b/src/components/InfiniteScrollContainer.vue
@@ -14,9 +14,7 @@
                 <slot
                     name="viewport"
                     :viewport="viewport"
-                    :index="viewport.index"
                     :content="viewport.content"
-                    :isActive="viewport.index === currentViewportIndex"
                 >
                     <!-- Default viewport content -->
                     <div class="default-viewport">
@@ -117,7 +115,7 @@ defineExpose({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .infinite-scroll-container {
     position: relative;
     width: 100%;
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
deleted file mode 100644
index b0afe25..0000000
--- a/src/components/Layout.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <div class="layout">
-        <suspense>
-            <site-header />
-        </suspense>
-
-        <main class="main-content">
-            <mosaic-scroll :items="mosaicItems" />
-        </main>
-    </div>
-</template>
-
-<script setup>
-import { useStrapiSingle } from '@/composables/useStrapi'
-import useStrapiHead from '@/composables/useStrapiHead'
-import { computed } from 'vue'
-
-const { data } = await useStrapiSingle('home')
-useStrapiHead()
-
-const mosaicItems = computed(() => data.value?.mosaic_items || [])
-</script>
-
-<style lang="scss" scoped>
-.layout {
-    position: relative;
-    min-height: 100vh;
-
-    .main-content {
-        position: relative;
-        width: 100%;
-    }
-
-    div {
-        background: var(--theme-bg);
-        color: var(--theme-fg);
-
-        code {
-            background: var(--grey);
-        }
-    }
-}
-</style>
diff --git a/src/components/MosaicModal.vue b/src/components/MosaicModal.vue
index 5d1ebc2..14d80cd 100644
--- a/src/components/MosaicModal.vue
+++ b/src/components/MosaicModal.vue
@@ -8,8 +8,10 @@
         </div>
 
         <div class="window content" @click.stop data-lenis-prevent>
-            <h1 class="title">{{ item.title }}</h1>
-            <strapi-content :content="item.content" />
+            <lenis instance="mosaic-modal">
+                <h1 class="title">{{ item.title }}</h1>
+                <strapi-content :content="item.content" />
+            </lenis>
         </div>
 
         <button class="window close" @click="emit('close')">Close X</button>
@@ -27,7 +29,7 @@ const emit = defineEmits(['close'])
     position: fixed;
     inset: 0;
     align-items: flex-start;
-    padding-top: desktop-vh(27px);
+    padding-top: desktop-vw(27px);
 
     .window {
         background: var(--theme-bg);
@@ -43,15 +45,18 @@ const emit = defineEmits(['close'])
 
             .dl-row:first-child {
                 border-top: none;
+                padding-top: 0;
             }
         }
         &.content {
-            padding: desktop-vw(34px) desktop-vw(24px);
             border-radius: desktop-vw(10px);
             grid-column: 6 / span 7;
-            max-height: desktop-vh(879px);
-            overflow: auto;
 
+            .lenis {
+                max-height: desktop-vh(900px);
+                overflow: auto;
+                padding: desktop-vw(34px) desktop-vw(24px);
+            }
             .title {
                 text-align: center;
                 margin-bottom: 1em;
diff --git a/src/components/MosaicScroll.vue b/src/components/MosaicScroll.vue
index fa35de5..0475d25 100644
--- a/src/components/MosaicScroll.vue
+++ b/src/components/MosaicScroll.vue
@@ -5,13 +5,8 @@
             :initialIndex="0"
             :generateContent="generateMosaicContent"
         >
-            <template #viewport="{ viewport, content, isActive }">
-                <mosaic-viewport
-                    :viewport="viewport"
-                    :index="viewport.index"
-                    :content="content"
-                    :isActive="isActive"
-                />
+            <template #viewport="{ viewport, content }">
+                <mosaic-viewport :viewport="viewport" :content="content" />
             </template>
         </infinite-scroll-container>
     </div>
@@ -28,18 +23,6 @@ const props = defineProps({
 // Initialize mosaic layout generator
 const { generateLayout, populateCells } = useMosaicLayout()
 
-// const generateGifContent = (cell) => {
-//     return {
-//         id: `gif-${cell.id}`,
-//         width: Math.floor(cell.width),
-//         height: Math.floor(cell.height),
-//         note: _shuffle(
-//             'curabitur euismod ultrices porttitor. Vivamus magna sapien, pretium at ullamcorper semper, sollicitudin et magna curabitur eget dolor a neque facilisis semper pellentesque euismod luctus urna, non aliquam justo aliquet id vestibulum quis lobortis diam nulla facilisi phasellus et rutrum lectus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent mattis felis condimentum, gravida lacus id, pretium neque. Donec cursus augue a dui placerat porttitor.Vestibulum rhoncus lectus nisl, nec gravida ex sollicitudin vel etiam dictum ac lacus ac elementum donec turpis eros, aliquam in nibh a, posuere tristique neque. Nunc cursus molestie consectetur.Integer placerat lorem eu nunc semper porta.'.split(
-//                 ' ',
-//             ),
-//         ).join(' '),
-//     }
-// }
 const generateCellContent = () => {
     const itemIndex = Math.floor(Math.random() * props.items.length)
     return props.items[itemIndex]
@@ -53,8 +36,6 @@ const generateMosaicContent = async (index) => {
     const targetCells = baseCellCount + variance
 
     const layoutOptions = {
-        minCellWidth: 200,
-        minCellHeight: 200,
         targetCells: targetCells,
     }
 
@@ -62,7 +43,7 @@ const generateMosaicContent = async (index) => {
     const cells = generateLayout(layoutOptions)
 
     // Populate cells with GIF content
-    const populatedCells = populateCells(cells, generateCellContent)
+    const populatedCells = populateCells(cells.value, generateCellContent)
 
     return {
         cells: populatedCells,
@@ -70,7 +51,7 @@ const generateMosaicContent = async (index) => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mosaic-scroll {
     position: relative;
 }
diff --git a/src/components/MosaicViewport.vue b/src/components/MosaicViewport.vue
index b3136fd..155fbd8 100644
--- a/src/components/MosaicViewport.vue
+++ b/src/components/MosaicViewport.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mosaic-viewport" :class="{ active: isActive }">
+    <div class="mosaic-viewport">
         <div class="mosaic-container">
             <div
                 v-for="cell in content.cells"
@@ -8,10 +8,10 @@
                     `layout-${cell.width >= cell.height ? 'landscape' : 'portrait'}`,
                 ]"
                 :style="{
-                    left: cell.x + 'px',
-                    top: cell.y + 'px',
-                    width: cell.width + 'px',
-                    height: cell.height + 'px',
+                    left: cell.x * 100 + 'vw',
+                    top: cell.y * 100 + 'vh',
+                    width: cell.width * 100 + 'vw',
+                    height: cell.height * 100 + 'vh',
                 }"
                 :key="`${viewport.index}-${cell.id}`"
                 @click="openModal(cell.content)"
@@ -36,37 +36,45 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import useLenis from '@/composables/useLenis'
+import _kebabCase from 'lodash/kebabCase'
+import { useRoute, useRouter } from 'vue-router'
 
 const props = defineProps({
     viewport: {
         type: Object,
         required: true,
     },
-    index: {
-        type: Number,
-        required: true,
-    },
     content: {
         type: Object,
         required: true,
     },
-    isActive: {
-        type: Boolean,
-        default: false,
-    },
 })
 
-const selectedItem = ref(null)
+const route = useRoute()
+const router = useRouter()
 
-const openModal = (cell) => {
-    selectedItem.value = cell
+const selectedItem = computed(() => {
+    const { item } = route.query
+
+    return props.content.cells.find((cell) => {
+        return _kebabCase(cell?.content?.title || '') === item
+    })?.content
+})
+
+const openModal = (cellContent) => {
+    router.push({
+        query: {
+            item: _kebabCase(cellContent.title),
+        },
+    })
 }
-
 const closeModal = () => {
-    selectedItem.value = null
+    router.push({
+        query: null,
+    })
 }
 
 // Close note on Escape key
@@ -88,7 +96,7 @@ watch(selectedItem, (newItem, oldItem) => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mosaic-viewport {
     height: 100vh;
     display: flex;
@@ -110,12 +118,12 @@ watch(selectedItem, (newItem, oldItem) => {
 
             &.layout-portrait {
                 .strapi-media {
-                    width: 50%;
+                    width: 40%;
                 }
             }
             &.layout-landscape {
                 .strapi-media {
-                    height: 50%;
+                    height: 40%;
                     aspect-ratio: 1;
                 }
             }
diff --git a/src/components/site/Header.vue b/src/components/site/Header.vue
index 86571a3..6c7b489 100644
--- a/src/components/site/Header.vue
+++ b/src/components/site/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header v-if="data" class="site-header layout-grid-inner">
-        <img class="logo" src="/images/output_pixelated.gif" />
+        <img class="logo" src="/images/output.gif" />
 
         <div class="info theme-red">
             <strapi-content class="copy" :content="data.header_copy" />
@@ -23,7 +23,7 @@ const { data } = await useStrapiGlobal()
     left: 0;
     right: 0;
     pointer-events: none;
-    padding: desktop-vw(27px);
+    padding: desktop-vw(27px) var(--layout-margin);
     align-items: flex-start;
 
     > * {
@@ -33,6 +33,7 @@ const { data } = await useStrapiGlobal()
     .logo {
         width: desktop-vw(93px);
         height: auto;
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     }
 
     .info {
diff --git a/src/composables/useMosaicLayout.js b/src/composables/useMosaicLayout.js
index c542661..106a8d7 100644
--- a/src/composables/useMosaicLayout.js
+++ b/src/composables/useMosaicLayout.js
@@ -1,4 +1,6 @@
 import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
+import { viewports } from '@/libs/theme'
 
 /**
  * Mosaic Layout Generator
@@ -8,6 +10,9 @@ import { useWindowSize } from '@vueuse/core'
 const { width: wWidth, height: wHeight } = useWindowSize()
 
 export const useMosaicLayout = () => {
+    const dvw = (pixels) => (pixels / viewports.desktop.width) * wWidth.value
+    const dvh = (pixels) => (pixels / viewports.desktop.height) * wHeight.value
+
     /**
      * Generate a space-filling mosaic layout
      * @param {Object} options Layout configuration
@@ -19,24 +24,26 @@ export const useMosaicLayout = () => {
      * @param {number} options.maxCellHeight Maximum cell height
      * @param {number} options.targetCells Target number of cells to create (if specified, overrides subdivisionProbability)
      * @param {number} options.subdivisionProbability Probability of subdivision (0-1) - used when targetCells is not specified
-     * @returns {Array} Array of cell objects with x, y, width, height, id
+     * @returns {ComputedRef} Computed ref of array of cell objects with x, y, width, height, id
      */
     const generateLayout = (options = {}) => {
-        const {
-            width = wWidth.value,
-            height = wHeight.value,
-            minCellWidth = 150,
-            minCellHeight = 150,
-            targetCells = 5,
-        } = options
+        return computed(() => {
+            const {
+                width = wWidth.value,
+                height = wHeight.value,
+                minCellWidth = dvw(150),
+                minCellHeight = dvh(150),
+                targetCells = 5,
+            } = typeof options === 'function' ? options() : options
 
-        return generateLayoutWithCellCount(
-            width,
-            height,
-            targetCells,
-            minCellWidth,
-            minCellHeight,
-        )
+            return generateLayoutWithCellCount(
+                width,
+                height,
+                targetCells,
+                minCellWidth,
+                minCellHeight,
+            )
+        })
     }
 
     /**
@@ -92,13 +99,7 @@ export const useMosaicLayout = () => {
             let splitVertical = true
             if (canSubdivideWidth && canSubdivideHeight) {
                 const aspectRatio = areaToSplit.width / areaToSplit.height
-                if (aspectRatio > 1.5) {
-                    splitVertical = true // Split wide areas vertically
-                } else if (aspectRatio < 0.67) {
-                    splitVertical = false // Split tall areas horizontally
-                } else {
-                    splitVertical = Math.random() > 0.5 // Random for square-ish areas
-                }
+                splitVertical = aspectRatio > 1
             } else {
                 splitVertical = canSubdivideWidth
             }
@@ -157,13 +158,13 @@ export const useMosaicLayout = () => {
             }
         }
 
-        // Convert areas to cells
+        // Convert areas to cells, normalise to 0-1 so consumers can use vw/vh
         return areas.map((area) => ({
             id: area.id,
-            x: area.x,
-            y: area.y,
-            width: area.width,
-            height: area.height,
+            x: area.x / width,
+            y: area.y / height,
+            width: area.width / width,
+            height: area.height / height,
         }))
     }
 
diff --git a/src/composables/useScrollProgress.js b/src/composables/useScrollProgress.js
index 670498a..6a34be5 100644
--- a/src/composables/useScrollProgress.js
+++ b/src/composables/useScrollProgress.js
@@ -9,10 +9,6 @@ import useLenis from '@/composables/useLenis'
 
 const { height: wHeight } = useWindowSize()
 
-export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
-    const isActive = ref(true)
-    const smoothProgress = ref(0)
-
     const { height, top } = useElementBounding(el)
 
     const isIntersected = ref(false)
@@ -20,10 +16,6 @@ export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
         isIntersected.value = isIntersecting
     })
 
-    useLenis(({ scroll }) => {
-        if (!isActive.value) return
-        if (!height.value || !wHeight.value) return
-        if (!isIntersected.value) return
 
         const pageTop = scroll + top.value
 
@@ -37,10 +29,6 @@ export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
         callback?.(smoothProgress.value)
     })
 
-    const destroy = () => {
-        isActive.value = false
-        stop?.()
-    }
 
     return { destroy }
 }
diff --git a/src/main.js b/src/main.js
index cb3cec0..af8956d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import './styles/main.scss'
 import App from './App.vue'
-import { ViteSSG } from 'vite-ssg/single-page'
+import { ViteSSG } from 'vite-ssg'
+import routes from './routes'
 import strapi from './plugins/strapi'
 
-export const createApp = ViteSSG(App, ({ app }) => {
+export const createApp = ViteSSG(App, routes, ({ app }) => {
     // Plugins
     app.use(strapi)
 })
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..5c0a7cc
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <main class="home">
+        <mosaic-scroll :items="mosaicItems" />
+    </main>
+</template>
+
+<script setup>
+import { useStrapiSingle } from '@/composables/useStrapi'
+import useStrapiHead from '@/composables/useStrapiHead'
+import { computed } from 'vue'
+
+const { data } = await useStrapiSingle('home')
+useStrapiHead()
+
+const mosaicItems = computed(() => data.value?.mosaic_items || [])
+</script>
+
+<style lang="scss">
+main.home {
+    position: relative;
+    width: 100%;
+}
+</style>
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..7f51c01
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,11 @@
+import index from './pages/index.vue'
+
+export default {
+    routes: [
+        {
+            path: '/',
+            component: index,
+            name: 'home',
+        },
+    ],
+}