diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html
index 997a8f04..184ea14a 100644
--- a/lib/components/JsonSchema/json-schema.html
+++ b/lib/components/JsonSchema/json-schema.html
@@ -1,5 +1,5 @@
 <span *ngIf="isTrivial" class="param-type param-type-trivial" [ngClass]="type">{{_displayType}}</span>
-<div *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
+<div *ngIf="!isTrivial && !data.derived.length" class="params-wrap" [ngClass]="{'params-array': isArray}">
   <div *ngFor="#prop of data.properties" class="param-wrap">
     <div class="param">
       <div class="param-name">
@@ -19,3 +19,12 @@
     </div>
   </div>
 </div>
+<div *ngIf="data.derived.length">
+  <div class="discriminator"> Based on <strong>{{data.discriminator}}</strong> field value: </div>
+  <tabs>
+    <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
+      <json-schema pointer="{{derived.$ref}}" [final]="derived.final" [isArray]='isArray'>
+      </json-schema>
+    </tab>
+  </tabs>
+</div>
diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js
index f3d758be..8a6f8ea8 100644
--- a/lib/components/JsonSchema/json-schema.js
+++ b/lib/components/JsonSchema/json-schema.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import {RedocComponent, BaseComponent} from '../base';
+import {Tabs, Tab} from '../../common/components/Tabs/tabs';
 import {ElementRef} from 'angular2/core';
 import JsonPointer from '../../utils/JsonPointer';
 
@@ -8,18 +9,20 @@ import JsonPointer from '../../utils/JsonPointer';
   selector: 'json-schema',
   templateUrl: './lib/components/JsonSchema/json-schema.html',
   styleUrls: ['./lib/components/JsonSchema/json-schema.css'],
-  directives: [JsonSchema],
-  inputs: ['isArray']
+  directives: [JsonSchema, Tabs, Tab],
+  inputs: ['isArray', 'final']
 })
 export default class JsonSchema extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
     this.element = elementRef.nativeElement;
+    this.final = false;
   }
 
   prepareModel() {
     this.data = {};
     this.data.properties = [];
+    this.data.derived = [];
 
     if (!this.componentSchema) {
       throw new Error(`Can't load component schema at ${this.pointer}`);
@@ -32,6 +35,19 @@ export default class JsonSchema extends BaseComponent {
       this.isArray = true;
       schema = schema.items;
     }
+    let normPtr = schema._pointer || this.pointer;
+    let derived = this.schemaMgr.findDerivedDefinitions( normPtr );
+    if (!this.final && derived.length) {
+      derived.unshift({
+        name: JsonPointer.baseName(normPtr),
+        $ref: normPtr,
+        final: true
+      });
+      this.data.derived = derived;
+      this.data.discriminator = schema.discriminator;
+      return;
+    }
+
     this.joinAllOf(schema);
 
     if (schema.type !== 'object') {
diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss
index 9fd368f6..35709ed7 100644
--- a/lib/components/JsonSchema/json-schema.scss
+++ b/lib/components/JsonSchema/json-schema.scss
@@ -74,7 +74,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .param-type-trivial {
   margin: 10px 10px 0;
-  display: inline-block;  
+  display: inline-block;
 }
 
 /* tree */
@@ -146,6 +146,7 @@ $array-marker-line-height: 1.5;
 
 .params-wrap.params-array:before {
   content: "Array [";
+  padding-top: 1em;
 }
 
 .params-wrap.params-array {
@@ -168,3 +169,26 @@ $array-marker-line-height: 1.5;
   border-left: $line-border-erase;
   height: ($param-name-height/2) + $cell-padding;
 }
+
+.discriminator {
+  margin-top: 1em;
+}
+
+:host tabs li {
+  padding: 0.2em 0;
+  margin-right: 1em;
+  font-size: 14px;
+  color: green;
+
+  &:before, &:after {
+    content: '"';
+  }
+
+  &:last-of-type {
+    margin: 0;
+  }
+
+  &.active {
+    border-bottom: 2px solid $tree-lines-color;
+  }
+}
diff --git a/lib/utils/SchemaManager.js b/lib/utils/SchemaManager.js
index 5897ce59..6ce129b4 100644
--- a/lib/utils/SchemaManager.js
+++ b/lib/utils/SchemaManager.js
@@ -174,7 +174,7 @@ export default class SchemaManager {
       });
       if (idx < 0) continue;
 
-      res.push(defName);
+      res.push({name: defName, $ref: `#/definitions/${defName}`});
     }
     return res;
   }
diff --git a/tests/unit/SchemaManager.spec.js b/tests/unit/SchemaManager.spec.js
index 7fe9e1cc..3df2b985 100644
--- a/tests/unit/SchemaManager.spec.js
+++ b/tests/unit/SchemaManager.spec.js
@@ -238,7 +238,7 @@ describe('Utils', () => {
         let deriveDefs = schemaMgr.findDerivedDefinitions('#/definitions/Pet');
         deriveDefs.should.be.instanceof(Array);
         deriveDefs.should.not.be.empty;
-        deriveDefs.should.be.deepEqual(['Cat']);
+        deriveDefs.should.be.deepEqual([{name: 'Cat', $ref: '#/definitions/Cat'}]);
       });
 
       it('should return emtpy array for definitions that dont have discriminator', () => {