diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
new file mode 100644
index 00000000..1e0cd2e8
--- /dev/null
+++ b/src/app/@theme/components/header/header.component.html
@@ -0,0 +1,30 @@
+<div class="header-container"
+     [class.left]="position === 'normal'"
+     [class.right]="position === 'inverse'">
+  <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
+  <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
+  <label class="theme-switch">
+    <span class="light">Light</span>
+    <div class="switch">
+      <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
+      <span class="slider"></span>
+    </div>
+    <span class="cosmic">Cosmic</span>
+  </label>
+</div>
+
+<nb-actions
+  size="medium"
+  class="header-container"
+  [class.right]="position === 'normal'"
+  [class.left]="position === 'inverse'">
+  <nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
+  <nb-action>
+    <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
+  </nb-action>
+  <nb-action disabled icon="nb-notifications"></nb-action>
+  <nb-action icon="nb-email"></nb-action>
+  <nb-action>
+    <nb-search type="rotate-layout"></nb-search>
+  </nb-action>
+</nb-actions>
diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 3df2a9bc..9e7ae689 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -34,83 +34,83 @@
         font-weight: nb-theme(font-weight-normal);
       }
     }
+  }
 
-    .theme-switch {
-      margin: 0 6rem;
-      width: 12rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      cursor: pointer;
+  .theme-switch {
+    margin: 0 6rem;
+    width: 12rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
 
-      & > span {
-        font-size: 1.125rem;
-        font-weight: nb-theme(font-weight-bold);
-        transition: opacity 0.3s ease;
+    & > span {
+      font-size: 1.125rem;
+      font-weight: nb-theme(font-weight-bold);
+      transition: opacity 0.3s ease;
 
+      &.light {
+        color: nb-theme(color-fg-text);
+      }
+
+      &.cosmic {
+        color: nb-theme(color-fg);
+      }
+
+      @include nb-for-theme(cosmic) {
         &.light {
-          color: nb-theme(color-fg-text);
-        }
-
-        &.cosmic {
           color: nb-theme(color-fg);
         }
 
-        @include nb-for-theme(cosmic) {
-          &.light {
-            color: nb-theme(color-fg);
-          }
-
-          &.cosmic {
-            color: nb-theme(color-white);
-          }
+        &.cosmic {
+          color: nb-theme(color-white);
         }
+      }
 
-        &:active {
-          opacity: 0.78;
-        }
+      &:active {
+        opacity: 0.78;
+      }
+    }
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 4rem;
+    height: 1.75rem;
+    margin: 0;
+
+    input {
+      display: none;
+
+      &:checked + .slider::before {
+        transform: translateX(2.25rem);
       }
     }
 
-    .switch {
-      position: relative;
-      display: inline-block;
-      width: 4rem;
+    .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 1.75rem;
+      background-color: nb-theme(layout-bg);
+    }
+
+    .slider::before {
+      position: absolute;
+      content: '';
       height: 1.75rem;
-      margin: 0;
+      width: 1.75rem;
+      border-radius: 50%;
+      background-color: nb-theme(color-success);
+      transition: 0.2s;
 
-      input {
-        display: none;
+      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
 
-        &:checked + .slider::before {
-          transform: translateX(2.25rem);
-        }
-      }
-
-      .slider {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 1.75rem;
-        background-color: nb-theme(layout-bg);
-      }
-
-      .slider::before {
-        position: absolute;
-        content: '';
-        height: 1.75rem;
-        width: 1.75rem;
-        border-radius: 50%;
-        background-color: nb-theme(color-success);
-        transition: 0.2s;
-
-        box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-
-        @include nb-for-theme(cosmic) {
-          @include btn-hero-primary-gradient();
-        }
+      @include nb-for-theme(cosmic) {
+        @include btn-hero-primary-gradient();
       }
     }
   }
diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts
index 1a97956d..993de1fd 100644
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@@ -6,36 +6,7 @@ import { UserService } from '../../../@core/data/users.service';
 @Component({
   selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
-  template: `
-    <div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
-      <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
-      <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
-      <label class="theme-switch">
-        <span class="light">Light</span>
-        <div class="switch">
-          <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
-          <span class="slider"></span>
-        </div>
-        <span class="cosmic">Cosmic</span>
-      </label>
-    </div>
-
-    <nb-actions
-      size="medium"
-      class="header-container"
-      [class.right]="position === 'normal'"
-      [class.left]="position === 'inverse'">
-      <nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
-      <nb-action>
-        <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
-      </nb-action>
-      <nb-action disabled icon="ion-ios-bell-outline"></nb-action>
-      <nb-action icon="ion-ios-email-outline"></nb-action>
-      <nb-action>
-        <nb-search type="rotate-layout"></nb-search>
-      </nb-action>
-    </nb-actions>
-  `,
+  templateUrl: './header.component.html',
 })
 export class HeaderComponent implements OnInit {
 
@@ -44,14 +15,7 @@ export class HeaderComponent implements OnInit {
 
   user: any;
 
-  userMenu = [
-    {
-      title: 'Profile',
-    },
-    {
-      title: 'Log out',
-    },
-  ];
+  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
 
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.scss b/src/app/@theme/components/theme-settings/theme-settings.component.scss
index aecd6596..4db74821 100644
--- a/src/app/@theme/components/theme-settings/theme-settings.component.scss
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss
@@ -1,8 +1,8 @@
 @import '../../styles/themes';
 
 @include nb-install-component() {
-  h5 {
-    margin-bottom: 1rem;
+  h6 {
+    margin-bottom: 0.5rem;
   }
 
   .settings-row {
@@ -13,7 +13,7 @@
     flex-wrap: wrap;
 
     width: 90%;
-    margin: 0 auto 2rem;
+    margin: 0 0 1rem;
 
     a {
       text-decoration: none;
diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.ts b/src/app/@theme/components/theme-settings/theme-settings.component.ts
index 60694d97..9cd60fed 100644
--- a/src/app/@theme/components/theme-settings/theme-settings.component.ts
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts
@@ -6,7 +6,7 @@ import { StateService } from '../../../@core/data/state.service';
   selector: 'ngx-theme-settings',
   styleUrls: ['./theme-settings.component.scss'],
   template: `
-    <h5>LAYOUTS</h5>
+    <h6>LAYOUTS</h6>
     <div class="settings-row">
       <a *ngFor="let layout of layouts"
          href="#"
@@ -16,7 +16,7 @@ import { StateService } from '../../../@core/data/state.service';
         <i [attr.class]="layout.icon"></i>
       </a>
     </div>
-    <h5>SIDEBAR</h5>
+    <h6>SIDEBAR</h6>
     <div class="settings-row">
       <a *ngFor="let sidebar of sidebars"
          href="#"