diff --git a/public/code_jam/index.html b/public/code_jam/index.html
index c35d17680983d9305f1c8f1f6e1b34a20fddf24f..6e4a553e830f019ced5ab77ef8725626bc30da0c 100644
--- a/public/code_jam/index.html
+++ b/public/code_jam/index.html
@@ -2,18 +2,15 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Google Code Jam Solutions</title>
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Code Jam Solutions
@@ -32,9 +29,7 @@
 		</ul>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/index.html b/public/coding_challenges/collisions/index.html
index 6dd4786e66095bfe69983dcdd272865b2c86764e..4d9e14103a89fc81ab082c3ebf578643c5ffae08 100644
--- a/public/coding_challenges/collisions/index.html
+++ b/public/coding_challenges/collisions/index.html
@@ -2,18 +2,15 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Collisions algorithms</title>
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Collisions algorithms
@@ -36,9 +33,7 @@
 		</ul>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/quad-tree/index.html b/public/coding_challenges/collisions/quad-tree/index.html
index 37db3a9a5deb2212e2017115cb4343bbd1415c80..f13315e1d4ad9e08e941ed2509e22f551c465e0d 100644
--- a/public/coding_challenges/collisions/quad-tree/index.html
+++ b/public/coding_challenges/collisions/quad-tree/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Collisions - Quad Trees</title>
 	<link rel="stylesheet" href="/css/main.css">
 	<script src="../../../js/p5/p5.js"></script>
@@ -10,13 +13,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -29,9 +26,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every-optim/index.html b/public/coding_challenges/collisions/test-every-optim/index.html
index 6e4b6f50471a31c034aaf09222be0815af25434b..d1b592f7900acc465f7312e30946baee72e8445f 100644
--- a/public/coding_challenges/collisions/test-every-optim/index.html
+++ b/public/coding_challenges/collisions/test-every-optim/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Collisions - test all optimised</title>
 	<link rel="stylesheet" href="/css/main.css">
 	<script src="../../../js/p5/p5.js"></script>
@@ -9,13 +12,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -28,9 +25,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/collisions/test-every/index.html b/public/coding_challenges/collisions/test-every/index.html
index 26df212e98db6862f3684fcc563598ed9c00b7dd..4978234577dc13519b643ebf32e0bd440e07dbfe 100644
--- a/public/coding_challenges/collisions/test-every/index.html
+++ b/public/coding_challenges/collisions/test-every/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Collisions - test all</title>
 	<link rel="stylesheet" href="/css/main.css">
 	<script src="../../../js/p5/p5.js"></script>
@@ -9,13 +12,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -27,9 +24,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/covid-tracker/index.html b/public/coding_challenges/covid-tracker/index.html
index 89c914fb5a93ef5b332a99f773095d5a1f56a18b..daaa150e35a4d501dd0af8dc2cb90c9694f6eb86 100644
--- a/public/coding_challenges/covid-tracker/index.html
+++ b/public/coding_challenges/covid-tracker/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Covid-19 Tracker</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
 	<script src="./index.js"></script>
@@ -9,13 +12,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Covid-19 Tracker
@@ -25,9 +22,7 @@
 	<div id="container">
 		<canvas id="chart" width="500" height="500"></canvas>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/index.html b/public/coding_challenges/index.html
index 5f0a9a510309f0f6ee738e8f80e0b599c59a2103..dc114fdf062539f919edfe194fa04d8e57eede64 100644
--- a/public/coding_challenges/index.html
+++ b/public/coding_challenges/index.html
@@ -2,18 +2,15 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Coding challenges!</title>
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Coding Challenges!
@@ -35,9 +32,7 @@
 		</ul>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/index.html b/public/coding_challenges/sorting-visualiser/index.html
index e4a56e3605c2822100d599d2f2bad86f6acc5eb0..f91827b3f7317ce24a038d16608f3200e0bd3bf8 100644
--- a/public/coding_challenges/sorting-visualiser/index.html
+++ b/public/coding_challenges/sorting-visualiser/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>
 		Sorting Algorithm Visualiser
 	</title>
