diff --git a/index.html b/index.html
index 26c29c4..7f884e2 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte</title>
+    <title>Budgetly</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.svelte b/src/App.svelte
index dadfc7a..cfbc734 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,28 +1,36 @@
 <script>
   import Router from 'svelte-spa-router';
+  import { replace } from 'svelte-spa-router';
+
+  import { isAuthed } from './store';
   
-  import Nav from './lib/Nav.svelte';
   import Home from './routes/Home.svelte';
   import NotFound from './routes/NotFound.svelte';
   import Budgets from './routes/Budgets.svelte';
   import Settings from './routes/Settings.svelte';
   import Timeline from './routes/Timeline.svelte'
+  import Login from './routes/Login.svelte';
+  import Logout from './routes/Logout.svelte';
+  import { onMount } from 'svelte';
 
   const routes = {
       '/': Home,
       '/timeline': Timeline,
       "/budgets": Budgets,
       '/settings': Settings,
+      '/login': Login,
+      '/logout': Logout,
       '*': NotFound,
   }
+  
+  onMount(()=> {
+    console.log($isAuthed)
+    if(!$isAuthed){
+      replace('/login')
+    }
+  })
 
 </script>
 
-<style>
+<Router {routes}/>
 
-</style>
-
-<Nav/>
-<main class="responsive">
-  <Router {routes}/>
-</main>
diff --git a/src/fakeData.js b/src/fakeData.js
new file mode 100644
index 0000000..81e322d
--- /dev/null
+++ b/src/fakeData.js
@@ -0,0 +1,78 @@
+export const FAKE_BUDGET_ITEMS = [
+    {
+        "key":"Eating Out",
+        "amount":200,
+        "currencyFormat": "usd",
+        "isEnabled": true,
+        "entries":[
+            {
+                "name": "Test Entry",
+                "amount": 20,
+                "description": "Extra info if wanted",
+                "date": 1665610094149
+            },
+            {
+                "name": "Test Entry 2",
+                "amount": 12.38,
+                "description": "Some other thing",
+                "date": 1665610095000
+            },
+        ],
+    },
+    {
+        "key":"Gasoline",
+        "amount":400,
+        "currencyFormat": "usd",
+        "isEnabled": true,
+        "entries":[
+            {
+                "name": "Fill up",
+                "amount": 50,
+                "description": "",
+                "date": 1665610094149
+            }
+        ],
+    },
+    {
+        "key":"Third Item",
+        "amount":10,
+        "currencyFormat": "usd",
+        "isEnabled": true,
+        "entries":[
+            {
+                "name": "OVERSPEND",
+                "amount": 500,
+                "description": "",
+                "date": 1665610094149
+            }
+        ],
+    },
+    {
+        "key":"Third Item",
+        "amount":10,
+        "currencyFormat": "usd",
+        "isEnabled": true,
+        "entries":[
+            {
+                "name": "OVERSPEND",
+                "amount": 500,
+                "description": "",
+                "date": 1665610094149
+            }
+        ],
+    },
+    {
+        "key":"Third Item",
+        "amount":10,
+        "currencyFormat": "usd",
+        "isEnabled": true,
+        "entries":[
+            {
+                "name": "OVERSPEND",
+                "amount": 500,
+                "description": "",
+                "date": 1665610094149
+            }
+        ],
+    },
+]
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.svelte b/src/layouts/BaseLayout.svelte
new file mode 100644
index 0000000..4f4f460
--- /dev/null
+++ b/src/layouts/BaseLayout.svelte
@@ -0,0 +1,8 @@
+<script>
+    import Nav from '../lib/Nav.svelte';
+</script>
+
+<Nav/>
+<main class="responsive">
+    <slot></slot>
+</main>
\ No newline at end of file
diff --git a/src/layouts/NoNavLayout.svelte b/src/layouts/NoNavLayout.svelte
new file mode 100644
index 0000000..ce8e74f
--- /dev/null
+++ b/src/layouts/NoNavLayout.svelte
@@ -0,0 +1,4 @@
+<main class="responsive max">
+  <slot />
+</main>
+
diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index 5842ecf..b4b6c96 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -2,11 +2,12 @@
     import {link} from 'svelte-spa-router'
     import { activeNav } from '../store';
 
-    let activeitem = 0;
-    activeNav.subscribe(value => {
-        activeitem = value;
-        console.log(activeitem)
-    })
+    let activeitem = $activeNav;
+
+    function updateActiveItem(num){
+      activeNav.set(num)
+    }
+
 </script>
 
 <style>
