diff --git a/site/src/routes/repl/_components/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
similarity index 100%
rename from site/src/routes/repl/_components/CodeMirror.svelte
rename to site/src/components/Repl/CodeMirror.svelte
diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte
similarity index 97%
rename from site/src/routes/repl/_components/Input/ComponentSelector.svelte
rename to site/src/components/Repl/Input/ComponentSelector.svelte
index bde0a280e5..edfdec9417 100644
--- a/site/src/routes/repl/_components/Input/ComponentSelector.svelte
+++ b/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import Icon from '../../../../components/Icon.svelte';
-	import { enter } from '../events.js';
+	import Icon from '../../Icon.svelte';
+	import { enter } from '../../../utils/events.js';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/site/src/routes/repl/_components/Input/ModuleEditor.svelte b/site/src/components/Repl/Input/ModuleEditor.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Input/ModuleEditor.svelte
rename to site/src/components/Repl/Input/ModuleEditor.svelte
diff --git a/site/src/routes/repl/_components/Input/index.svelte b/site/src/components/Repl/Input/index.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Input/index.svelte
rename to site/src/components/Repl/Input/index.svelte
diff --git a/site/src/routes/repl/_components/InputOutputToggle.svelte b/site/src/components/Repl/InputOutputToggle.svelte
similarity index 100%
rename from site/src/routes/repl/_components/InputOutputToggle.svelte
rename to site/src/components/Repl/InputOutputToggle.svelte
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/CompilerOptions.svelte
rename to site/src/components/Repl/Output/CompilerOptions.svelte
diff --git a/site/src/routes/repl/_components/Output/PropEditor.svelte b/site/src/components/Repl/Output/PropEditor.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/PropEditor.svelte
rename to site/src/components/Repl/Output/PropEditor.svelte
diff --git a/site/src/routes/repl/_components/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
similarity index 98%
rename from site/src/routes/repl/_components/Output/Viewer.svelte
rename to site/src/components/Repl/Output/Viewer.svelte
index e204b3c79d..146104fedd 100644
--- a/site/src/routes/repl/_components/Output/Viewer.svelte
+++ b/site/src/components/Repl/Output/Viewer.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-	import getLocationFromStack from '../../_utils/getLocationFromStack.js';
-	import ReplProxy from '../../_utils/replProxy.js';
+	import getLocationFromStack from './getLocationFromStack.js';
+	import ReplProxy from './replProxy.js';
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();
diff --git a/site/src/routes/repl/_utils/getLocationFromStack.js b/site/src/components/Repl/Output/getLocationFromStack.js
similarity index 100%
rename from site/src/routes/repl/_utils/getLocationFromStack.js
rename to site/src/components/Repl/Output/getLocationFromStack.js
diff --git a/site/src/routes/repl/_components/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/index.svelte
rename to site/src/components/Repl/Output/index.svelte
diff --git a/site/src/routes/repl/_utils/replProxy.js b/site/src/components/Repl/Output/replProxy.js
similarity index 100%
rename from site/src/routes/repl/_utils/replProxy.js
rename to site/src/components/Repl/Output/replProxy.js
diff --git a/site/src/routes/repl/_components/SplitPane.svelte b/site/src/components/Repl/SplitPane.svelte
similarity index 100%
rename from site/src/routes/repl/_components/SplitPane.svelte
rename to site/src/components/Repl/SplitPane.svelte
diff --git a/site/src/routes/repl/_components/_codemirror.js b/site/src/components/Repl/_codemirror.js
similarity index 100%
rename from site/src/routes/repl/_components/_codemirror.js
rename to site/src/components/Repl/_codemirror.js
diff --git a/site/src/routes/repl/_components/codemirror.css b/site/src/components/Repl/codemirror.css
similarity index 100%
rename from site/src/routes/repl/_components/codemirror.css
rename to site/src/components/Repl/codemirror.css
diff --git a/site/src/routes/repl/_components/Repl.svelte b/site/src/components/Repl/index.svelte
similarity index 98%
rename from site/src/routes/repl/_components/Repl.svelte
rename to site/src/components/Repl/index.svelte
index 318ba0d5e8..3466c13b26 100644
--- a/site/src/routes/repl/_components/Repl.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -36,12 +36,6 @@
 		selected_store.set(app.components[0]);
 	}
 
-	$: {
-		// necessary pending https://github.com/sveltejs/svelte/issues/1889
-		$component_store;
-		$values_store;
-	}
-
 	let workers;
 
 	let bundle = null;
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index af4a0cf2e8..9f1b6a47a7 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -6,7 +6,7 @@
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
-	import { enter } from '../events.js';
+	import { enter } from '../../../../utils/events.js';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index c9eb0a08ea..305fabc7aa 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -11,7 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 
 	export let version, gist, demo;
 
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 41ad39a739..90741ae8bb 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -13,7 +13,7 @@
 	import { locate } from 'locate-character';
 	import * as fleece from 'golden-fleece';
 	import AppControls from './_components/AppControls/index.svelte';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 	import examples from '../../../content/examples/manifest.json';
 
 	export let version, demo, gist_id;
@@ -115,6 +115,8 @@
 
 				name = data.title;
 
