From 5c1f2ad1e3f87b3446ff5903f809616822bc33a4 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 6 Jun 2018 21:20:04 +0300
Subject: [PATCH] New layout system & new layouts (wip)

---
 .../components/sidebar/sidebar.component.ts   |   2 +-
 .../theme-options.component.html              | 354 +++++++++++++-----
 .../theme-options.component.scss              |  86 +++--
 .../theme-options/theme-options.component.ts  | 262 +++++++------
 src/@fuse/directives/directives.ts            |   3 +
 .../fuse-inner-scroll.directive.ts            |  61 +++
 .../fuse-perfect-scrollbar.directive.ts       |  45 ++-
 src/@fuse/scss/partials/_page-layouts.scss    | 141 ++++---
 src/@fuse/services/config.service.ts          |  32 ++
 src/@fuse/types/fuse-config.ts                |  15 +-
 src/app/app.component.html                    |  19 +-
 src/app/app.component.scss                    |   7 +
 src/app/fuse-config/index.ts                  |  19 +-
 .../components/content/content.component.scss |   9 +-
 .../components/toolbar/toolbar.component.ts   |   4 +-
 src/app/layout/layout.module.ts               |  19 +-
 .../body-scroll/body-scroll.component.html    | 115 ++++++
 .../body-scroll/body-scroll.component.scss}   |   6 +-
 .../body-scroll.component.ts}                 |   8 +-
 .../body-scroll/body-scroll.module.ts}        |  11 +-
 .../content-scroll.component.html             | 115 ++++++
 .../content-scroll.component.scss             |  61 +++
 .../content-scroll.component.ts}              |   8 +-
 .../content-scroll.module.ts}                 |  11 +-
 .../vertical/layout-1/layout-1.component.html |  81 ----
 .../vertical/layout-1/layout-1.component.scss | 117 ------
 .../vertical/layout-2/layout-2.component.html | 130 ++++---
 .../vertical/layout-2/layout-2.component.scss |  35 +-
 .../vertical/layout-2/layout-2.module.ts      |   3 +
 .../vertical/layout-3/layout-3.component.html |  81 ----
 .../full-width-1.component.html}              |   2 +-
 .../full-width-1.component.scss}              |   0
 .../full-width-1/full-width-1.component.ts    |  16 +
 .../full-width-2.component.html}              |   4 +-
 .../full-width-2.component.scss}              |   0
 .../full-width-2.component.ts}                |   4 +-
 .../full-width-tabbed-1.component.html        | 115 ++++++
 .../full-width-tabbed-1.component.scss}       |   0
 .../full-width-tabbed-1.component.ts          |  16 +
 .../full-width-tabbed-2.component.html        | 115 ++++++
 .../full-width-tabbed-2.component.scss}       |   0
 .../full-width-tabbed-2.component.ts          |  16 +
 .../carded/fullwidth/fullwidth.component.ts   |  86 -----
 .../left-sidenav-1.component.html}            |   6 +-
 .../left-sidenav-1.component.scss}            |   0
 .../left-sidenav-1.component.ts               |  17 +
 .../left-sidenav-2-tabbed.component.ts        |  17 -
 .../left-sidenav-2.component.html             |   4 +-
 .../left-sidenav-tabbed-1.component.html}     |  28 +-
 .../left-sidenav-tabbed-1.component.scss}     |   0
 .../left-sidenav-tabbed-1.component.ts        |  17 +
 .../left-sidenav-tabbed-2.component.html}     |   6 +-
 .../left-sidenav-tabbed-2.component.scss}     |   0
 .../left-sidenav-tabbed-2.component.ts        |  17 +
 .../left-sidenav-tabbed.component.ts          |  17 -
 .../left-sidenav/left-sidenav.component.ts    |  17 -
 .../right-sidenav-1.component.html}           |   6 +-
 .../right-sidenav-1.component.scss}           |   0
 .../right-sidenav-1.component.ts              |  17 +
 .../right-sidenav-2-tabbed.component.ts       |  17 -
 .../right-sidenav-2.component.html            |   4 +-
 .../right-sidenav-tabbed-1.component.html}    |  26 +-
 .../right-sidenav-tabbed-1.component.scss}    |   0
 .../right-sidenav-tabbed-1.component.ts       |  17 +
 .../right-sidenav-tabbed-2.component.html}    |   4 +-
 .../right-sidenav-tabbed-2.component.scss}    |   0
 .../right-sidenav-tabbed-2.component.ts       |  17 +
 .../right-sidenav-tabbed.component.ts         |  17 -
 .../right-sidenav/right-sidenav.component.ts  |  17 -
 .../ui/page-layouts/page-layouts.module.ts    | 102 ++---
 .../full-width-1.component.html}              |   2 +-
 .../full-width-1.component.scss}              |   0
 .../full-width-1/full-width-1.component.ts    |  16 +
 .../simple/fullwidth/fullwidth.component.ts   |  16 -
 .../left-sidenav-1.component.html}            |   6 +-
 .../left-sidenav-1.component.scss}            |   0
 .../left-sidenav-1.component.ts               |  17 +
 .../left-sidenav-2.component.html             |  12 +-
 .../left-sidenav-3.component.html             |   4 +-
 .../left-sidenav/left-sidenav.component.ts    |  17 -
 .../right-sidenav-1.component.html}           |   0
 .../right-sidenav-1.component.scss            |   0
 .../right-sidenav-1.component.ts              |  17 +
 .../right-sidenav-2.component.html            |  12 +-
 .../right-sidenav-3.component.html            |   2 +-
 .../right-sidenav/right-sidenav.component.ts  |  17 -
 .../tabbed-1.component.html}                  |   0
 .../simple/tabbed-1/tabbed-1.component.scss   |   0
 .../simple/tabbed-1/tabbed-1.component.ts     |  17 +
 .../simple/tabbed/tabbed.component.ts         |  17 -
 src/app/navigation/navigation.ts              |  94 +++--
 src/index.html                                |   2 +-
 92 files changed, 1793 insertions(+), 1099 deletions(-)
 create mode 100644 src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts
 create mode 100644 src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
 rename src/app/layout/vertical/{layout-3/layout-3.component.scss => layout-1/body-scroll/body-scroll.component.scss} (93%)
 rename src/app/layout/vertical/layout-1/{layout-1.component.ts => body-scroll/body-scroll.component.ts} (86%)
 rename src/app/layout/vertical/{layout-3/layout-3.module.ts => layout-1/body-scroll/body-scroll.module.ts} (71%)
 create mode 100644 src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html
 create mode 100644 src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss
 rename src/app/layout/vertical/{layout-3/layout-3.component.ts => layout-1/content-scroll/content-scroll.component.ts} (86%)
 rename src/app/layout/vertical/layout-1/{layout-1.module.ts => content-scroll/content-scroll.module.ts} (70%)
 delete mode 100644 src/app/layout/vertical/layout-1/layout-1.component.html
 delete mode 100644 src/app/layout/vertical/layout-1/layout-1.component.scss
 delete mode 100644 src/app/layout/vertical/layout-3/layout-3.component.html
 rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.html => full-width-1/full-width-1.component.html} (94%)
 rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.scss => full-width-1/full-width-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts
 rename src/app/main/ui/page-layouts/carded/{fullwidth/fullwidth.component.html => full-width-2/full-width-2.component.html} (88%)
 rename src/app/main/ui/page-layouts/carded/{fullwidth/fullwidth.component.scss => full-width-2/full-width-2.component.scss} (100%)
 rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.ts => full-width-2/full-width-2.component.ts} (67%)
 create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html
 rename src/app/main/ui/page-layouts/carded/{left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss => full-width-tabbed-1/full-width-tabbed-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts
 create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html
 rename src/app/main/ui/page-layouts/carded/{left-sidenav-tabbed/left-sidenav-tabbed.component.scss => full-width-tabbed-2/full-width-tabbed-2.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts
 rename src/app/main/ui/page-layouts/carded/{left-sidenav/left-sidenav.component.html => left-sidenav-1/left-sidenav-1.component.html} (90%)
 rename src/app/main/ui/page-layouts/carded/{left-sidenav/left-sidenav.component.scss => left-sidenav-1/left-sidenav-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
 rename src/app/main/ui/page-layouts/carded/{left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html => left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html} (82%)
 rename src/app/main/ui/page-layouts/carded/{right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss => left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts
 rename src/app/main/ui/page-layouts/carded/{left-sidenav-tabbed/left-sidenav-tabbed.component.html => left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html} (97%)
 rename src/app/main/ui/page-layouts/carded/{right-sidenav-tabbed/right-sidenav-tabbed.component.scss => left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
 rename src/app/main/ui/page-layouts/carded/{right-sidenav/right-sidenav.component.html => right-sidenav-1/right-sidenav-1.component.html} (90%)
 rename src/app/main/ui/page-layouts/carded/{right-sidenav/right-sidenav.component.scss => right-sidenav-1/right-sidenav-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
 rename src/app/main/ui/page-layouts/carded/{right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html => right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html} (82%)
 rename src/app/main/ui/page-layouts/{simple/fullwidth/fullwidth.component.scss => carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts
 rename src/app/main/ui/page-layouts/carded/{right-sidenav-tabbed/right-sidenav-tabbed.component.html => right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html} (97%)
 rename src/app/main/ui/page-layouts/{simple/left-sidenav/left-sidenav.component.scss => carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
 rename src/app/main/ui/page-layouts/simple/{fullwidth/fullwidth.component.html => full-width-1/full-width-1.component.html} (92%)
 rename src/app/main/ui/page-layouts/simple/{right-sidenav/right-sidenav.component.scss => full-width-1/full-width-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts
 rename src/app/main/ui/page-layouts/simple/{left-sidenav/left-sidenav.component.html => left-sidenav-1/left-sidenav-1.component.html} (86%)
 rename src/app/main/ui/page-layouts/simple/{tabbed/tabbed.component.scss => left-sidenav-1/left-sidenav-1.component.scss} (100%)
 create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts
 rename src/app/main/ui/page-layouts/simple/{right-sidenav/right-sidenav.component.html => right-sidenav-1/right-sidenav-1.component.html} (100%)
 create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss
 create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts
 rename src/app/main/ui/page-layouts/simple/{tabbed/tabbed.component.html => tabbed-1/tabbed-1.component.html} (100%)
 create mode 100644 src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss
 create mode 100644 src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts
 delete mode 100644 src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts

diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts
index bf398ac5..e698a9e2 100644
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -263,7 +263,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                     // Read the folded setting from the config
                     // and fold the sidebar if it's true
-                    if ( this._fuseConfig.layout.navigation.folded )
+                    if ( this._fuseConfig.layout.navbar.folded )
                     {
                         this.fold();
                     }
diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
index 6928fbff..74fa994a 100644
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -1,124 +1,282 @@
-<div class="theme-options-panel mat-white-bg mat-elevation-z8" fusePerfectScrollbar>
+<div class="theme-options-panel" fusePerfectScrollbar>
 
-    <button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')">
-        <mat-icon>close</mat-icon>
-    </button>
+    <div class="header">
 
-    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
+        <span class="title">Theme Options</span>
 
-        <form [formGroup]="fuseConfigForm">
+        <button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')">
+            <mat-icon>close</mat-icon>
+        </button>
 
-            <!-- NAVIGATION STYLES -->
-            <!--<h3>Navigation Style:</h3>
-            <mat-radio-group [(ngModel)]="fuseConfig.layout.navigation.style"
-                             (ngModelChange)="onConfigChange(true)"
-                             fxLayout="column" fxLayoutAlign="start start">
-                <mat-radio-button class="mr-8 mb-8" value="vertical">Vertical</mat-radio-button>
-                <mat-radio-button class="mr-8 mb-8" value="horizontal">Horizontal</mat-radio-button>
+    </div>
+
+    <form [formGroup]="form">
+
+        <!-- LAYOUT STYLES -->
+        <div class="group" formGroupName="layout">
+
+            <h2>Layout Styles</h2>
+
+            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
+                <mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
+                    Vertical Layout #1 - Content Scroll
+                </mat-radio-button>
+                <mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
+                    Vertical Layout #1 - Body Scroll
+                </mat-radio-button>
+                <mat-radio-button class="mb-12" value="vertical-layout-2">
+                    Vertical Layout #2
+                </mat-radio-button>
+                <mat-radio-button class="mb-12" value="horizontal-layout-1">Horizontal Layout #1</mat-radio-button>
+                <mat-radio-button value="horizontal-layout-2">Horizontal Layout #2</mat-radio-button>
             </mat-radio-group>
-    -->
-            <div formGroupName="layout">
 
-                <!-- VERTICAL LAYOUT STYLES -->
-                <h3>Scrollable Area:</h3>
-                <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Content</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Wrapper</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Body</mat-radio-button>
-                </mat-radio-group>
+            <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
+            <ng-container [ngSwitch]="fuseConfig.layout.style">
 
-                <!-- HORIZONTAL LAYOUT STYLES -->
-                <h3 class="mt-24">Horizontal Layout Styles:</h3>
-                <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
-                    <mat-radio-button class="mr-8 mb-8" value="horizontal-layout-1">Layout 1</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="horizontal-layout-2">Layout 2</mat-radio-button>
-                </mat-radio-group>
+                <!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
+                <ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
 
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-48">
 
-                <div formGroupName="navigation">
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
 
-                    <!-- NAVIGATION POSITIONS -->
-                    <h3 class="mt-32">Navigation Position:</h3>
+                    </div>
 
-                    <!-- VERTICAL NAVIGATION POSITIONS -->
-                    <mat-radio-group formControlName="position"
-                                     fxLayout="column" fxLayoutAlign="start start"
-                                     *ngIf="fuseConfig.layout.style.startsWith('vertical')">
-                        <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-                    </mat-radio-group>
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
 
-                    <!-- HORIZONTAL NAVIGATION POSITIONS -->
-                    <mat-radio-group formControlName="position"
-                                     fxLayout="column" fxLayoutAlign="start start"
-                                     *ngIf="fuseConfig.layout.style.startsWith('horizontal')">
-                        <mat-radio-button class="mr-8 mb-8" value="left">Top</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-                    </mat-radio-group>
+                        <h2>Navbar</h2>
 
-                    <!-- VERTICAL NAVIGATION FOLD -->
-                    <ng-container *ngIf="fuseConfig.layout.style.startsWith('vertical')">
-                        <h3 class="mt-24">Navigation Fold:</h3>
-                        <mat-slide-toggle formControlName="folded">
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
                             Folded
                         </mat-slide-toggle>
-                    </ng-container>
 
-                </div>
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
 
-                <div formGroupName="toolbar">
+                    </div>
 
                     <!-- TOOLBAR -->
-                    <h3 class="mt-24">Toolbar:</h3>
-                    <mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
-                        <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="above-sticky"
-                                          [disabled]="fuseConfig.layout.style === 'vertical-layout-1' || fuseConfig.layout.style === 'vertical-layout-2'">
-                            Above Sticky
-                        </mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="below-sticky"
-                                          [disabled]="fuseConfig.layout.style === 'vertical-layout-3'">
-                            Below Sticky
-                        </mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-                    </mat-radio-group>
+                    <div class="group" formGroupName="toolbar">
 
-                </div>
+                        <h2>Toolbar</h2>
 
-                <div formGroupName="footer">
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
 
                     <!-- FOOTER -->
-                    <h3 class="mt-24">Footer:</h3>
-                    <mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
-                        <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="below-sticky">Below Sticky</mat-radio-button>
-                        <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-                    </mat-radio-group>
+                    <div class="group" formGroupName="footer">
 
-                </div>
+                        <h2>Footer</h2>
 
-                <!-- LAYOUT MODE -->
-                <h3 class="mt-24">Layout Mode:</h3>
-                <mat-radio-group formControlName="mode" fxLayout="column" fxLayoutAlign="start start">
-                    <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
-                    <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
-                </mat-radio-group>
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
 
-            </div>
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
+                        </mat-radio-group>
 
-            <mat-divider></mat-divider>
+                    </div>
 
-            <h3>Custom scrollbars:</h3>
-            <mat-slide-toggle formControlName="customScrollbars">
+                </ng-container>
+
+                <!-- VERTICAL LAYOUT #1 - BODY SCROLL -->
+                <ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-48">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+                <!-- VERTICAL LAYOUT #2 -->
+                <ng-container *ngSwitchCase="'vertical-layout-2'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-48">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+            </ng-container>
+
+        </div>
+
+        <!-- CUSTOM SCROLLBARS -->
+        <div class="group">
+
+            <h2>Custom scrollbars</h2>
+
+            <mat-slide-toggle class="mb-12" formControlName="customScrollbars">
                 Enable custom scrollbars
             </mat-slide-toggle>
 
-            <mat-divider></mat-divider>
+        </div>
+
+        <!-- COLORS -->
+        <div class="group">
+
+            <h2>Colors</h2>
 
-            <h3>Colors:</h3>
             <div class="colors">
 
                 <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@@ -128,9 +286,9 @@
                 </div>
 
                 <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Navigation Bar Color</h4>
+                    <h4 class="mr-8">Navbar Color</h4>
                     <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.navigation.background"></fuse-material-color-picker>
+                        [(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
                 </div>
 
                 <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@@ -141,9 +299,13 @@
 
             </div>
 
-            <mat-divider></mat-divider>
+        </div>
+
+        <!-- ROUTER ANIMATION -->
+        <div class="group">
+
+            <h2>Router Animation</h2>
 
-            <h3>Router Animation:</h3>
             <mat-form-field class="w-100-p">
                 <mat-select class="p-0" formControlName="routerAnimation">
                     <mat-option value="none">
@@ -167,8 +329,8 @@
                 </mat-select>
             </mat-form-field>
 
-        </form>
+        </div>
 
-    </div>
+    </form>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss
index 1fc3442c..6c083492 100644
--- a/src/@fuse/components/theme-options/theme-options.component.scss
+++ b/src/@fuse/components/theme-options/theme-options.component.scss
@@ -14,39 +14,69 @@
 
     .theme-options-panel {
         display: flex;
+        flex-direction: column;
         flex: 1 0 auto;
-        padding: 24px;
+        padding: 40px 24px 24px 24px;
         overflow: auto;
 
-        .close-button {
-            position: absolute;
-            top: 8px;
-            right: 8px;
+        .header {
+            display: flex;
+            flex: 0 1 auto;
+            margin-bottom: 32px;
+            align-items: center;
+            justify-content: space-between;
+
+            .title {
+                font-size: 20px;
+                font-weight: 500;
+                padding-left: 4px;
+            }
         }
 
-        h3 {
-            font-size: 14px;
-            font-weight: 500;
-            color: rgba(0, 0, 0, 0.54);
+        form {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+
+            .group {
+                display: flex;
+                flex: 1 0 auto;
+                flex-direction: column;
+                position: relative;
+                border: 1px solid rgba(0, 0, 0, 0.12);
+                border-radius: 2px;
+                padding: 28px 16px 8px 16px;
+                margin: 16px 0;
+
+                h2 {
+                    position: absolute;
+                    top: -11px;
+                    left: 8px;
+                    margin: 0;
+                    padding: 0 8px;
+                    font-size: 16px;
+                    font-weight: 500;
+                    background: white;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+
+                h3 {
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                    margin: 24px 0 16px 0;
+                    padding: 0;
+
+                    &:first-of-type {
+                        margin-top: 0;
+                    }
+                }
+            }
+
+            .colors {
+                display: block !important;
+                width: 100%;
+            }
         }
-
-        .mat-divider {
-            display: block !important;
-            width: 100%;
-            margin: 24px 0 16px 0;
-        }
-
-        .colors {
-            display: block !important;
-            width: 100%;
-        }
-    }
-
-    .mat-list .mat-list-item {
-        font-size: 15px;
-    }
-
-    .mat-divider {
-        margin: 16px;
     }
 }
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts
index aa61360a..c5230167 100644
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -17,7 +17,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
     fuseConfig: any;
-    fuseConfigForm: FormGroup;
+    form: FormGroup;
 
     @HostBinding('class.bar-closed')
     barClosed: boolean;
@@ -58,40 +58,59 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
+        // Build the config form
+        // noinspection TypeScriptValidateTypes
+        this.form = this._formBuilder.group({
+            layout          : this._formBuilder.group({
+                style  : new FormControl(),
+                width  : new FormControl(),
+                navbar : this._formBuilder.group({
+                    hidden    : new FormControl(),
+                    position  : new FormControl(),
+                    folded    : new FormControl(),
+                    background: new FormControl()
+                }),
+                toolbar: this._formBuilder.group({
+                    hidden    : new FormControl(),
+                    position  : new FormControl(),
+                    background: new FormControl()
+                }),
+                footer : this._formBuilder.group({
+                    hidden    : new FormControl(),
+                    position  : new FormControl(),
+                    background: new FormControl()
+                })
+            }),
+            customScrollbars: new FormControl(),
+            routerAnimation : new FormControl()
+        });
+
         // Subscribe to the config changes
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
-                    this.fuseConfig = config;
-                }
-            );
 
-        // Build the config form
-        // noinspection TypeScriptValidateTypes
-        this.fuseConfigForm = this._formBuilder.group({
-            layout          : this._formBuilder.group({
-                style     : this.fuseConfig.layout.style,
-                navigation: this._formBuilder.group({
-                    position  : this.fuseConfig.layout.navigation.position,
-                    folded    : this.fuseConfig.layout.navigation.folded,
-                    background: this.fuseConfig.layout.navigation.background
-                }),
-                toolbar   : this._formBuilder.group({
-                    position  : this.fuseConfig.layout.toolbar.position,
-                    background: this.fuseConfig.layout.toolbar.background
-                }),
-                footer    : this._formBuilder.group({
-                    position  : this.fuseConfig.layout.footer.position,
-                    background: this.fuseConfig.layout.footer.background
-                }),
-                mode      : this.fuseConfig.layout.mode
-            }),
-            customScrollbars: this.fuseConfig.customScrollbars,
-            routerAnimation : this.fuseConfig.routerAnimation
-        });
+                // Update the stored config
+                this.fuseConfig = config;
+
+                // Set the config form values without emitting an event
+                // so that we don't end up with an infinite loop
+                this.form.setValue(config, {emitEvent: false});
+            });
+
+        // Subscribe to the specific form value changes (layout.style)
+        this.form.get('layout.style').valueChanges
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+
+                // Reset the form values based on the
+                // selected layout style
+                this._resetFormValues(value);
+
+            });
 
         // Subscribe to the form value changes
-        this.fuseConfigForm.valueChanges
+        this.form.valueChanges
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
 
@@ -99,16 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 this._fuseConfigService.config = config;
             });
 
-        // Subscribe to the layout style value changes
-        const layoutControls: any = this.fuseConfigForm.controls.layout;
-        layoutControls.controls.style.valueChanges
-                      .pipe(takeUntil(this._unsubscribeAll))
-                      .subscribe((layout) => {
-
-                          // Reset the config
-                          this.resetConfig(layout);
-                      });
-
         // Add customize nav item that opens the bar programmatically
         const customFunctionNavItem = {
             'id'      : 'custom-function',
@@ -147,6 +156,103 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Reset the form values based on the
+     * selected layout style
+     *
+     * @param value
+     * @private
+     */
+    private _resetFormValues(value): void
+    {
+        switch ( value )
+        {
+            // Vertical Layout #1 - Content scroll
+            case 'vertical-layout-1-content-scroll':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width  : 'fullwidth',
+                        navbar : {
+                            hidden    : false,
+                            position  : 'left',
+                            folded    : false,
+                            background: 'mat-fuse-dark-700-bg'
+                        },
+                        toolbar: {
+                            hidden    : false,
+                            position  : 'below-static',
+                            background: 'mat-white-500-bg'
+                        },
+                        footer : {
+                            hidden    : false,
+                            position  : 'below-static',
+                            background: 'mat-fuse-dark-900-bg'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Vertical Layout #1 - Body scroll
+            case 'vertical-layout-1-body-scroll':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width  : 'fullwidth',
+                        navbar : {
+                            hidden    : false,
+                            position  : 'left',
+                            folded    : false,
+                            background: 'mat-fuse-dark-700-bg'
+                        },
+                        toolbar: {
+                            hidden    : false,
+                            position  : 'below',
+                            background: 'mat-white-500-bg'
+                        },
+                        footer : {
+                            hidden    : false,
+                            position  : 'below',
+                            background: 'mat-fuse-dark-900-bg'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Vertical Layout #2
+            case 'vertical-layout-2':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width  : 'fullwidth',
+                        navbar : {
+                            hidden    : false,
+                            position  : 'left',
+                            folded    : false,
+                            background: 'mat-fuse-dark-700-bg'
+                        },
+                        toolbar: {
+                            hidden    : false,
+                            position  : 'above-static',
+                            background: 'mat-white-500-bg'
+                        },
+                        footer : {
+                            hidden    : false,
+                            position  : 'above-static',
+                            background: 'mat-fuse-dark-900-bg'
+                        }
+                    }
+                });
+
+                break;
+            }
+        }
+    }
+
     /**
      * Toggle sidebar open
      *
@@ -158,86 +264,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         this._fuseSidebarService.getSidebar(key).toggleOpen();
     }
 
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Reset the config correctly
-     */
-    resetConfig(layout): void
-    {
-        console.log(layout);
-
-        // Check the layout style and reset the
-        // configuration properly so we don't end
-        // up with options that don't work with
-        // selected layout style
-        switch ( layout )
-        {
-            // Vertical
-
-            // Layout 1
-            case 'vertical-layout-1':
-            {
-                // Reset the config form
-                this.fuseConfigForm.patchValue({
-                    layout: {
-                        navigation: {
-                            folder: false
-                        },
-                        toolbar   : {
-                            position: 'below'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            // Layout 2
-            case 'vertical-layout-2':
-            {
-                console.log('resetting the options for vertical-layout-2...');
-
-                // Reset the config form
-                this.fuseConfigForm.patchValue({
-                    layout: {
-                        navigation: {
-                            folder: false
-                        },
-                        toolbar   : {
-                            position: 'below'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            // Layout 3
-            case 'vertical-layout-3':
-            {
-                // Reset the config form
-                this.fuseConfigForm.patchValue({
-                    layout: {
-                        navigation: {
-                            folder: false
-                        },
-                        toolbar   : {
-                            position: 'below'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            default :
-            {
-                break;
-            }
-        }
-    }
 }
diff --git a/src/@fuse/directives/directives.ts b/src/@fuse/directives/directives.ts
index 91c92607..d327ff71 100644
--- a/src/@fuse/directives/directives.ts
+++ b/src/@fuse/directives/directives.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 
 import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
+import { FuseInnerScrollDirective } from '@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
 
 @NgModule({
     declarations: [
         FuseIfOnDomDirective,
+        FuseInnerScrollDirective,
         FuseMatSidenavHelperDirective,
         FuseMatSidenavTogglerDirective,
         FusePerfectScrollbarDirective
@@ -14,6 +16,7 @@ import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@
     imports     : [],
     exports     : [
         FuseIfOnDomDirective,
+        FuseInnerScrollDirective,
         FuseMatSidenavHelperDirective,
         FuseMatSidenavTogglerDirective,
         FusePerfectScrollbarDirective
diff --git a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts
new file mode 100644
index 00000000..17fb6bf5
--- /dev/null
+++ b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts
@@ -0,0 +1,61 @@
+import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '.inner-scroll'
+})
+export class FuseInnerScrollDirective implements OnInit, OnDestroy
+{
+    // Private
+    private _parent: any;
+    private _grandParent: any;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent
+        this._parent = this._renderer.parentNode(this._elementRef.nativeElement);
+
+        // Return, if there is no parent
+        if ( !this._parent )
+        {
+            return;
+        }
+
+        // Get the grand parent
+        this._grandParent = this._renderer.parentNode(this._parent);
+
+        // Add the inner-scroll class
+        this._renderer.addClass(this._grandParent, 'inner-scroll');
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Return, if there is no parent
+        if ( !this._parent )
+        {
+            return;
+        }
+
+        // Remove the inner-scroll class
+        this._renderer.removeClass(this._grandParent, 'inner-scroll');
+    }
+}
diff --git a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
index 135e65c8..06bc53a9 100644
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -1,8 +1,8 @@
 import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
+import { filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
 
 import { FuseConfigService } from '@fuse/services/config.service';
@@ -18,6 +18,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 
     // Private
     private _enabled: boolean | '';
+    private _updateOnNavigationEnd: boolean | '';
     private _unsubscribeAll: Subject<any>;
 
     /**
@@ -26,11 +27,13 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
      * @param {ElementRef} elementRef
      * @param {FuseConfigService} _fuseConfigService
      * @param {Platform} _platform
+     * @param {Router} _router
      */
     constructor(
         public elementRef: ElementRef,
         private _fuseConfigService: FuseConfigService,
-        private _platform: Platform
+        private _platform: Platform,
+        private _router: Router
     )
     {
         // Set the defaults
@@ -39,6 +42,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 
         // Set the private defaults
         this._enabled = false;
+        this._updateOnNavigationEnd = false;
         this._unsubscribeAll = new Subject();
     }
 
@@ -88,6 +92,27 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         return this._enabled;
     }
 
+    /**
+     * Update on navigation end
+     *
+     * @param value
+     */
+    @Input()
+    set updateOnNavigationEnd(value)
+    {
+        if ( value === '' )
+        {
+            value = true;
+        }
+
+        this._updateOnNavigationEnd = value;
+    }
+
+    get updateOnNavigationEnd(): boolean | ''
+    {
+        return this._updateOnNavigationEnd;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
@@ -106,7 +131,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
                 }
             );
 
-        // this._init();
+        // If updateOnNavigationEnd attribute is provided,
+        // scroll to the top on every NavigationEnd
+        if ( this.updateOnNavigationEnd )
+        {
+            this._router.events
+                .pipe(
+                    takeUntil(this._unsubscribeAll),
+                    filter(event => event instanceof NavigationEnd)
+                )
+                .subscribe(() => {
+                    this.scrollToTop();
+                });
+        }
     }
 
     /**
diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss
index d811517a..9dc38efe 100644
--- a/src/@fuse/scss/partials/_page-layouts.scss
+++ b/src/@fuse/scss/partials/_page-layouts.scss
@@ -10,9 +10,6 @@ $header-height-sm: 100px !default;
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
 $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
-// Top bg image
-$top-bg-image: url('assets/images/backgrounds/header-bg.png');
-
 .page-layout {
     position: relative;
     overflow-x: hidden;
@@ -34,8 +31,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             right: 0;
             left: 0;
             height: $carded-header-height;
-            background-image: $top-bg-image;
-            background-size: cover;
 
             @include media-breakpoint-down('sm') {
                 height: $carded-header-height-sm;
@@ -45,12 +40,20 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         // Fullwidth
         &.fullwidth {
 
-            // Single scroll
-            &.single-scroll {
+            // Inner scroll
+            &.inner-scroll {
+                flex: 1 1 auto;
 
                 > .center {
-                    flex: 1 0 auto;
-                    max-height: none;
+                    flex: 1 1 auto;
+
+                    .content-card {
+                        flex: 1 1 auto;
+
+                        > .content {
+                            flex: 1 1 auto;
+                        }
+                    }
                 }
             }
 
@@ -58,7 +61,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             > .center {
                 display: flex;
                 flex-direction: column;
-                flex: 1;
+                flex: 1 0 auto;
                 position: relative;
                 z-index: 2;
                 padding: 0 32px;
@@ -82,7 +85,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 .content-card {
                     display: flex;
                     flex-direction: column;
-                    flex: 1;
+                    flex: 1 0 auto;
                     overflow: hidden;
                     @include mat-elevation(7);
 
@@ -98,28 +101,65 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                     > .content {
                         display: flex;
-                        flex: 1;
+                        flex: 1 0 auto;
                         overflow: auto;
                     }
                 }
             }
+
+            // Tabbed
+            &.tabbed {
+
+                .center {
+                    width: 100%;
+                    min-width: 0;
+
+                    .header {
+                        flex: 1 1 auto;
+                    }
+
+                    .content-card {
+
+                        .content {
+
+                            .mat-tab-group {
+                                overflow: hidden;
+
+                                .mat-tab-header {
+
+                                    .mat-tab-label {
+                                        height: 64px;
+                                    }
+                                }
+
+                                .mat-tab-body {
+                                    overflow: hidden;
+
+                                    .mat-tab-body-content {
+                                        overflow: hidden;
+
+                                        .tab-content {
+                                            position: relative;
+                                            width: 100%;
+                                            height: 100%;
+                                            overflow: auto;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         // Left sidenav - Right sidenav
         &.left-sidenav,
         &.right-sidenav {
 
-            // Single scroll
-            &.single-scroll {
-
-                > mat-sidenav-container {
-                    flex: 1 0 auto;
-                }
-            }
-
             > mat-sidenav-container {
                 display: flex;
-                flex: 1;
+                flex: 1 1 auto;
                 background: none;
                 z-index: 2;
                 width: 100%;
@@ -127,7 +167,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 .sidenav {
                     display: flex;
                     flex-direction: column;
-                    flex: 1;
+                    flex: 1 1 auto;
                     width: 240px;
                     min-width: 240px;
                     max-width: 240px;
@@ -162,7 +202,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 > .mat-sidenav-content,
                 > .mat-drawer-content {
                     display: flex;
-                    flex: 1;
+                    flex: 1 1 auto;
                     height: auto;
                     overflow: visible;
 
@@ -170,7 +210,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     .center {
                         display: flex;
                         flex-direction: column;
-                        flex: 1;
+                        flex: 1 1 auto;
                         position: relative;
                         z-index: 3;
                         margin-left: 32px;
@@ -192,7 +232,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         .content-card {
                             display: flex;
                             flex-direction: column;
-                            flex: 1;
+                            flex: 1 1 auto;
                             overflow: hidden;
                             @include mat-elevation(7);
 
@@ -200,7 +240,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                                 display: flex;
                                 justify-content: flex-start;
                                 align-items: center;
-                                flex: 1;
+                                flex: 1 1 auto;
                                 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                                 height: $carded-toolbar-height;
                                 min-height: $carded-toolbar-height;
@@ -215,7 +255,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                             .content {
                                 display: flex;
-                                flex: 1;
+                                flex: 1 1 auto;
                                 overflow: auto;
                             }
                         }
@@ -223,6 +263,30 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
+            // Inner scroll
+            &.inner-scroll {
+                flex: 1 1 auto;
+
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+
+                        > .center {
+                            flex: 1 1 auto;
+
+                            .content-card {
+                                flex: 1 1 auto;
+
+                                > .content {
+                                    flex: 1 1 auto;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
             // Tabbed
             &.tabbed {
 
@@ -242,7 +306,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                             }
 
                             .header {
-                                flex: 1;
+                                flex: 1 1 auto;
                             }
 
                             .content-card {
@@ -336,12 +400,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         width: 100%;
         min-width: 100%;
 
-        // Top bg
-        > .header {
-            background-image: $top-bg-image;
-            background-size: cover;
-        }
-
         // Fullwidth
         &.fullwidth {
             overflow: auto;
@@ -363,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Single scroll
-            &.single-scroll {
+            /*&.single-scroll {
 
                 > mat-sidenav-container {
                     flex: 1 0 auto;
@@ -374,13 +432,13 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         max-height: none;
                     }
                 }
-            }
+            }*/
 
             // Inner Sidenav
             &.inner-sidenav {
 
                 > mat-sidenav-container {
-                    flex: 1;
+                    flex: 1 1 auto;
 
                     .sidenav {
 
@@ -395,7 +453,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         height: auto;
 
                         .center {
-                            flex: 1;
+                            flex: 1 1 auto;
                             min-height: 100%;
                             @include mat-elevation(0);
 
@@ -411,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
-                flex: 1;
+                flex: 1 1 auto;
                 background: none;
                 z-index: 2;
                 width: 100%;
@@ -439,7 +497,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 > .mat-sidenav-content,
                 > .mat-drawer-content {
                     display: flex;
-                    flex: 1;
+                    flex: 1 1 auto;
                     height: auto;
                     overflow: visible;
                     max-height: 100%;
@@ -448,13 +506,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         height: $header-height;
                         min-height: $header-height;
                         max-height: $header-height;
-                        background-image: $top-bg-image;
                     }
 
                     .center {
                         display: flex;
                         flex-direction: column;
-                        flex: 1;
+                        flex: 1 1 auto;
                         overflow: auto;
                         @include mat-elevation(7);
 
diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts
index e753f337..fd8fea4b 100644
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -107,6 +107,38 @@ export class FuseConfigService
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Set config
+     *
+     * @param value
+     * @param {{emitEvent: boolean}} opts
+     */
+    setConfig(value, opts = {emitEvent: true}): void
+    {
+        // Get the value from the behavior subject
+        let config = this._configSubject.getValue();
+
+        // Merge the new config
+        config = _.merge({}, config, value);
+
+        // If emitEvent option is true...
+        if ( opts.emitEvent === true )
+        {
+            // Notify the observers
+            this._configSubject.next(config);
+        }
+    }
+
+    /**
+     * Get config
+     *
+     * @returns {Observable<any>}
+     */
+    getConfig(): Observable<any>
+    {
+        return this._configSubject.asObservable();
+    }
+
     /**
      * Reset to the default config
      */
diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts
index 29be0336..9458a935 100644
--- a/src/@fuse/types/fuse-config.ts
+++ b/src/@fuse/types/fuse-config.ts
@@ -2,20 +2,23 @@ export interface FuseConfig
 {
     layout: {
         style: string,
-        navigation: {
-            position: 'left' | 'right' | 'top' | 'none',
+        width: 'fullwidth' | 'boxed',
+        navbar: {
+            hidden: boolean,
             folded: boolean,
+            position: 'left' | 'right' | 'top',
             background: string
         },
         toolbar: {
-            position: 'above' | 'above-sticky' | 'below' | 'below-sticky' | 'none',
+            hidden: boolean,
+            position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
             background: string
         }
         footer: {
-            position: 'above' | 'below' | 'below-sticky' | 'none',
+            hidden: boolean,
+            position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
             background: string
-        },
-        mode: 'fullwidth' | 'boxed'
+        }
     };
     customScrollbars: boolean;
     routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none';
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 871dc3d7..669f1e7c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,11 @@
-<!-- VERTICAL LAYOUT 1 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
-    <vertical-layout-1></vertical-layout-1>
+<!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
+<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
+    <vertical-layout-1-body-scroll></vertical-layout-1-body-scroll>
+</ng-container>
+
+<!-- VERTICAL LAYOUT 1 - CONTENT SCROLL -->
+<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-content-scroll'">
+    <vertical-layout-1-content-scroll></vertical-layout-1-content-scroll>
 </ng-container>
 
 <!-- VERTICAL LAYOUT 2 -->
@@ -8,9 +13,9 @@
     <vertical-layout-2></vertical-layout-2>
 </ng-container>
 
-<!-- VERTICAL LAYOUT 3 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
-    <vertical-layout-3></vertical-layout-3>
+<!-- HORIZONTAL LAYOUT 1 -->
+<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
+
 </ng-container>
 
 <!-- THEME OPTIONS PANEL -->
@@ -19,6 +24,6 @@
     <mat-icon>settings</mat-icon>
 </button>
 
-<fuse-sidebar name="themeOptionsPanel" position="right" [invisibleOverlay]="true">
+<fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
 </fuse-sidebar>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 292e233c..42a78d3d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,6 +3,7 @@
     display: flex;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
     min-width: 0;
 
     .theme-options-button {
@@ -28,4 +29,10 @@
             opacity: 1;
         }
     }
+
+    .theme-options-sidebar {
+        width: 360px;
+        min-width: 360px;
+        max-width: 360px;
+    }
 }
\ No newline at end of file
diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts
index 93dc6e53..96ad2856 100644
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -10,21 +10,24 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style     : 'vertical-layout-1',
-        navigation: {
+        style         : 'vertical-layout-1-content-scroll',
+        width         : 'fullwidth',
+        navbar        : {
+            hidden    : false,
             position  : 'left',
             folded    : false,
             background: 'mat-fuse-dark-700-bg'
         },
-        toolbar   : {
-            position  : 'below',
+        toolbar       : {
+            hidden    : false,
+            position  : 'below-static',
             background: 'mat-white-500-bg'
         },
-        footer    : {
-            position  : 'below',
+        footer        : {
+            hidden    : false,
+            position  : 'below-static',
             background: 'mat-fuse-dark-900-bg'
-        },
-        mode      : 'fullwidth'
+        }
     },
     customScrollbars: true,
     routerAnimation : 'fadeIn'
diff --git a/src/app/layout/components/content/content.component.scss b/src/app/layout/components/content/content.component.scss
index 32e80fa3..33f85511 100644
--- a/src/app/layout/components/content/content.component.scss
+++ b/src/app/layout/components/content/content.component.scss
@@ -1,11 +1,12 @@
 content {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
+    display:flex;
     z-index: 1;
+    flex: 1 0 auto;
 
     > *:not(router-outlet) {
         display: flex;
-        flex: 1 1 auto;
+        flex: 1 0 auto;
+        width: 100%;
+        min-width: 100%;
     }
 }
\ No newline at end of file
diff --git a/src/app/layout/components/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts
index b2fdf441..ac21c3de 100644
--- a/src/app/layout/components/toolbar/toolbar.component.ts
+++ b/src/app/layout/components/toolbar/toolbar.component.ts
@@ -123,8 +123,8 @@ export class ToolbarComponent implements OnInit, OnDestroy
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((settings) => {
-                this.horizontalNav = settings.layout.navigation.position === 'top';
-                this.noNav = settings.layout.navigation.position === 'none';
+                this.horizontalNav = settings.layout.navbar.position === 'top';
+                this.noNav = settings.layout.navbar.position === 'none';
             });
 
         // Set the selected language from default languages
diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts
index 0030580c..008361c7 100644
--- a/src/app/layout/layout.module.ts
+++ b/src/app/layout/layout.module.ts
@@ -1,19 +1,22 @@
 import { NgModule } from '@angular/core';
 
-import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module';
+import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module';
+import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
+
 import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
-import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
 
 @NgModule({
     imports: [
-        VerticalLayout1Module,
-        VerticalLayout2Module,
-        VerticalLayout3Module
+        VerticalLayout1BodyScrollModule,
+        VerticalLayout1ContentScrollModule,
+
+        VerticalLayout2Module
     ],
     exports: [
-        VerticalLayout1Module,
-        VerticalLayout2Module,
-        VerticalLayout3Module
+        VerticalLayout1BodyScrollModule,
+        VerticalLayout1ContentScrollModule,
+
+        VerticalLayout2Module
     ]
 })
 export class LayoutModule
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
new file mode 100644
index 00000000..aea612bd
--- /dev/null
+++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
@@ -0,0 +1,115 @@
+<div id="main">
+
+    <!-- TOOLBAR: Above fixed -->
+    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+    </ng-container>
+    <!-- / TOOLBAR: Above fixed -->
+
+    <div id="container-1" class="container" fusePerfectScrollbar updateOnNavigationEnd>
+
+        <!-- TOOLBAR: Above static -->
+        <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
+            <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+        </ng-container>
+        <!-- / TOOLBAR: Above static -->
+
+        <div id="container-2" class="container">
+
+            <!-- NAVBAR: Left -->
+            <ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
+                <ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
+            </ng-container>
+            <!-- / NAVBAR: Left -->
+
+            <div id="container-3" class="container">
+
+                <!-- TOOLBAR: Below -->
+                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
+                    <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+                </ng-container>
+                <!-- / TOOLBAR: Below -->
+
+                <!-- CONTENT -->
+                <content></content>
+                <!-- / CONTENT -->
+
+                <!-- FOOTER: Below -->
+                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
+                    <ng-container *ngTemplateOutlet="footer"></ng-container>
+                </ng-container>
+                <!-- / FOOTER: Below -->
+
+            </div>
+
+            <!-- NAVBAR: Right -->
+            <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
+                <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
+            </ng-container>
+            <!-- / NAVBAR: Right -->
+
+        </div>
+
+        <!-- FOOTER: Above static -->
+        <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
+            <ng-container *ngTemplateOutlet="footer"></ng-container>
+        </ng-container>
+        <!-- FOOTER: Above static -->
+
+    </div>
+
+    <!-- FOOTER: Above fixed -->
+    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
+        <ng-container *ngTemplateOutlet="footer"></ng-container>
+    </ng-container>
+    <!-- FOOTER: Above fixed -->
+
+</div>
+
+<!-- QUICK PANEL -->
+<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+    <quick-panel></quick-panel>
+</fuse-sidebar>
+<!-- / QUICK PANEL -->
+
+<!-- ----------------------------------------------------------------------------------------------------- -->
+<!-- @ PARTIALS
+<!-- ----------------------------------------------------------------------------------------------------- -->
+
+<!-- TOOLBAR -->
+<ng-template #toolbar>
+    <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
+             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+</ng-template>
+<!-- / TOOLBAR -->
+
+<!-- FOOTER -->
+<ng-template #footer>
+    <footer *ngIf="!fuseConfig.layout.footer.hidden"
+            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+</ng-template>
+<!-- / FOOTER -->
+
+<!-- LEFT NAVBAR -->
+<ng-template #leftNavbar>
+    <fuse-sidebar [name]="'navbar'"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / LEFT NAVBAR -->
+
+<!-- RIGHT NAVBAR -->
+<ng-template #rightNavbar>
+    <fuse-sidebar [name]="'navbar'" position="right"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / RIGHT NAVBAR -->
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
similarity index 93%
rename from src/app/layout/vertical/layout-3/layout-3.component.scss
rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
index a6d52354..fbe43795 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.scss
+++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
@@ -1,9 +1,10 @@
 @import "src/@fuse/scss/fuse";
 
-vertical-layout-3 {
+vertical-layout-1-body-scroll {
     display: flex;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
 
     #main {
         position: relative;
@@ -11,6 +12,7 @@ vertical-layout-3 {
         flex: 1 1 auto;
         flex-direction: column;
         width: 100%;
+        height: 100%;
         z-index: 1;
 
         // Container 1 (Scrollable)
@@ -42,4 +44,4 @@ vertical-layout-3 {
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.ts b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
similarity index 86%
rename from src/app/layout/vertical/layout-1/layout-1.component.ts
rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
index 07c58e02..54892576 100644
--- a/src/app/layout/vertical/layout-1/layout-1.component.ts
+++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
@@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector     : 'vertical-layout-1',
-    templateUrl  : './layout-1.component.html',
-    styleUrls    : ['./layout-1.component.scss'],
+    selector     : 'vertical-layout-1-body-scroll',
+    templateUrl  : './body-scroll.component.html',
+    styleUrls    : ['./body-scroll.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class VerticalLayout1Component implements OnInit, OnDestroy
+export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy
 {
     fuseConfig: any;
     navigation: any;
diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
similarity index 71%
rename from src/app/layout/vertical/layout-3/layout-3.module.ts
rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
index a0d16277..e942d517 100644
--- a/src/app/layout/vertical/layout-3/layout-3.module.ts
+++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
 import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
 import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
 
-import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component';
+import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component';
 
 @NgModule({
     declarations: [
-        VerticalLayout3Component
+        VerticalLayout1BodyScrollComponent
     ],
     imports     : [
+        RouterModule,
+
         FuseSharedModule,
         FuseSidebarModule,
 
@@ -26,9 +29,9 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
         ToolbarModule
     ],
     exports     : [
-        VerticalLayout3Component
+        VerticalLayout1BodyScrollComponent
     ]
 })
-export class VerticalLayout3Module
+export class VerticalLayout1BodyScrollModule
 {
 }
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html
new file mode 100644
index 00000000..9d1217cf
--- /dev/null
+++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html
@@ -0,0 +1,115 @@
+<div id="main">
+
+    <!-- TOOLBAR: Above -->
+    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+    </ng-container>
+    <!-- / TOOLBAR: Above -->
+
+    <div id="container-1" class="container">
+
+        <!-- NAVBAR: Left -->
+        <ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
+            <ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
+        </ng-container>
+        <!-- / NAVBAR: Left -->
+
+        <div id="container-2" class="container">
+
+            <!-- TOOLBAR: Below fixed -->
+            <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-fixed'">
+                <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+            </ng-container>
+            <!-- / TOOLBAR: Below fixed -->
+
+            <div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
+
+                <!-- TOOLBAR: Below static -->
+                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-static'">
+                    <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+                </ng-container>
+                <!-- / TOOLBAR: Below static -->
+
+                <!-- CONTENT -->
+                <content></content>
+                <!-- / CONTENT -->
+
+                <!-- FOOTER: Below static -->
+                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below-static'">
+                    <ng-container *ngTemplateOutlet="footer"></ng-container>
+                </ng-container>
+                <!-- / FOOTER: Below static -->
+
+            </div>
+
+            <!-- FOOTER: Below fixed -->
+            <ng-container *ngIf="fuseConfig.layout.footer.position === 'below-fixed'">
+                <ng-container *ngTemplateOutlet="footer"></ng-container>
+            </ng-container>
+            <!-- / FOOTER: Below fixed -->
+
+        </div>
+
+        <!-- NAVBAR: Right -->
+        <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
+            <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
+        </ng-container>
+        <!-- / NAVBAR: Right -->
+
+    </div>
+
+    <!-- FOOTER: Above -->
+    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
+        <ng-container *ngTemplateOutlet="footer"></ng-container>
+    </ng-container>
+    <!-- FOOTER: Above -->
+
+</div>
+
+<!-- QUICK PANEL -->
+<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+    <quick-panel></quick-panel>
+</fuse-sidebar>
+<!-- / QUICK PANEL -->
+
+<!-- ----------------------------------------------------------------------------------------------------- -->
+<!-- @ PARTIALS
+<!-- ----------------------------------------------------------------------------------------------------- -->
+
+<!-- TOOLBAR -->
+<ng-template #toolbar>
+    <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
+             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+</ng-template>
+<!-- / TOOLBAR -->
+
+<!-- FOOTER -->
+<ng-template #footer>
+    <footer *ngIf="!fuseConfig.layout.footer.hidden"
+            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+</ng-template>
+<!-- / FOOTER -->
+
+<!-- LEFT NAVBAR -->
+<ng-template #leftNavbar>
+    <fuse-sidebar [name]="'navbar'"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / LEFT NAVBAR -->
+
+<!-- RIGHT NAVBAR -->
+<ng-template #rightNavbar>
+    <fuse-sidebar [name]="'navbar'" position="right"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / RIGHT NAVBAR -->
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss
new file mode 100644
index 00000000..0af78cae
--- /dev/null
+++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss
@@ -0,0 +1,61 @@
+@import "src/@fuse/scss/fuse";
+
+vertical-layout-1-content-scroll {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+
+    #main {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+
+        // Container 1
+        > .container {
+            position: relative;
+            display: flex;
+            flex: 1 1 auto;
+            width: 100%;
+            min-height: 0;
+            min-width: 0;
+
+            // Container 2
+            > .container {
+                position: relative;
+                display: flex;
+                flex: 1 1 auto;
+                flex-direction: column;
+                min-width: 0;
+
+                // Container 3 (Scrollable)
+                > .container {
+                    position: relative;
+                    display: flex;
+                    flex: 1 1 auto;
+                    flex-direction: column;
+                    transform: translateZ(0);
+                    overflow-x: hidden;
+                    overflow-y: auto;
+
+                    // Content component
+                    content {
+
+                        &.inner-scroll {
+                            flex: 1 1 auto;
+                            min-height: 0;
+
+                            > *:not(router-outlet) {
+                                flex: 1 1 auto;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.ts b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
similarity index 86%
rename from src/app/layout/vertical/layout-3/layout-3.component.ts
rename to src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
index d99091b4..82c0d145 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.ts
+++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
@@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector     : 'vertical-layout-3',
-    templateUrl  : './layout-3.component.html',
-    styleUrls    : ['./layout-3.component.scss'],
+    selector     : 'vertical-layout-1-content-scroll',
+    templateUrl  : './content-scroll.component.html',
+    styleUrls    : ['./content-scroll.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class VerticalLayout3Component implements OnInit, OnDestroy
+export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy
 {
     fuseConfig: any;
     navigation: any;
diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
similarity index 70%
rename from src/app/layout/vertical/layout-1/layout-1.module.ts
rename to src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
index ed5c7c96..9ba7418b 100644
--- a/src/app/layout/vertical/layout-1/layout-1.module.ts
+++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
 import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
 import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
 
-import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component';
+import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component';
 
 @NgModule({
     declarations: [
-        VerticalLayout1Component
+        VerticalLayout1ContentScrollComponent
     ],
     imports     : [
+        RouterModule,
+
         FuseSharedModule,
         FuseSidebarModule,
 
@@ -26,9 +29,9 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
         ToolbarModule
     ],
     exports     : [
-        VerticalLayout1Component
+        VerticalLayout1ContentScrollComponent
     ]
 })
-export class VerticalLayout1Module
+export class VerticalLayout1ContentScrollModule
 {
 }
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html
deleted file mode 100644
index b826ef61..00000000
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<div id="main">
-
-    <!-- TOOLBAR: Above -->
-    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
-        <toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-    </ng-container>
-    <!-- / TOOLBAR: Above -->
-
-    <div id="container-1" class="container">
-
-        <!-- NAVBAR: Left -->
-        <fuse-sidebar [name]="'navbar'"
-                      [folded]="fuseConfig.layout.navigation.folded"
-                      [lockedOpen]="'gt-md'"
-                      class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                      *ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
-        <!-- / NAVBAR: Left -->
-
-        <div id="container-2" class="container">
-
-            <!-- TOOLBAR: Below sticky -->
-            <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-sticky'">
-                <toolbar class="below-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-            </ng-container>
-            <!-- / TOOLBAR: Below sticky -->
-
-            <div id="container-3" class="container">
-
-                <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
-                    <toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-                </ng-container>
-                <!-- / TOOLBAR: Below -->
-
-                <!-- CONTENT -->
-                <content></content>
-                <!-- / CONTENT -->
-
-                <!-- FOOTER: Below -->
-                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
-                    <footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
-                </ng-container>
-                <!-- / FOOTER: Below -->
-
-            </div>
-
-            <!-- FOOTER: Below sticky -->
-            <ng-container *ngIf="fuseConfig.layout.footer.position === 'below-sticky'">
-                <footer class="below-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
-            </ng-container>
-            <!-- / FOOTER: Below sticky -->
-
-        </div>
-
-        <!-- NAVBAR: Right -->
-        <fuse-sidebar [name]="'navbar'" position="right"
-                      [folded]="fuseConfig.layout.navigation.folded"
-                      [lockedOpen]="'gt-md'"
-                      class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                      *ngIf="fuseConfig.layout.navigation.position === 'right'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
-        <!-- / NAVBAR: Right -->
-
-    </div>
-
-    <!-- FOOTER: Above -->
-    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
-        <footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
-    </ng-container>
-    <!-- FOOTER: Above -->
-
-</div>
-
-<!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
-    <quick-panel></quick-panel>
-</fuse-sidebar>
-<!-- / QUICK PANEL -->
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss
deleted file mode 100644
index b0990b8a..00000000
--- a/src/app/layout/vertical/layout-1/layout-1.component.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-@import "src/@fuse/scss/fuse";
-
-vertical-layout-1 {
-    display: flex;
-    flex: 1 1 auto;
-    width: 100%;
-
-    #main {
-        position: relative;
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        width: 100%;
-        z-index: 1;
-
-        // Container 1
-        > .container {
-            position: relative;
-            display: flex;
-            flex: 1 1 auto;
-            width: 100%;
-
-            // Container 2
-            > .container {
-                position: relative;
-                display: flex;
-                flex: 1 1 auto;
-                flex-direction: column;
-                min-width: 0;
-
-                // Container 3 (Scrollable)
-                > .container {
-                    position: relative;
-                    display: flex;
-                    flex: 1 1 auto;
-                    flex-direction: column;
-                    transform: translateZ(0);
-                }
-            }
-        }
-    }
-}
-
-vertical-layout-111 {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    /* > .mat-sidenav-container {
-         display: flex;
-         flex: 1;
-
-         > .mat-sidenav-content,
-         > .mat-drawer-content {
-             display: flex;
-             flex: 1;
-             overflow: hidden;
-             height: 100vh;*/
-
-    @include media-breakpoint-down('sm') {
-        height: auto !important;
-    }
-
-    #main-content {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        overflow: hidden;
-        background: #FAFAFA;
-
-        #wrapper {
-            display: flex;
-            position: relative;
-            flex: 1;
-            overflow: hidden;
-
-            .content-wrapper {
-                display: flex;
-                flex-direction: column;
-                flex: 1;
-                overflow: hidden;
-
-                content {
-                    position: relative;
-                    display: flex;
-                    flex: 1;
-                    flex-direction: row;
-                    width: 100%;
-                    overflow: hidden;
-
-                    > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
-                        display: flex;
-                        flex: 1;
-                        width: 100%;
-                        min-width: 100%;
-                    }
-
-                    > *.ng-animating {
-
-                        .mat-tab-body {
-                            height: 100vh;
-                        }
-                    }
-                }
-            }
-            //}
-            //}
-        }
-    }
-
-    &[fuse-layout-mode="boxed"] {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-}
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html
index 22587f0a..7b719f1f 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -1,76 +1,54 @@
 <div id="main">
 
-    <!-- TOOLBAR: Above -->
-    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
-        <toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
+    <!-- TOOLBAR: Above fixed -->
+    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
     </ng-container>
-    <!-- / TOOLBAR: Above -->
+    <!-- / TOOLBAR: Above fixed -->
 
-    <div id="container-1" class="container">
+    <div id="container-1" class="container" fusePerfectScrollbar>
 
-        <!-- NAVBAR: Left -->
-        <fuse-sidebar [name]="'navbar'"
-                      [folded]="fuseConfig.layout.navigation.folded"
-                      [lockedOpen]="'gt-md'"
-                      class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                      *ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
-        <!-- / NAVBAR: Left -->
+        <!-- TOOLBAR: Above static -->
+        <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
+            <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+        </ng-container>
+        <!-- / TOOLBAR: Above static -->
 
         <div id="container-2" class="container">
 
-            <!-- TOOLBAR: Below sticky -->
-            <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-sticky'">
-                <toolbar class="below-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
+            <!-- NAVBAR: Left -->
+            <ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
+                <ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
             </ng-container>
-            <!-- / TOOLBAR: Below sticky -->
+            <!-- / NAVBAR: Left -->
 
-            <div id="container-3" class="container" fusePerfectScrollbar>
+            <!-- CONTENT -->
+            <content
+                [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}"
+            ></content>
+            <!-- / CONTENT -->
 
-                <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
-                    <toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-                </ng-container>
-                <!-- / TOOLBAR: Below -->
-
-                <!-- CONTENT -->
-                <content></content>
-                <!-- / CONTENT -->
-
-                <!-- FOOTER: Below -->
-                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
-                    <footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
-                </ng-container>
-                <!-- / FOOTER: Below -->
-
-            </div>
-
-            <!-- FOOTER: Below sticky -->
-            <ng-container *ngIf="fuseConfig.layout.footer.position === 'below-sticky'">
-                <footer class="below-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
+            <!-- NAVBAR: Right -->
+            <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
+                <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
             </ng-container>
-            <!-- / FOOTER: Below sticky -->
+            <!-- / NAVBAR: Right -->
 
         </div>
 
-        <!-- NAVBAR: Right -->
-        <fuse-sidebar [name]="'navbar'" position="right"
-                      [folded]="fuseConfig.layout.navigation.folded"
-                      [lockedOpen]="'gt-md'"
-                      class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                      *ngIf="fuseConfig.layout.navigation.position === 'right'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
-        <!-- / NAVBAR: Right -->
+        <!-- FOOTER: Above static -->
+        <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
+            <ng-container *ngTemplateOutlet="footer"></ng-container>
+        </ng-container>
+        <!-- FOOTER: Above static -->
 
     </div>
 
-    <!-- FOOTER: Above -->
-    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
-        <footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
+    <!-- FOOTER: Above fixed -->
+    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
+        <ng-container *ngTemplateOutlet="footer"></ng-container>
     </ng-container>
-    <!-- FOOTER: Above -->
+    <!-- FOOTER: Above fixed -->
 
 </div>
 
@@ -78,4 +56,46 @@
 <fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
-<!-- / QUICK PANEL -->
\ No newline at end of file
+<!-- / QUICK PANEL -->
+
+<!-- ----------------------------------------------------------------------------------------------------- -->
+<!-- @ PARTIALS
+<!-- ----------------------------------------------------------------------------------------------------- -->
+
+<!-- TOOLBAR -->
+<ng-template #toolbar>
+    <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
+             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+</ng-template>
+<!-- / TOOLBAR -->
+
+<!-- FOOTER -->
+<ng-template #footer>
+    <footer *ngIf="!fuseConfig.layout.footer.hidden"
+            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+</ng-template>
+<!-- / FOOTER -->
+
+<!-- LEFT NAVBAR -->
+<ng-template #leftNavbar>
+    <fuse-sidebar [name]="'navbar'"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / LEFT NAVBAR -->
+
+<!-- RIGHT NAVBAR -->
+<ng-template #rightNavbar>
+    <fuse-sidebar [name]="'navbar'" position="right"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  [lockedOpen]="'gt-md'"
+                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / RIGHT NAVBAR -->
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss
index d1496150..b863500e 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.scss
+++ b/src/app/layout/vertical/layout-2/layout-2.component.scss
@@ -4,6 +4,7 @@ vertical-layout-2 {
     display: flex;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
 
     #main {
         position: relative;
@@ -11,43 +12,37 @@ vertical-layout-2 {
         flex: 1 1 auto;
         flex-direction: column;
         width: 100%;
+        height: 100%;
         z-index: 1;
 
-        // Container 1
+        // Container 1 (Scrollable)
         > .container {
             position: relative;
             display: flex;
             flex: 1 1 auto;
+            flex-direction: column;
             width: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+            transform: translateZ(0);
 
             // Container 2
             > .container {
                 position: relative;
                 display: flex;
-                flex: 1 1 auto;
-                flex-direction: column;
+                flex: 1 0 auto;
+                width: 100%;
                 min-width: 0;
+                padding: 32px;
 
-                // Container 3 (Scrollable)
-                > .container {
-                    position: relative;
-                    display: flex;
+                // Content component
+                > content {
                     flex: 1 1 auto;
-                    flex-direction: column;
-                    transform: translateZ(0);
-                    overflow-x: hidden;
-                    overflow-y: auto;
+                    min-width: 0;
 
-                    // Content component
-                    content {
-                        flex: 1 0 auto;
-
-                        > *:not(router-outlet) {
-                            flex: 1 0 auto;
-                        }
-                    }
+                    @include mat-elevation(3);
                 }
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts
index 26ed77d1..64c7540f 100644
--- a/src/app/layout/vertical/layout-2/layout-2.module.ts
+++ b/src/app/layout/vertical/layout-2/layout-2.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -16,6 +17,8 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
         VerticalLayout2Component
     ],
     imports     : [
+        RouterModule,
+
         FuseSharedModule,
         FuseSidebarModule,
 
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html
deleted file mode 100644
index 422f2cbd..00000000
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<div id="main">
-
-    <!-- TOOLBAR: Above sticky -->
-    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-sticky'">
-        <toolbar class="above-sticky" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-    </ng-container>
-    <!-- / TOOLBAR: Above sticky -->
-
-    <div id="container-1" class="container" fusePerfectScrollbar>
-
-        <!-- TOOLBAR: Above -->
-        <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
-            <toolbar class="above" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-        </ng-container>
-        <!-- / TOOLBAR: Above -->
-
-        <div id="container-2" class="container">
-
-            <!-- NAVBAR: Left -->
-            <fuse-sidebar [name]="'navbar'"
-                          [folded]="fuseConfig.layout.navigation.folded"
-                          [lockedOpen]="'gt-md'"
-                          class="left-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                          *ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
-                <navbar layout="vertical"></navbar>
-            </fuse-sidebar>
-            <!-- / NAVBAR: Left -->
-
-            <div id="container-3" class="container">
-
-                <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
-                    <toolbar class="below" [ngClass]="fuseConfig.layout.toolbar.background"></toolbar>
-                </ng-container>
-                <!-- / TOOLBAR: Below -->
-
-                <!-- CONTENT -->
-                <content></content>
-                <!-- / CONTENT -->
-
-                <!-- FOOTER: Below -->
-                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
-                    <footer class="below" [ngClass]="fuseConfig.layout.footer.background"></footer>
-                </ng-container>
-                <!-- / FOOTER: Below -->
-
-            </div>
-
-            <!-- NAVBAR: Right -->
-            <fuse-sidebar [name]="'navbar'" position="right"
-                          [folded]="fuseConfig.layout.navigation.folded"
-                          [lockedOpen]="'gt-md'"
-                          class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
-                          *ngIf="fuseConfig.layout.navigation.position === 'right'">
-                <navbar layout="vertical"></navbar>
-            </fuse-sidebar>
-            <!-- / NAVBAR: Right -->
-
-        </div>
-
-        <!-- FOOTER: Above -->
-        <ng-container *ngIf="fuseConfig.layout.footer.position === 'above'">
-            <footer class="above" [ngClass]="fuseConfig.layout.footer.background"></footer>
-        </ng-container>
-        <!-- FOOTER: Above -->
-
-    </div>
-
-    <!-- FOOTER: Above sticky -->
-    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-sticky'">
-        <footer class="above-sticky" [ngClass]="fuseConfig.layout.footer.background"></footer>
-    </ng-container>
-    <!-- FOOTER: Above sticky -->
-
-</div>
-
-<!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
-    <quick-panel></quick-panel>
-</fuse-sidebar>
-<!-- / QUICK PANEL -->
\ No newline at end of file
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
similarity index 94%
rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
rename to src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
index 803bdda8..5e08db5f 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
+++ b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Fullwidth with container scroll</h2>
+            <h2>Full width with content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss
rename to src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts
new file mode 100644
index 00000000..5a3e0daf
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-fullwidth-1',
+    templateUrl: './full-width-1.component.html',
+    styleUrls  : ['./full-width-1.component.scss']
+})
+export class CardedFullWidth1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
similarity index 88%
rename from src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
index f228732b..a9a45f3a 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
+++ b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded fullwidth" fusePerfectScrollbar>
+<div class="page-layout carded fullwidth inner-scroll">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Fullwidth with content scroll</h2>
+            <h2>Full width with inner scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss
rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts
similarity index 67%
rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts
rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts
index f05d08d6..fa38a5db 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts
+++ b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector   : 'carded-fullwidth-2',
-    templateUrl: './fullwidth-2.component.html',
-    styleUrls  : ['./fullwidth-2.component.scss']
+    templateUrl: './full-width-2.component.html',
+    styleUrls  : ['./full-width-2.component.scss']
 })
 export class CardedFullWidth2Component
 {
diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html
new file mode 100644
index 00000000..b5f75269
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html
@@ -0,0 +1,115 @@
+<div class="page-layout carded fullwidth tabbed">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+            <h2>Full width with tabs and content scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT -->
+            <div class="content">
+
+                <mat-tab-group>
+
+                    <mat-tab label="Tab 1">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 2">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 3">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 4">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 5">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 6">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 7">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 8">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 9">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 10">
+                        <div class="tab-content p-24">
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                </mat-tab-group>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss
rename to src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts
new file mode 100644
index 00000000..2da39a05
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-fullwidth-tabbed-1',
+    templateUrl: './full-width-tabbed-1.component.html',
+    styleUrls  : ['./full-width-tabbed-1.component.scss']
+})
+export class CardedFullWidthTabbed1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html
new file mode 100644
index 00000000..0c008df2
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html
@@ -0,0 +1,115 @@
+<div class="page-layout carded fullwidth tabbed inner-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+            <h2>Full width with tabs and inner scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT -->
+            <div class="content">
+
+                <mat-tab-group>
+
+                    <mat-tab label="Tab 1">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 2">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 3">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 4">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 5">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 6">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 7">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 8">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 9">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                    <mat-tab label="Tab 10">
+                        <div class="tab-content p-24" fusePerfectScrollbar>
+                            <!-- PUT YOUR TAB CONTENT HERE -->
+                            <fuse-demo-content></fuse-demo-content>
+                            <!-- / PUT YOUR TAB CONTENT HERE -->
+                        </div>
+                    </mat-tab>
+
+                </mat-tab-group>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss
rename to src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts
new file mode 100644
index 00000000..dc746bb4
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-fullwidth-tabbed-2',
+    templateUrl: './full-width-tabbed-2.component.html',
+    styleUrls  : ['./full-width-tabbed-2.component.scss']
+})
+export class CardedFullWidthTabbed2Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts
deleted file mode 100644
index 7e1616e6..00000000
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-
-import { FuseConfigService } from '@fuse/services/config.service';
-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-
-@Component({
-    selector   : 'carded-fullwidth',
-    templateUrl: './fullwidth.component.html',
-    styleUrls  : ['./fullwidth.component.scss']
-})
-export class CardedFullWidthComponent implements OnInit, OnDestroy
-{
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseMatchMediaService} _fuseMatchMediaService
-     */
-    constructor(
-        private _fuseConfigService: FuseConfigService,
-        private _fuseMatchMediaService: FuseMatchMediaService
-    )
-    {
-        // Configure the layout
-        this._fuseConfigService.config = {
-            layout: {
-                containerScroll: false
-            }
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Enable the containerScroll on small screen
-        // devices to get more screen real estate
-        this._fuseMatchMediaService.onMediaChange
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((alias) => {
-
-                // If 'xs'
-                if ( alias === 'xs' )
-                {
-                    // Set the containerScroll to true
-                    this._fuseConfigService.config = {
-                        layout: {
-                            containerScroll: true
-                        }
-                    };
-                }
-                else
-                {
-                    // Set the containerScroll to false (route default)
-                    this._fuseConfigService.config = {
-                        layout: {
-                            containerScroll: false
-                        }
-                    };
-                }
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
similarity index 90%
rename from src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
rename to src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
index 7a7a65f1..b982e7c0 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav" fusePerfectScrollbar>
+<div class="page-layout carded left-sidenav">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -17,7 +17,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" fusePerfectScrollbar>
+            <div class="content p-24">
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -52,7 +52,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" fusePerfectScrollbar>
+                <div class="content p-24">
 
                     <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss
rename to src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts
new file mode 100644
index 00000000..1b1d69b9
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-left-sidenav-1',
+    templateUrl: './left-sidenav-1.component.html',
+    styleUrls  : ['./left-sidenav-1.component.scss']
+})
+export class CardedLeftSidenav1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
deleted file mode 100644
index e715bb04..00000000
--- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-left-sidenav-2-tabbed',
-    templateUrl: './left-sidenav-2-tabbed.component.html',
-    styleUrls  : ['./left-sidenav-2-tabbed.component.scss']
-})
-export class CardedLeftSidenav2TabbedComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
index faa84817..5f828a44 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav single-scroll" fusePerfectScrollbar>
+<div class="page-layout carded left-sidenav inner-scroll">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -32,7 +32,7 @@
 
             <!-- CONTENT HEADER -->
             <div class="header white-fg p-24">
-                <h2>Left sidenav with container scroll</h2>
+                <h2>Left sidenav with inner scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
 
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
similarity index 82%
rename from src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
index 575e5515..37159c86 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav tabbed single-scroll" fusePerfectScrollbar>
+<div class="page-layout carded left-sidenav tabbed">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -17,7 +17,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" fusePerfectScrollbar>
+            <div class="content p-24">
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -40,7 +40,7 @@
                         <mat-icon>menu</mat-icon>
                     </button>
 
-                    <h2>Left sidenav with tabs and container scroll</h2>
+                    <h2>Left sidenav with tabs and content scroll</h2>
 
                 </div>
 
@@ -56,7 +56,7 @@
                     <mat-tab-group>
 
                         <mat-tab label="Tab 1">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -64,7 +64,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 2">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -72,7 +72,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 3">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -80,7 +80,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 4">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -88,7 +88,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 5">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -96,7 +96,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 6">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -104,7 +104,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 7">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -112,7 +112,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 8">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -120,7 +120,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 9">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -128,7 +128,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 10">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -148,4 +148,4 @@
 
     </mat-sidenav-container>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss
rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts
new file mode 100644
index 00000000..eee50265
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-left-sidenav-tabbed-1',
+    templateUrl: './left-sidenav-tabbed-1.component.html',
+    styleUrls  : ['./left-sidenav-tabbed-1.component.scss']
+})
+export class CardedLeftSidenavTabbed1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
similarity index 97%
rename from src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
index fd214075..03e69569 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav tabbed" fusePerfectScrollbar>
+<div class="page-layout carded left-sidenav tabbed inner-scroll">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -40,7 +40,7 @@
                         <mat-icon>menu</mat-icon>
                     </button>
 
-                    <h2>Left sidenav with tabs and content scroll</h2>
+                    <h2>Left sidenav with tabs and inner scroll</h2>
 
                 </div>
 
@@ -148,4 +148,4 @@
 
     </mat-sidenav-container>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss
rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts
new file mode 100644
index 00000000..b3cb2bfe
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-left-sidenav-tabbed-2',
+    templateUrl: './left-sidenav-tabbed-2.component.html',
+    styleUrls  : ['./left-sidenav-tabbed-2.component.scss']
+})
+export class CardedLeftSidenavTabbed2Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
deleted file mode 100644
index e1cc2130..00000000
--- a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-left-sidenav-tabbed',
-    templateUrl: './left-sidenav-tabbed.component.html',
-    styleUrls  : ['./left-sidenav-tabbed.component.scss']
-})
-export class CardedLeftSidenavTabbedComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
deleted file mode 100644
index babe06ef..00000000
--- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-left-sidenav',
-    templateUrl: './left-sidenav.component.html',
-    styleUrls  : ['./left-sidenav.component.scss']
-})
-export class CardedLeftSidenavComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
similarity index 90%
rename from src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
rename to src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
index 1e0d37d9..f6bf47f2 100644
--- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav" fusePerfectScrollbar>
+<div class="page-layout carded right-sidenav">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -31,7 +31,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" fusePerfectScrollbar>
+                <div class="content p-24">
 
                     <fuse-demo-content></fuse-demo-content>
 
@@ -55,7 +55,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" fusePerfectScrollbar>
+            <div class="content p-24">
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss
rename to src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts
new file mode 100644
index 00000000..7ce474ea
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-right-sidenav-1',
+    templateUrl: './right-sidenav-1.component.html',
+    styleUrls  : ['./right-sidenav-1.component.scss']
+})
+export class CardedRightSidenav1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
deleted file mode 100644
index 83585df2..00000000
--- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-right-sidenav-2-tabbed',
-    templateUrl: './right-sidenav-2-tabbed.component.html',
-    styleUrls  : ['./right-sidenav-2-tabbed.component.scss']
-})
-export class CardedRightSidenav2TabbedComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
index 7e080983..35e5cf2b 100644
--- a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav single-scroll" fusePerfectScrollbar>
+<div class="page-layout carded right-sidenav inner-scroll">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -11,7 +11,7 @@
 
             <!-- CONTENT HEADER -->
             <div class="header white-fg p-24">
-                <h2>Right sidenav with container scroll</h2>
+                <h2>Right sidenav with inner scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
 
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
similarity index 82%
rename from src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
index 056ae1cf..5fe94776 100644
--- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav tabbed single-scroll" fusePerfectScrollbar>
+<div class="page-layout carded right-sidenav tabbed">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -19,7 +19,7 @@
                         <mat-icon>menu</mat-icon>
                     </button>
 
-                    <h2>Right sidenav with tabs and container scroll</h2>
+                    <h2>Right sidenav with tabs and content scroll</h2>
 
                 </div>
 
@@ -35,7 +35,7 @@
                     <mat-tab-group>
 
                         <mat-tab label="Tab 1">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -43,7 +43,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 2">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -51,7 +51,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 3">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -59,7 +59,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 4">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -67,7 +67,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 5">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -75,7 +75,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 6">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -83,7 +83,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 7">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -91,7 +91,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 8">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -99,7 +99,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 9">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -107,7 +107,7 @@
                         </mat-tab>
 
                         <mat-tab label="Tab 10">
-                            <div class="tab-content p-24" fusePerfectScrollbar>
+                            <div class="tab-content p-24">
                                 <!-- PUT YOUR TAB CONTENT HERE -->
                                 <fuse-demo-content></fuse-demo-content>
                                 <!-- / PUT YOUR TAB CONTENT HERE -->
@@ -136,7 +136,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" fusePerfectScrollbar>
+            <div class="content p-24">
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss
rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts
new file mode 100644
index 00000000..40ae7782
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-right-sidenav-tabbed-1',
+    templateUrl: './right-sidenav-tabbed-1.component.html',
+    styleUrls  : ['./right-sidenav-tabbed-1.component.scss']
+})
+export class CardedRightSidenavTabbed1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
similarity index 97%
rename from src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
index 3364858d..d56483ae 100644
--- a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav tabbed" fusePerfectScrollbar>
+<div class="page-layout carded right-sidenav tabbed inner-scroll">
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg mat-accent-bg"></div>
@@ -19,7 +19,7 @@
                         <mat-icon>menu</mat-icon>
                     </button>
 
-                    <h2>Right sidenav with tabs and content scroll</h2>
+                    <h2>Right sidenav with tabs and inner scroll</h2>
 
                 </div>
 
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss
rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts
new file mode 100644
index 00000000..33f58358
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'carded-right-sidenav-tabbed-2',
+    templateUrl: './right-sidenav-tabbed-2.component.html',
+    styleUrls  : ['./right-sidenav-tabbed-2.component.scss']
+})
+export class CardedRightSidenavTabbed2Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
deleted file mode 100644
index 2e5dedfe..00000000
--- a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-right-sidenav-tabbed',
-    templateUrl: './right-sidenav-tabbed.component.html',
-    styleUrls  : ['./right-sidenav-tabbed.component.scss']
-})
-export class CardedRightSidenavTabbedComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
deleted file mode 100644
index 7ea8b054..00000000
--- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-right-sidenav',
-    templateUrl: './right-sidenav.component.html',
-    styleUrls  : ['./right-sidenav.component.scss']
-})
-export class CardedRightSidenavComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts
index 45041b57..89295b23 100644
--- a/src/app/main/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/main/ui/page-layouts/page-layouts.module.ts
@@ -5,74 +5,84 @@ import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
-import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component';
-import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component';
-import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component';
-import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component';
+import { CardedFullWidth1Component } from 'app/main/ui/page-layouts/carded/full-width-1/full-width-1.component';
+import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/full-width-2/full-width-2.component';
+import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component';
+import { CardedFullWidthTabbed2Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component';
+import { CardedLeftSidenav1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component';
 import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component';
-import { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
-import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component';
-import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
+import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component';
+import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component';
+import { CardedRightSidenav1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component';
 import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component';
-import { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
-import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component';
-import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component';
+import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component';
+import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component';
+import { SimpleFullWidth1Component } from 'app/main/ui/page-layouts/simple/full-width-1/full-width-1.component';
+import { SimpleLeftSidenav1Component } from 'app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component';
 import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component';
 import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component';
-import { SimpleRightSidenavComponent } from 'app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component';
+import { SimpleRightSidenav1Component } from 'app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component';
 import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component';
 import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component';
-import { TabbedComponent } from 'app/main/ui/page-layouts/simple/tabbed/tabbed.component';
+import { Tabbed1Component } from 'app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component';
 import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component';
 
 const routes: Routes = [
     {
-        path     : 'page-layouts/carded/full-width',
-        component: CardedFullWidthComponent
+        path     : 'page-layouts/carded/full-width-1',
+        component: CardedFullWidth1Component
     },
     {
         path     : 'page-layouts/carded/full-width-2',
         component: CardedFullWidth2Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav',
-        component: CardedLeftSidenavComponent
+        path     : 'page-layouts/carded/full-width-tabbed-1',
+        component: CardedFullWidthTabbed1Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-tabbed',
-        component: CardedLeftSidenavTabbedComponent
+        path     : 'page-layouts/carded/full-width-tabbed-2',
+        component: CardedFullWidthTabbed2Component
+    },
+    {
+        path     : 'page-layouts/carded/left-sidenav-1',
+        component: CardedLeftSidenav1Component
+    },
+    {
+        path     : 'page-layouts/carded/left-sidenav-tabbed-1',
+        component: CardedLeftSidenavTabbed1Component
     },
     {
         path     : 'page-layouts/carded/left-sidenav-2',
         component: CardedLeftSidenav2Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-2-tabbed',
-        component: CardedLeftSidenav2TabbedComponent
+        path     : 'page-layouts/carded/left-sidenav-tabbed-2',
+        component: CardedLeftSidenavTabbed2Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav',
-        component: CardedRightSidenavComponent
+        path     : 'page-layouts/carded/right-sidenav-1',
+        component: CardedRightSidenav1Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-tabbed',
-        component: CardedRightSidenavTabbedComponent
+        path     : 'page-layouts/carded/right-sidenav-tabbed-1',
+        component: CardedRightSidenavTabbed1Component
     },
     {
         path     : 'page-layouts/carded/right-sidenav-2',
         component: CardedRightSidenav2Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-2-tabbed',
-        component: CardedRightSidenav2TabbedComponent
+        path     : 'page-layouts/carded/right-sidenav-tabbed-2',
+        component: CardedRightSidenavTabbed2Component
     },
     {
-        path     : 'page-layouts/simple/full-width',
-        component: SimpleFullWidthComponent
+        path     : 'page-layouts/simple/full-width-1',
+        component: SimpleFullWidth1Component
     },
     {
-        path     : 'page-layouts/simple/left-sidenav',
-        component: SimpleLeftSidenavComponent
+        path     : 'page-layouts/simple/left-sidenav-1',
+        component: SimpleLeftSidenav1Component
     },
     {
         path     : 'page-layouts/simple/left-sidenav-2',
@@ -83,8 +93,8 @@ const routes: Routes = [
         component: SimpleLeftSidenav3Component
     },
     {
-        path     : 'page-layouts/simple/right-sidenav',
-        component: SimpleRightSidenavComponent
+        path     : 'page-layouts/simple/right-sidenav-1',
+        component: SimpleRightSidenav1Component
     },
     {
         path     : 'page-layouts/simple/right-sidenav-2',
@@ -95,8 +105,8 @@ const routes: Routes = [
         component: SimpleRightSidenav3Component
     },
     {
-        path     : 'page-layouts/simple/tabbed',
-        component: TabbedComponent
+        path     : 'page-layouts/simple/tabbed-1',
+        component: Tabbed1Component
     },
     {
         path     : 'page-layouts/blank',
@@ -106,24 +116,26 @@ const routes: Routes = [
 
 @NgModule({
     declarations: [
-        CardedFullWidthComponent,
+        CardedFullWidth1Component,
         CardedFullWidth2Component,
-        CardedLeftSidenavComponent,
-        CardedLeftSidenavTabbedComponent,
+        CardedFullWidthTabbed1Component,
+        CardedFullWidthTabbed2Component,
+        CardedLeftSidenav1Component,
         CardedLeftSidenav2Component,
-        CardedLeftSidenav2TabbedComponent,
-        CardedRightSidenavComponent,
-        CardedRightSidenavTabbedComponent,
+        CardedLeftSidenavTabbed1Component,
+        CardedLeftSidenavTabbed2Component,
+        CardedRightSidenav1Component,
         CardedRightSidenav2Component,
-        CardedRightSidenav2TabbedComponent,
-        SimpleFullWidthComponent,
-        SimpleLeftSidenavComponent,
+        CardedRightSidenavTabbed1Component,
+        CardedRightSidenavTabbed2Component,
+        SimpleFullWidth1Component,
+        SimpleLeftSidenav1Component,
         SimpleLeftSidenav2Component,
         SimpleLeftSidenav3Component,
-        SimpleRightSidenavComponent,
+        SimpleRightSidenav1Component,
         SimpleRightSidenav2Component,
         SimpleRightSidenav3Component,
-        TabbedComponent,
+        Tabbed1Component,
         BlankComponent
     ],
     imports     : [
diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html
similarity index 92%
rename from src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
rename to src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html
index 857770c3..b4270e75 100644
--- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
+++ b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html
@@ -2,7 +2,7 @@
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-        <h2>Fullwidth</h2>
+        <h2>Full width</h2>
     </div>
     <!-- / HEADER -->
 
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss
rename to src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.scss
diff --git a/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts
new file mode 100644
index 00000000..74e45bb1
--- /dev/null
+++ b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'simple-fullwidth-1',
+    templateUrl: './full-width-1.component.html',
+    styleUrls  : ['./full-width-1.component.scss']
+})
+export class SimpleFullWidth1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts
deleted file mode 100644
index d0c7414d..00000000
--- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-fullwidth',
-    templateUrl: './fullwidth.component.html',
-    styleUrls  : ['./fullwidth.component.scss']
-})
-export class SimpleFullWidthComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html
similarity index 86%
rename from src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
rename to src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html
index 4020d025..15f928df 100644
--- a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav" fusePerfectScrollbar>
+<div class="page-layout simple left-sidenav">
 
     <mat-sidenav-container>
 
@@ -6,7 +6,7 @@
         <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">
 
-            <div class="sidenav-content p-24" fusePerfectScrollbar>
+            <div class="sidenav-content p-24">
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -16,7 +16,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center" fusePerfectScrollbar>
+        <div class="center">
 
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss
rename to src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts
new file mode 100644
index 00000000..5a1a9bfe
--- /dev/null
+++ b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'simple-left-sidenav-1',
+    templateUrl: './left-sidenav-1.component.html',
+    styleUrls  : ['./left-sidenav-1.component.scss']
+})
+export class SimpleLeftSidenav1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
index bc6a8ff9..5c4b6a07 100644
--- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
@@ -1,12 +1,16 @@
-<div class="page-layout simple left-sidenav single-scroll" fusePerfectScrollbar>
+<div class="page-layout simple left-sidenav inner-scroll">
 
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav  p-24" position="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </mat-sidenav>
         <!-- / SIDENAV -->
@@ -24,7 +28,7 @@
                 </button>
 
                 <div>
-                    <h2>Left sidenav with container scroll</h2>
+                    <h2>Left sidenav with inner scroll</h2>
                 </div>
 
             </div>
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
index d2afe5d2..23434a82 100644
--- a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
+++ b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
+<div class="page-layout simple left-sidenav inner-sidenav inner-scroll">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@@ -10,7 +10,7 @@
         </button>
 
         <div>
-            <h2>Left inner sidenav with content scroll</h2>
+            <h2>Left inner sidenav with inner scroll</h2>
         </div>
 
     </div>
diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts
deleted file mode 100644
index 682b638a..00000000
--- a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-left-sidenav',
-    templateUrl: './left-sidenav.component.html',
-    styleUrls  : ['./left-sidenav.component.scss']
-})
-export class SimpleLeftSidenavComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
rename to src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts
new file mode 100644
index 00000000..c022174f
--- /dev/null
+++ b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'simple-right-sidenav-1',
+    templateUrl: './right-sidenav-1.component.html',
+    styleUrls  : ['./right-sidenav-1.component.scss']
+})
+export class SimpleRightSidenav1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
index e4454157..ddc677d5 100644
--- a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout simple right-sidenav single-scroll" fusePerfectScrollbar>
+<div class="page-layout simple right-sidenav inner-scroll">
 
     <mat-sidenav-container>
 
@@ -15,7 +15,7 @@
                 </button>
 
                 <div>
-                    <h2>Right sidenav with container scroll</h2>
+                    <h2>Right sidenav with inner scroll</h2>
                 </div>
 
             </div>
@@ -33,10 +33,14 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav  p-24" position="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </mat-sidenav>
         <!-- / SIDENAV -->
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
index 07c94ab6..47d8d815 100644
--- a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
+++ b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout simple right-sidenav inner-sidenav" fusePerfectScrollbar>
+<div class="page-layout simple right-sidenav inner-sidenav inner-scroll">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts
deleted file mode 100644
index bd3ab81d..00000000
--- a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-right-sidenav',
-    templateUrl: './right-sidenav.component.html',
-    styleUrls  : ['./right-sidenav.component.scss']
-})
-export class SimpleRightSidenavComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.html
similarity index 100%
rename from src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
rename to src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.html
diff --git a/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts
new file mode 100644
index 00000000..f5039dde
--- /dev/null
+++ b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'tabbed-1',
+    templateUrl: './tabbed-1.component.html',
+    styleUrls  : ['./tabbed-1.component.scss']
+})
+export class Tabbed1Component
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts
deleted file mode 100644
index 6e01380f..00000000
--- a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'tabbed',
-    templateUrl: './tabbed.component.html',
-    styleUrls  : ['./tabbed.component.scss']
-})
-export class TabbedComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}
diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index bfd12d41..2ff178f0 100644
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -402,70 +402,82 @@ export const navigation: FuseNavigation[] = [
                         title   : 'Carded',
                         type    : 'collapse',
                         badge   : {
-                            title: '10',
+                            title: '12',
                             bg   : '#525e8a',
                             fg   : '#FFFFFF'
                         },
                         children: [
                             {
-                                id   : 'full-width',
-                                title: 'Full Width',
+                                id   : 'full-width-1',
+                                title: 'Full Width #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/full-width'
+                                url  : '/ui/page-layouts/carded/full-width-1'
                             },
                             {
                                 id   : 'full-width-2',
-                                title: 'Full Width 2',
+                                title: 'Full Width #2',
                                 type : 'item',
                                 url  : '/ui/page-layouts/carded/full-width-2'
                             },
                             {
-                                id   : 'left-sidenav',
-                                title: 'Left Sidenav',
+                                id   : 'full-width-tabbed-1',
+                                title: 'Full Width Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav'
+                                url  : '/ui/page-layouts/carded/full-width-tabbed-1'
                             },
                             {
-                                id   : 'left-sidenav-tabbed',
-                                title: 'Left Sidenav Tabbed',
+                                id   : 'full-width-tabbed-2',
+                                title: 'Full Width Tabbed #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-tabbed'
+                                url  : '/ui/page-layouts/carded/full-width-tabbed-2'
+                            },
+                            {
+                                id   : 'left-sidenav-1',
+                                title: 'Left Sidenav #1',
+                                type : 'item',
+                                url  : '/ui/page-layouts/carded/left-sidenav-1'
                             },
                             {
                                 id   : 'left-sidenav-2',
-                                title: 'Left Sidenav 2',
+                                title: 'Left Sidenav #2',
                                 type : 'item',
                                 url  : '/ui/page-layouts/carded/left-sidenav-2'
                             },
                             {
-                                id   : 'left-sidenav-2-tabbed',
-                                title: 'Left Sidenav 2 Tabbed',
+                                id   : 'left-sidenav-tabbed-1',
+                                title: 'Left Sidenav Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
+                                url  : '/ui/page-layouts/carded/left-sidenav-tabbed-1'
                             },
                             {
-                                id   : 'right-sidenav',
-                                title: 'Right Sidenav',
+                                id   : 'left-sidenav-tabbed-2',
+                                title: 'Left Sidenav Tabbed #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav'
+                                url  : '/ui/page-layouts/carded/left-sidenav-tabbed-2'
                             },
                             {
-                                id   : 'right-sidenav-tabbed',
-                                title: 'Right Sidenav Tabbed',
+                                id   : 'right-sidenav-1',
+                                title: 'Right Sidenav #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-tabbed'
+                                url  : '/ui/page-layouts/carded/right-sidenav-1'
                             },
                             {
                                 id   : 'right-sidenav-2',
-                                title: 'Right Sidenav 2',
+                                title: 'Right Sidenav #2',
                                 type : 'item',
                                 url  : '/ui/page-layouts/carded/right-sidenav-2'
                             },
                             {
-                                id   : 'right-sidenav-2-tabbed',
-                                title: 'Right Sidenav 2 Tabbed',
+                                id   : 'right-sidenav-tabbed-1',
+                                title: 'Right Sidenav Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
+                                url  : '/ui/page-layouts/carded/right-sidenav-tabbed-1'
+                            },
+                            {
+                                id   : 'right-sidenav-tabbed-2',
+                                title: 'Right Sidenav Tabbed #2',
+                                type : 'item',
+                                url  : '/ui/page-layouts/carded/right-sidenav-tabbed-2'
                             }
                         ]
                     },
@@ -480,52 +492,52 @@ export const navigation: FuseNavigation[] = [
                         },
                         children: [
                             {
-                                id   : 'full-width',
-                                title: 'Full Width',
+                                id   : 'full-width-1',
+                                title: 'Full Width #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/full-width'
+                                url  : '/ui/page-layouts/simple/full-width-1'
                             },
                             {
-                                id   : 'left-sidenav',
-                                title: 'Left Sidenav',
+                                id   : 'left-sidenav-1',
+                                title: 'Left Sidenav #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/left-sidenav'
+                                url  : '/ui/page-layouts/simple/left-sidenav-1'
                             },
                             {
                                 id   : 'left-sidenav-2',
-                                title: 'Left Sidenav 2',
+                                title: 'Left Sidenav #2',
                                 type : 'item',
                                 url  : '/ui/page-layouts/simple/left-sidenav-2'
                             },
                             {
                                 id   : 'left-sidenav-3',
-                                title: 'Left Sidenav 3',
+                                title: 'Left Sidenav #3',
                                 type : 'item',
                                 url  : '/ui/page-layouts/simple/left-sidenav-3'
                             },
                             {
-                                id   : 'right-sidenav',
-                                title: 'Right Sidenav',
+                                id   : 'right-sidenav-1',
+                                title: 'Right Sidenav #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/right-sidenav'
+                                url  : '/ui/page-layouts/simple/right-sidenav-1'
                             },
                             {
                                 id   : 'right-sidenav-2',
-                                title: 'Right Sidenav 2',
+                                title: 'Right Sidenav #2',
                                 type : 'item',
                                 url  : '/ui/page-layouts/simple/right-sidenav-2'
                             },
                             {
                                 id   : 'right-sidenav-3',
-                                title: 'Right Sidenav 3',
+                                title: 'Right Sidenav #3',
                                 type : 'item',
                                 url  : '/ui/page-layouts/simple/right-sidenav-3'
                             },
                             {
-                                id   : 'tabbed',
-                                title: 'Tabbed',
+                                id   : 'tabbed-1',
+                                title: 'Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/tabbed'
+                                url  : '/ui/page-layouts/simple/tabbed-1'
                             }
                         ]
                     },
diff --git a/src/index.html b/src/index.html
index 534f3c25..be771e3b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -181,7 +181,7 @@
         <!-- / FUSE Splash Screen CSS -->
     </head>
 
-    <body>
+    <body class="mat-grey-100-bg">
 
         <!-- FUSE Splash Screen -->
         <fuse-splash-screen id="fuse-splash-screen">