diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 60f87db8..494eb6e2 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -9,21 +9,25 @@
   </head>
 
   <body>
-      <a href="https://github.com/NuSkooler/enigma-bbs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
+      <a href="https://github.com/NuSkooler/enigma-bbs/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
+    <div id="container">
         <div class="sidebar" id="sidebar">
+        <hr class="mobile-divide" />
             <div class="container">
-                <a href="{{ site.baseurl }}"><img src="{{ '/assets/images/enigma-logo.png' | relative_url }}" class="logo" /></a>
+          <a href="{{ site.baseurl }}{% link index.md %}"><img src="{{ '/assets/images/enigma-logo.png' | relative_url }}" class="logo" /></a>
             </div>
             {% capture nav_include %}{% include nav.md %}{% endcapture %}
             {{ nav_include | markdownify }}
         </div>
-    <div class="main_area">
-        <div class="container">
+        <div class="main_area">
+          <div class="container">
             <section id="main_content">
+              <a href="#sidebar" class="btn menu_button">MENU</a>
                 {{ content }}
             </section>
+          </div>
         </div>
-    </div>
+      </div>
 
     {% if site.google_analytics %}
       <script type="text/javascript">
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 5f1392bd..6c45fb24 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -2,3 +2,41 @@
 ---
 
 @import 'jekyll-theme-hacker';
+
+@media (max-width: 767px) {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  .mobile-divide {
+    border-top: 1px dashed #b5e853;
+  }
+
+  .sidebar {
+    order: 2;
+    float: none;
+    width: 100%;
+    position: relative !important;
+  }
+
+  .main_area {
+    padding-left: 0px !important;
+  }
+
+  #container {
+    display: flex;
+    flex-direction: column;
+    display:flex;
+  }
+
+}
+
+@media (min-width: 768px) {
+  .menu_button {
+    display: none;
+  }
+
+  .mobile-divide {
+    display: none;
+  }
+}
