diff --git a/src/lib/Counter/index.svelte b/src/lib/Counter/index.svelte
deleted file mode 100644
index 00997318..00000000
--- a/src/lib/Counter/index.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	function modulo(n: number, m: number) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		color: var(--text-color);
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--secondary-color);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: var(--text-color);
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: block;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--accent-color);
-		font-size: 4rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/src/lib/Header/index.svelte b/src/lib/Header/index.svelte
deleted file mode 100644
index cb03d657..00000000
--- a/src/lib/Header/index.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import logo from './svelte-logo.svg';
-</script>
-
-<header>
-	<div class="corner">
-		<a href="https://kit.svelte.dev">
-			<img src={logo} alt="SvelteKit" />
-		</a>
-	</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 class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</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">
-		<!-- TODO put something else here? github link? -->
-	</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(255, 255, 255, 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.active::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(--accent-color);
-	}
-
-	nav a {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		padding: 0 1em;
-		color: var(--heading-color);
-		font-weight: 700;
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 10%;
-		text-decoration: none;
-		transition: color 0.2s linear;
-	}
-
-	a:hover {
-		color: var(--accent-color);
-	}
-</style>
diff --git a/src/lib/Header/svelte-logo.svg b/src/lib/Header/svelte-logo.svg
deleted file mode 100644
index 49492a83..00000000
--- a/src/lib/Header/svelte-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/lib/Card/index.svelte b/src/lib/components/card.svelte
similarity index 100%
rename from src/lib/Card/index.svelte
rename to src/lib/components/card.svelte
diff --git a/src/lib/Editor/index.svelte b/src/lib/components/editor/editor.svelte
similarity index 100%
rename from src/lib/Editor/index.svelte
rename to src/lib/components/editor/editor.svelte
diff --git a/src/lib/Editor/util.js b/src/lib/components/editor/util.js
similarity index 95%
rename from src/lib/Editor/util.js
rename to src/lib/components/editor/util.js
index c3458898..e2c70d5e 100644
--- a/src/lib/Editor/util.js
+++ b/src/lib/components/editor/util.js
@@ -69,7 +69,3 @@ export const initEditor = (monaco) => {
 		}
 	});
 };
-
-export const getResizeHandler = (editor) => {
-	return (node) => editor && editor.layout();
-};
diff --git a/src/lib/History/history.ts b/src/lib/components/history/history.ts
similarity index 100%
rename from src/lib/History/history.ts
rename to src/lib/components/history/history.ts
diff --git a/src/lib/History/index.svelte b/src/lib/components/history/index.svelte
similarity index 90%
rename from src/lib/History/index.svelte
rename to src/lib/components/history/index.svelte
index e11b3fe7..4d4e7367 100644
--- a/src/lib/History/index.svelte
+++ b/src/lib/components/history/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Tabs from '$lib/Tabs/index.svelte';
-	import Card from '$lib/Card/index.svelte';
-	import { codeStore, getStateString } from '$lib/Util/state';
+	import Tabs from '$lib/components/tabs.svelte';
+	import Card from '$lib/components/card.svelte';
+	import { codeStore, getStateString } from '$lib/util/state';
 	import {
 		addHistoryEntry,
 		autoHistoryMode,
@@ -9,7 +9,7 @@
 		getPreviousState,
 		historyStore
 	} from './history';
-	import { notify, prompt } from '$lib/Util/notify';
+	import { notify, prompt } from '$lib/util/notify';
 	import { onMount } from 'svelte';
 
 	const HISTORY_SAVE_INTERVAL: number = 1000;
diff --git a/src/lib/Navbar/index.svelte b/src/lib/components/navbar.svelte
similarity index 100%
rename from src/lib/Navbar/index.svelte
rename to src/lib/components/navbar.svelte
diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte
new file mode 100644
index 00000000..b60c18a8
--- /dev/null
+++ b/src/lib/components/preset.svelte
@@ -0,0 +1 @@
+flex-1
diff --git a/src/lib/Tabs/index.svelte b/src/lib/components/tabs.svelte
similarity index 100%
rename from src/lib/Tabs/index.svelte
rename to src/lib/components/tabs.svelte
diff --git a/src/lib/View/index.svelte b/src/lib/components/view.svelte
similarity index 94%
rename from src/lib/View/index.svelte
rename to src/lib/components/view.svelte
index 6ab59c72..f1ebdba1 100644
--- a/src/lib/View/index.svelte
+++ b/src/lib/components/view.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { errorStore } from '$lib/Util/error';
+	import { errorStore } from '$lib/util/error';
 
-	import { codeStore } from '$lib/Util/state';
+	import { codeStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
 	import type { Mermaid } from 'mermaid';
 
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index b336f8c6..cafbe38d 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Editor from '$lib/Editor/index.svelte';
-	import Navbar from '$lib/Navbar/index.svelte';
-
-	import View from '$lib/View/index.svelte';
-	import Card from '$lib/Card/index.svelte';
-	import Tabs from '$lib/Tabs/index.svelte';
-	import History from '$lib/History/index.svelte';
-	import { initURLSubscription, updateCode, updateConfig, codeStore } from '$lib/Util/state';
-	import { loadStateFromURL } from '$lib/Util/util';
-	import { errorStore } from '$lib/Util/error';
+	import Editor from '$lib/components/editor/editor.svelte';
+	import Navbar from '$lib/components/navbar.svelte';
+	import Preset from '$lib/components/preset.svelte';
+	import View from '$lib/components/view.svelte';
+	import Card from '$lib/components/card.svelte';
+	import Tabs from '$lib/components/tabs.svelte';
+	import History from '$lib/components/history/index.svelte';
+	import { initURLSubscription, updateCode, updateConfig, codeStore } from '$lib/util/state';
+	import { loadStateFromURL } from '$lib/util/util';
+	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
@@ -126,6 +126,7 @@
 					<div class="flex-1">
 						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 					</div>
+					<Preset />
 				</div>
 			</Card>
 			<div class="flex-1">