@@ -19,23 +20,21 @@
 </style>
 
 <nav class="m l left">
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a>
-    <img class="circle" src="/favicon.png" alt="Favicon">
-  </a>
-  <a href="/" class:active="{activeitem === 0}" on:click={()=>activeitem = 0} use:link>
+  
+  <img class="circle" src="/vite.svg" alt="Favicon">
+  <a href="/" class:active="{activeitem === 0}" on:click={()=>updateActiveItem(0)} use:link>
     <i>home</i>
     <span>Home</span>
   </a>
-  <a href="/budgets" class:active="{activeitem === 1}" on:click={()=>activeitem = 1} use:link>
+  <a href="/budgets" class:active="{activeitem === 1}" on:click={()=>updateActiveItem(1)} use:link>
     <i>payments</i>
     <span>Budgets</span>
   </a>
-  <a href="/timeline" class:active="{activeitem === 2}" on:click={()=>activeitem = 2} use:link>
+  <a href="/timeline" class:active="{activeitem === 2}" on:click={()=>updateActiveItem(2)} use:link>
     <i>timeline</i>
     <span>Spending</span>
   </a>
-  <a href="/settings" class:active="{activeitem === 3}" on:click={()=>activeitem = 3} use:link>
+  <a href="/settings" class:active="{activeitem === 3}" on:click={()=>updateActiveItem(3)} use:link>
     <i>settings</i>
     <span>Settings</span>
   </a>
@@ -50,19 +49,19 @@
 
 <nav class="s bottom">
 
-  <a href="/" class:active="{activeitem === 0}" on:click={()=>activeitem = 0} use:link>
+  <a href="/" class:active="{activeitem === 0}" on:click={()=>updateActiveItem(0)} use:link>
     <i>home</i>
     <span>Home</span>
   </a>
-  <a href="/budgets" class:active="{activeitem === 1}" on:click={()=>activeitem = 1} use:link>
+  <a href="/budgets" class:active="{activeitem === 1}" on:click={()=>updateActiveItem(1)} use:link>
     <i>payments</i>
     <span>Budgets</span>
   </a>
-  <a href="/timeline" class:active="{activeitem === 2}" on:click={()=>activeitem = 2} use:link>
+  <a href="/timeline" class:active="{activeitem === 2}" on:click={()=>updateActiveItem(2)} use:link>
     <i>timeline</i>
     <span>Spending</span>
   </a>
-  <a href="/settings" class:active="{activeitem === 3}" on:click={()=>activeitem = 3} use:link>
+  <a href="/settings" class:active="{activeitem === 3}" on:click={()=>updateActiveItem(3)} use:link>
     <i>settings</i>
     <span>Settings</span>
   </a>
diff --git a/src/routes/Budgets.svelte b/src/routes/Budgets.svelte
index f883f99..e1e7b57 100644
--- a/src/routes/Budgets.svelte
+++ b/src/routes/Budgets.svelte
@@ -1,7 +1,46 @@
 <script>
+  import BaseLayout from "../layouts/BaseLayout.svelte";
+  import { FAKE_BUDGET_ITEMS } from "../fakeData";
 </script>
 