@@ -9,13 +12,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Sorting Algorithm Visualiser
@@ -39,9 +36,7 @@
 		</ul>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/coding_challenges/sorting-visualiser/sorter.html b/public/coding_challenges/sorting-visualiser/sorter.html
index a05ae76c5d645a079748966cb7b62968370cb457..c4983479961852c3806d4016b856382f30227d5e 100644
--- a/public/coding_challenges/sorting-visualiser/sorter.html
+++ b/public/coding_challenges/sorting-visualiser/sorter.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>
 		Sorting Algorithm Visualiser
 	</title>
@@ -10,28 +13,29 @@
 	<script src="./main.js"></script>
 	<script src="./visualiser.js"></script>
 	<script src="./algo.js"></script>
+	<script src="./color.js"></script>
 
 	<script src="./visualisers/standard.js"></script>
 	<script src="./visualisers/spiral.js"></script>
 	<script src="./visualisers/pie.js"></script>
 	<script src="./visualisers/scatter.js"></script>
 
-	<script src="./algorithms/fisher-yates.js"></script>
 	<script src="./algorithms/bubble-sort.js"></script>
 	<script src="./algorithms/cocktail-shaker-sort.js"></script>
 	<script src="./algorithms/quick-sort.js"></script>
 	<script src="./algorithms/heap-sort.js"></script>
 
+	<script src="./shuffles/fisher-yates.js"></script>
+	<script src="./shuffles/in-order.js"></script>
+	<script src="./shuffles/near-sorted.js"></script>
+
+	<script src="./colors/rainbow.js"></script>
+	<script src="./colors/simple.js"></script>
+
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 		<h1>
 			Sorting Algorithm Visualiser
@@ -46,9 +50,7 @@
 		</div>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/css/main.css b/public/css/main.css
index aa7cdec09b1daefc06d800045db3cfdbfcb7fa2b..78815c9bbf25ca28e5daf99b48ca6f742a7e832c 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -18,7 +18,7 @@ body {
 	padding: 20px;
 	width: calc(100vw - 40px);
 	background-color: #181818;
-	font-size: 24px;
+	font-size: 13pt;
 
 }
 
