diff --git a/front/jsconfig.json b/front/jsconfig.json
index 5696a2d..b59e3c4 100644
--- a/front/jsconfig.json
+++ b/front/jsconfig.json
@@ -22,7 +22,10 @@
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable this if you'd like to use dynamic types.
      */
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "%": ["./src"]
+    }
   },
   /**
    * Use global.d.ts instead of compilerOptions.types
diff --git a/front/public/temp.jpg b/front/public/temp.jpg
new file mode 100644
index 0000000..afd1eb1
Binary files /dev/null and b/front/public/temp.jpg differ
diff --git a/front/src/App.svelte b/front/src/App.svelte
index 7039ab7..017c0c3 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -2,7 +2,7 @@
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
-    import routes from './routes';
+    import routes from '%/routes.js';
 
     let oldLocation = undefined;
     let showNavBar = false;
@@ -22,43 +22,56 @@
 
 {#if showNavBar }
     <nav>
-        <ul>
+        <ul style="justify-content: flex-end">
             <li><a href="/" use:link use:active>Home</a></li>
             <li><a href="/contact" use:link use:active>Contact Us</a></li>
         </ul>
+
         <span>TastyBites</span>
-        <ul>
+
+        <ul style="justify-content: flex-start">
             <li><a href="/orders" use:link use:active>Orders</a></li>
-            <li><a href="/cart" use:link use:active>Shopping Cart</a></li>
+            <li><a href="/cart" use:link use:active>Cart</a></li>
         </ul>
     </nav>
 {/if}
-<Router
-    {routes}
-    restoreScrollState={true}
-    on:routeLoading={routeLoading}
-    on:conditionsFailed={conditionFailure}
-/>
+<main>
+    <Router
+        {routes}
+        restoreScrollState={true}
+        on:routeLoading={routeLoading}
+        on:conditionsFailed={conditionFailure}
+    />
+</main>
 <footer>
     <p>TastyBites is a fake restaurant</p>
 </footer>
 
-<style lang="sass">
-    nav
-        display: flex
-        justify-content: center
-        align-items: center
-        padding: 1rem
-        background-color: #f8f9fa
-        border-bottom: 1px solid #e9ecef
-        ul
-            padding: 0
-            margin: 0
-            display: flex
-            list-style: none
-            li
-                margin: 0 1rem
-        span
-            margin: 0 1rem
-            font-weight: bolder
+<style lang="scss">
+    nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        background-color: #f8f9fa;
+        border-bottom: 1px solid #e9ecef;
+        ul {
+            width: 300px;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            list-style: none;
+            li {
+                margin: 0 1rem;
+            }
+            span {
+                margin: 0 1rem;
+                font-weight: bolder;
+            }
+        }
+    }
+    main {
+        padding: 1rem;
+        flex-grow: 1;
+    }
 </style>
diff --git a/front/src/app.css b/front/src/app.css
deleted file mode 100644
index df5af36..0000000
--- a/front/src/app.css
+++ /dev/null
@@ -1,3 +0,0 @@
-*, *::before, *::after {
-    box-sizing: border-box;
-}
diff --git a/front/src/main.js b/front/src/main.js
index 8a909a1..705e4f8 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -1,5 +1,5 @@
-import './app.css'
-import App from './App.svelte'
+import '%/styles/main.scss'
+import App from '%/App.svelte'
 
 const app = new App({
   target: document.getElementById('app'),
diff --git a/front/src/routes/Page404.svelte b/front/src/pages/Page404.svelte
similarity index 84%
rename from front/src/routes/Page404.svelte
rename to front/src/pages/Page404.svelte
index 6077e17..5dbedc6 100644
--- a/front/src/routes/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -1,5 +1,7 @@
 <script>
     import { link } from 'svelte-spa-router';
+
+    export let params = {};
 </script>
 
 <h1>404</h1>
diff --git a/front/src/routes/PageContact.svelte b/front/src/pages/PageContact.svelte
similarity index 100%
rename from front/src/routes/PageContact.svelte
rename to front/src/pages/PageContact.svelte
diff --git a/front/src/routes/PageLoading.svelte b/front/src/pages/PageLoading.svelte
similarity index 100%
rename from front/src/routes/PageLoading.svelte
rename to front/src/pages/PageLoading.svelte
diff --git a/front/src/routes/PageShoppingCart.svelte b/front/src/pages/PageShoppingCart.svelte
similarity index 100%
rename from front/src/routes/PageShoppingCart.svelte
rename to front/src/pages/PageShoppingCart.svelte
diff --git a/front/src/pages/components/ItemList.svelte b/front/src/pages/components/ItemList.svelte
new file mode 100644
index 0000000..4c529e3
--- /dev/null
+++ b/front/src/pages/components/ItemList.svelte
@@ -0,0 +1,26 @@
+<script>
+    import MenuItem from "%/pages/components/MenuItem.svelte";
+
+    export let items = [];
+</script>
+
+<ul>
+    {#each items as item}
+        <li><MenuItem name={item.name} price={item.price} id={item.name} /></li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px
+    }
+    li {
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/pages/components/MenuItem.svelte b/front/src/pages/components/MenuItem.svelte
new file mode 100644
index 0000000..ddb159b
--- /dev/null
+++ b/front/src/pages/components/MenuItem.svelte
@@ -0,0 +1,26 @@
+<script>
+    import { link } from 'svelte-spa-router';
+
+    export let name;
+    export let price;
+    export let id;
+</script>
+
+<a href="/item/{id}" use:link>
+    <span>{name}</span>
+    <span>£{price}</span>
+</a>
+
+<style lang="scss">
+    a {
+        width: 200px;
+        height: 200px;
+        background-color: #f0f0f0;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/pages/index/Announcement.svelte b/front/src/pages/index/Announcement.svelte
new file mode 100644
index 0000000..6260490
--- /dev/null
+++ b/front/src/pages/index/Announcement.svelte
@@ -0,0 +1,26 @@
+<script>
+    import temp from '/temp.jpg';
+</script>
+
+<div>
+    <img src={temp} alt="Rufus" />
+</div>
+
+<style lang="scss">
+    div {
+        height: 400px;
+        background-color: #f0f0f0;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        position: relative;
+        overflow: hidden;
+    }
+    div > img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/pages/index/PageIndex.svelte b/front/src/pages/index/PageIndex.svelte
new file mode 100644
index 0000000..e7ba207
--- /dev/null
+++ b/front/src/pages/index/PageIndex.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { link } from 'svelte-spa-router';
+    import Announcement from "%/pages/index/Announcement.svelte";
+    import ItemList from "%/pages/components/ItemList.svelte";
+
+    const items = [
+        {name: "Breakfast", price: 69.99},
+        {name: "Dinner", price: 21},
+        {name: "Brick", price: 0},
+        {name: "Toast", price: 4382749832743},
+        {name: "water", price: 1},
+        {name: "half eaten mouldy bread", price: -9999}
+    ];
+</script>
+
+<Announcement />
+<a href="/annoucements" use:link style="float: right">Learn More</a>
+
+<div class="spacer"></div>
+
+<h2>Menu</h2>
+<ItemList {items} />
+<a href="/menu" use:link style="float: right">See All</a>
+
+
+
+<div class="spacer"></div>
+
+<h2>About Us</h2>
+<p>Link to the /about page</p>
+
+<style lang="scss">
+    .spacer {
+        height: 50px;
+    }
+</style>
diff --git a/front/src/routes.js b/front/src/routes.js
index 6474b9c..db096b9 100644
--- a/front/src/routes.js
+++ b/front/src/routes.js
@@ -1,22 +1,22 @@
 import { wrap } from "svelte-spa-router/wrap";
-import PageLoading from "./routes/PageLoading.svelte";
-import Page404 from "./routes/Page404.svelte";
+import PageLoading from "%/pages/PageLoading.svelte";
+import Page404 from "%/pages/Page404.svelte";
 
 const routes = {
     "/": wrap({
-        asyncComponent: () => import("./routes/PageIndex.svelte"),
+        asyncComponent: () => import("%/pages/index/PageIndex.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
     }),
     "/contact": wrap({
-        asyncComponent: () => import("./routes/PageContact.svelte"),
+        asyncComponent: () => import("%/pages/PageContact.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
     }),
     "/cart": wrap({
-        asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
+        asyncComponent: () => import("%/pages/PageShoppingCart.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
diff --git a/front/src/routes/PageIndex.svelte b/front/src/routes/PageIndex.svelte
deleted file mode 100644
index bdccd54..0000000
--- a/front/src/routes/PageIndex.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<h1>TastyBites reeeee</h1>
-<p>aurgh</p>
diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss
new file mode 100644
index 0000000..f9bc259
--- /dev/null
+++ b/front/src/styles/main.scss
@@ -0,0 +1,9 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+body, #app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
diff --git a/front/vite.config.js b/front/vite.config.js
index d701969..a642a9e 100644
--- a/front/vite.config.js
+++ b/front/vite.config.js
@@ -3,5 +3,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+    plugins: [
+        svelte(),
+    ],
+    base: './',
+    resolve: {
+        alias: {
+            '%': __dirname + '/src',
+        }
+    },
 })