+				console.log(data.components);
+
 				app = {
 					values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
 					components: data.components
diff --git a/site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte b/site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte
index 21962ab03e..af9363395e 100644
--- a/site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte
+++ b/site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte
@@ -15,7 +15,7 @@
 	nav {
 		display: grid;
 		grid-template-columns: 2.5em 1fr 2.5em;
-		border-bottom: 1px solid #eee;
+		border-bottom: 1px solid rgba(255,255,255,0.1);
 	}
 
 	div {
@@ -23,7 +23,7 @@
 		padding: 1em 0.5em;
 		font-weight: 300;
 		font-size: var(--h6);
-		color: var(--text);
+		color: white;
 		cursor: pointer;
 	}
 
@@ -31,19 +31,20 @@
 		display: block;
 		padding: 0.7em 0;
 		text-align: center;
+		opacity: 0.7;
 	}
 
 	a.disabled, a.disabled:hover, a.disabled:active {
-		color: var(--second);
+		color: white;
+		opacity: 0.4;
 	}
 
 	span {
 		white-space: nowrap;
-		color: var(--prime);
 	}
 
 	strong {
-		color: var(--heading);
+		opacity: 0.7;
 	}
 
 	select {
diff --git a/site/src/routes/tutorial/[slug]/index.json.js b/site/src/routes/tutorial/[slug]/index.json.js
index c3c84e4f42..31c72777b4 100644
--- a/site/src/routes/tutorial/[slug]/index.json.js
+++ b/site/src/routes/tutorial/[slug]/index.json.js
@@ -1,4 +1,5 @@
 import * as fs from 'fs';
+import * as path from 'path';
 import marked from 'marked';
 import PrismJS from 'prismjs';
 import { extract_frontmatter, extract_metadata, langs } from '../../../utils/markdown';
@@ -66,10 +67,17 @@ function get_tutorial(slug) {
 
 	return {
 		html,
-		files: files.map(file => ({
-			file,
-			contents: fs.readFileSync(`${dir}/${file}`, 'utf-8')
-		}))
+		files: files.map(file => {
+			const ext = path.extname(file);
+			const name = file.slice(0, -ext.length);
+			const type = ext.slice(1);
+
+			return {
+				name,
+				type,
+				source: fs.readFileSync(`${dir}/${file}`, 'utf-8')
+			};
+		})
 	};
 }
 
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 4b164455c8..6578a269de 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -12,6 +12,7 @@
 <script>
 	import TableOfContents from './_components/TableOfContents.svelte';
 	import Icon from '../../../components/Icon.svelte';
+	import Repl from '../../../components/Repl/index.svelte';
 	import { getContext } from 'svelte';
 
 	export let slug;
@@ -41,6 +42,11 @@
 	});
 
 	$: selected = lookup.get(slug);
+
+	$: app = {
+		components: chapter.files,
+		values: {}
+	};
 </script>
 
 <style>
@@ -60,6 +66,8 @@
 		flex-direction: column;
 		height: 100%;
 		border-right: 1px solid var(--second);
+		background-color: var(--second);
+		color: white;
 	}
 
 	.tutorial-repl {
@@ -67,7 +75,7 @@
 	}
 
 	.table-of-contents {
-		background-color: white;
+
 	}
 
 	.chapter-markup {
@@ -79,9 +87,41 @@
 
 	.chapter-markup :global(h2) {
 		font-size: var(--h3);
-		color: var(--second);
 		margin: 3.2rem 0 1.6rem 0;
 		line-height: 1;
+		color: white;
+	}
+
+	.chapter-markup :global(blockquote) {
+		background-color: rgba(255,255,255,0.1);
+		color: white;
+	}
+
+	/* .chapter-markup::-webkit-scrollbar-track {
+		background-color: var(--second);
+		width: 4px;
+	} */
+
+	.chapter-markup::-webkit-scrollbar {
+		background-color: var(--second);
+		width: 8px;
+	}
+
+	.chapter-markup::-webkit-scrollbar-thumb {
+		background-color: rgba(255,255,255,0.7);
+		border-radius: 1em;
+		outline: 1px solid green;
+	}
+
+	.chapter-markup :global(p) > :global(code) {
+		color: white;
+		background: rgba(255,255,255,0.1);
+		padding: 0.2em 0.4em;
+		white-space: nowrap;
+	}
+
+	.chapter-markup :global(pre) :global(code) {
+		/* color: var(--text); */
 	}
 
 	.next {
@@ -106,7 +146,7 @@
 	</div>
 
 	<div class="tutorial-repl">
-		TODO add the REPL
+		<Repl {app}/>
 	</div>
 
 </div>
diff --git a/site/src/user.js b/site/src/user.js
index 0ba4e7716f..9bbdcf2f76 100644
--- a/site/src/user.js
+++ b/site/src/user.js
@@ -5,6 +5,7 @@ export const user = writable(null);
 if (process.browser) {
 	// TODO this is a workaround for the fact that there's currently
 	// no way to pass session data from server to client
+	// TODO there is now! replace this with the session mechanism
 	fetch('/auth/me.json', { credentials: 'include' })
 		.then(r => r.json())
 		.then(user.set);
diff --git a/site/src/routes/repl/_components/events.js b/site/src/utils/events.js
similarity index 100%
rename from site/src/routes/repl/_components/events.js
rename to site/src/utils/events.js