diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..bba8dd3
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,12 @@
+from node:latest AS build
+
+WORKDIR /app
+COPY package.json /
+COPY package-lock.json /
+RUN npm install
+COPY . ./
+
+RUN npm run build
+
+FROM nginx:alpine-slim
+COPY --from=build /app/build /usr/share/nginx/html
\ No newline at end of file
diff --git a/src/components/footer.svelte b/src/components/footer.svelte
new file mode 100644
index 0000000..492d843
--- /dev/null
+++ b/src/components/footer.svelte
@@ -0,0 +1,49 @@
+<script>
+    export let page = "";
+    let activeHome = ''
+    if (page === '/') {let activeHome = 'active'}
+</script>
+
+<footer>
+        <a href="/" class="{activeHome}">
+          <picture>
+            <source srcset="/images/nav/home_icon.svg" type="svg+xml">
+            <img src="/images/nav/home_icon-25.png" alt="Home">
+          </picture><br>HOME
+        </a>
+        <a href="/pis">
+          PIS
+        </a>
+        <a href="/more">
+          MORE
+        </a>
+</footer>
+
+<style>
+    footer {
+        position: fixed;
+        display: flex;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        background-color: transparent;
+    }
+
+   footer a {
+        flex: 12;
+        width: 30%;
+        height: 100%;
+        background-color: var(--overlay-color);
+        border-color: var(--main-bg-color);
+        border-style: solid;
+        border-top: none;
+        border-bottom: none;
+        border-top-right-radius: 10px;
+        border-top-left-radius: 10px;
+    }
+
+    footer a.active {
+        background-color: aqua;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6ffe09f..9d54d16 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script>
 import Menu from '../components/header.svelte'
-export const prerender = true;
-const title = "owlboard-svelte"
+import Footer from '../components/footer.svelte'
+const title = "Svelte"
+const page = "/"
 </script>
 <svelte:head>
     <title>OwlBoard - {title}</title>
@@ -9,4 +10,70 @@ const title = "owlboard-svelte"
 
 
 <Menu {title} />
-<p><a href="/public-board?zzz">public-board</a></p>
+<div class="form-box">
+    <form action="/ldb">
+        <span class="input-title">Live Departure Boards</span>
+        <br>
+        <input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
+        <br>
+        <button class="form-button" type="submit">Submit</button>
+    </form>
+</div>
+<div class="form-box">
+    <form action="/result-timetable">
+        <span class="input-title">Find Train</span>
+        <br>
+        <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
+        <br>
+        <button class="form-button" type="submit">Submit</button>
+    </form>
+</div>
+<div class="form-box">
+    <span class="input-title">Quick Links</span>
+    <div class="quick-links">
+    </div>
+</div>
+<Footer {page} />
+
+<style>
+    .input-title {
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-weight: 600;
+        font-size: 20px;
+    }
+    .form-box {
+        width: 75%;
+        max-width: 400px;
+        margin: auto;
+        margin-top: 25px;
+        padding: 10px;
+        background-color: var(--overlay-color);
+        border-radius: 10px;
+    }
+    .form-input {
+        width: 75%;
+        height: 30px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        border-radius: 50px;
+        border: none;
+        text-align: center;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    }
+    .form-button {
+        width: 50%;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+    .quick-links {
+        display: flex;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/ldb/+page.svelte b/src/routes/ldb/+page.svelte
new file mode 100644
index 0000000..86892eb
--- /dev/null
+++ b/src/routes/ldb/+page.svelte
@@ -0,0 +1,25 @@
+<script>
+   import Menu from '../../components/header.svelte'
+   import Footer from '../../components/footer.svelte'
+   
+   import {onMount} from 'svelte'
+
+   const title = "Public Board"
+   const page = "ldb"
+
+   async function getHeadcode() {
+        return new URLSearchParams(window.location.search).get('station');
+    }
+
+    onMount(async () => {
+        const headcode = await getHeadcode();
+        document.getElementById('station').textContent = headcode;
+    })
+
+</script>
+
+<Menu {title} />
+
+<p>Station: <span id="station"></span></p>
+
+<Footer {page} />
\ No newline at end of file
diff --git a/src/routes/more/+page.svelte b/src/routes/more/+page.svelte
new file mode 100644
index 0000000..7c6edfa
--- /dev/null
+++ b/src/routes/more/+page.svelte
@@ -0,0 +1,13 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    const title = "More"
+    const page = "more"
+ </script>
+ 
+ <Menu {title} />
+ 
+ <p></p>
+ 
+ <Footer {page} />
\ No newline at end of file
diff --git a/src/routes/pis/+page.svelte b/src/routes/pis/+page.svelte
new file mode 100644
index 0000000..3e43be8
--- /dev/null
+++ b/src/routes/pis/+page.svelte
@@ -0,0 +1,13 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    const title = "PIS"
+    const page = "more"
+ </script>
+ 
+ <Menu {title} />
+ 
+ <p></p>
+ 
+ <Footer {page} />
\ No newline at end of file
diff --git a/src/routes/public-board/+page.svelte b/src/routes/public-board/+page.svelte
deleted file mode 100644
index 1d28ccb..0000000
--- a/src/routes/public-board/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-   import Menu from '../../components/header.svelte'
-   const testText = "This should not appear in markup"
-   const title = "Public Board"
-</script>
-
-<Menu {title} />
-
-<p>{testText}</p>
diff --git a/src/routes/result-timetable/+page.svelte b/src/routes/result-timetable/+page.svelte
new file mode 100644
index 0000000..36ed627
--- /dev/null
+++ b/src/routes/result-timetable/+page.svelte
@@ -0,0 +1,33 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    import { onMount } from 'svelte'
+
+    const title = "Timetable Results"
+    const page = "more"
+
+    async function getHeadcode() {
+        return new URLSearchParams(window.location.search).get('headcode');
+    }
+
+    onMount(async () => {
+        const headcode = await getHeadcode();
+        document.getElementById('headcode').textContent = headcode;
+        const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
+        document.getElementById('data_raw').textContent = data.text;
+    })
+
+ </script>
+ 
+ <svelte:head>
+    <title>OwlBoard {title}</title>
+ </svelte:head>
+
+ <Menu {title} />
+ 
+ <p>Headcode: <span id="headcode"></span></p>
+
+ <p id="data_raw"></p>
+ 
+ <Footer {page} />
\ No newline at end of file