diff --git a/src/app.html b/src/app.html
index 77a5ff5..e2b7a12 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
diff --git a/src/routes/articles/+layout.svelte b/src/routes/articles/+layout.svelte
index 549bbe0..b3604d3 100644
--- a/src/routes/articles/+layout.svelte
+++ b/src/routes/articles/+layout.svelte
@@ -4,7 +4,11 @@
 </script>
 
 <div class="body">
+	<div class="article_padding"></div>
+
 	<div class="article_body">
 		{@render children()}
 	</div>
+
+	<div class="article_padding"></div>
 </div>
diff --git a/src/routes/articles/article.css b/src/routes/articles/article.css
index 6704296..4eaa327 100644
--- a/src/routes/articles/article.css
+++ b/src/routes/articles/article.css
@@ -1,10 +1,12 @@
-* {
-    color: #fbf1c7;
-    font-family: Arial, Helvetica, sans-serif
-}
+@import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-.body {
-    background-color: #1d2021
+* {
+    color: #ebdbb2;
+    font-family: "Inter", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
 }
 
 br {
@@ -22,12 +24,24 @@ h2 {
     margin-top: .6em;
 }
 
+.body {
+    background-color: #1d2021;
+    display: flex;
+}
+
 .article_body {
+    flex: 3;
     margin-left: 10em;
     margin-right: 10em;
     padding: 1em;
     background-color: #282828;
     text-align: justify;
     max-width: 80ch;
-    /* Adjust as necessary */
+
+    border-left: 1px solid #7c6f64;
+    border-right: 1px solid #7c6f64;
+}
+
+.article_padding {
+    flex: 1;
 }
