diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss
index 1f15522..eb4f381 100644
--- a/static/src/scss/index.scss
+++ b/static/src/scss/index.scss
@@ -1 +1,15 @@
 @import "materialize-css/sass/materialize";
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+footer.page-footer {
+  padding-top: 0;
+}
diff --git a/templates/base.html b/templates/base.html
index 7cd55d5..c45eed3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,8 +16,44 @@
   </head>
   <body>
 
-    {% block content %}{% endblock %}
+    <header id="top">
+      <nav>
+        <div class="nav-wrapper black">
+          <a href="#" class="brand-logo right">Logo</a>
+          <a href="#" data-target="mobile-nav" class="sidenav-trigger">menu</a>
+          <ul id="nav-mobile" class="left hide-on-med-and-down">
+            {% include "nav-items.html" %}
+          </ul>
+        </div>
+      </nav>
+
+      <ul class="sidenav" id="mobile-nav">
+        {% include "nav-items.html" %}
+      </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        {% block content %}{% endblock %}
+      </div>
+    </main>
+
+     <footer class="page-footer black">
+      <div class="footer-copyright">
+        <div class="container">
+          &copy; {% now "Y" %} TheOrangeOne
+          <a class="grey-text text-lighten-4 right" href="#top">Top</a>
+        </div>
+      </div>
+    </footer>
 
     <script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        var elems = document.querySelectorAll('.sidenav');
+        var instances = M.Sidenav.init(elems, {});
+      });
+    </script>
   </body>
 </html>
diff --git a/templates/nav-items.html b/templates/nav-items.html
new file mode 100644
index 0000000..7c6686b
--- /dev/null
+++ b/templates/nav-items.html
@@ -0,0 +1,3 @@
+<li><a href="sass.html">Sass</a></li>
+<li><a href="badges.html">Components</a></li>
+<li><a href="collapsible.html">JavaScript</a></li>
