diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
index f08dfd68ee..96eed0b848 100644
--- a/docs/app/app.module.ts
+++ b/docs/app/app.module.ts
@@ -14,6 +14,7 @@ import {
   NbCardModule,
   NbLayoutModule,
   NbMenuModule,
+  NbTabsetModule,
 } from '@nebular/theme';
 import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
@@ -28,6 +29,7 @@ import { NgdPropsBlockComponent } from './docs/page/blocks/basic-blocks/ngd-prop
 import { NgdMethodsBlockComponent } from './docs/page/blocks/basic-blocks/ngd-methods-block.component';
 import { NgdDescriptionDirective } from './docs/utils/ngd-description.directive';
 import { NgdBlockComponent } from './docs/page/blocks/ngd-block.component';
+import { NgdTabbedBlockComponent } from './docs/page/blocks/tabbed-block/ngd-tabbed-block.component';
 
 import { NgdHighlighterComponent } from './docs/utils/code-highlighter.component';
 import { NgdHeaderComponent } from './components/header/ngd-header.component';
@@ -39,6 +41,7 @@ import { NgdThemeComponent } from './docs/page/blocks/ngd-theme-block.component'
 import { NgdSassPropValueDirective } from './docs/utils/ngd-color-swatch.directive';
 import { SwiperModule } from 'angular2-useful-swiper';
 import { Analytics } from './docs/utils/analytics.service';
