diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
index 6e2360d..a8920e6 100644
--- a/docs/layouts/partials/footer.html
+++ b/docs/layouts/partials/footer.html
@@ -1,7 +1,6 @@
-      <div class="row flex-right">
-        <p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
-      </div>
+        </div>
     </div>
+    {{ partial "nav/sidebar" . }}
   </div>
 </body>
 
diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
index 79233d7..009baf0 100644
--- a/docs/layouts/partials/header.html
+++ b/docs/layouts/partials/header.html
@@ -3,15 +3,22 @@
 
 {{ partial "head/head" . }}
 
-<body>
-  <div class="container paper">
-    <div class="paper">
-      <div class="demo-title">
-        <div class="row flex-center">
-          <div class="text-center">
-            <h1>{{ .Site.Title }}</h1>
-            <h3>{{ .Site.Params.info.description }}</h3>
-          </div>
-        </div>
 
-        {{ partial "nav/main" . }}
+
+<body>
+  <div id='top' class='row site'>
+    <div class='sm-12 md-8 col'>
+        <div class='paper'>
+          <div class='demo-title'>
+            <div class='row flex-center'>
+              <div class='text-center'>
+                <h1>{{ .Site.Title }}</h1>
+                <h3>{{ .Site.Params.info.description }}</h3>
+              </div>
+            </div>
+
+            {{ partial "nav/main" . }}
+          </div>
+          <div class="to-top">
+            <a href="#top" class="paper-btn margin">^</a>
+          </div>
diff --git a/docs/layouts/partials/nav/sidebar.html b/docs/layouts/partials/nav/sidebar.html
new file mode 100644
index 0000000..9223006
--- /dev/null
+++ b/docs/layouts/partials/nav/sidebar.html
@@ -0,0 +1,28 @@
+<div class='sm-12 md-4 col sidebar'>
+    {{ range .Site.Sections }}
+    <div class='paper'>
+      <div class='row'>
+        {{ range .Sections }}
+        <div class='collapsible'>
+          <input id='collapsible-{{ .Title | urlize }}' type='radio' name='collapsible'>
+          <label for="collapsible-{{ .Title | urlize }}">{{ .Title }}</label>
+          <div class="collapsible-body">
+            <ul>
+            {{ range .Pages }}
+              <li>
+                <a href='{{ .Permalink | relURL }}'>{{ .Title }}</a>
+              </li>
+            {{ end }}
+            </ul>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+    {{ end }}
+    <div class='paper'>
+      <div class="row flex-right">
+        <p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
+      </div>
+    </div>
+</div>
diff --git a/docs/static/assets/demo.css b/docs/static/assets/demo.css
index 5cfe6f6..3732064 100644
--- a/docs/static/assets/demo.css
+++ b/docs/static/assets/demo.css
@@ -2,7 +2,7 @@ body {
     background-image: url("/img/geometry2.png")
 }
 .demo .row .col {
-    background-color: #eee;    
+    background-color: #eee;
 }
 .demo .row .col:nth-child(even) {
     background-color: #ddd;
@@ -12,7 +12,7 @@ body {
     margin-bottom: 2rem;
 }
 .summary a {
-    color: #41403e;    
+    color: #41403e;
 }
 img.no-responsive {
     max-width: -webkit-fill-available;
@@ -36,4 +36,7 @@ img.no-responsive {
 }
 .demo-title:hover + .to-top {
     opacity: 0
-}
\ No newline at end of file
+}
+.sidebar .collapsible {
+  width: 100%;
+}
diff --git a/img/geometry2.png b/docs/static/img/geometry2.png
similarity index 100%
rename from img/geometry2.png
rename to docs/static/img/geometry2.png
