diff --git a/dashmachine/sources.py b/dashmachine/sources.py
index a470d8f..3b771f3 100644
--- a/dashmachine/sources.py
+++ b/dashmachine/sources.py
@@ -13,8 +13,8 @@ context processor to make the process functions available to every jinja templat
 Load orders in bundles are respected here"""
 
 """You can disable minification for debug purposes here (set to True) """
-debug_js = False
-debug_css = False
+debug_js = True
+debug_css = True
 
 
 def process_js_sources(process_bundle=None, src=None, app_global=False):
diff --git a/dashmachine/static/css/global/dashmachine-theme.css b/dashmachine/static/css/global/dashmachine-theme.css
index 8a66f9a..f8e3f5b 100644
--- a/dashmachine/static/css/global/dashmachine-theme.css
+++ b/dashmachine/static/css/global/dashmachine-theme.css
@@ -23,19 +23,60 @@
   --theme-color-font-muted: #f9f9f9;
   --theme-warning: #dc584e;
 }
-[data-accent="green"] {
-  --theme-primary: #49B03E;
+[data-accent="red"] {
+  --theme-primary: #f44336;
 }
 [data-accent="pink"] {
-  --theme-primary: #EE1289;
+  --theme-primary: #e91e63;
+}
+[data-accent="purple"] {
+  --theme-primary: #9c27b0;
+}
+[data-accent="deepPurple"] {
+  --theme-primary: #673ab7;
+}
+[data-accent="indigo"] {
+  --theme-primary: #3f51b5;
 }
 [data-accent="blue"] {
-  --theme-primary: #5151b0;
+  --theme-primary: #2196f3;
+}
+[data-accent="lightBlue"] {
+  --theme-primary: #03a9f4;
+}
+[data-accent="cyan"] {
+  --theme-primary: #00bcd4;
+}
+[data-accent="teal"] {
+  --theme-primary: #009688;
+}
+[data-accent="green"] {
+  --theme-primary: #4caf50;
+}
+[data-accent="lightGreen"] {
+  --theme-primary: #8bc34a;
+}
+[data-accent="lime"] {
+  --theme-primary: #cddc39;
+}
+[data-accent="yellow"] {
+  --theme-primary: #ffeb3b;
+}
+[data-accent="amber"] {
+  --theme-primary: #ffc107;
+}
+[data-accent="deepOrange"] {
+  --theme-primary: #ff5722;
+}
+[data-accent="brown"] {
+  --theme-primary: #795548;
 }
 [data-accent="grey"] {
-  --theme-primary: #C6C3CC;
+  --theme-primary: #9e9e9e;
+}
+[data-accent="blueGrey"] {
+  --theme-primary: #607d8b;
 }
-
 /* THEME CLASSES */
 .theme-surface {
   background-color: var(--theme-surface) !important;
diff --git a/dashmachine/static/css/global/dashmachine.css b/dashmachine/static/css/global/dashmachine.css
index 92aad3f..439d717 100644
--- a/dashmachine/static/css/global/dashmachine.css
+++ b/dashmachine/static/css/global/dashmachine.css
@@ -50,6 +50,8 @@ body {
     user-select: none;
     /* Non-prefixed version, currently
     supported by Chrome, Opera and Firefox */
+    scrollbar-color: var(--theme-secondary);
+    scrollbar-width: thin;
 }
 
 html {
@@ -328,15 +330,15 @@ input:disabled {
 .navbar .navbar-light ul a {
     color: var(--theme-color-font);
 }
-@media (min-width: 900px)
-{
-    .sidenav-overlay
-    {
-        display: none !important;
+/*@media (min-width: 900px)*/
+/*{*/
+/*    .sidenav-overlay*/
+/*    {*/
+/*        display: none !important;*/
 
-        opacity: 0 !important;
-    }
-}
+/*        opacity: 0 !important;*/
+/*    }*/
+/*}*/
 
 /* MODALS AND CARDS */
 .modal {
@@ -615,6 +617,14 @@ input:disabled {
 .sidenav {
     background-color: var(--theme-surface);
     top: unset;
+    overflow: scroll;
+    scrollbar-width: none;
+}
+
+#sidenav-mobile-toggle-btn {
+    position: fixed;
+    top: unset;
+    bottom: 10px;
 }
 
 .border-bottom-1 {
@@ -770,4 +780,4 @@ span.badge.new {
 /*FAB*/
 .tap-target-wave::before, .tap-target-wave::after {
     background-color: var(--theme-background);
-}
\ No newline at end of file
+}
diff --git a/dashmachine/static/css/settings_system/settings.css b/dashmachine/static/css/settings_system/settings.css
index b724638..293b145 100644
--- a/dashmachine/static/css/settings_system/settings.css
+++ b/dashmachine/static/css/settings_system/settings.css
@@ -1,5 +1,9 @@
-body {
-    overflow: hidden !important;
+
+@media (min-width: 990px)
+{
+    body {
+        overflow: hidden !important;
+    }
 }
 
 .settings-page-card {
diff --git a/dashmachine/static/js/global/dashmachine.js b/dashmachine/static/js/global/dashmachine.js
index 0349fab..9ebbf19 100644
--- a/dashmachine/static/js/global/dashmachine.js
+++ b/dashmachine/static/js/global/dashmachine.js
@@ -201,6 +201,7 @@ $(document).ready(function () {
         }
     }, 300);
 
+    $("#slide-out").sidenav();
 
     // Collapsible navigation menu
     $(".nav-collapsible .navbar-toggler").click(function() {
diff --git a/dashmachine/templates/main/home.html b/dashmachine/templates/main/home.html
index e0b7a2f..ec54380 100755
--- a/dashmachine/templates/main/home.html
+++ b/dashmachine/templates/main/home.html
@@ -5,7 +5,7 @@
 {% endblock page_vendor_css %}
 
 {% block page_lvl_css %}
-    {% if settings.background %}
+    {% if settings.background and settings.background != 'None' %}
         <style>
             #main {
                 background-image: url("{{ settings.background }}");
@@ -41,7 +41,7 @@
                         {% endif %}
                     <div class="col s12 m6 l3">
                         <div class="card theme-surface-transparent app-card">
-                            <div class="card-content center-align scrollbar" style="max-height: 118px; min-height: 118px;">
+                            <div class="card-content center-align scrollbar" style="max-height: 118px; min-height: 118px; scrollbar-width: none;">
                                 {% if app.data_template %}
                                     <div class="row">
                                         <div class="col s6 center-align">
@@ -58,7 +58,7 @@
                                     <img src="{{ app.icon }}" height="64px">
                                 {% endif %}
                             </div>
-                            <div class="card-action center-align scrollbar" style="max-height: 127px; min-height: 127px;">
+                            <div class="card-action center-align scrollbar" style="max-height: 127px; min-height: 127px; scrollbar-width: none;">
                                 <h5>{{ app.name }}</h5>
                                 <span class="theme-secondary-text">{{ app.description }}</span>
                             </div>
diff --git a/dashmachine/templates/main/layout.html b/dashmachine/templates/main/layout.html
index 2b2427d..efd9786 100644
--- a/dashmachine/templates/main/layout.html
+++ b/dashmachine/templates/main/layout.html
@@ -49,7 +49,7 @@
             {% endfor %}
 
         </ul>
-        {#        <div class="navigation-background"></div><a class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary" href="#" data-target="slide-out"><i class="material-icons-outlined">menu</i></a>#}
+                <div class="navigation-background"></div><a id="sidenav-mobile-toggle-btn" class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary" href="#" data-target="slide-out"><i class="material-icons-outlined">menu</i></a>
     </aside>
     <!-- END: SideNav-->
 
diff --git a/dashmachine/templates/settings_system/settings.html b/dashmachine/templates/settings_system/settings.html
index a6ef6ce..e3fda11 100644
--- a/dashmachine/templates/settings_system/settings.html
+++ b/dashmachine/templates/settings_system/settings.html
@@ -6,12 +6,13 @@
 
 {% block page_lvl_css %}
     {{ process_css_sources(src="settings_system/settings.css")|safe }}
-    {% if settings.background %}
+    {% if settings.background and settings.background != 'None' %}
         <style>
             #main {
                 background-image: url("{{ settings.background }}");
                 background-size: cover;
-                height: 100vh;
+                background-attachment: fixed;
+                min-height: 100vh;
             }
         </style>
     {% endif %}
@@ -22,7 +23,9 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col s12">
-                    <h4>Config.ini Readme</h4>
+                    <h4>Config.ini Readme
+                    <span><i class="material-icons-outlined modal-close right icon-btn">close</i></span>
+                    </h4>
                 </div>
                 <div id="config-help-col" class="col s12 theme-surface-1 padding-2 border-radius-10">
                     <h5>Settings Reference</h5>
@@ -33,7 +36,7 @@
                         background = static/images/backgrounds/background.png<br>
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>
@@ -59,7 +62,10 @@
                             <td>accent</td>
                             <td>Yes</td>
                             <td>UI accent color</td>
-                            <td>orange, green, blue, green, pink, grey</td>
+                            <td>
+                                orange, red, pink, purple, deepPurple, indigo, blue, lightBlue,
+                                cyan, teal, green, lightGreen, lime, yellow, amber, deepOrange, brown, grey, blueGrey
+                            </td>
                         </tr>
                         <tr>
                             <td>background</td>
@@ -82,7 +88,7 @@
                         data_template = None
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>
@@ -151,7 +157,7 @@
                         value_template = variable_name<br>
                     </code>
 
-                    <table class="mt-4">
+                    <table class="mt-4 responsive-table">
                         <thead>
                         <tr>
                             <th>Variable</th>
diff --git a/dashmachine/version.py b/dashmachine/version.py
index f38f71f..35520dc 100755
--- a/dashmachine/version.py
+++ b/dashmachine/version.py
@@ -1 +1 @@
-version = "v0.21"
+version = "v0.22"