+import { BlockHelperService } from './docs/utils/block-helper.service';
 
 @NgModule({
   imports: [
@@ -50,6 +53,7 @@ import { Analytics } from './docs/utils/analytics.service';
     NbCardModule,
     SwiperModule,
     NbLayoutModule,
+    NbTabsetModule,
     NbMenuModule.forRoot(),
     NbThemeModule.forRoot({ name: 'default' }),
     NbSidebarModule.forRoot(),
@@ -74,9 +78,11 @@ import { Analytics } from './docs/utils/analytics.service';
     NgdFragmentDirective,
     NgdThemeComponent,
     NgdBlockComponent,
+    NgdTabbedBlockComponent,
     NgdSassPropValueDirective,
   ],
   providers: [
+    BlockHelperService,
     DocsService,
     Analytics,
     Title,
diff --git a/docs/app/docs/docs.service.ts b/docs/app/docs/docs.service.ts
index 59409a49de..576d936bf8 100644
--- a/docs/app/docs/docs.service.ts
+++ b/docs/app/docs/docs.service.ts
@@ -17,6 +17,7 @@ const PARSEDDOCS: any = require('../../output.json');
 export class DocsService {
 
   private fragments$ = new Subject<string>();
+  private preparedStructure = this.prepareStructure(this.getStructure(), this.getParsedDocs());
 
   getStructure(): any {
     return STRUCTURE;
@@ -31,7 +32,7 @@ export class DocsService {
   }
 
   getPreparedStructure(): any {
-    return this.prepareStructure(this.getStructure(), this.getParsedDocs());
+    return this.preparedStructure;
   }
 
   emitFragment(fragment: string): void {
@@ -72,6 +73,10 @@ export class DocsService {
         }
       }
 
+      if (item.block === 'tabbed' && typeof item.source === 'object' && item.source.length > 0) {
+        item.source = item.source.map(source => preparedDocs.classes.find((data) => data.name === source));
+      }
+
       if (item.children) {
         item.children = this.prepareStructure(item.children, preparedDocs);
       }
diff --git a/docs/app/docs/page/blocks/basic-blocks/ngd-styles-block.component.ts b/docs/app/docs/page/blocks/basic-blocks/ngd-styles-block.component.ts
index 3133eba1ee..6d35af5a1f 100644
--- a/docs/app/docs/page/blocks/basic-blocks/ngd-styles-block.component.ts
+++ b/docs/app/docs/page/blocks/basic-blocks/ngd-styles-block.component.ts
@@ -11,9 +11,6 @@ import { DocsService } from '../../../docs.service';
   selector: 'ngd-styles-block',
   template: `
     <div class="block-container" *ngFor="let style of classStyles">
-      <p class="block-title"><a [routerLink]="" fragment="{{className}}Styles" ngdFragment></a>
-        Component themable styles
-      </p>
       <div class="table-container">
         <table class="table table-striped">
           <thead>
diff --git a/docs/app/docs/page/blocks/ngd-block.component.ts b/docs/app/docs/page/blocks/ngd-block.component.ts
index ce7b9c8be6..cc220bb3f0 100644
--- a/docs/app/docs/page/blocks/ngd-block.component.ts
+++ b/docs/app/docs/page/blocks/ngd-block.component.ts
@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
     <ng-container [ngSwitch]="block.block">
       <ngd-markdown-block *ngSwitchCase="'markdown'" [source]="block.source"></ngd-markdown-block>
       <ngd-component-block *ngSwitchCase="'component'" [source]="block.source"></ngd-component-block>
+      <ngd-tabbed-block *ngSwitchCase="'tabbed'" [source]="block.source"></ngd-tabbed-block>
       <ngd-theme-block *ngSwitchCase="'theme'" [block]="block"></ngd-theme-block>
     </ng-container>
   `,
diff --git a/docs/app/docs/page/blocks/ngd-component-block.component.ts b/docs/app/docs/page/blocks/ngd-component-block.component.ts
index bd5120565f..cd0a1a3657 100644
--- a/docs/app/docs/page/blocks/ngd-component-block.component.ts
+++ b/docs/app/docs/page/blocks/ngd-component-block.component.ts
@@ -1,49 +1,25 @@
 import { Component, Input } from '@angular/core';
+import { BlockHelperService } from '../../utils/block-helper.service';
 
 @Component({
   selector: 'ngd-component-block',
   template: `
-    <ngd-description-block *ngIf="hasDescription" [source]="source"></ngd-description-block>
-    <ngd-examples-block *ngIf="hasExamples" [source]="source"></ngd-examples-block>
-    <ngd-props-block *ngIf="hasProps" [source]="source"></ngd-props-block>
-    <ngd-methods-block *ngIf="hasMethods" [source]="source"></ngd-methods-block>
-    <ngd-styles-block *ngIf="hasStyles" [source]="source"></ngd-styles-block>
+    <ngd-description-block *ngIf="blockHelper.hasDescription(source)" [source]="source">
+    </ngd-description-block>
+    <ngd-examples-block *ngIf="blockHelper.hasExamples(source)" [source]="source">
+    </ngd-examples-block>
+    <ngd-props-block *ngIf="blockHelper.hasProps(source)" [source]="source">
+    </ngd-props-block>
+    <ngd-methods-block *ngIf="blockHelper.hasMethods(source)" [source]="source">
+    </ngd-methods-block>
+    <ngd-styles-block *ngIf="blockHelper.hasTheme(source)" [source]="source">
+    </ngd-styles-block>
   `,
 })
 export class NgdComponentBlockComponent {
 
   @Input() source: any;
 
-  get hasDescription(): boolean {
-    return this.source && (
-      this.source.name ||
-      this.source.shortDescription ||
-      this.source.description
-    );
-  }
-
-  get hasExamples(): boolean {
-    return this.source &&
-      this.source.examples &&
-      this.source.examples.length > 0;
-  }
-
-  get hasProps(): boolean {
-    return this.source &&
-      this.source.props &&
-      this.source.props.length > 0;
-  }
-
-  get hasMethods(): boolean {
-    return this.source &&
-      this.source.methods &&
-      this.source.methods.length > 0 &&
-      this.source.methods.some(method => method.shortDescription || method.description);
-  }
-
-  get hasStyles(): boolean {
-    return this.source &&
-      this.source.styles &&
-      this.source.styles.length > 0;
+  constructor(public blockHelper: BlockHelperService) {
   }
 }
diff --git a/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.html b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.html
new file mode 100644
index 0000000000..8b19cb1d25
--- /dev/null
+++ b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.html
@@ -0,0 +1,33 @@
+<nb-tabset>
+
+  <nb-tab tabTitle="Overview" *ngIf="hasOverview">
+    <ng-container *ngFor="let component of source">
+      <ngd-description-block [source]="component" *ngIf="blockHelper.hasDescription(component)">
+      </ngd-description-block>
+      <ngd-examples-block [source]="component" *ngIf="blockHelper.hasExamples(component)">
+      </ngd-examples-block>
+    </ng-container>
+  </nb-tab>
+
+  <nb-tab tabTitle="Theme" *ngIf="hasTheme">
+    <ng-container *ngFor="let component of source">
+      <ng-container *ngIf="blockHelper.hasTheme(component)">
+        <h2 class="class-name">{{component.name}}</h2>
+        <ngd-styles-block [source]="component"></ngd-styles-block>
+      </ng-container>
+    </ng-container>
+  </nb-tab>
+
+  <nb-tab tabTitle="API" *ngIf="hasAPI">
+    <ng-container *ngFor="let component of source">
+      <ng-container *ngIf="blockHelper.hasProps(component) || blockHelper.hasMethods(component)">
+        <h2 class="class-name">
+          {{component.name}}
+        </h2>
+        <ngd-props-block [source]="component" *ngIf="blockHelper.hasProps(component)"></ngd-props-block>
+        <ngd-methods-block [source]="component" *ngIf="blockHelper.hasMethods(component)"></ngd-methods-block>
+      </ng-container>
+    </ng-container>
+  </nb-tab>
+
+</nb-tabset>
diff --git a/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.scss b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.scss
new file mode 100644
index 0000000000..19b7f4970f
--- /dev/null
+++ b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.scss
@@ -0,0 +1,9 @@
+@import '../../../../styles/themes';
+
+@include nb-install-component {
+
+  /deep/ nb-tabset > ul {
+    padding: 0 0 1.5rem;
+    border-bottom: 0;
+  }
+}
diff --git a/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.ts b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.ts
new file mode 100644
index 0000000000..96f485f3bc
--- /dev/null
+++ b/docs/app/docs/page/blocks/tabbed-block/ngd-tabbed-block.component.ts
@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { BlockHelperService } from '../../../utils/block-helper.service';
+
+@Component({
+  selector: 'ngd-tabbed-block',
+  styleUrls: ['./ngd-tabbed-block.component.scss'],
+  templateUrl: './ngd-tabbed-block.component.html',
+})
+export class NgdTabbedBlockComponent {
+
+  @Input() source = [];
+
+  constructor(public blockHelper: BlockHelperService) {
+  }
+
+  get hasOverview(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasDescription(source) || this.blockHelper.hasExamples(source);
+    })
+  }
+
+  get hasTheme(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasTheme(source);
+    })
+  }
+
+  get hasAPI(): boolean {
+    return this.source.some(source => {
+      return this.blockHelper.hasMethods(source) || this.blockHelper.hasProps(source);
+    })
+  }
+}
diff --git a/docs/app/docs/utils/block-helper.service.ts b/docs/app/docs/utils/block-helper.service.ts
new file mode 100644
index 0000000000..1e5dcce306
--- /dev/null
+++ b/docs/app/docs/utils/block-helper.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class BlockHelperService {
+
+  hasDescription(component): boolean {
+    return component && (
+      component.name ||
+      component.shortDescription ||
+      component.description
+    );
+  }
+
+  hasExamples(component): boolean {
+    return component &&
+      component.examples &&
+      component.examples.length > 0;
+  }
+
+  hasTheme(component): boolean {
+    return component.styles &&
+      component.styles.length > 0;
+  }
+
+  hasProps(component): boolean {
+    return component &&
+      component.props &&
+      component.props.length > 0 &&
+      component.props.some(prop => prop.kind === 'input' || prop.kind === 'output');
+  }
+
+  hasMethods(component): boolean {
+    return component &&
+      component.methods &&
+      component.methods.length > 0 &&
+      component.methods.some(method => method.shortDescription || method.description);
+  }
+}
diff --git a/docs/app/styles/_themes.scss b/docs/app/styles/_themes.scss
index e8bf56fe1c..d5d87dcf4d 100644
--- a/docs/app/styles/_themes.scss
+++ b/docs/app/styles/_themes.scss
@@ -110,5 +110,8 @@ $nb-themes: nb-register-theme((
   landing-highlight: #42db7d,
   landing-primary: #8a7fff,
   landing-bg: #13113b,
+
+  tabs-font-size: 1.25rem,
+  tabs-active-font-weight: font-weight-normal
 ), default, default);
 
diff --git a/docs/structure.ts b/docs/structure.ts
index 34df0d126a..66b2696da1 100644
--- a/docs/structure.ts
+++ b/docs/structure.ts
@@ -171,25 +171,14 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbLayoutComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbLayoutHeaderComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbLayoutColumnComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbLayoutFooterComponent',
+            block: 'tabbed',
+            source: [
+              'NbLayoutComponent',
+              'NbLayoutHeaderComponent',
+              'NbLayoutColumnComponent',
+              'NbLayoutFooterComponent',
+            ],
           },
-
         ],
       },
       {
@@ -198,24 +187,13 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbSidebarComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbSidebarHeaderComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbSidebarFooterComponent',
-            name: 'true',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbSidebarService',
+            block: 'tabbed',
+            source: [
+              'NbSidebarComponent',
+              'NbSidebarHeaderComponent',
+              'NbSidebarFooterComponent',
+              'NbSidebarService',
+            ],
           },
         ],
       },
