diff --git a/src/app.css b/src/app.css
index 4c1b0c2..5b93173 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,2 +1,6 @@
 @import "tailwindcss";
 @plugin "daisyui";
+
+:root {
+	@apply font-[Roboto];
+}
diff --git a/src/app.html b/src/app.html
index 77a5ff5..f8ed7f8 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,6 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+			rel="stylesheet"
+		/>
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
diff --git a/src/lib/components/WIP.svelte b/src/lib/components/WIP.svelte
index 5c935ad..ef24ecc 100644
--- a/src/lib/components/WIP.svelte
+++ b/src/lib/components/WIP.svelte
@@ -1,50 +1,50 @@
-<div class="hazard-border flex w-full flex-col justify-around">
+<div class="hazard-border flex w-full flex-col justify-around text-xl font-semibold italic">
 	<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8">
 		<div class="scroll-element primary flex justify-around">
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
 		</div>
 		<div class="scroll-element secondary flex justify-around">
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
 		</div>
 	</div>
 	<div class="scroll-parent hazard w-full skew-2 overflow-hidden px-8">
 		<div class="scroll-element -primary flex justify-around">
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
 		</div>
 		<div class="scroll-element -secondary flex justify-around">
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
 		</div>
 	</div>
 	<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8">
 		<div class="scroll-element primary flex justify-around">
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
 		</div>
 		<div class="scroll-element secondary flex justify-around">
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
-			<b>Caution</b>
-			<b>Work In Progress</b>
-			<b>Under Construction</b>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
+			<p>Caution</p>
+			<p>Work In Progress</p>
+			<p>Under Construction</p>
 		</div>
 	</div>
 </div>
@@ -52,7 +52,7 @@
 <style>
 	.scroll-parent {
 		position: relative;
-		height: 4rem;
+		height: 4.2rem;
 	}
 
 	.scroll-element {
