diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 1768e2be98..698ce7a6c7 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -93,3 +93,6 @@ scroll-content {
   color: #757575;
 }
 
+#demo-hammer {
+  padding: 0 0.4em;
+}
diff --git a/demos/component-docs/buttons/block.html b/demos/component-docs/buttons/block.html
index 75bda108b3..41ac4b3567 100644
--- a/demos/component-docs/buttons/block.html
+++ b/demos/component-docs/buttons/block.html
@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light block>Light</button>
+  </p>
+
   <p>
     <button block>Default</button>
   </p>
@@ -15,10 +19,6 @@
     <button danger block>Danger</button>
   </p>
 
-  <p>
-    <button light block>Light</button>
-  </p>
-
   <p>
     <button dark block>Dark</button>
   </p>
diff --git a/demos/component-docs/buttons/buttons.html b/demos/component-docs/buttons/buttons.html
index bb2582ec93..3b70e451e5 100644
--- a/demos/component-docs/buttons/buttons.html
+++ b/demos/component-docs/buttons/buttons.html
@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light>Light</button>
+  </p>
+
   <p>
     <button>Default</button>
   </p>
@@ -15,10 +19,6 @@
     <button danger>Danger</button>
   </p>
 
-  <p>
-    <button light>Light</button>
-  </p>
-
   <p>
     <button dark>Dark</button>
   </p>
diff --git a/demos/component-docs/buttons/fab.html b/demos/component-docs/buttons/fab.html
index 15b7396b66..e9bd5a9bef 100644
--- a/demos/component-docs/buttons/fab.html
+++ b/demos/component-docs/buttons/fab.html
@@ -1,12 +1,21 @@
 <ion-navbar *navbar>
-  <ion-title>Floating Action Buttons</ion-title>
+  <ion-title>FAB</ion-title>
 </ion-navbar>
 
 <ion-content class="has-header components-demo">
   <p>
-    <button fab fab-top fab-right>
+    <button fab primary fab-top fab-left>
       <icon add></icon>
     </button>
+    <button fab secondary fab-top fab-center>
+      <icon is-active="false" compass></icon>
+    </button>
+    <button fab danger fab-top fab-right>
+      <icon is-active="false" mic></icon>
+    </button>
+    <button fab dark fab-bottom fab-center>
+      <icon is-active="false" heart></icon>
+    </button>
   </p>
 </ion-content>
 
diff --git a/demos/component-docs/buttons/full.html b/demos/component-docs/buttons/full.html
index 8c4efb0a51..86933539b5 100644
--- a/demos/component-docs/buttons/full.html
+++ b/demos/component-docs/buttons/full.html
@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content class="has-header components-demo">
+
+  <p>
+    <button light full>Light</button>
+  </p>
   <p>
     <button full>Default</button>
   </p>
@@ -14,11 +18,6 @@
   <p>
     <button danger full>Danger</button>
   </p>
-
-  <p>
-    <button light full>Light</button>
-  </p>
-
   <p>
     <button dark full>Dark</button>
   </p>
diff --git a/demos/component-docs/buttons/icons.html b/demos/component-docs/buttons/icons.html
index 5a86bcb036..5ed85088db 100644
--- a/demos/component-docs/buttons/icons.html
+++ b/demos/component-docs/buttons/icons.html
@@ -4,11 +4,40 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+
+  <p>
+    <button light>
+      <icon arrow-back></icon>
+      Back
+    </button>
+
+    <button light>
+      <icon arrow-down></icon>
+    </button>
+
+    <button light>
+      <icon arrow-up></icon>
+    </button>
+
+    <button light>
+      Next
+      <icon arrow-forward></icon>
+    </button>
+  </p>
+
   <p>
     <button>
       <icon home></icon>
       Home
     </button>
+    <button outline >
+      <icon briefcase is-active="false"></icon>
+      Work
+    </button>
+    <button clear>
+      <icon beer is-active="false"></icon>
+      Pub
+    </button>
   </p>
 
   <p>
@@ -16,24 +45,30 @@
       <icon people></icon>
       Friends
     </button>
+    <button secondary outline>
+      <icon paw is-active="false"></icon>
+      Best Friend
+    </button>
   </p>
 
   <p>
     <button danger>
       <icon close></icon>
     </button>
-  </p>
-
-  <p>
-    <button light>
-      <icon arrow-back></icon>
-      Back
+    <button danger outline>
+      <icon remove-circle is-active="false"></icon>
+    </button>
+    <button danger clear>
+      <icon trash is-active="false"></icon>
     </button>
   </p>
 
   <p>
-    <button dark>
-      <icon hammer></icon>
+    <button dark round>
+      <icon hammer id="demo-hammer"></icon>
+    </button>
+    <button dark clear>
+      <icon construct is-active="false"></icon>
     </button>
   </p>
 
diff --git a/demos/component-docs/buttons/outline.html b/demos/component-docs/buttons/outline.html
index 18a689b69f..af59bb2435 100644
--- a/demos/component-docs/buttons/outline.html
+++ b/demos/component-docs/buttons/outline.html
@@ -3,6 +3,11 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  
+  <p>
+    <button light outline>Light</button>
+  </p>
+
   <p>
     <button outline>Default</button>
   </p>
@@ -15,10 +20,6 @@
     <button danger outline>Danger</button>
   </p>
 
-  <p>
-    <button light outline>Light</button>
-  </p>
-
   <p>
     <button dark outline>Dark</button>
   </p>
diff --git a/demos/component-docs/buttons/round.html b/demos/component-docs/buttons/round.html
index bb1bbaf3e2..2ddd56fce0 100644
--- a/demos/component-docs/buttons/round.html
+++ b/demos/component-docs/buttons/round.html
@@ -3,6 +3,9 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light round>Light</button>
+  </p>
   <p>
     <button round>Default</button>
   </p>
@@ -15,10 +18,6 @@
     <button danger round>Danger</button>
   </p>
 
-  <p>
-    <button light round>Light</button>
-  </p>
-
   <p>
     <button dark round>Dark</button>
   </p>
diff --git a/demos/component-docs/buttons/sizes.html b/demos/component-docs/buttons/sizes.html
index bf1cf01908..cdce4b6892 100644
--- a/demos/component-docs/buttons/sizes.html
+++ b/demos/component-docs/buttons/sizes.html
@@ -3,10 +3,12 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light large>Light</button>
+  </p>
   <p>
     <button small>Default</button>
   </p>
-
   <p>
     <button secondary small>Secondary</button>
   </p>
@@ -14,11 +16,6 @@
   <p>
     <button danger small>Danger</button>
   </p>
-
-  <p>
-    <button light large>Light</button>
-  </p>
-
   <p>
     <button dark large>Dark</button>
   </p>
diff --git a/demos/component-docs/tabs/tabs.ts b/demos/component-docs/tabs/tabs.ts
index e69eae67cd..56c6fc7fd4 100644
--- a/demos/component-docs/tabs/tabs.ts
+++ b/demos/component-docs/tabs/tabs.ts
@@ -13,7 +13,7 @@ class TabOneCtrl {
 }
 
 @Page({
-  templateUrl: 'tabs.html'
+  templateUrl: 'tabs/tabs.html'
 })
 export class TabsPage {
   constructor(nav: NavController, params: NavParams) {