diff --git a/docs/app/@theme/components/header/header.component.html b/docs/app/@theme/components/header/header.component.html
index 6557ef8e..9cba97ba 100644
--- a/docs/app/@theme/components/header/header.component.html
+++ b/docs/app/@theme/components/header/header.component.html
@@ -9,6 +9,7 @@
 </div>
 <div class="section middle">
   <nb-menu [items]="headerMenu"></nb-menu>
+  <ng-content></ng-content>
   <a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
     <i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
     <span>Backend Bundles</span>
diff --git a/docs/app/@theme/theme.module.ts b/docs/app/@theme/theme.module.ts
index 8b5fd567..f001da32 100644
--- a/docs/app/@theme/theme.module.ts
+++ b/docs/app/@theme/theme.module.ts
@@ -9,6 +9,17 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
+import {
+  NbLayoutModule,
+  NbThemeModule,
+  NbMenuModule,
+  NbCheckboxModule,
+  NbCardModule,
+  NbSidebarModule,
+  NbTabsetModule,
+} from '@nebular/theme';
+
+import { LandingSharedModule } from '../shared/landing-shared.module';
 
 // components
 import {
@@ -26,21 +37,6 @@ import {
 import { ngxLandingServices } from './services';
 // services
 
-// pipes
-import { EvaIconsPipe } from './pipes/eva-icons.pipe';
-import { CapitalizePipe } from './pipes/capitalize.pipe';
-// pipes
-
-import {
-  NbLayoutModule,
-  NbThemeModule,
-  NbMenuModule,
-  NbCheckboxModule,
-  NbCardModule,
-  NbSidebarModule,
-  NbTabsetModule,
-} from '@nebular/theme';
-
 const BASE_MODULES = [
   CommonModule,
   FormsModule,
@@ -67,14 +63,10 @@ const COMPONENTS = [
   NgxDocsFooterComponent,
 ];
 
-const PIPES = [
-  EvaIconsPipe,
-  CapitalizePipe,
-];
-
 @NgModule({
   imports: [
     RouterModule,
+    LandingSharedModule,
 
     ...BASE_MODULES,
 
@@ -82,8 +74,6 @@ const PIPES = [
   ],
   declarations: [
     ...COMPONENTS,
-
-    ...PIPES,
   ],
   exports: [
     RouterModule,
@@ -93,10 +83,6 @@ const PIPES = [
     ...NB_MODULES,
 
     ...COMPONENTS,
-
-    ...PIPES,
-  ],
-  entryComponents: [
   ],
 })
 export class NgxLandingThemeModule {
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
index ffade23a..00b842bb 100644
--- a/docs/app/app.module.ts
+++ b/docs/app/app.module.ts
@@ -13,6 +13,7 @@ import { NgxLandingThemeModule } from './@theme/theme.module';
 import { CoreModule } from './@core/core.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { LandingSharedModule } from './shared/landing-shared.module';
 
 import { DOCS, STRUCTURE } from './app.options';
 const docs = require('../output.json');
@@ -28,6 +29,7 @@ import { structure  } from '../structure';
     HttpClientModule,
     AppRoutingModule,
 
+    LandingSharedModule,
     NgxLandingThemeModule.forRoot(),
     CoreModule.forRoot(),
   ],
diff --git a/docs/app/pages/docs/landing-docs.component.html b/docs/app/pages/docs/landing-docs.component.html
index e8feaa56..2f3ae215 100644
--- a/docs/app/pages/docs/landing-docs.component.html
+++ b/docs/app/pages/docs/landing-docs.component.html
@@ -1,7 +1,9 @@
 <nb-layout>
   <nb-layout-header fixed>
     <div class="content-center">
-      <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true"></ngx-landing-header>
+      <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
+        <ngx-material-theme-link></ngx-material-theme-link>
+      </ngx-landing-header>
     </div>
   </nb-layout-header>
   <nb-sidebar class="menu-sidebar" [tag]="sidebarTag" [responsive]="true" [compactedBreakpoints]="[]" [collapsedBreakpoints]="collapsedBreakpoints">
diff --git a/docs/app/pages/docs/landing-docs.module.ts b/docs/app/pages/docs/landing-docs.module.ts
index c19589e9..5211426a 100644
--- a/docs/app/pages/docs/landing-docs.module.ts
+++ b/docs/app/pages/docs/landing-docs.module.ts
@@ -11,6 +11,7 @@ import { NgxLandingThemeModule } from '../../@theme/theme.module';
 import { SwiperModule } from 'ngx-swiper-wrapper';
 import { NgxBlocksModule } from '../../blocks/blocks.module';
 import { LandingDocsRoutingModule } from './landing-docs-routing.module';
+import { LandingSharedModule } from '../../shared/landing-shared.module';
 // modules
 
 // components
@@ -32,6 +33,7 @@ const COMPONENTS = [
   imports: [
     NgxLandingThemeModule,
     SwiperModule,
+    LandingSharedModule,
     LandingDocsRoutingModule,
     NgxBlocksModule,
   ],
diff --git a/docs/app/pages/home/landing-home-routing.module.ts b/docs/app/pages/home/landing-home-routing.module.ts
index 23d00318..5a0693d0 100644
--- a/docs/app/pages/home/landing-home-routing.module.ts
+++ b/docs/app/pages/home/landing-home-routing.module.ts
@@ -7,6 +7,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LandingHomeComponent } from './landing-home.component';
+import { MaterialLandingComponent } from './material-landing/material-landing.component';
 
 
 export const routes: Routes = [
@@ -14,6 +15,10 @@ export const routes: Routes = [
     path: '',
     component: LandingHomeComponent,
   },
+  {
+    path: 'material',
+    component: MaterialLandingComponent,
+  },
 ];
 
 @NgModule({
diff --git a/docs/app/pages/home/landing-home.component.html b/docs/app/pages/home/landing-home.component.html
index 62e8c6b7..59496caa 100644
--- a/docs/app/pages/home/landing-home.component.html
+++ b/docs/app/pages/home/landing-home.component.html
@@ -1,6 +1,8 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <ngx-landing-header></ngx-landing-header>
+    <ngx-landing-header>
+      <ngx-material-theme-link withPopover></ngx-material-theme-link>
+    </ngx-landing-header>
   </nb-layout-header>
 
   <nb-layout-column>
diff --git a/docs/app/pages/home/landing-home.module.ts b/docs/app/pages/home/landing-home.module.ts
index d5f29bd0..7a4d6235 100644
--- a/docs/app/pages/home/landing-home.module.ts
+++ b/docs/app/pages/home/landing-home.module.ts
@@ -26,12 +26,15 @@ import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-l
 import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component';
 import { LicensePipe } from './backend-bundles-section/license.pipe';
 import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe';
+import { MaterialLandingComponent } from './material-landing/material-landing.component';
+import { LandingSharedModule } from '../../shared/landing-shared.module';
 // components
 
 const PIPES = [LicensePipe, BackgroundImagePipe];
 
 const COMPONENTS = [
   LandingHomeComponent,
+  MaterialLandingComponent,
   NgxLandingSectionsContainerComponent,
   MainInfoSectionComponent,
   DescriptionSectionComponent,
@@ -53,6 +56,7 @@ const COMPONENTS = [
     NgxLandingThemeModule,
     SwiperModule,
     LandingHomeRoutingModule,
+    LandingSharedModule,
   ],
   providers: [
     ...PIPES,
diff --git a/docs/app/pages/home/material-landing/material-landing.component.html b/docs/app/pages/home/material-landing/material-landing.component.html
new file mode 100644
index 00000000..e648b1a1
--- /dev/null
+++ b/docs/app/pages/home/material-landing/material-landing.component.html
@@ -0,0 +1,9 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <ngx-landing-header></ngx-landing-header>
+  </nb-layout-header>
+
+  <nb-layout-footer class="footer" fixed>
+    <ngx-landing-footer></ngx-landing-footer>
+  </nb-layout-footer>
+</nb-layout>
diff --git a/docs/app/pages/home/material-landing/material-landing.component.scss b/docs/app/pages/home/material-landing/material-landing.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/app/pages/home/material-landing/material-landing.component.ts b/docs/app/pages/home/material-landing/material-landing.component.ts
new file mode 100644
index 00000000..1e2e1367
--- /dev/null
+++ b/docs/app/pages/home/material-landing/material-landing.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-landing',
+  templateUrl: './material-landing.component.html',
+  styleUrls: [
+    './material-landing.component.scss',
+    '../landing-home.component.scss'
+  ]
+})
+export class MaterialLandingComponent {}
\ No newline at end of file
diff --git a/docs/app/pages/home/theme-section/theme-section.component.html b/docs/app/pages/home/theme-section/theme-section.component.html
index d393a937..2b8c87e9 100644
--- a/docs/app/pages/home/theme-section/theme-section.component.html
+++ b/docs/app/pages/home/theme-section/theme-section.component.html
@@ -7,7 +7,7 @@
         [swiper]="swiperConfig"
         [(index)]="sliderIndex">
     <div class="swiper-wrapper">
-      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+      <a href="https://hubs.ly/todo" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
             data-src="assets/img/material-light-theme.png"
             class="swiper-lazy"
@@ -17,15 +17,15 @@
             defaultImage="assets/img/default.png"
             alt="Material Light Theme" />
       </a>
-      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+      <a href="https://hubs.ly/todo" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
             data-src="assets/img/material-dark-theme.png"
             class="swiper-lazy"
             alt="Material Dark Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
             lazyLoad="assets/img/material-dark-theme.png"
-            alt="Material Dark Theme"
-            defaultImage="assets/img/default.png" />
+            defaultImage="assets/img/default.png"
+            alt="Material Dark Theme" />
       </a>
       <a href="https://hubs.ly/H0n54_z0" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.html b/docs/app/shared/components/material-theme-link/material-theme-link.component.html
new file mode 100644
index 00000000..492fd81b
--- /dev/null
+++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.html
@@ -0,0 +1,15 @@
+<a
+  routerLink="/material"
+  class="eva-parent-hover"
+  [nbPopover]="popoverContent"
+  nbPopoverPlacement="bottom"
+  nbPopoverTrigger="noop"
+>
+  <i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
+  ></i>
+  Material Theme
+</a>
+
+<ng-template #popoverContent>
+  <p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>
+</ng-template>
\ No newline at end of file
diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.scss b/docs/app/shared/components/material-theme-link/material-theme-link.component.scss
new file mode 100644
index 00000000..ba31ed8e
--- /dev/null
+++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.scss
@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  align-items: center;
+  padding-right: 32px;
+}
+
+a {
+  display: flex;
+  align-items: center;
+}
+
+i {
+  margin-right: 8px;
+}
+
+.material-theme-popover {
+  margin: 0;
+  padding: 1rem 2rem;
+  color: #ff4d6b;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
\ No newline at end of file
diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.ts b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts
new file mode 100644
index 00000000..6579be6b
--- /dev/null
+++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts
@@ -0,0 +1,26 @@
+import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NbPopoverDirective } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-material-theme-link',
+  templateUrl: './material-theme-link.component.html',
+  styleUrls: ['./material-theme-link.component.scss'],
+})
+export class MaterialThemeLinkComponent implements AfterViewInit {
+  public showPopover: boolean = false;
+
+  @Input() public set withPopover(value: any) {
+    this.showPopover = coerceBooleanProperty(value);
+  }
+
+  @ViewChild(NbPopoverDirective, { static: true }) public popover: NbPopoverDirective;
+
+  public ngAfterViewInit(): void {
+    this.showPopover && this.popover && this.popover.show();
+  }
+
+  public hidePopover(): void {
+    this.popover && this.popover.hide();
+  }
+}
\ No newline at end of file
diff --git a/docs/app/shared/landing-shared.module.ts b/docs/app/shared/landing-shared.module.ts
new file mode 100644
index 00000000..c10bc7d8
--- /dev/null
+++ b/docs/app/shared/landing-shared.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { NbPopoverModule } from '@nebular/theme';
+import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
+import { CapitalizePipe } from './pipes/capitalize.pipe';
+import { EvaIconsPipe } from './pipes/eva-icons.pipe';
+import { RouterModule } from '@angular/router';
+
+const component = [MaterialThemeLinkComponent];
+const pipes = [CapitalizePipe, EvaIconsPipe];
+
+@NgModule({
+  imports: [RouterModule, NbPopoverModule],
+  declarations: [...component, ...pipes],
+  exports: [NbPopoverModule, ...component, ...pipes],
+})
+export class LandingSharedModule {}
\ No newline at end of file
diff --git a/docs/app/@theme/pipes/capitalize.pipe.ts b/docs/app/shared/pipes/capitalize.pipe.ts
similarity index 100%
rename from docs/app/@theme/pipes/capitalize.pipe.ts
rename to docs/app/shared/pipes/capitalize.pipe.ts
diff --git a/docs/app/@theme/pipes/eva-icons.pipe.ts b/docs/app/shared/pipes/eva-icons.pipe.ts
similarity index 100%
rename from docs/app/@theme/pipes/eva-icons.pipe.ts
rename to docs/app/shared/pipes/eva-icons.pipe.ts