diff --git a/web/src/app.css b/web/src/app.css
index 3128f530..28b8f8a6 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -4,4 +4,11 @@
 
 * {
   user-select: none;
+  font-family: Outfit;
 }
+
+@font-face {
+  font-family: Outfit;
+  src: url('/fonts/outfit.ttf');
+}
+
diff --git a/web/src/lib/Underlines.svelte b/web/src/lib/Underlines.svelte
index 53e6c90f..28d3d36d 100644
--- a/web/src/lib/Underlines.svelte
+++ b/web/src/lib/Underlines.svelte
@@ -59,8 +59,10 @@
 			{:else if typeof chunk == 'string'}
 				<span class="">{chunk}</span>
 			{:else}
-				<span style={`border-bottom: 3px solid ${chunk[1]}; margin-right: -4px;`}>
-					{chunk[0]}
+				<span style={`margin-right: -4px;`}>
+					<span style={`border-bottom: 3px solid ${chunk[1]};`}>
+						{chunk[0]}
+					</span>
 				</span>
 			{/if}
 		{/each}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index ab56aabc..62125a9b 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -23,12 +23,15 @@
 </script>
 
 <div class="flex flex-row w-full h-screen">
-	<div class="flex-auto h-full p-5 grid z-10">
+	<div class="flex-auto h-full p-5 grid z-10 text-lg">
 		<div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1">
-			<Underlines {content}></Underlines>
+			<Underlines {content} />
+		</div>
+		<div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1">
+			<Highlights {content} />
 		</div>
 		<textarea
-			class="w-full h-full m-0 rounded-none p-0 z-0 bg-transparent border-none"
+			class="w-full h-full m-0 rounded-none p-0 z-0 bg-transparent border-none text-lg"
 			spellcheck="false"
 			style="grid-row: 1; grid-column: 1"
 			bind:value={content}
diff --git a/web/static/fonts/outfit.ttf b/web/static/fonts/outfit.ttf
new file mode 100644
index 00000000..96106f09
Binary files /dev/null and b/web/static/fonts/outfit.ttf differ