diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index a331f030d4..420439ce09 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -24,7 +24,12 @@ section.hidden {
 }
 
 .components-demo h4 {
-    text-align: center;
+  text-align: center;
+}
+
+.components-demo section {
+  width: 100%;
+  height: 100%;
 }
 
 ion-scroll {
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 863987886a..fdadf0e277 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -16,7 +16,7 @@ class DemoApp {
   constructor(actionSheet: ActionSheet, zone: NgZone) {
     this.actionSheet = actionSheet;
     this.component = {
-        title: 'Action Sheets',
+        title: 'Tabs',
     };
     window.onmessage = (e) => {
       zone.run(() => {
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index fdcfa40771..d841e0a7e5 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -1,7 +1,7 @@
 
 <ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>
 
-<ion-content class="has-header padding components-demo">
+<ion-content class="has-header components-demo">
 
   <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
     <button class="button" (click)="openMenu()">
@@ -266,8 +266,12 @@
    </ion-slides>
   </section>
 
-    <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
-   TODO
+  <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
+    <ion-tabs tab-bar-placement="bottom">
+      <ion-tab tab-title="Food" tab-icon="pizza"></ion-tab>
+      <ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
+      <ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
+    </ion-tabs>
   </section>
 
 </ion-content>