diff --git a/site/src/components/InlineSvg.svelte b/site/src/components/InlineSvg.svelte
index e29810ae97..741ab7ec9e 100644
--- a/site/src/components/InlineSvg.svelte
+++ b/site/src/components/InlineSvg.svelte
@@ -5,7 +5,7 @@
 	- advantage of css-styling
 	- https://github.com/jacobmischka/svelte-feather-icon
 	- https://feathericons.com/
-	- if requred we can split out app-controls to REPL only
+	- if required we can split out app-controls to REPL only
 -----------------------------------------------
 -->
 
@@ -112,4 +112,4 @@
 	<symbol id="chevron" class="icon" viewBox="0 0 24 24">
 		<path d="M2,7 L12,17 L20,7"/>
 	</symbol>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index 179a8e4470..1ccd511152 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -6,6 +6,7 @@
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
 	import { enter } from '../../../../utils/events.js';
+	import { isMac } from '../../../../utils/compat.js';
 
 	const dispatch = createEventDispatcher();
 
@@ -20,8 +21,6 @@
 	let justSaved = false;
 	let justForked = false;
 
-	const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';
-
 	function wait(ms) {
 		return new Promise(f => setTimeout(f, ms));
 	}
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index e89c3e0587..39dcfd78f9 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -27,7 +27,7 @@
 
 	let repl;
 	let gist;
-	let name = 'loading...';
+	let name = 'Loading...';
 	let zen_mode = false;
 	let relaxed = false;
 	let width = process.browser ? window.innerWidth : 1000;
@@ -58,7 +58,9 @@
 
 		if (gist_id) {
 			relaxed = false;
-			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
+			fetch(`gist/${gist_id}`)
+			.then(r => r.json())
+			.then(data => {
 				gist = data;
 				const { description, files } = data;
 
@@ -201,7 +203,7 @@
 </style>
 
 <svelte:head>
-	<title>REPL • Svelte</title>
+	<title>{name} • REPL • Svelte</title>
 
 	<meta name="twitter:title" content="Svelte REPL">
 	<meta name="twitter:description" content="Cybernetically enhanced web apps">
@@ -212,9 +214,9 @@
 
 <div class="repl-outer {zen_mode ? 'zen-mode' : ''}" class:mobile>
 	<AppControls
-		{name}
 		{gist}
 		{repl}
+		bind:name
 		bind:zen_mode
 		on:forked={handle_fork}
 	/>
diff --git a/site/src/utils/compat.js b/site/src/utils/compat.js
new file mode 100644
index 0000000000..0b0f1e954b
--- /dev/null
+++ b/site/src/utils/compat.js
@@ -0,0 +1 @@
+export const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';