diff --git a/package.json b/package.json
index ad3529a..02188ff 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"astro": "astro"
 	},
 	"dependencies": {
+		"@fontsource/atkinson-hyperlegible": "^4.5.11",
 		"astro": "^2.1.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 982f4cb..08dd90e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,11 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@fontsource/atkinson-hyperlegible': ^4.5.11
   astro: ^2.1.0
 
 dependencies:
+  '@fontsource/atkinson-hyperlegible': 4.5.11
   astro: 2.3.0
 
 packages:
@@ -539,6 +541,10 @@ packages:
     dev: false
     optional: true
 
+  /@fontsource/atkinson-hyperlegible/4.5.11:
+    resolution: {integrity: sha512-ounnhVVjseNci+G0dGPBwUY7RYM2h8FsfyhzvpUnQYKeiuUcRtGahCswnrKPrvSXNRCl1uqnRSxP3ahJ4miYIQ==}
+    dev: false
+
   /@jridgewell/gen-mapping/0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c2ae845..a38078c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,3 +1,4 @@
 <footer aria-label="my websites footer">
+	<hr>
 	<a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a>
 </footer>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a99b11e..4b48f99 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+import '@fontsource/atkinson-hyperlegible';
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
 import "../styles/global.css";
diff --git a/src/styles/global.css b/src/styles/global.css
index 6bd7933..8f230c6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,38 +1,44 @@
+@media (prefers-color-scheme: light) {
+	:root {
+		--background-color: #eff1f5;
+		--text-color: #1e1e2e;
+		--link-color: #1a1adc;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-color: #1e1e2e;
+		--text-color: #cdd6f4;
+		--link-color: #8cb8ff;
+	}
+}
+
 body {
-	font-family: sans-serif;
+	font-family: "Atkinson Hyperlegible", sans-serif;
 	text-align: center;
 }
 
-section {
+section,
+footer {
 	max-width: 600px;
 	margin: auto;
 }
 
 p {
-	font-size: 20px;
-}
-	a {
-		font-size: 20px;
-	}
-
-@media (prefers-color-scheme: light) {
-	body {
-		background-color: #eff1f5;
-		color: #1e1e2e;
-	}
-
-	a {
-		color: #1a1adc;
-	}
+	font-size: 22px;
 }
 
-@media (prefers-color-scheme: dark) {
-	body {
-		background-color: #1e1e2e;
-		color: #cdd6f4;
-	}
-
-	a {
-		color: #8cb8ff;
-	}
+a {
+	font-size: 22px;
+	color: var(--link-color);
+}
+
+body {
+	background-color: var(--background-color);
+	color: var(--text-color)
+}
+
+hr {
+	color: var(--text-color);
 }