diff --git a/demos/action-sheet/app.html b/demos/action-sheet/app.html
new file mode 100644
index 0000000000..5f6bb33d68
--- /dev/null
+++ b/demos/action-sheet/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
\ No newline at end of file
diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts
index 5775b714b8..829799ce6b 100644
--- a/demos/action-sheet/index.ts
+++ b/demos/action-sheet/index.ts
@@ -1,41 +1,51 @@
-import {App, ActionSheet} from 'ionic/ionic';
-
+import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
+import {ActionSheet} from 'ionic/ionic';
 
 @App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
   templateUrl: 'main.html'
 })
-class IonicApp {
-
-  constructor(actionSheet: ActionSheet) {
+export class InitialPage {
+  constructor(actionSheet: ActionSheet, platform: Platform) {
     this.actionSheet = actionSheet;
+    this.platform = platform;
   }
 
-  openMenu() {
+  open() {
 
     this.actionSheet.open({
       buttons: [
-        { text: 'Share This' },
-        { text: 'Move' }
+        { text: 'Share'},
+        { text: 'Play'},
+        { text: 'Favorite'}
       ],
       destructiveText: 'Delete',
-      titleText: 'Modify your album',
+      titleText: 'Albums',
       cancelText: 'Cancel',
-      cancel: function() {
+      cancel: () => {
         console.log('Canceled');
       },
       destructiveButtonClicked: () => {
         console.log('Destructive clicked');
       },
-      buttonClicked: function(index) {
+      buttonClicked: (index) => {
         console.log('Button clicked', index);
-        if(index == 1) { return false; }
+        if (index == 1) { return false; }
         return true;
       }
 
     }).then(actionSheetRef => {
       this.actionSheetRef = actionSheetRef;
     });
-
   }
-
 }
+
diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html
index e22f9e3ca7..58ebcd2cac 100644
--- a/demos/action-sheet/main.html
+++ b/demos/action-sheet/main.html
@@ -1,3 +1,9 @@
+<ion-navbar *navbar>
+  <ion-title>Action Sheet</ion-title>
+</ion-navbar>
+
 <ion-content padding>
-  <button (click)="openMenu()">Open Action Sheet</button>
-</ion-content>
+  <ion-row>
+    <button full block (click)="open()">Open Action Sheet</button>    
+  </ion-row>
+<ion-content>