diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 45e30e8635..cd6a301503 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,6 +1,6 @@
 import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
 import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
-import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
+import {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
 import {NavigationDetailsPage} from 'navigation';
 
 import {TabsPage} from 'tabs';
@@ -20,12 +20,14 @@ export class MainPage {
               nav: NavController,
               actionSheet: ActionSheet,
               params: NavParams,
+              popup: Popup,
               modal: Modal,
               events: Events)
   {
     this.params = params;
     this.nav = nav;
     this.modal = modal;
+    this.popup = popup;
     this.actionSheet = actionSheet;
     this.navDetailsPage = NavigationDetailsPage;
     this.demoModal = DemoModal;
@@ -41,7 +43,8 @@ export class MainPage {
       zone.run(() => {
         if (e.data) {
           var data = JSON.parse(e.data);
-          this.component.title = helpers.toTitleCase(data.hash.replace('-', ' '));
+          this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' '));
+          console.log(this.component.title);
           if (this.component.title === 'Tabs') {
             this.nav.setRoot(TabsPage);
           }
@@ -102,6 +105,15 @@ export class MainPage {
     });
   }
 
+  // **************************
+  // Popup
+  // **************************
+  showPopup() {
+    this.popup.alert("Popup Title").then(() => {
+    });
+  }
+
+
   // **************************
   // Form
   // **************************
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 91e63e2d53..607d451811 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -123,32 +123,43 @@
       <button dark outline>Dark</button>
     </p>
 
-  </section>
+  </section>  
 
-  <section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }" class="section-padding">
+  <section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding">
 
     <p>
-      <button outline>Default</button>
+      <button round>Default</button>
     </p>
 
     <p>
-      <button secondary outline>Secondary</button>
+      <button secondary round>Secondary</button>
     </p>
 
     <p>
-      <button danger outline>Danger</button>
+      <button danger round>Danger</button>
     </p>
 
     <p>
-      <button light outline>Light</button>
+      <button light round>Light</button>
     </p>
 
     <p>
-      <button dark outline>Dark</button>
+      <button dark round>Dark</button>
     </p>
 
   </section>
 
+  <section id="floating-action-buttons" [ng-class]="{hidden: component.title !== 'Floating Action Buttons' }" class="section-padding">
+
+    <p>
+      <button fab fab-top fab-right>
+        <icon add></icon>
+      </button>
+    </p>
+
+  </section>
+  
+
   <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
 
     <p>
@@ -428,6 +439,12 @@
 
   </section>
 
+  <section id="popup" [ng-class]="{hidden: component.title !== 'Popups' }" class="section-padding">
+    <button block (click)="showPopup()">
+      Show Popup
+    </button>
+  </section>
+
   <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
 
    <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">