diff --git a/src/routes/graphs.svelte b/src/routes/graphs.svelte
new file mode 100644
index 0000000..330c37b
--- /dev/null
+++ b/src/routes/graphs.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Graphs from "../components/Graphs.svelte";
+</script>
+
+<Graphs />
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index e69de29..cc9bcdd 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { login } from "../components/stores";
+	import { getProfiles, getUsername } from "../lib/api";
+
+	let profilesPromise: ReturnType<typeof getProfiles> = new Promise(() => {});
+	$: if ($login !== undefined) {
+		profilesPromise = getProfiles($login?.token);
+	}
+</script>
+
+<svelte:head>
+	<title>Skyblock Data Tracker</title>
+</svelte:head>
+
+<div id="list">
+	{#await profilesPromise}
+		<div class="item">
+			<h2>Fetching profiles...</h2>
+		</div>
+	{:then profiles}
+		{#each profiles as profile}
+			<button type="button" class="item">
+				{#each profile.data.members as member, idx}
+					{#await getUsername(member)}
+						<a href="/profile/{profile.profile}/member/{member}"
+							>...</a
+						>
+					{:then username}
+						<a href="/profile/{profile.profile}/member/{member}">
+							{username}
+							{#if idx === 0 && profile.data.name}
+								@ {profile.data.name}
+							{/if}
+						</a>
+					{:catch error}
+						<p style="color: red">{error.message}</p>
+					{/await}
+				{/each}
+			</button>
+		{/each}
+		<!-- svelte-ignore a11y-missing-content -->
+		<a class="item add" href="/profile/new" />
+	{:catch error}
+		<div class="item">
+			<h2 style="color: red">{error.message}</h2>
+		</div>
+	{/await}
+</div>
+
+<style lang="scss">
+	@use "../styles/GridList";
+	.item {
+		border: none;
+		font-size: 1.17em;
+
+		a {
+			display: block;
+			margin: 1em 0;
+			color: hsl(30, 20%, 90%);
+			text-decoration: none;
+			font-family: "Minecraft";
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+		a:nth-child(1) {
+			color: hsl(60, 100%, 50%);
+			font-size: 2em;
+		}
+	}
+</style>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
new file mode 100644
index 0000000..964f8fa
--- /dev/null
+++ b/src/routes/login.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { goto } from "@sapper/app";
+	import { login } from "../components/stores";
+	import { postLogin } from "../lib/api";
+
+	$: if ($login) {
+		goto("/");
+	}
+	let username = "";
+	let password = "";
+	let status = "";
+</script>
+
+<svelte:head>
+	<title>Login - Skyblock Data Tracker</title>
+</svelte:head>
+
+<div id="content">
+	<form
+		on:submit={async event => {
+			event.preventDefault();
+			try {
+				login.set(await postLogin({ username, password }));
+			} catch (e) {
+				username = "";
+				password = "";
+				try {
+					status = (await e.response.json()).message;
+				} catch (e2) {
+					status = "Unknown error";
+				}
+			}
+		}}
+	>
+		<h2>Login</h2>
+		<p id="status">{status}</p>
+		<input
+			type="text"
+			id="username"
+			placeholder="Username"
+			bind:value={username}
+		/><br />
+		<input
+			type="password"
+			id="password"
+			placeholder="Password"
+			bind:value={password}
+		/><br />
+		<input type="submit" id="submit" value="Login" />
+	</form>
+</div>
+
+<style lang="scss">
+	@use "../styles/Form";
+	div#content {
+		display: grid;
+		place-items: center;
+		width: 100%;
+	}
+</style>
diff --git a/src/routes/profile/[profile]/member/[member].svelte b/src/routes/profile/[profile]/member/[member].svelte
new file mode 100644
index 0000000..62c210e
--- /dev/null
+++ b/src/routes/profile/[profile]/member/[member].svelte
@@ -0,0 +1,15 @@
+<script context="module" lang="ts">
+	import type common from "@sapper/common";
+
+	export async function preload(page: common.Page) {
+		return {
+			profile: page.params.profile,
+			member: page.params.member
+		};
+	}
+</script>
+
+<script lang="ts">
+	export let profile: string;
+	export let member: string;
+</script>
diff --git a/src/routes/profile/new.svelte b/src/routes/profile/new.svelte
new file mode 100644
index 0000000..d40430e
--- /dev/null
+++ b/src/routes/profile/new.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { goto } from "@sapper/app";
+	import { login } from "../../components/stores";
+	import {
+		getPlayerProfiles,
+		getUUID,
+		getUsername,
+		putProfiles
+	} from "../../lib/api";
+
+	let username = "";
+	let uuid = "";
+	let status = "";
+	let profilesPromise: ReturnType<typeof getPlayerProfiles> = new Promise(
+		resolve => resolve([])
+	);
+</script>
+
+<svelte:head>
+	<title>Add Profile - Skyblock Data Tracker</title>
+</svelte:head>
+
+<div id="list">
+	<form
+		class="item"
+		on:submit={async event => {
+			event.preventDefault();
+			try {
+				profilesPromise = getPlayerProfiles(
+					(uuid = await getUUID(username))
+				);
+			} catch (error) {
+				status = "Not found";
+			}
+		}}
+	>
+		<h2>Add profile</h2>
+		<p id="status">{status}</p>
+		<input
+			type="text"
+			id="username"
+			bind:value={username}
+			placeholder="Minecraft Username"
+		/>
+		<input type="submit" value="Search" />
+	</form>
+	{#if uuid !== ""}
+		{#await profilesPromise}
+			<div class="item">
+				<h2>Fetching profiles...</h2>
+			</div>
+		{:then profiles}
+			{#each profiles as profile}
+				<button
+					type="button"
+					class="item profile"
+					on:click={async () => {
+						try {
+							await putProfiles(
+								$login?.token,
+								profile.profile_id,
+								uuid
+							);
+						} catch (e) {
+							if (
+								e.response?.status === 401 ||
+								e.response?.status === 403
+							) {
+								alert("Unauthorised");
+							} else {
+								alert(
+									"An error occured while adding the profile"
+								);
+							}
+						}
+						goto("/#");
+					}}
+				>
+					{#await getUsername(uuid)}
+						<p>...</p>
+					{:then properUsername}
+						<p>{properUsername} @ {profile.cute_name}</p>
+					{/await}
+					{#each Object.keys(profile.members).filter(m => m !== uuid) as member}
+						{#await getUsername(member)}
+							<p>...</p>
+						{:then memberUsername}
+							<p>{memberUsername}</p>
+						{:catch error}
+							<p style="color: red">{error.message}</p>
+						{/await}
+					{/each}
+				</button>
+			{/each}
+		{:catch error}
+			<div class="item">
+				<h2 style="color: red">{error.message}</h2>
+			</div>
+		{/await}
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "../../styles/GridList";
+	@use "../../styles/Form";
+
+	.item {
+		color: hsl(30, 20%, 90%);
+	}
+	button.profile {
+		border: none;
+		font-size: 1.17em;
+		font-family: "Minecraft";
+		p:nth-child(1) {
+			color: hsl(60, 100%, 50%);
+			font-size: 2em;
+		}
+		&:hover {
+			cursor: pointer;
+		}
+	}
+</style>