diff --git a/docs/app/@theme/components/header/header.component.html b/docs/app/@theme/components/header/header.component.html
index 9cba97ba..67ef4c61 100644
--- a/docs/app/@theme/components/header/header.component.html
+++ b/docs/app/@theme/components/header/header.component.html
@@ -8,8 +8,10 @@
   </div>
 </div>
 <div class="section middle">
-  <nb-menu [items]="headerMenu"></nb-menu>
-  <ng-content></ng-content>
+  <div class="first-section">
+    <nb-menu [items]="headerMenu"></nb-menu>
+    <ng-content></ng-content>
+  </div>
   <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/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
index 81928094..4ec75790 100644
--- a/docs/app/@theme/components/header/header.component.scss
+++ b/docs/app/@theme/components/header/header.component.scss
@@ -24,8 +24,15 @@
 
   .section {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 0.875rem 0.5rem;
 
+    .first-section {
+      display: flex;
+      flex-direction: row;
+    }
+
     &.left {
       width: $left-section-width;
     }
@@ -65,7 +72,6 @@
   }
 
   ::ng-deep nb-menu {
-    flex: 1;
 
     .menu-items {
       display: flex;
@@ -200,6 +206,12 @@
   &.docs-page {
 
     .section {
+
+      .first-section {
+        display: flex;
+        flex-direction: row;
+      }
+
       &.left {
         align-items: center;
         padding-left: 0;
@@ -259,11 +271,9 @@
 
     @include media-breakpoint-up(lg) {
       .section.middle {
-        justify-content: space-around;
+        justify-content: space-between;
       }
       ::ng-deep nb-menu {
-        min-width: 28rem;
-
         .menu-items li {
           display: list-item;
         }
diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss
index e3d79ab8..d3469d3a 100644
--- a/docs/app/@theme/styles/themes.scss
+++ b/docs/app/@theme/styles/themes.scss
@@ -31,6 +31,8 @@ $nb-enabled-themes: (ngx-landing, ngx-landing-material, docs-page);
 $nb-themes: nb-register-theme((
   font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
 
+  link-text-decoration: none,
+
   content-width: 1440px,
   settings-col-width: 16rem,
   settings-col-margin: 1.875rem,
@@ -62,6 +64,7 @@ $nb-themes: nb-register-theme((
   header-fg: color-fg,
   header-menu-fg-active: color-active-fg,
   header-section-border-color: #f5f5f5,
+  header-font-weight: 600,
 
   header-button-border: #dce4f2,
 
@@ -130,6 +133,8 @@ $nb-themes: nb-register-theme((
 $nb-themes: nb-register-theme((
   font-family-primary: unquote('Roboto, sans-serif'),
 
+  link-text-decoration: none,
+
   shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
   header-shadow: unquote(
     '0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
@@ -156,6 +161,8 @@ $nb-themes: nb-register-theme((
   // custom
   font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
 
+  link-text-decoration: none,
+
   content-width: 1440px,
   settings-col-width: 16rem,
   settings-col-margin: 1.875rem,
diff --git a/docs/app/pages/docs/landing-docs.component.html b/docs/app/pages/docs/landing-docs.component.html
index 2f3ae215..5f3661b4 100644
--- a/docs/app/pages/docs/landing-docs.component.html
+++ b/docs/app/pages/docs/landing-docs.component.html
@@ -2,7 +2,7 @@
   <nb-layout-header fixed>
     <div class="content-center">
       <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
-        <ngx-material-theme-link></ngx-material-theme-link>
+        <ngx-material-theme-link withPopover></ngx-material-theme-link>
       </ngx-landing-header>
     </div>
   </nb-layout-header>
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
index 492fd81b..737fce2e 100644
--- 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
@@ -5,11 +5,9 @@
   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
+</ng-template>
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
index ba31ed8e..5f29cf16 100644
--- 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
@@ -1,16 +1,32 @@
-:host {
-  display: flex;
-  align-items: center;
-  padding-right: 32px;
-}
 
-a {
-  display: flex;
-  align-items: center;
-}
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
 
-i {
-  margin-right: 8px;
+@include nb-install-component() {
+  $menu-item-fg: nb-theme(color-fg-heading-light);
+  $menu-item-fg-active: nb-theme(header-menu-fg-active);
+  $header-font-weight: nb-theme(header-font-weight);
+
+  :host {
+    display: flex;
+    align-items: center;
+    padding-right: 32px;
+  }
+
+  a {
+    text-decoration: none;
+    font-weight: $header-font-weight;
+    font-size: 13px;
+    line-height: 1.5rem;
+    padding: 0.675rem 1.375rem;
+    color: $menu-item-fg;
+    display: block;
+
+    &:hover, &.active, &:focus {
+      color: $menu-item-fg-active;
+      outline: none !important;
+    }
+  }
 }
 
 .material-theme-popover {
@@ -19,4 +35,4 @@ i {
   color: #ff4d6b;
   font-weight: 600;
   font-size: 1.1rem;
-}
\ No newline at end of file
+}
diff --git a/docs/app/shared/landing-shared.module.ts b/docs/app/shared/landing-shared.module.ts
index 24d7753d..2ed3ea40 100644
--- a/docs/app/shared/landing-shared.module.ts
+++ b/docs/app/shared/landing-shared.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NbPopoverModule } from '@nebular/theme';
+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';