diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index a060d5df..5d1b0cc9 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -18,7 +18,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
         right: 0;
         left: 0;
         height: $header-height;
-        background-color: mat-color($accent);
     }
 
     // Carded layout
@@ -62,7 +61,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     height: $card-header-height;
                     min-height: $card-header-height;
                     max-height: $card-header-height;
-                    padding: 24px;
                 }
 
                 .content-card {
@@ -77,7 +75,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
-                        padding: 8px 24px;
                         height: $card-toolbar-height;
                         min-height: $card-toolbar-height;
                         max-height: $card-toolbar-height;
@@ -87,7 +84,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     .content {
                         display: flex;
                         flex: 1;
-                        padding: 24px;
                         background: #FFFFFF;
                         overflow: auto;
                     }
@@ -137,12 +133,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         height: $header-height;
                         min-height: $header-height;
                         max-height: $header-height;
-                        padding: 24px;
                     }
 
                     .content {
                         background: transparent;
-                        padding: 24px;
                         overflow: auto;
                     }
                 }
@@ -167,7 +161,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                             height: $card-header-height;
                             min-height: $card-header-height;
                             max-height: $card-header-height;
-                            padding: 24px;
                         }
 
                         .content-card {
@@ -183,7 +176,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                                 justify-content: flex-start;
                                 align-items: center;
                                 flex: 1;
-                                padding: 8px 24px;
                                 height: $card-toolbar-height;
                                 min-height: $card-toolbar-height;
                                 max-height: $card-toolbar-height;
@@ -199,7 +191,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                             .content {
                                 display: flex;
                                 flex: 1;
-                                padding: 24px;
                                 background: #FFFFFF;
                                 overflow: auto;
                             }
@@ -267,12 +258,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                 height: $header-height;
                 min-height: $header-height;
                 max-height: $header-height;
-                padding: 24px;
-                background-color: mat-color($accent);
-            }
-
-            > .content {
-                padding: 24px;
             }
         }
 
@@ -300,7 +285,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     width: 240px;
                     min-width: 240px;
                     max-width: 240px;
-                    padding: 24px;
                     z-index: 51;
                     @include mat-elevation(7);
 
@@ -327,8 +311,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         height: $header-height;
                         min-height: $header-height;
                         max-height: $header-height;
-                        padding: 24px;
-                        background-color: mat-color($accent);
                     }
 
                     .center {
@@ -336,7 +318,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         @include mat-elevation(7);
 
                         .content {
-                            padding: 24px;
                             background: #FFFFFF;
                         }
                     }
@@ -352,8 +333,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                 height: $header-height;
                 min-height: $header-height;
                 max-height: $header-height;
-                padding: 24px;
-                background-color: mat-color($accent);
             }
 
             > .content {
@@ -363,10 +342,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     .mat-tab-labels {
                         padding: 0 24px;
                     }
-
-                    .mat-tab-body {
-                        padding: 24px;
-                    }
                 }
             }
         }
@@ -375,6 +350,5 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
     // Blank layout
     &.blank {
         min-height: 100%;
-        padding: 24px;
     }
 }
diff --git a/src/app/main/apps/calendar/calendar.component.scss b/src/app/main/apps/calendar/calendar.component.scss
index 6e0d17bf..66db6bb8 100644
--- a/src/app/main/apps/calendar/calendar.component.scss
+++ b/src/app/main/apps/calendar/calendar.component.scss
@@ -189,7 +189,6 @@
         background-repeat: no-repeat;
         background-color: #FAFAFA;
         color: #FFFFFF;
-        padding-bottom: 16px;
 
         &:before {
             content: '';
diff --git a/src/app/main/apps/chat/chat.component.scss b/src/app/main/apps/chat/chat.component.scss
index 9f6a3c33..140cf282 100644
--- a/src/app/main/apps/chat/chat.component.scss
+++ b/src/app/main/apps/chat/chat.component.scss
@@ -2,7 +2,7 @@
     height: 100% !important;
 
     .center {
-        padding: 32px 32px 0 32px;
+        padding: 32px 0;
         max-width: 1400px;
         height: 100%;
         margin: 0 auto;
diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html
index 3438a645..4d92c093 100644
--- a/src/app/main/apps/mail/mail.component.html
+++ b/src/app/main/apps/mail/mail.component.html
@@ -40,7 +40,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
 
                     <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
                                  [indeterminate]="isIndeterminate"></md-checkbox>
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss
index b3d82494..a9cb0461 100644
--- a/src/app/main/apps/mail/mail.component.scss
+++ b/src/app/main/apps/mail/mail.component.scss
@@ -7,7 +7,6 @@
     .center {
 
         .header {
-            padding: 0 !important;
 
             .search-wrapper {
                 @include mat-elevation(7);
@@ -38,16 +37,6 @@
                 }
             }
         }
-
-        .content-card {
-
-            .toolbar {
-            }
-
-            .content {
-                padding: 0 !important;
-            }
-        }
     }
 }
 
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
index 2d0aaf5b..040b3808 100644
--- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -1,5 +1,5 @@
 <!-- SIDENAV HEADER -->