@@ -225,18 +203,12 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbMenuComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbMenuItem',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbMenuService',
+            block: 'tabbed',
+            source: [
+              'NbMenuComponent',
+              'NbMenuItem',
+              'NbMenuService',
+            ],
           },
         ],
       },
@@ -246,23 +218,13 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbCardComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardHeaderComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardBodyComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardFooterComponent',
+            block: 'tabbed',
+            source: [
+              'NbCardComponent',
+              'NbCardHeaderComponent',
+              'NbCardBodyComponent',
+              'NbCardFooterComponent',
+            ],
           },
         ],
       },
@@ -272,18 +234,12 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbFlipCardComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardFrontComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardBackComponent',
+            block: 'tabbed',
+            source: [
+              'NbFlipCardComponent',
+              'NbCardFrontComponent',
+              'NbCardBackComponent',
+            ],
           },
         ],
       },
@@ -293,18 +249,12 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbRevealCardComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardFrontComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbCardBackComponent',
+            block: 'tabbed',
+            source: [
+              'NbRevealCardComponent',
+              'NbCardFrontComponent',
+              'NbCardBackComponent',
+            ],
           },
         ],
       },
@@ -314,13 +264,11 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbSearchComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbSearchService',
+            block: 'tabbed',
+            source: [
+              'NbSearchComponent',
+              'NbSearchService',
+            ],
           },
         ],
       },
