diff --git a/src/components/Graphs.svelte b/src/components/Graphs.svelte
new file mode 100644
index 0000000..f78b551
--- /dev/null
+++ b/src/components/Graphs.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { login } from "./stores";
+	import { getGraphs } from "../lib/api";
+
+	let graphsPromise: ReturnType<typeof getGraphs> = new Promise(() => {});
+	$: if ($login !== undefined) {
+		graphsPromise = getGraphs($login?.token);
+	}
+</script>
+
+<div id="list">
+	{#await graphsPromise}
+		<span class="item">
+			<h2>Fetching profiles...</h2>
+		</span>
+	{:then graphs}
+		{#each graphs as graph}
+			<a class="item" href="./graph/{graph.graph}">
+				<h2>{graph.data.name} <span>#{graph.graph}</span></h2>
+				<h3>
+					Value:
+					{#each graph.data.value as key}
+						<span>{key}</span>
+					{/each}
+				</h3>
+			</a>
+		{/each}
+		<!-- svelte-ignore a11y-missing-content -->
+		<a class="item add" href="google.com" />
+	{:catch error}
+		<span class="item">
+			<h2 style="color: red">{error.message}</h2>
+		</span>
+	{/await}
+</div>
+
+<style lang="scss">
+	@use "../styles/GridList";
+	a.item {
+		text-decoration: none;
+		color: hsl(30, 20%, 90%);
+		font-size: 1.17em;
+		&:hover {
+			h2 {
+				text-decoration: underline;
+			}
+		}
+	}
+	h2 span {
+		color: hsl(30, 5%, 60%);
+		font-weight: 100;
+		font-size: 0.75em;
+	}
+	h3 span {
+		font-weight: 400;
+	}
+	h3 span::after {
+		content: " > ";
+		font-size: 0.6em;
+		color: hsl(30, 5%, 60%);
+		vertical-align: middle;
+	}
+	h3 span:nth-last-child(1)::after {
+		content: "";
+	}
+</style>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
new file mode 100644
index 0000000..30543e0
--- /dev/null
+++ b/src/components/Navbar.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	export let segment: string | undefined;
+	import { postLogout } from "../lib/api";
+	import { login } from "./stores";
+</script>
+
+<nav>
+	<a href="/" class:active={segment === undefined || segment === "profile"}>
+		<h3>Profiles</h3>
+	</a>
+	<span class="sep" />
+	<a
+		href="/graphs"
+		class:active={segment === "graphs" || segment === "graph"}
+	>
+		<h3>Graphs</h3>
+	</a>
+	<span class="sep" />
+	<div class="sep" />
+	<span class="sep" />
+	{#if $login === null || $login === undefined}
+		<a href="/login" class:active={segment === "login"}>
+			<h3>Login</h3>
+		</a>
+	{:else}
+		<span>
+			<h3>@{$login.username}</h3>
+		</span>
+		<span class="sep" />
+		<a
+			href="."
+			on:click={async () => {
+				await postLogout($login?.token || ""); // ! wasn't working for some reason
+				login.set(null);
+			}}
+		>
+			<h3>Logout</h3>
+		</a>
+	{/if}
+</nav>
+
+<style lang="scss">
+	nav {
+		z-index: 1000;
+		position: fixed;
+		width: calc(100% - 1.5em);
+		background-color: hsl(236, 10%, 20%);
+		display: flex;
+		border: 0.75em solid black;
+	}
+
+	h3 {
+		display: inline;
+		text-decoration: inherit;
+	}
+	span,
+	a {
+		display: inline-block;
+		text-decoration: none;
+		color: inherit;
+		padding: 1em;
+	}
+	a.active {
+		color: hsl(111, 100%, 50%);
+	}
+	a:hover {
+		text-decoration: solid underline;
+	}
+	.sep {
+		padding: 0;
+		background-color: black;
+	}
+	span.sep {
+		width: 0.75em;
+	}
+	div.sep {
+		flex: 1;
+	}
+</style>
diff --git a/src/components/stores.ts b/src/components/stores.ts
new file mode 100644
index 0000000..f7b619c
--- /dev/null
+++ b/src/components/stores.ts
@@ -0,0 +1,29 @@
+import { writable } from "svelte/store";
+
+function createLogin() {
+	const { subscribe, set, update } = writable<
+		| {
+				username: string;
+				token: string;
+		  }
+		| undefined
+		| null
+	>(undefined);
+
+	return {
+		subscribe,
+		set,
+		update,
+		getValue: () =>
+			new Promise(resolve => {
+				const unsubscribe = subscribe(value => {
+					if (value !== undefined) {
+						unsubscribe();
+						resolve(value);
+					}
+				});
+			})
+	};
+}
+
+export const login = createLogin();
diff --git a/src/styles/Form.scss b/src/styles/Form.scss
new file mode 100644
index 0000000..1ff3e43
--- /dev/null
+++ b/src/styles/Form.scss
@@ -0,0 +1,32 @@
+form {
+	padding: 1em;
+	background-color: hsl(236, 10%, 20%);
+	p#status {
+		color: red;
+	}
+}
+input {
+	width: calc(100% - 1.5em);
+	background: none;
+	padding: 0.75em;
+	margin-bottom: 1em;
+	font-size: 1.17em;
+	color: hsl(30, 20%, 90%);
+	border: 2px solid black;
+	border-right: 2px solid transparent;
+	border-left: 2px solid transparent;
+	&:focus,
+	&:focus-visible {
+		outline: none;
+		border-color: black;
+	}
+}
+input[type="submit"] {
+	margin: 0;
+	width: 100%;
+	border-color: black;
+	&:hover {
+		cursor: pointer;
+		background-color: hsl(236, 5%, 25%);
+	}
+}
diff --git a/src/styles/GridList.scss b/src/styles/GridList.scss
new file mode 100644
index 0000000..c0c385c
--- /dev/null
+++ b/src/styles/GridList.scss
@@ -0,0 +1,41 @@
+div#list {
+	display: grid;
+	width: 100%;
+	grid-template-columns: repeat(auto-fit, minmax(24em, 1fr));
+	grid-auto-rows: 1fr;
+	grid-auto-flow: dense;
+	gap: 0.75em;
+}
+.item {
+	padding: 1em;
+	background-color: hsl(236, 10%, 20%);
+	overflow-y: auto;
+	&:hover {
+		transform: scale(98%);
+		z-index: inherit;
+	}
+	:nth-child(1) {
+		margin-top: 0;
+	}
+	:nth-last-child(1) {
+		margin-bottom: 0;
+	}
+}
+.add {
+	position: relative;
+	display: block;
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: min(12em, 30%);
+		height: 0.3em;
+		background-color: hsl(30, 20%, 90%);
+	}
+	&::before {
+		transform: translate(-50%, -50%) rotateZ(90deg);
+	}
+}