diff --git a/_layouts/default.html b/_layouts/default.html
index 6d757bf..271d94b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,18 +4,20 @@
   <link rel="stylesheet" type="text/css" href="index.css">
 </head>
 <body>
+  <nav>
+    <ul>
+      <li class="logo">Birmingham Open Code</li>
+      <li><a href="about.html">About</a></li>
+      <li><a href="location.html">Location</a></li>
+      <li><a href="codeofconduct.html">Code of Conduct</a></li>
+      <li><a href="resources.html">Resources</a></li>		
+      <li><a href="contact.html">Contact Us</a></li>
+    </ul>
+  </nav>
   <div id="container">
-    <nav>
-      <ul>
-        <li class="logo">Birmingham Open Code</li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="location.html">Location</a></li>
-        <li><a href="codeofconduct.html">Code of Conduct</a></li>
-        <li><a href="resources.html">Resources</a></li>		
-        <li><a href="contact.html">Contact Us</a></li>
-      </ul>
-    </nav>
+    <div class="top-blocker"></div>
     {{ content }}
+    <div class="bottom-blocker"></div>
   </div>
 
   <footer>
diff --git a/index.css b/index.css
index 20e6f45..4e8a766 100644
--- a/index.css
+++ b/index.css
@@ -5,6 +5,7 @@ padding: 0;
 @import url('https://fonts.googleapis.com/css?family=Oxygen&display=swap');
 body {
 	font-family: 'Oxygen', sans-serif;
+	background-color: #FCFCFC;
 }
 
 #container{
@@ -12,13 +13,13 @@ body {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	background-color: #FCFCFC;
-
 }
 .logo {
 	flex: 1;
 }
 nav{
+	position: fixed;
+	top: 0;
 	width: 100%;
 	background: #83B692;
 	color: white;
@@ -39,3 +40,19 @@ nav li {
 .about-list {
 	line-height: 200%;
 }
+
+.resource-list {
+	width: 400px;
+	box-sizing: border-box;
+}
+
+/* These blockers are based on the heght of the nav bar
+and footer respectively. If those change, remember to update these!
+*/
+.top-blocker {
+	height: 52px;
+}
+
+.bottom-blocker {
+	height: 89px;
+}
diff --git a/resources.html b/resources.html
index a00d84c..93d1012 100644
--- a/resources.html
+++ b/resources.html
@@ -7,20 +7,21 @@
       <h1>Resources</h1>
       <h2>Code Tutorials:</h2>
       <p>Learn to code for free with the use of these tutorial sites!</p>
-      <ul>
+      <ul class="resource-list">
 		<li><a href="https://www.freecodecamp.org/" target="_blank">Freecodecamp</a></li>
-		<li><a href="https://www.codecademy.com/" target="_blank">Codecademy</a></li>
+    <li><a href="https://www.codecademy.com/" target="_blank">Codecademy</a></li>
+    <li><a href="https://open.appacademy.io">App Academy</a></li>
 	  </ul>
     <div>
      <p>Design your own website here:</p>
-    <ul>
+    <ul class="resource-list">
       <li><a href="http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank">Paletton</a></li>
       <li><a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a></li>
     </ul>
     </div>
     <div>
       <p>Add some funny text place holders to your website:</p>
-      <ul>
+      <ul class="resource-list">
         <li><a href="https://jeffsum.com/" target="_blank">Jeffsum</a></li>
         <li><a href="https://www.shopify.co.uk/partners/blog/79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups" target="_blank">15 Lorem Ipsum Generator</a></li>
       </ul>
