diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 79be6f66f..d54b438c5 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -1,109 +1,29 @@
-/// sidenav.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import "extends";
 $sidenav-default-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
 
+$sidenav-right-width: (8 * $pitch);
+
 md-sidenav {
-  position: absolute;
-  max-width: $sidenav-default-width;
-  bottom: 0;
-  z-index: $z-index-sidenav;
   background-color: sg-color($sogoPaper, 400);
-  overflow: auto;
-  flex-direction: column;
-
-  &.md-closed {
-    display: none;
-  }
-  &.md-closed-add,
-  &.md-closed-remove {
-    display: flex;
-    /* this is required as of 1.3x to properly
-       apply all styling in a show/hide animation */
-    transition: 0s all;
-  }
-
-  &.md-closed-add.md-closed-add-active,
-  &.md-closed-remove.md-closed-remove-active {
-    transition: $swift-ease-out;
-  }
-
-  &.md-locked-open-add,
-  &.md-locked-open-remove {
-    position: static;
-    display: flex;
-    transform: translate3d(0, 0, 0);
-  }
   &.md-locked-open {
     @include from(lg) {
       @include flex-col(lg, 4, 1, 1)
     }
 
   }
-
-  &.md-locked-open,
-  &.md-locked-open.md-closed,
-  &.md-locked-open.md-closed.md-sidenav-left,
-  &.md-locked-open.md-closed.md-sidenav-right,
-  &.md-locked-open-remove.md-closed {
-    position: static;
-    display: flex;
-    transform: translate3d(0, 0, 0);
-  }
-  &.md-locked-open-remove-active {
-    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
-    min-width $swift-ease-in-duration $swift-ease-in-timing-function;
-    width: 0;
-    min-width: 0;
-  }
-
-  &.md-closed.md-locked-open-add {
-    width: 0;
-    min-width: 0;
-    transform: translate3d(0%, 0, 0);
-  }
-
-  &.md-closed.md-locked-open-add-active {
-    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
-    min-width $swift-ease-in-duration $swift-ease-in-timing-function;
-    width: $sidenav-default-width;
-    min-width: $sidenav-default-width;
-    transform: translate3d(0%, 0, 0);
-  }
-
-  @extend .md-sidenav-left;
-}
-.md-sidenav-backdrop.md-locked-open {
-  display: none;
 }
 
 .md-sidenav-left {
-  left: 0;
-  top: 0;
-  transform: translate3d(0%, 0, 0);
-
   &.md-whiteframe-z2 {
     box-shadow: $sidenav-shadow-z2;
   }
-
-  &.md-closed {
-    transform: translate3d(-100%, 0, 0);
-  }
 }
 
 .md-sidenav-right {
-  left: 100%;
-  top: 0;
-  transform: translate3d(-100%, 0, 0);
-  &.md-closed {
-    transform: translate3d(0%, 0, 0);
-  }
-}
-
-@media (max-width: $sidenav-default-width + $sidenav-min-space) {
-  md-sidenav {
-    width: 85%;
-  }
+  width: $sidenav-right-width;
+  max-width: $sidenav-right-width;
 }
 
 // MAIN SIDENAV, actually to the left
@@ -153,12 +73,15 @@ $i: 1;
   &.md-whiteframe-z1 {
     box-shadow: $sidenav-shadow-z1;
   }
-
+  button {
+    // dirty fix to squash the theme style
+    background-color: transparent !important;
+  }
   md-item-content {
     line-height: $sg-line-height-6; // 40px eg. display-1
     padding: 0 $mg;
     transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
-                color 0.5s linear;
+                color 0.12s linear;
     &:hover {
       background-color: sg-color($sogoPaper, 500);
       cursor: pointer;