-<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
+<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <md-icon class="logo-icon">mail</md-icon>
         <span class="logo-text">Mailbox</span>
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
index 4e646178..0c805a2e 100644
--- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
+++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
@@ -19,12 +19,6 @@
 
         .account {
             width: 100%;
-            .account-selection {
-            }
         }
     }
-
-    .content {
-        padding: 0 !important;
-    }
 }
diff --git a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
index b2969663..a7e8448e 100644
--- a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
@@ -1,5 +1,5 @@
 <!-- SIDENAV HEADER -->
-<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
+<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <md-icon class="logo-icon">check_box</md-icon>
         <span class="logo-text">To-do</span>
diff --git a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss
index b3a7e55f..9e478aac 100644
--- a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss
+++ b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss
@@ -25,7 +25,6 @@
     }
 
     .content {
-        padding: 0 !important;
 
         .add-todo-button {
             width: 100%;
diff --git a/src/app/main/apps/todo/todo.component.html b/src/app/main/apps/todo/todo.component.html
index dd6eb1a7..d2bf6100 100644
--- a/src/app/main/apps/todo/todo.component.html
+++ b/src/app/main/apps/todo/todo.component.html
@@ -40,7 +40,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
 
                     <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
                                  [indeterminate]="isIndeterminate"></md-checkbox>
diff --git a/src/app/main/apps/todo/todo.component.scss b/src/app/main/apps/todo/todo.component.scss
index b3d82494..a9cb0461 100644
--- a/src/app/main/apps/todo/todo.component.scss
+++ b/src/app/main/apps/todo/todo.component.scss
@@ -7,7 +7,6 @@
     .center {
 
         .header {
-            padding: 0 !important;
 
             .search-wrapper {
                 @include mat-elevation(7);
@@ -38,16 +37,6 @@
                 }
             }
         }
-
-        .content-card {
-
-            .toolbar {
-            }
-
-            .content {
-                padding: 0 !important;
-            }
-        }
     }
 }
 
diff --git a/src/app/main/pages/profile/profile.component.html b/src/app/main/pages/profile/profile.component.html
index 0bcae18c..8681ba64 100644
--- a/src/app/main/pages/profile/profile.component.html
+++ b/src/app/main/pages/profile/profile.component.html
@@ -1,7 +1,7 @@
 <div id="profile" class="page-layout simple tabbed">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
+    <div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
          fxLayoutAlign.gt-sm="space-between end">
 
         <div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
diff --git a/src/app/main/pages/profile/tabs/about/about.component.html b/src/app/main/pages/profile/tabs/about/about.component.html
index 4d3880e0..7c9f7404 100644
--- a/src/app/main/pages/profile/tabs/about/about.component.html
+++ b/src/app/main/pages/profile/tabs/about/about.component.html
@@ -1,6 +1,6 @@
-<div id="about" fxLayout="row" fxLayoutWrap>
+<div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="about" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
+    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
 
         <div class="profile-box info-box general" fxLayout="column">
 
diff --git a/src/app/main/pages/profile/tabs/about/about.component.scss b/src/app/main/pages/profile/tabs/about/about.component.scss
index 011f40d9..eabcfbf6 100644
--- a/src/app/main/pages/profile/tabs/about/about.component.scss
+++ b/src/app/main/pages/profile/tabs/about/about.component.scss
@@ -5,8 +5,7 @@
     #about {
         max-width: 1200px;
 