-
-<div>
-    Budgets
-</div>
+<BaseLayout>
+  <nav>
+    <h5>Budget Items</h5>
+  </nav>
+  <div class="space" />
+  <hr />
+  <article class="responsive">
+    <table class="border medium-space">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Amount</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {#each FAKE_BUDGET_ITEMS as ITEM}
+          <tr>
+            <td>{ITEM.key}</td>
+            <td>{ITEM.amount}</td>
+            <td>
+              <nav class="right-align">
+                <button class="none">
+                  <i>more_vert</i>
+                  <div class="dropdown left no-wrap">
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <a>Edit</a>
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <a>Disable</a>
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <a>Delete</a>
+                  </div>
+                </button>
+              </nav>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </article>
+</BaseLayout>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
index b4afb41..6d7082c 100644
--- a/src/routes/Home.svelte
+++ b/src/routes/Home.svelte
@@ -1,6 +1,10 @@
 <script>
+  import BaseLayout from "../layouts/BaseLayout.svelte";
 </script>
 
-<div>
-    Home
-</div>
+<BaseLayout>
+    <div>
+        Home
+    </div>
+</BaseLayout>
+
diff --git a/src/routes/Login.svelte b/src/routes/Login.svelte
new file mode 100644
index 0000000..5089d29
--- /dev/null
+++ b/src/routes/Login.svelte
@@ -0,0 +1,50 @@
+<script>
+    import { replace } from 'svelte-spa-router';
+    import { isAuthed } from '../store';
+    import NoNavLayout from '../layouts/NoNavLayout.svelte';
+
+    function doLogin(){
+        replace("/");
+        isAuthed.set(true);
+    }
+
+</script>
+
+<NoNavLayout>
+    <article class="absolute middle center">
+        <img class="responsive small" src="/vite.svg" alt="">
+        <h4>Budgetly Login</h4>
+
+        <p>Username:</p>
+        <div class="field border">
+            <input type="text">
+        </div>
+
+        <p>Password:</p>
+        <div class="field border">
+            <input type="text">
+        </div>
+
+        <button class="responsive" on:click={doLogin}>
+            <i>login</i>
+            <span>Login</span>
+        </button>
+
+        <br>
+        <br>
+        <hr>
+        <br>   
+
+        <button class="border">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="">
+            <span>Login with Google</span>
+        </button>
+
+        <button class="border">
+            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="">
+            <span>Login with Github</span>
+        </button>
+
+
+    </article>
+</NoNavLayout>
\ No newline at end of file
diff --git a/src/routes/Logout.svelte b/src/routes/Logout.svelte
new file mode 100644
index 0000000..445866b
--- /dev/null
+++ b/src/routes/Logout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { resetStore } from '../store';
+    import {replace} from 'svelte-spa-router';
+    
+    resetStore();
+    replace("/login");
+</script>
\ No newline at end of file
diff --git a/src/routes/NotFound.svelte b/src/routes/NotFound.svelte
index aa00cf6..0057f5a 100644
--- a/src/routes/NotFound.svelte
+++ b/src/routes/NotFound.svelte
@@ -1,4 +1,10 @@
-<article class="padding absolute middle center">
-    <h4>Uh Oh...</h4>
-    <div>We can't find that right now.</div>
-</article>
+<script>
+    import NoNavLayout from "../layouts/NoNavLayout.svelte";
+</script>
+
+<NoNavLayout>
+    <article class="padding absolute middle center">
+        <h4>Uh Oh...</h4>
+        <div>We can't find that right now.</div>
+    </article>
+</NoNavLayout>
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index cd113a2..9df5baa 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -1,8 +1,10 @@
 <script>
+      import BaseLayout from "../layouts/BaseLayout.svelte";
 </script>
 
 
-<div>
-    Settings
-
-</div>
+<BaseLayout>
+    <div>
+        Settings
+    </div>
+</BaseLayout>
diff --git a/src/routes/Timeline.svelte b/src/routes/Timeline.svelte
index 80fc120..42daa45 100644
--- a/src/routes/Timeline.svelte
+++ b/src/routes/Timeline.svelte
@@ -1,6 +1,65 @@
 <script>
+  import BaseLayout from "../layouts/BaseLayout.svelte";
+  import { FAKE_BUDGET_ITEMS } from "../fakeData";
+
+  let items = FAKE_BUDGET_ITEMS;
+  let filterText = "";
+
+  function filter() {
+    items = FAKE_BUDGET_ITEMS.filter((obj) => {
+      return obj.key.toLowerCase().includes(filterText);
+    });
+    console.log(items);
+  }
 </script>
 
-<div>
-    timeline
-</div>
+<BaseLayout>
+  <nav class="">
+    <h5>Spending Timeline</h5>
+    <div class="max" />
+    <div class="field label suffix border">
+      <input type="text" bind:value={filterText} on:input={filter} />
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <label>Search</label>
+      <i>search</i>
+    </div>
+  </nav>
+  <div class="space" />
+  <hr />
+  {#each items as ITEM}
+    <article class="responsive">
+      <h5>{ITEM.key}</h5>
+      <p>Spent: $0</p>
+      <p>Remaining: $0</p>
+
+      <table class="border">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Amount</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each ITEM.entries as entry}
+            <tr>
+              <td>
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <a>
+                  {entry.name}
+                  <div class="tooltip bottom">{entry.description}</div>
+                </a>
+              </td>
+              <td>{entry.amount}</td>
+              <td>
+                {new Date(entry.date).toLocaleDateString() +
+                  ", " +
+                  new Date(entry.date).toLocaleTimeString()}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </article>
+  {/each}
+</BaseLayout>
diff --git a/src/store.js b/src/store.js
index cfaab8d..8406599 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,4 +1,9 @@
 import { writable } from 'svelte/store';
 
-export const DARK_THEME_PREF = writable(true);
-export const activeNav = writable(0);
\ No newline at end of file
+export const isAuthed = writable(false);
+export const activeNav = writable(0);
+
+export function resetStore() {
+    isAuthed.set(false);
+    activeNav.set(0);   
+}
\ No newline at end of file
