diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index bc7ed6bfe5..d87a7f16db 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -180,13 +180,12 @@
 		color: white;
 	}
 
-
 	.chapter-markup :global(ul) {
 		padding: 0 0 0 2em;
 	}
 
 	.chapter-markup :global(blockquote) {
-		background-color: rgba(0,0,0,.17);
+		background-color: rgb(0, 0, 0, .17);
 		color: var(--sidebar-text);
 	}
 
@@ -196,63 +195,63 @@
 	}
 
 	.chapter-markup::-webkit-scrollbar-thumb {
-		background-color: rgba(255,255,255,.7);
+		background-color: rgb(255, 255, 255, .7);
 		border-radius: 1em;
 	}
 
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
 		color: var(--sidebar-text);
-		background: rgba(0,0,0,.12);
+		background: rgb(0, 0, 0, .12);
 		padding: .2em .4em .3em;
 		white-space: nowrap;
 		position: relative;
 		top: -0.1em;
 	}
 
-	.controls {
-		border-top: 1px solid rgba(255,255,255,.15);
-		padding: 1em 0 0 0;
-		display: flex;
-	}
-
-	.show {
-		background: var(--prime);
-		padding: .3em .7em;
-		border-radius: var(--border-r);
-		top: .1em;
-		position: relative;
-		font-size: var(--h5);
-		font-weight: 300;
-		color: rgba(255,255,255,0.7);
-	}
-
-	.show:hover {
-		color: white;
+	.nav-btns {
+		display: grid;
+		gap: 1.6rem;
+    padding-top: 1em;
+		border-top: 1px solid rgb(255, 255, 255, .1);
 	}
 
-	a.next {
-		padding-right: 1.2em;
-		background: no-repeat 100% 50% url(/icons/arrow-right.svg);
-		background-size: 1em 1em;
-		margin-left: auto;
+	.nav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+		width: 100%;
+    height: 5rem;
+		padding: 0 1.6rem;
+		white-space: nowrap;
+    background: rgb(255, 255, 255, .1);
+    font-size: 1.6rem;
+    color: white;
+    border: unset;
+    border-radius: 6px;
+    transition: 300ms;
 	}
 
-	.improve-chapter {
-		padding: 1em 0 .5em 0;
+	.nav-btn:hover {
+		padding: 0 1.6rem;
+    box-shadow: 0 10px 16px rgb(80, 80, 94, .5);
+		border-color: rgb(255, 255, 255, .2);
+    background: rgb(255, 255, 255, .2);
 	}
 
-	.improve-chapter a {
-		font-size: 14px;
-		text-decoration: none;
-		opacity: .3;
-		padding: 0 .1em 0 1.2em;
-		background: no-repeat 0 50% url(/icons/edit.svg);
-		background-size: 1em 1em;
+	.nav-btn--edit-chapter {
+		background: unset !important;
+		box-shadow: unset !important;
+		border: 2px solid rgb(255, 255, 255, .1);
 	}
 
-	.improve-chapter a:hover {
-		opacity: 1;
+	@media only screen and (min-width: 640px) {
+		.nav-btns {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		.nav-btn--edit-chapter {
+			grid-column: 1 / -1
+		}
 	}
 </style>
 
@@ -276,22 +275,19 @@
 			<div class="chapter-markup" bind:this={scrollable}>
 				{@html chapter.html}
 
-				<div class="controls">
+				<div class="nav-btns">
 					{#if chapter.app_b}
-						<!-- TODO disable this button when the contents of the REPL
-							matches the expected end result -->
-						<button class="show" on:click="{() => completed ? reset() : complete()}">
-							{completed ? 'Reset' : 'Show me'}
+						<!-- TODO: disable this button when the contents of the REPL matches the expected end result. -->
+						<button class="nav-btn show-finished" on:click="{() => completed ? reset() : complete()}">
+							{completed ? 'Reset' : 'Show Finished'}
 						</button>
 					{/if}
 
 					{#if selected.next}
-						<a class="next" href="tutorial/{selected.next.slug}">Next</a>
+						<a class="nav-btn next-page" href="tutorial/{selected.next.slug}">Next</a>
 					{/if}
-				</div>
 
-				<div class="improve-chapter">
-					<a class="no-underline" href={improve_link}>Edit this chapter</a>
+					<a class="nav-btn nav-btn--edit-chapter" href={improve_link}>Edit this Chapter</a>
 				</div>
 			</div>
 		</div>
diff --git a/site/static/icons/edit.svg b/site/static/icons/edit.svg
deleted file mode 100644
index 760321cd2f..0000000000
--- a/site/static/icons/edit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-width="2"><path d="m20 14.66v5.34a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2-2v-14a2 2 0 0 1 2-2h5.34"/><path d="m18 2 4 4-10 10h-4v-4z"/></g></svg>
\ No newline at end of file