diff --git a/angular.json b/angular.json
index 3040e15d4e..831f7d1ffd 100644
--- a/angular.json
+++ b/angular.json
@@ -257,7 +257,8 @@
               "docs/404.html",
               "docs/favicon.ico",
               "docs/favicon.png",
-              "docs/google46533d2e7a851062.html"
+              "docs/google46533d2e7a851062.html",
+              { "glob": "versions.json", "input": "docs/", "output": "/" }
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
index ccaf933145..f2d8c65282 100644
--- a/docs/app/@theme/components/header/header.component.scss
+++ b/docs/app/@theme/components/header/header.component.scss
@@ -37,11 +37,13 @@
 
     &.middle {
       flex: 1;
+      align-items: center;
+      margin: 0 -0.5rem;
     }
   }
 
   ::ng-deep nb-menu {
-    flex: 1;
+    flex: 1 0 auto;
     .menu-items {
       display: flex;
       justify-content: flex-end;
@@ -49,10 +51,6 @@
       .menu-item {
         border: none;
 
-        &:first-child a {
-          padding-left: 0;
-        }
-
         a {
           color: $menu-item-fg;
           display: block;
@@ -98,6 +96,10 @@
     margin-left: auto;
   }
 
+  .version-select {
+    display: none;
+  }
+
   @include media-breakpoint-up(is) {
     .section {
       padding: 0.875rem 1.125rem;
@@ -116,6 +118,24 @@
         display: inline;
       }
     }
+
+    .version-select {
+      display: block;
+
+      ::ng-deep button {
+        background-color: nb-theme(version-select-highlight);
+        padding: 0.65rem 1.7rem 0.65rem 1.5rem;
+
+        &:active {
+          background-color: nb-theme(version-select-highlight);
+        }
+
+        &::after {
+          top: 47%;
+          right: 0.55rem;
+        }
+      }
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -180,6 +200,9 @@
     ngd-search {
       display: none;
     }
+    .version-select {
+      margin-left: 1rem;
+    }
 
     @include media-breakpoint-up(is) {
       ::ng-deep nb-menu .menu-items li:first-child {
@@ -191,6 +214,7 @@
       ngd-search {
         display: flex;
         align-items: center;
+        margin-left: auto;
       }
     }
 
diff --git a/docs/app/@theme/components/header/header.component.ts b/docs/app/@theme/components/header/header.component.ts
index 7071250423..8ec89b7e63 100644
--- a/docs/app/@theme/components/header/header.component.ts
+++ b/docs/app/@theme/components/header/header.component.ts
@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
-import { NbMenuItem, NbSidebarService } from '@nebular/theme';
-import { NgdVersionService } from '../../services';
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, OnInit } from '@angular/core';
+import { NB_WINDOW, NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { NgdVersionService, VersionInfo } from '../../services';
 
 @Component({
   selector: 'ngd-header',
@@ -12,12 +15,22 @@ import { NgdVersionService } from '../../services';
       </button>
       <div class="logo">
         <a routerLink="/">Nebular</a>
-        <span class="version">v{{ currentVersion }}</span>
+        <span class="version" *ngIf="currentVersionName$ | async">
+          v{{ currentVersionName$ | async }}
+        </span>
       </div>
     </div>
     <div class="section middle">
       <nb-menu [items]="mainMenu"></nb-menu>
       <ngd-search *ngIf="showSearch"></ngd-search>
+      <nb-select class="version-select"
+                 *ngIf="(showVersionSelect$ | async)"
+                 [selected]="currentVersion$ | async"
+                 (selectedChange)="redirectToVersion($event)">
+        <nb-option *ngFor="let version of supportedVersions$ | async" [value]="version">
+          {{ version.name }}
+        </nb-option>
+      </nb-select>
     </div>
     <div class="section right">
       <iframe class="stars"
@@ -34,7 +47,11 @@ export class NgdHeaderComponent implements OnInit {
   @Input() showSearch = true;
   @HostBinding('class.docs-page') @Input() isDocs = false;
 
-  currentVersion: string;
+  private window: Window;
+  supportedVersions$: Observable<VersionInfo[]>;
+  currentVersion$: Observable<VersionInfo>;
+  currentVersionName$: Observable<string>;
+  showVersionSelect$: Observable<boolean>;
 
   mainMenu: NbMenuItem[] = [
     {
@@ -62,13 +79,24 @@ export class NgdHeaderComponent implements OnInit {
   @Input() sidebarTag: string;
 
   constructor(
-    versionService: NgdVersionService,
+    @Inject(NB_WINDOW) window,
+    private versionService: NgdVersionService,
     private sidebarService: NbSidebarService,
   ) {
-    this.currentVersion = versionService.getNebularVersion();
+    this.window = window;
   }
 
   ngOnInit() {
+    this.currentVersion$ = this.versionService.getCurrentVersion();
+    this.currentVersionName$ = this.currentVersion$.pipe(map((version: VersionInfo) => version.name));
+    this.supportedVersions$ = this.versionService.getSupportedVersions();
+
+    this.showVersionSelect$ = this.supportedVersions$
+      .pipe(
+        map((versions: VersionInfo[]) => versions.length > 0),
+        startWith(false),
+      );
+
     if (!this.isDocs) {
       this.mainMenu.push({
         title: 'Professional Services',
@@ -80,4 +108,8 @@ export class NgdHeaderComponent implements OnInit {
   toggleSidebar() {
     this.sidebarService.toggle(false, this.sidebarTag);
   }
+
+  redirectToVersion(version: VersionInfo): void {
+    this.window.location.href = version.path;
+  }
 }
diff --git a/docs/app/@theme/services/version.service.ts b/docs/app/@theme/services/version.service.ts
index 88f0788a4f..8c3e2b0321 100644
--- a/docs/app/@theme/services/version.service.ts
+++ b/docs/app/@theme/services/version.service.ts
@@ -1,9 +1,36 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+
+import { environment } from '../../../environments/environment';
+
+const PACKAGE_JSON_VERSION = require('../../../../package.json').version;
+
+export interface VersionInfo {
+  version: string;
+  name: string;
+  path: string;
+}
 
 @Injectable()
 export class NgdVersionService {
 
-  getNebularVersion() {
-    return require('../../../../package.json').version;
+  supportedVersions$: Observable<VersionInfo[]>;
+
+  constructor(private http: HttpClient) {
+    this.supportedVersions$ = this.http.get<VersionInfo[]>(environment.versionsUrl)
+      .pipe(shareReplay(1));
+  }
+
+  getCurrentVersion(): Observable<VersionInfo> {
+    return this.supportedVersions$
+      .pipe(
+        map((versions: VersionInfo[]) => versions.find(info => info.version === PACKAGE_JSON_VERSION)),
+      );
+  }
+
+  getSupportedVersions(): Observable<VersionInfo[]> {
+    return this.supportedVersions$;
   }
 }
diff --git a/docs/app/@theme/styles/_common.scss b/docs/app/@theme/styles/_common.scss
index 6c54fdac3a..c7b81c61fd 100644
--- a/docs/app/@theme/styles/_common.scss
+++ b/docs/app/@theme/styles/_common.scss
@@ -30,4 +30,17 @@
   .algolia-docsearch-suggestion--category-header {
     background-color: transparent;
   }
+
+  nb-card.select {
+    border-color: nb-theme(version-select-highlight) !important;
+  }
+
+  nb-option {
+    background-color: #fff;
+
+    &.selected,
+    &:hover {
+      background-color: nb-theme(version-select-highlight) !important;
+    }
+  }
 }
diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss
index 5fe412de0e..d193973941 100644
--- a/docs/app/@theme/styles/styles.scss
+++ b/docs/app/@theme/styles/styles.scss
@@ -16,8 +16,14 @@
   @include nb-actions-theme();
   @include nb-search-theme();
   @include nb-bootstrap-global();
+  @include nb-buttons-theme();
+  @include nb-select-theme();
+  @include nb-overlay-theme();
 
   @include nb-typography();
+  @include nb-select-theme();
+  @include nb-overlay-theme();
+  @include nb-buttons-theme();
 
   @include nbd-common();
 };
diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss
index bfe643a9f5..a83558d278 100644
--- a/docs/app/@theme/styles/themes.scss
+++ b/docs/app/@theme/styles/themes.scss
@@ -53,6 +53,8 @@ $nb-themes: nb-register-theme((
   menu-font-size: 0.95rem,
   menu-font-weight: font-weight-normal,
   footer-fg: color-fg-text,
+
+  version-select-highlight: #4479e7,
 ), docs-home, default);
 /* stylelint-enable foo */
 $nb-themes: nb-register-theme((
@@ -80,6 +82,7 @@ $nb-themes: nb-register-theme((
   sidebar-padding: 2rem,
   sidebar-shadow: none,
   color-fg-highlight: #4479e7,
+  version-select-highlight: color-fg-highlight,
   link-color:	color-fg-highlight,
   link-color-hover: color-fg-highlight,
   link-color-visited: color-fg-highlight,
diff --git a/docs/app/@theme/theme.module.ts b/docs/app/@theme/theme.module.ts
index 426ea75f78..3d6a53de07 100644
--- a/docs/app/@theme/theme.module.ts
+++ b/docs/app/@theme/theme.module.ts
@@ -16,6 +16,7 @@ import {
   NbSidebarModule,
   NbCardModule,
   NbCheckboxModule,
+  NbSelectModule,
 } from '@nebular/theme';
 
 import {
@@ -30,7 +31,7 @@ import {
   NgdColorSwatchDirective,
   NgdDescriptionDirective,
   NgdSearchComponent,
-} from './components/';
+} from './components';
 
 import {
   NgdHighlightService,
@@ -57,6 +58,7 @@ import {
     NbCardModule,
     NbMenuModule,
     NbTabsetModule,
+    NbSelectModule,
     RouterModule,
   ],
   declarations: [
diff --git a/docs/assets/ghspa.js b/docs/assets/ghspa.js
index 4b6f1b957c..152a31363b 100644
--- a/docs/assets/ghspa.js
+++ b/docs/assets/ghspa.js
@@ -20,7 +20,7 @@
 
 ;(function(l, projectPages) {
 
-  const versions = ['3.5.0'];
+  const versions = ['3.6.0'];
 
   var paths = l.pathname.split('/');
   var repo = projectPages ? '/' + paths[1] : '';
diff --git a/docs/environments/environment.prod.ts b/docs/environments/environment.prod.ts
index 803f39ed23..94cee0104b 100644
--- a/docs/environments/environment.prod.ts
+++ b/docs/environments/environment.prod.ts
@@ -11,4 +11,5 @@
 
 export const environment = {
   production: true,
+  versionsUrl: '/nebular/versions.json',
 };
diff --git a/docs/environments/environment.ts b/docs/environments/environment.ts
index 53d82519dd..01f70e81c7 100644
--- a/docs/environments/environment.ts
+++ b/docs/environments/environment.ts
@@ -11,4 +11,5 @@
 
 export const environment = {
   production: false,
+  versionsUrl: 'versions.json',
 };
diff --git a/docs/versions.json b/docs/versions.json
new file mode 100644
index 0000000000..94e36397c5
--- /dev/null
+++ b/docs/versions.json
@@ -0,0 +1,12 @@
+[
+  {
+    "version": "3.6.0",
+    "name": "3.6.0",
+    "path": "/nebular/3.6.0"
+  },
+  {
+    "version": "4.0.0",
+    "name": "4.0.0",
+    "path": "/nebular"
+  }
+]