diff --git a/src/routes/graphs/+layout.svelte b/src/routes/graphs/+layout.svelte
new file mode 100644
index 0000000..ed5bc24
--- /dev/null
+++ b/src/routes/graphs/+layout.svelte
@@ -0,0 +1,31 @@
+<script>
+	import SubNav from './SubNav.svelte';
+	import '../styles.css';
+</script>
+
+<div class="app">
+	<SubNav />
+
+	<main>
+		<slot />
+	</main>
+</div>
+
+<style>
+	.app {
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 2rem;
+		width: 100%;
+		max-height: 100%;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
diff --git a/src/routes/graphs/+page.svelte b/src/routes/graphs/+page.svelte
new file mode 100644
index 0000000..9457396
--- /dev/null
+++ b/src/routes/graphs/+page.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<svelte:head>
+	<title>Graphs</title>
+	<meta name="description" content="Chellaris Sign-Up Graphs" />
+</svelte:head>
+
+<h1>WIP</h1>
+
+<style>
+	h1 {
+		width: 100%;
+	}
+</style>
diff --git a/src/routes/graphs/SubNav.svelte b/src/routes/graphs/SubNav.svelte
new file mode 100644
index 0000000..c694c6f
--- /dev/null
+++ b/src/routes/graphs/SubNav.svelte
@@ -0,0 +1,122 @@
+<script>
+	import { page } from '$app/stores';
+	import discord from '$lib/images/discord.svg';
+</script>
+
+<header>
+	<div class="corner">
+	</div>
+
+	<nav>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
+		</svg>
+		<ul>
+			<li aria-current={$page.url.pathname === '/graphs' ? 'page' : undefined}>
+				<a href="/graphs">Home</a>
+			</li>
+			<li aria-current={$page.url.pathname === '/graphs/tab' ? 'page' : undefined}>
+				<a href="/graphs/tab">Tab 1</a>
+			</li>
+			<li aria-current={$page.url.pathname === '/graphs/tab2' ? 'page' : undefined}>
+				<a href="/graphs/tab2">Tab 2</a>
+			</li>
+		</ul>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
+		</svg>
+	</nav>
+
+	<div class="corner">
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(0, 0, 0, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	path {
+		fill: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li[aria-current='page']::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--color-theme-1);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 0.5rem;
+		color: var(--color-text);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--color-theme-1);
+	}
+</style>
diff --git a/src/routes/graphs/tab/+page.svelte b/src/routes/graphs/tab/+page.svelte
new file mode 100644
index 0000000..8a741cb
--- /dev/null
+++ b/src/routes/graphs/tab/+page.svelte
@@ -0,0 +1 @@
+<h1>Example Tab</h1>
\ No newline at end of file
diff --git a/src/routes/graphs/tab2/+page.svelte b/src/routes/graphs/tab2/+page.svelte
new file mode 100644
index 0000000..8a741cb
--- /dev/null
+++ b/src/routes/graphs/tab2/+page.svelte
@@ -0,0 +1 @@
+<h1>Example Tab</h1>
\ No newline at end of file
diff --git a/src/routes/legacy-graphs/+page.svelte b/src/routes/legacy-graphs/+page.svelte
index 276196e..5dd1e38 100644
--- a/src/routes/legacy-graphs/+page.svelte
+++ b/src/routes/legacy-graphs/+page.svelte
@@ -39,7 +39,7 @@
 	.fullscreen-margin {
 		display: flex;
 		flex-direction: row;
-		min-height: 100%;
+		height: 90vh;
 		flex-grow: 1;
 		padding: 2rem;
 	}
diff --git a/src/routes/legacy-graphs/+page.ts b/src/routes/legacy-graphs/+page.ts
index bb3374a..f104b11 100644
--- a/src/routes/legacy-graphs/+page.ts
+++ b/src/routes/legacy-graphs/+page.ts
@@ -1,5 +1,5 @@
-/** @type {import('./$types').PageLoad} */
-export async function load({ fetch }) {
+import type { PageLoad } from "../$types";
+export const  load: PageLoad = async ({ fetch }) => {
   const apiBaseUrl = 'https://www.chellaris.net/api/v1';
   const popsRet: { speciesArray: Array<number> } = await (await fetch(apiBaseUrl + '/species')).json();
   const popsData: Array<number> = popsRet.speciesArray;
diff --git a/src/routes/legacy-graphs/EthicsWeb.svelte b/src/routes/legacy-graphs/EthicsWeb.svelte
index 76c8abb..d84ca36 100644
--- a/src/routes/legacy-graphs/EthicsWeb.svelte
+++ b/src/routes/legacy-graphs/EthicsWeb.svelte
@@ -149,8 +149,7 @@
 		options.scales.r.max = scaleLimit;
 
 		if (typeof localStorage !== "undefined") {
-			console.log("Set Store to ", weighted)
-			localStorage.setItem("weighted", weighted.toString())
+			localStorage.setItem("weighted", weighted.toString());
 		}
 	}
 </script>