@@ -330,18 +278,12 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbTabsetComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbTabComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbRouteTabsetComponent',
+            block: 'tabbed',
+            source: [
+              'NbTabsetComponent',
+              'NbTabComponent',
+              'NbRouteTabsetComponent',
+            ],
           },
         ],
       },
@@ -351,13 +293,11 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbActionsComponent',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbActionComponent',
+            block: 'tabbed',
+            source: [
+              'NbActionsComponent',
+              'NbActionComponent',
+            ],
           },
         ],
       },
@@ -367,8 +307,10 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbUserComponent',
+            block: 'tabbed',
+            source: [
+              'NbUserComponent',
+            ],
           },
         ],
       },
@@ -378,8 +320,10 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbCheckboxComponent',
+            block: 'tabbed',
+            source: [
+              'NbCheckboxComponent',
+            ],
           },
         ],
       },
@@ -389,8 +333,10 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbBadgeComponent',
+            block: 'tabbed',
+            source: [
+              'NbBadgeComponent',
+            ],
           },
         ],
       },
@@ -400,13 +346,11 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbPopoverDirective',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbPopoverComponent',
+            block: 'tabbed',
+            source: [
+              'NbPopoverDirective',
+              'NbPopoverComponent',
+            ],
           },
         ],
       },
@@ -416,13 +360,11 @@ export const STRUCTURE = [
         children: [
           {
             type: 'block',
-            block: 'component',
-            source: 'NbContextMenuDirective',
-          },
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbContextMenuComponent',
+            block: 'tabbed',
+            source: [
+              'NbContextMenuDirective',
+              'NbContextMenuComponent',
+            ],
           },
         ],
       },