diff --git a/src/app/core/components/layout/content/content.component.scss b/src/app/core/components/layout/content/content.component.scss
index 8fdbe2d4..64b48f72 100644
--- a/src/app/core/components/layout/content/content.component.scss
+++ b/src/app/core/components/layout/content/content.component.scss
@@ -1,3 +1,3 @@
 :host {
-
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/src/app/core/components/layout/footer/footer.component.html b/src/app/core/components/layout/footer/footer.component.html
index 8c48d3cc..629da9e4 100644
--- a/src/app/core/components/layout/footer/footer.component.html
+++ b/src/app/core/components/layout/footer/footer.component.html
@@ -1,4 +1,4 @@
-<md-toolbar>
+<md-toolbar class="mat-elevation-z1 md-white-bg">
 
   <span>Footer</span>
 
diff --git a/src/app/core/components/layout/footer/footer.component.scss b/src/app/core/components/layout/footer/footer.component.scss
index 9376b0f9..126abdcd 100644
--- a/src/app/core/components/layout/footer/footer.component.scss
+++ b/src/app/core/components/layout/footer/footer.component.scss
@@ -1,4 +1,5 @@
 :host {
+    z-index: 3;
 
     &.above {
         position: relative;
diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html
index 470f8265..8d425087 100644
--- a/src/app/core/components/layout/layout.component.html
+++ b/src/app/core/components/layout/layout.component.html
@@ -6,7 +6,7 @@
 
 <div id="wrapper">
 
-    <fuse-navbar *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
+    <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
 
     <div class="content-wrapper">
 
@@ -26,7 +26,7 @@
 
     </div>
 
-    <fuse-navbar *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
+    <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
 
 </div>
 
diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss
index ceb70bda..c9457622 100644
--- a/src/app/core/components/layout/navbar/navbar.component.scss
+++ b/src/app/core/components/layout/navbar/navbar.component.scss
@@ -20,7 +20,7 @@ fuse-navbar {
     background-color: #FFFFFF;
     overflow-y: auto;
     overflow-x: hidden;
-    z-index: 20;
+    z-index: 2;
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
     transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
     transform: translateX(0);
diff --git a/src/app/core/components/layout/toolbar/toolbar.component.scss b/src/app/core/components/layout/toolbar/toolbar.component.scss
index 3b9d779d..9f141fd1 100644
--- a/src/app/core/components/layout/toolbar/toolbar.component.scss
+++ b/src/app/core/components/layout/toolbar/toolbar.component.scss
@@ -1,4 +1,5 @@
 :host {
+    z-index: 3;
 
     .loading-spinner {
         width: 32px;
diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.html b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
index 23015e7e..208267c6 100644
--- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
+++ b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
@@ -1 +1 @@
-<span>{{ item.title }}</span>
+<span class="hint-text">{{ item.title }}</span>
diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
index 94607e51..53ab5b7f 100644
--- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
+++ b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
@@ -8,7 +8,8 @@
             display: block;
             position: absolute;
             min-width: 1.6rem;
-            border-top: 2px solid rgba(0, 0, 0, .12);
+            border-top: 2px solid;
+            opacity: 0.2;
         }
 
         > span {
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
index 9b5bb1f1..b4028efe 100644
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -9,7 +9,7 @@ import { FuseNavigationService } from './navigation.service';
 })
 export class FuseNavigationComponent
 {
-    navigation: object[];
+    navigation: any[];
 
     constructor(private navigationService: FuseNavigationService)
     {
diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 3734ef51..30da5a72 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -56,6 +56,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
             color: rgba(0, 0, 0, 0.12) !important;
         }
 
+        .mat-ripple-element {
+            background: rgba(0, 0, 0, 0.1);
+        }
+
     }
         // If the base text color is white...
     @else {
@@ -83,6 +87,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         .divider {
             color: rgba(255, 255, 255, 0.12) !important;
         }
+
+        .mat-ripple-element {
+            background: rgba(255, 255, 255, 0.1);
+        }
     }
 }
 
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index c3ff11bf..f24d0170 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -3,10 +3,11 @@
     .nav-subheader {
         display: flex;
         align-items: center;
-        height: 56px;
-        color: rgba(0, 0, 0, .54);
+        height: 48px;
         font-weight: 500;
         padding-left: 24px;
+        margin-top: 8px;
+        font-size: 12px;
         white-space: nowrap;
     }
 
@@ -22,7 +23,7 @@
             overflow: hidden;
             cursor: pointer;
             user-select: none;
-            color: rgba(0, 0, 0, .87);
+            color: currentColor;
 
             > span {
                 flex: 1;
@@ -61,11 +62,11 @@
                 min-width: 16px;
                 min-height: 16px;
                 line-height: 16px;
-                color: map_get($mat-light-theme-foreground, icon);;
             }
         }
 
         &.nav-collapse {
+            display: block;
 
             > .children {
 
@@ -87,5 +88,18 @@
                 }
             }
         }
+
+    }
+
+    > .nav-item {
+
+        &.nav-collapse {
+            background: transparent;
+            transition: background 200ms ease-in-out;
+
+            &.open {
+                background: rgba(0, 0, 0, 0.12);
+            }
+        }
     }
 }
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 5d1b0cc9..5d0db16a 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -67,7 +67,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     display: flex;
                     flex-direction: column;
                     flex: 1;
-                    background: #FFFFFF;
+                    background: mat-color($background, background);
                     overflow: hidden;
                     @include mat-elevation(7);
 
@@ -84,7 +84,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     .content {
                         display: flex;
                         flex: 1;
-                        background: #FFFFFF;
+                        background: mat-color($background, background);
                         overflow: auto;
                     }
                 }
@@ -167,7 +167,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                             display: flex;
                             flex-direction: column;
                             flex: 1;
-                            background: #FFFFFF;
+                            background: mat-color($background, background);
                             overflow: hidden;
                             @include mat-elevation(7);
 
@@ -191,7 +191,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                             .content {
                                 display: flex;
                                 flex: 1;
-                                background: #FFFFFF;
+                                background: mat-color($background, background);
                                 overflow: auto;
                             }
                         }
@@ -318,7 +318,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         @include mat-elevation(7);
 
                         .content {
-                            background: #FFFFFF;
+                            background: mat-color($background, background);
                         }
                     }
                 }
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss
index 671f37c8..d52a462b 100644
--- a/src/app/main/apps/mail/mail-details/mail-details.component.scss
+++ b/src/app/main/apps/mail/mail-details/mail-details.component.scss
@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    background: #FFFFFF;
     padding: 24px;
 
     .select-message-text {
diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
index a2b87864..90b5b544 100644
--- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -2,7 +2,6 @@
 
 :host {
     flex-shrink: 0;
-    background: #FAFAFA;
     position: relative;
     padding: 16px 24px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss
index 83522561..35d04f87 100644
--- a/src/app/main/apps/mail/mail-list/mail-list.component.scss
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.scss
@@ -1,7 +1,6 @@
 :host{
     display: flex;
     flex-direction: column;
-    background: #FAFAFA;
     position: relative;
     padding: 0;
     border-right: 1px solid rgba(0,0,0,.12);