-        .about {
-            padding: 8px;
+        .about-content {
 
             .general {
 
@@ -35,7 +34,7 @@
         }
 
         .about-sidebar {
-            padding: 8px 8px 8px 32px;
+            padding-left: 32px;
 
             @include media-breakpoint('sm') {
                 padding: 8px
diff --git a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html
index db4b2d40..59148e23 100644
--- a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html
+++ b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html
@@ -1,4 +1,4 @@
-<div id="photos-videos">
+<div id="photos-videos" class="p-24">
     <div class="period" *ngFor="let period of photosVideos">
         <div class="period-title">
             <span class="name">{{period.name}}</span>
diff --git a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss
index b8beffbd..5691b548 100644
--- a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss
+++ b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss
@@ -3,7 +3,6 @@
 :host {
 
     #photos-videos {
-        padding: 8px;
 
         .period {
 
diff --git a/src/app/main/pages/profile/tabs/timeline/timeline.component.html b/src/app/main/pages/profile/tabs/timeline/timeline.component.html
index 9a476895..95060737 100644
--- a/src/app/main/pages/profile/tabs/timeline/timeline.component.html
+++ b/src/app/main/pages/profile/tabs/timeline/timeline.component.html
@@ -1,6 +1,6 @@
-<div id="timeline" fxLayout="row" fxLayoutWrap>
+<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="timeline" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
+    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
          fxFlexOrder.gt-sm="1">
 
         <div class="profile-box add-post">
diff --git a/src/app/main/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/pages/profile/tabs/timeline/timeline.component.scss
index 95bff062..448e4a20 100644
--- a/src/app/main/pages/profile/tabs/timeline/timeline.component.scss
+++ b/src/app/main/pages/profile/tabs/timeline/timeline.component.scss
@@ -5,8 +5,7 @@
     #timeline {
         max-width: 1200px;
 
-        .timeline {
-            padding: 8px;
+        .timeline-content {
 
             .add-post {
                 margin-bottom: 0;
@@ -217,7 +216,7 @@
         }
 
         .timeline-sidebar {
-            padding: 8px 8px 8px 32px;
+            padding-left: 32px;
 
             @include media-breakpoint('sm') {
                 padding: 8px
diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html
index 62ab632a..8da645ce 100644
--- a/src/app/main/ui/colors/colors.component.html
+++ b/src/app/main/ui/colors/colors.component.html
@@ -1,7 +1,7 @@
 <div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header p-24" fxLayout="row" fxLayoutAlign="space-between center">
         <h1 class="title">Material Colors</h1>
 
         <a md-raised-button class="reference-button"
diff --git a/src/app/main/ui/page-layouts/blank/blank.component.html b/src/app/main/ui/page-layouts/blank/blank.component.html
index 55a76587..ac9651b7 100644
--- a/src/app/main/ui/page-layouts/blank/blank.component.html
+++ b/src/app/main/ui/page-layouts/blank/blank.component.html
@@ -1,4 +1,4 @@
-<div class="page-layout blank">
+<div class="page-layout blank p-24">
 
     <h2>Blank Page</h2>
 
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
index b057cab9..b20513ef 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
+++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header">
+        <div class="header p-24">
             <h2>Fullwidth with page scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
@@ -17,13 +17,13 @@
         <div class="content-card">
 
             <!-- CONTENT TOOLBAR -->
-            <div class="toolbar">
+            <div class="toolbar px-24 py-8">
                 <span>Content toolbar</span>
             </div>
             <!-- / CONTENT TOOLBAR -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content p-24">
 
                 <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
index 4587aef1..4932e962 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
+++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
@@ -1,15 +1,16 @@
 <div class="page-layout carded fullwidth">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <!-- CENTER -->
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header">
+        <div class="header md-accent-bg p-24">
             <h2>Fullwidth with content scroll</h2>
+            <button md-raised-button>test</button>
         </div>
         <!-- / CONTENT HEADER -->
 
@@ -17,13 +18,13 @@
         <div class="content-card">
 
             <!-- CONTENT TOOLBAR -->
-            <div class="toolbar">
+            <div class="toolbar px-24 py-8">
                 <span>Content toolbar</span>
             </div>
             <!-- / CONTENT TOOLBAR -->
 
             <!-- CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content p-24" perfect-scrollbar>
 
                 <fuse-demo-content></fuse-demo-content>
 
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 4724141b..0021af6a 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
@@ -11,13 +11,13 @@
                     fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header">
-                <span>Sidenav header</span>
+            <div class="header p-24">
+                <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content p-24" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header">
+            <div class="header p-24">
                 <h2>Left sidenav with page scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -38,7 +38,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
                     <button md-button class="mat-icon-button sidenav-toggle"
                             fuseMdSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
@@ -50,7 +50,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content" perfect-scrollbar>
+                <div class="content p-24" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
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/left-sidenav.component.html
index c4351a01..3e39f3f0 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/left-sidenav.component.html
@@ -11,13 +11,13 @@
                     fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header">
-                <span>Sidenav header</span>
+            <div class="header p-24">
+                <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content p-24" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header">
+            <div class="header p-24">
                 <h2>Left sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -38,7 +38,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
                     <button md-button class="mat-icon-button sidenav-toggle"
                             fuseMdSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
@@ -50,7 +50,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content" perfect-scrollbar>
+                <div class="content p-24" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
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 c0415cb1..7c57fd9f 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
@@ -11,13 +11,13 @@
                     fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header">
-                <span>Sidenav header</span>
+            <div class="header p-24">
+                <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content p-24" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header">
+            <div class="header p-24">
                 <h2>Right sidenav with page scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -38,7 +38,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
                     <button md-button class="mat-icon-button sidenav-toggle"
                             fuseMdSidenavToggler="carded-right-sidenav"
                             fxHide.gt-md>
@@ -50,7 +50,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content" perfect-scrollbar>
+                <div class="content p-24" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
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/right-sidenav.component.html
index 761e8111..9d2bedfa 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/right-sidenav.component.html
@@ -11,13 +11,13 @@
                     fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header">
-                <span>Sidenav header</span>
+            <div class="header p-24">
+                <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content p-24" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header">
+            <div class="header p-24">
                 <h2>Right sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -38,7 +38,7 @@
             <div class="content-card">
 
                 <!-- CONTENT TOOLBAR -->
-                <div class="toolbar">
+                <div class="toolbar px-24 py-8">
                     <button md-button class="mat-icon-button sidenav-toggle"
                             fuseMdSidenavToggler="carded-right-sidenav"
                             fxHide.gt-md>
@@ -50,7 +50,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content" perfect-scrollbar>
+                <div class="content p-24" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
index 2e8a7fd2..c0c8f050 100644
--- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
+++ b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
@@ -1,13 +1,13 @@
 <div class="page-layout simple fullwidth">
 
     <!-- HEADER -->
-    <div class="header">
+    <div class="header p-24">
         <h2>Fullwidth</h2>
     </div>
     <!-- / HEADER -->
 
     <!-- CONTENT -->
-    <div class="content">
+    <div class="content p-24">
 
         <fuse-demo-content></fuse-demo-content>
 
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 3b7f8a24..3725f8f9 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
@@ -3,7 +3,7 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav-2" md-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>
@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header" fxLayout="row">
+            <div class="header p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav-2"
@@ -31,7 +31,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content p-24">
 
                 <fuse-demo-content></fuse-demo-content>
 
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/left-sidenav.component.html
index d0e60e12..6cbe34e0 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/left-sidenav.component.html
@@ -3,7 +3,7 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>
@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header" fxLayout="row">
+            <div class="header p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav"
@@ -31,7 +31,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content p-24">
 
                 <fuse-demo-content></fuse-demo-content>
 
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 a66c4d91..5f7133e1 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
@@ -3,7 +3,7 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-right-sidenav-2" md-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>
@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header" fxLayout="row">
+            <div class="header p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav-2"
@@ -31,7 +31,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content p-24">
 
                 <fuse-demo-content></fuse-demo-content>
 
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/right-sidenav.component.html
index b830afa0..0b718295 100644
--- a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
@@ -3,7 +3,7 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>
@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header" fxLayout="row">
+            <div class="header p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav"
@@ -31,7 +31,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content p-24">
 
                 <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
index 28b5b1f9..82cab8f7 100644
--- a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
+++ b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
@@ -1,7 +1,7 @@
 <div class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header">
+    <div class="header p-24">
         <h2>Tabbed</h2>
     </div>
     <!-- / HEADER -->
@@ -12,15 +12,21 @@
         <md-tab-group md-dynamic-height="true">
 
             <md-tab label="Tab 1">
-                <fuse-demo-content></fuse-demo-content>
+                <div class="p-24">
+                    <fuse-demo-content></fuse-demo-content>
+                </div>
             </md-tab>
 
             <md-tab label="Tab 2">
-                <fuse-demo-content></fuse-demo-content>
+                <div class="p-24">
+                    <fuse-demo-content></fuse-demo-content>
+                </div>
             </md-tab>
 
             <md-tab label="Tab 3">
-                <fuse-demo-content></fuse-demo-content>
+                <div class="p-24">
+                    <fuse-demo-content></fuse-demo-content>
+                </div>
             </md-tab>
 
         </md-tab-group>