diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 3e59af0cc..338c9af34 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -264,7 +264,7 @@
     </div>
 
 <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <md-toolbar class="md-tall sg-padded" layout-align="start start">
         <div class="md-toolbar-tools" layout="row" layout-align="start start">
           <md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
diff --git a/UI/WebServerResources/scss/components/sidenav/_extends.scss b/UI/WebServerResources/scss/components/sidenav/_extends.scss
index 4a341d273..16888d92e 100644
--- a/UI/WebServerResources/scss/components/sidenav/_extends.scss
+++ b/UI/WebServerResources/scss/components/sidenav/_extends.scss
@@ -1,2 +1,2 @@
 /*! sidenav/_extends.scss - */
-@import '../../../angular-material/src/components/sidenav/sidenav.scss';
\ No newline at end of file
+@import '../../../angular-material/src/components/sidenav/sidenav.scss';
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 25cb61e89..077b7ed7d 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -80,6 +80,11 @@ md-sidenav {
   left: 0;
   top: 0;
   transform: translate3d(0%, 0, 0);
+
+  &.md-whiteframe-z2 {
+    box-shadow: $sidenav-shadow-z2;
+  }
+
   &.md-closed {
     transform: translate3d(-100%, 0, 0);
   }
@@ -144,6 +149,9 @@ $i: 1;
 }
 
 .md-sidenav-left {
+  &.md-whiteframe-z1 {
+    box-shadow: $sidenav-shadow-z1;
+  }
 
   md-item-content {
     line-height: $sg-line-height-6; // 40px eg. display-1
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index 97bef1f17..c6beb65f8 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -2,3 +2,8 @@
 // ngMaterial source for overrides
 // ----------------------------------------------------------------------------
 @import '../../angular-material/src/core/style/structure.scss';
+
+// re-inforce a reset
+html * {
+  box-sizing: border-box;
+}
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 9b2a58036..8956f941f 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -102,16 +102,21 @@ $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
 
 // Whiteframes
-
+// todo: program a mixin
 $whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
+$sidenav-shadow-z1: 2px 0px 5px 0 rgba(0,0,0,0.26) !default;
 $whiteframe-zindex-z1: 1 !default;
 $whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
+$sidenav-shadow-z2: 8px 0px 17px 0 rgba(0,0,0,0.2) !default;
 $whiteframe-zindex-z2: 2 !default;
 $whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
+$sidenav-shadow-z3: 17px 0px 50px 0 rgba(0,0,0,0.19) !default;
 $whiteframe-zindex-z3: 3 !default;
 $whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
+$sidenav-shadow-z4: 16px 0px 28px 0 rgba(0,0,0,0.22) !default;
 $whiteframe-zindex-z4: 4 !default;
 $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
+$sidenav-shadow-z5: 27px 0px 24px 0 rgba(0,0,0,0.22) !default;
 $whiteframe-zindex-z5: 5 !default;
 
 
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 44dd074e0..a38cfb010 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -19,7 +19,7 @@
 
 // Browser reset - most effective for applications. Generated by Compass in a non-regular way
 // ------------------------------------------------------------------------------
-@import 'core/reset';
+//@import 'core/reset';
 
 // CORE elements
 // ------------------------------------------------------------------------------