diff --git a/src/app.css b/src/app.css
index f1d05c4..7ffafcd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,10 +4,10 @@
 
 :root {
     --background: #F8FAF9;   /* Sage/Light/2 */
-    --callout: ##ECEFED;       /* Sage/Light/4 */ 
-    --stroke: ##D7DCDA;        /* Sage/Light/7 */
-    --text-shout: ##164430;    /* Green/Dark/6 */
-    --text-murmur: ##113123;   /* Green/Dark/4 */
+    --callout: #ECEFED;       /* Sage/Light/4 */ 
+    --stroke: #D7DCDA;        /* Sage/Light/7 */
+    --text-shout: #164430;    /* Green/Dark/6 */
+    --text-murmur: #113123;   /* Green/Dark/4 */
 }
 
 body {
@@ -18,6 +18,7 @@ body {
 }
 
 h1, h2, h3, h4 {
+    color: var(--text-shout);
     font-weight: 700;
 }
 
@@ -25,6 +26,10 @@ h1 {
     font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
 }
 
-h2, h3, h4 {
+h2 {
     font-family: "Redaction 10", Georgia, 'Times New Roman', Times, serif;
+}
+
+footer {
+    border-color: var(--stroke);
 }
\ No newline at end of file
diff --git a/src/views/individual.handlebars b/src/views/individual.handlebars
index 146875f..cee9462 100644
--- a/src/views/individual.handlebars
+++ b/src/views/individual.handlebars
@@ -1,2 +1 @@
-<h1 class="text-3xl">Individual</h1>
-{{nominative}}/{{accusative}}/{{pronominalPossessive}}/{{predicativePossessive}}/{{reflexive}}
+<h1 class="text-5xl lg:text-6xl">{{nominative}}/&#8203;{{accusative}}/&#8203;{{pronominalPossessive}}/&#8203;{{predicativePossessive}}/&#8203;{{reflexive}}</h1>
diff --git a/src/views/layouts/main.handlebars b/src/views/layouts/main.handlebars
index acb8ab4..8c309f3 100644
--- a/src/views/layouts/main.handlebars
+++ b/src/views/layouts/main.handlebars
@@ -9,10 +9,12 @@
 	<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/redaction">
 	<link rel="stylesheet" href="/app.css">
 </head>
-<body>
-	<div class="container mx-auto my-8">
-		{{> header siteName=siteName }}
-		{{{body}}}
+<body class="min-h-screen flex flex-col">
+	{{> header siteName=siteName }}
+	<div class="mx-10 mt-10 mb-[60px] lg:mx-[90px] lg:mt-[90px] xl:mx-[120px] xl:mt-[120px] grow flex flex-col">
+		<div class="grow flex flex-col">
+			{{{body}}}
+		</div>
 		{{> footer }}
 	</div>
 </body>
diff --git a/src/views/partials/footer.handlebars b/src/views/partials/footer.handlebars
index 5dc4920..6afd05d 100644
--- a/src/views/partials/footer.handlebars
+++ b/src/views/partials/footer.handlebars
@@ -1,11 +1,18 @@
-<h3>Made by monsters</h3>
+<footer class="flex-end border-t mt-10 pt-10 lg:flex lg:flex-row lg:justify-between lg:gap-6">
 
-<ul>
-    <li><a href="#">Gaiety</a> who uses fae/faer, she/her</li>
-    <li><a href="#">Angela</a> who uses it/its, she/her</li>
-    <li><a href="#">Rizzo</a> who uses he/him, they/them, xier/xies</li>
-</ul>
+    <div>
+        <h3 class="leading-9 mb-2">Made by monsters</h3>
 
-<p>This site has a license of some sort, and that's linked <a href="#">here.</a></p>
+        <ul class="mb-10">
+            <li><a href="#" class="font-bold">Gaiety</a> who uses fae/faer, she/her</li>
+            <li><a href="#" class="font-bold">Angela</a> who uses it/its, she/her</li>
+            <li><a href="#" class="font-bold">Rizzo</a> who uses he/him, they/them, xier/xies</li>
+        </ul>
+    </div>
 
-<p>Thanks for visiting!</p>
\ No newline at end of file
+    <div class="space-y-2 lg:text-right">
+        <p>This site has a license of some sort, and that's linked <a href="#" class="font-bold">here.</a></p>
+
+        <p>Thanks for visiting!</p>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/src/views/partials/header.handlebars b/src/views/partials/header.handlebars
index 06ccc3f..8ebf1a8 100644
--- a/src/views/partials/header.handlebars
+++ b/src/views/partials/header.handlebars
@@ -1 +1,3 @@
-<h2>{{{siteName}}}</h2>
\ No newline at end of file
+<div class="p-10 lg:px-[60px]">
+    <h2 class="text-xl"><a href="/">{{{siteName}}}</a></h2>
+</div>
\ No newline at end of file