@@ -28,7 +28,7 @@ body {
 	padding: 10px;
 	padding-left: 30px;
 	background-color: #202020;
-
+	font-size: 11pt;
 }
 
 h1 {
@@ -43,6 +43,7 @@ h1 {
 
 #container {
 	margin: 20px;
+	font-size: 150%;
 }
 
 #home {
@@ -64,4 +65,8 @@ button {
 	font-size: 20px;
 	color: white;
 	background-color: #101010;
+}
+
+li {
+	margin: 4px;
 }
\ No newline at end of file
diff --git a/public/errors/404.html b/public/errors/404.html
index 061915fad571fbe749e7017f37dcbe2b54326848..28a752d3d70436d767caa0720df13578137bc6bc 100644
--- a/public/errors/404.html
+++ b/public/errors/404.html
@@ -2,24 +2,13 @@
 <html>
 
 <head>
+	#{meta}
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
-	<div id="subheader">
-
-		<h1>
-			Error
-		</h1>
-
-	</div>
+	#{header}
+	#{suberr}
 	<div id="container" style="text-align: center;">
 
 		<h1>
@@ -35,9 +24,7 @@
 		</h3>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/errors/500.html b/public/errors/500.html
index 4f8451548c9592cd61be7102c40445ac338a9ec4..1fbee23fa857d794d080ac29f60999b978400319 100644
--- a/public/errors/500.html
+++ b/public/errors/500.html
@@ -3,43 +3,14 @@
 
 <head>
 
-</head>
+	#{meta}
 
-<body>
-	<h1>
-		Error 500
-	</h1><br>
-	<p>
-		oops
-	</p><br>
-	<h3>
-		Server error!
-	</h3><br>
-</body>
-
-</html>
-<!DOCTYPE html>
-<html>
-
-<head>
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
-	<div id="subheader">
-
-		<h1>
-			Error
-		</h1>
-
-	</div>
+	#{header}
+	#{suberr}
 	<div id="container" style="text-align: center;">
 
 		<h1>
@@ -59,9 +30,7 @@
 		</p>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/backgammon/game.html b/public/games/backgammon/game.html
index 2978383f103877f7d8bf3323f711a24313ca3a97..32fdee9f46ea6722095c24e0972b9820bf99658d 100644
--- a/public/games/backgammon/game.html
+++ b/public/games/backgammon/game.html
@@ -2,7 +2,10 @@
 <html>
 
 <head>
-	<title>Cards against Humanity</title>
+
+	#{meta}
+
+	<title>Backgammon</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="/js/p5/p5.js"></script>
 	<script src="../game.js"></script>
@@ -12,13 +15,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -32,9 +29,7 @@
 
 		</div>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/backgammon/index.html b/public/games/backgammon/index.html
index 17f13ec090a7b713ea9c0fb7a68f1f0fdd76a867..7ab39cd90e4d12b2b4f9c52fd8481d647852c328 100644
--- a/public/games/backgammon/index.html
+++ b/public/games/backgammon/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -11,13 +14,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -29,9 +26,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/battleships/game.html b/public/games/battleships/game.html
index 92316e60b573c220e418231f27401ba190fc82dc..81920604678bfebe025f8bcadbb47d11dc6a62a9 100644
--- a/public/games/battleships/game.html
+++ b/public/games/battleships/game.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -10,13 +13,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -37,9 +34,7 @@
 
 		</div>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/battleships/index.html b/public/games/battleships/index.html
index 3752123a0621a246fab3940c3ac54588ecdd629b..aaad847d6a68f7006f3f4ae29885f8d0424db8df 100644
--- a/public/games/battleships/index.html
+++ b/public/games/battleships/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -11,13 +14,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -29,9 +26,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/battleships_v2/game.html b/public/games/battleships_v2/game.html
index 587d50a40bf91dddd7bb6686a5588c7c9ea842b9..c3b607c05f344c2c56eb6d462c796a6ad65a439b 100644
--- a/public/games/battleships_v2/game.html
+++ b/public/games/battleships_v2/game.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships-V2.0</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="/js/p5/p5.js"></script>
@@ -10,13 +13,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -40,9 +37,7 @@
 
 		</div>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/battleships_v2/index.html b/public/games/battleships_v2/index.html
index 0763f123c0e33c0252fd6aa8a86c1684e22beb04..6b99df4461d22f7cc0b64c0c634544d7b05eb099 100644
--- a/public/games/battleships_v2/index.html
+++ b/public/games/battleships_v2/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -11,13 +14,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -29,9 +26,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/cah/game.html b/public/games/cah/game.html
index 8222ebb39c6b19ee38acbcafdb5b464526c1e64f..123f49deee8416e3d086851d8b8cd386e16f9f4b 100644
--- a/public/games/cah/game.html
+++ b/public/games/cah/game.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Cards against Humanity</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="/js/p5/p5.js"></script>
@@ -11,13 +14,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -31,9 +28,7 @@
 
 		</div>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/cah/index.html b/public/games/cah/index.html
index 572563cb014379c54db8c543155ef2b5b15caacf..f7f0aeda031d0b465b07ba808ac161969cd0ae21 100644
--- a/public/games/cah/index.html
+++ b/public/games/cah/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -13,13 +16,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -31,9 +28,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/index.html b/public/games/index.html
index d8f422a530a85c1aeda5d1713a715d86c642d234..01fafa8dcd26914dc93da64eeb16dc62fc5e9e4f 100644
--- a/public/games/index.html
+++ b/public/games/index.html
@@ -2,17 +2,14 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -49,9 +46,7 @@
 		</ul>
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/games/template/index.html b/public/games/template/index.html
index e755b3abdda7e400f1c71ef1aa6c42f0bb475f82..fae4e401a6d1453f1db9f474b9de80aef3078fac 100644
--- a/public/games/template/index.html
+++ b/public/games/template/index.html
@@ -2,6 +2,9 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>Battleships</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
@@ -11,13 +14,7 @@
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="subheader">
 
 		<h1>
@@ -29,9 +26,7 @@
 	<div id="container">
 
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/include/footer.html b/public/include/footer.html
new file mode 100644
index 0000000000000000000000000000000000000000..34753ba77eeab09ac9fd7c2404253c49097d2dd2
--- /dev/null
+++ b/public/include/footer.html
@@ -0,0 +1,3 @@
+<div id="footer">
+
+</div>
\ No newline at end of file
diff --git a/public/include/header.html b/public/include/header.html
new file mode 100644
index 0000000000000000000000000000000000000000..c52ee28b59b732e66901a80c74eb579b4bfe1986
--- /dev/null
+++ b/public/include/header.html
@@ -0,0 +1,7 @@
+<div id="header">
+	<h1>
+		<a href="/" id="home">
+			Alex Mansfield's web server!
+		</a>
+	</h1>
+</div>
\ No newline at end of file
diff --git a/public/include/meta.html b/public/include/meta.html
new file mode 100644
index 0000000000000000000000000000000000000000..3808197185c18605da21d637ff29c323cace0068
--- /dev/null
+++ b/public/include/meta.html
@@ -0,0 +1 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file
diff --git a/public/include/suberr.html b/public/include/suberr.html
new file mode 100644
index 0000000000000000000000000000000000000000..4fe5e389b69dcd81eb50eb4fc04a0f9e8a385d6e
--- /dev/null
+++ b/public/include/suberr.html
@@ -0,0 +1,5 @@
+<div id="subheader">
+	<h1>
+		Error
+	</h1>
+</div>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 9a5be73b0bd1d064c8b82437a3166693b6bab182..d30c53b7fb64d1a5f293c1294d18e0c9ae183038 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,18 +2,15 @@
 <html>
 
 <head>
+
+	#{meta}
+
 	<title>AM Web!</title>
 	<link rel="stylesheet" href="/css/main.css">
 </head>
 
 <body>
-	<div id="header">
-		<h1>
-			<a href="/" id="home">
-				Alex Mansfield's web server!
-			</a>
-		</h1>
-	</div>
+	#{header}
 	<div id="container">
 		<ul>
 			<li>
@@ -27,9 +24,7 @@
 			</li>
 		</ul>
 	</div>
-	<div id="footer">
-
-	</div>
+	#{footer}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/sendFile.ts b/src/sendFile.ts
index 700ff6753fe5481a0808f0de36f2829a73847cca..23d89be34a48312311c42d0fdd6645681b708df0 100644
--- a/src/sendFile.ts
+++ b/src/sendFile.ts
@@ -9,6 +9,31 @@ function staticServe(root: string) {
 }
 
 function sendFile(path: string, req: express.Request, res: express.Response, next: express.NextFunction) {
+	let type = path.substr(path.lastIndexOf('.'));
+	getFile(path)
+		.then(async file => {
+
+			let r = /#{.+}/gm;
+			let i;
+			if (type == '.html')
+				while (i = r.exec(file)) {
+					// console.log(i[0]);
+					try {
+						let include = await getFile(`public/include/${i[0].substring(2, i[0].length-1)}.html`);
+						file = file.substr(0, i.index) + include + file.substr(i.index + i[0].length);
+					} catch (e) {
+						file = file.substr(0, i.index) + file.substr(i.index + i[0].length);
+					}
+				}
+			res.type(type);
+			res.send(file);
+			res.end();
+		})
+		.catch(err => {
+			console.log(err);
+			next(404);
+		})
+	return;
 	fs.exists(path, (exists: boolean) => {
 		if (!exists) {
 			next(404);
@@ -34,6 +59,16 @@ function sendFile(path: string, req: express.Request, res: express.Response, nex
 	})
 }
 
+async function getFile(path: string): Promise < string > {
+	// console.log(`Getting file: ${path}`);
+	let handle = await fs.promises.open(path, 'r');
+	// console.log("HANDLE");
+	// console.log(handle);
+	let file = await handle.readFile();
+	handle.close();
+	return file.toString();
+}
+
 export {
 	sendFile,
 	staticServe