diff --git a/demos/component-docs/actionSheet/actionSheet.ts b/demos/component-docs/actionSheet/actionSheet.ts
index 749cc8f51b..83ef677164 100644
--- a/demos/component-docs/actionSheet/actionSheet.ts
+++ b/demos/component-docs/actionSheet/actionSheet.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView, ActionSheet} from 'ionic/ionic';
+import {IonicPlatform, Page, ActionSheet} from 'ionic/ionic';
 
-@IonicView({
+@Page({
   templateUrl: 'actionSheet/actionSheet.html',
 })
 export class ActionSheetPage {
diff --git a/demos/component-docs/buttons/buttons.ts b/demos/component-docs/buttons/buttons.ts
index fb1880085a..dcf0084f9a 100644
--- a/demos/component-docs/buttons/buttons.ts
+++ b/demos/component-docs/buttons/buttons.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {IonicPlatform, Page} from 'ionic/ionic';
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/buttons.html',
 })
 export class ButtonsPage {
@@ -9,7 +9,7 @@ export class ButtonsPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/block.html',
 })
 export class BlockButtonsPage {
@@ -18,7 +18,7 @@ export class BlockButtonsPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/full.html',
 })
 export class FullButtonsPage {
@@ -27,7 +27,7 @@ export class FullButtonsPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/outline.html',
 })
 export class OutlineButtonsPage {
@@ -36,7 +36,7 @@ export class OutlineButtonsPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/round.html',
 })
 export class RoundButtonsPage {
@@ -45,7 +45,7 @@ export class RoundButtonsPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/fab.html',
 })
 export class FabPage {
@@ -54,7 +54,7 @@ export class FabPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/sizes.html',
 })
 export class ButtonSizesPage {
@@ -63,7 +63,7 @@ export class ButtonSizesPage {
     }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'buttons/icons.html',
 })
 export class IconButtonsPage {
diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts
index c48f892ab9..03fb88e988 100644
--- a/demos/component-docs/cards/cards.ts
+++ b/demos/component-docs/cards/cards.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {IonicPlatform, Page} from 'ionic/ionic';
 
-@IonicView({
+@Page({
   templateUrl: 'cards/cards.html',
 })
 export class CardsPage {
diff --git a/demos/component-docs/forms/forms.ts b/demos/component-docs/forms/forms.ts
index 37a03c6ac5..78dda384ca 100644
--- a/demos/component-docs/forms/forms.ts
+++ b/demos/component-docs/forms/forms.ts
@@ -1,8 +1,8 @@
-import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
-import {IonicView} from 'ionic/ionic';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
+import {Page} from 'ionic/ionic';
 
 
-@IonicView({
+@Page({
   templateUrl: 'forms/forms.html',
   bindings: [FormBuilder]
 })
diff --git a/demos/component-docs/icons/icons.ts b/demos/component-docs/icons/icons.ts
index 02ca95dbe2..830b067e9c 100644
--- a/demos/component-docs/icons/icons.ts
+++ b/demos/component-docs/icons/icons.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {IonicPlatform, Page} from 'ionic/ionic';
 
-@IonicView({
+@Page({
     templateUrl: 'icons/icons.html',
 })
 export class IconsPage {
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 4a3d936416..328ce94004 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,5 +1,5 @@
 import {App, IonicApp, IonicPlatform, ActionSheet} from 'ionic/ionic';
-import {IonicView, IonicConfig, Events} from 'ionic/ionic';
+import {Page, IonicConfig, Events} from 'ionic/ionic';
 import {ActionSheetPage} from 'actionSheet/actionSheet';
 import * as helpers from 'helpers';
 
diff --git a/demos/component-docs/lists/lists.ts b/demos/component-docs/lists/lists.ts
index 66e78d0bfd..a4426af62e 100644
--- a/demos/component-docs/lists/lists.ts
+++ b/demos/component-docs/lists/lists.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {IonicPlatform, Page} from 'ionic/ionic';
 
-@IonicView({
+@Page({
     templateUrl: 'lists/lists.html',
 })
 export class ListsPage {
diff --git a/demos/component-docs/menus/menu-events.html b/demos/component-docs/menus/menu-events.html
new file mode 100644
index 0000000000..d95d163938
--- /dev/null
+++ b/demos/component-docs/menus/menu-events.html
@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Events
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>
diff --git a/demos/component-docs/menus/menu-friends.html b/demos/component-docs/menus/menu-friends.html
new file mode 100644
index 0000000000..10a030378b
--- /dev/null
+++ b/demos/component-docs/menus/menu-friends.html
@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Friends
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>
diff --git a/demos/component-docs/menus/menu-home.html b/demos/component-docs/menus/menu-home.html
new file mode 100644
index 0000000000..4696694445
--- /dev/null
+++ b/demos/component-docs/menus/menu-home.html
@@ -0,0 +1,16 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Menus
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+  <button block menu-toggle>Toggle Menu</button>
+</ion-content> 
diff --git a/demos/component-docs/menus/menu-places.html b/demos/component-docs/menus/menu-places.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html
index 6adb99d5e6..999f6b0ade 100644
--- a/demos/component-docs/menus/menus.html
+++ b/demos/component-docs/menus/menus.html
@@ -1,8 +1,24 @@
+<ion-menu #menu [content]="content">
 
-<ion-navbar *navbar class="show-navbar">
-  <ion-title>Menus</ion-title>
-</ion-navbar>
+  <ion-toolbar primary>
+    <ion-title>Menu</ion-title>
+  </ion-toolbar>
 
-<ion-content padding class="has-header">
-  TODO
-</ion-content>
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menu-toggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="menuNav" #content [root]="rootView"></ion-nav> 
diff --git a/demos/component-docs/menus/menus.ts b/demos/component-docs/menus/menus.ts
index bf6cbfa992..bd3a7c7845 100644
--- a/demos/component-docs/menus/menus.ts
+++ b/demos/component-docs/menus/menus.ts
@@ -1,10 +1,58 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {App, IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
+import {Page, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
 
-@IonicView({
-    templateUrl: 'menus/menus.html',
+@Page({
+  templateUrl: 'menus/menu-home.html'
+})
+class PageOne{
+  constructor(nav: NavController, events: Events) {
+      this.nav = nav;
+      this.events = events;
+  }
+}
+
+@Page({
+  templateUrl: 'menus/menu-friends.html'
+})
+class PageTwo{
+}
+
+@Page({
+  templateUrl: 'menus/menu-events.html'
+})
+class PageThree{
+}
+
+@Page({
+  templateUrl: 'menus/menus.html'
 })
 export class MenusPage {
-    constructor() {
 
-    }
-}
\ No newline at end of file
+  constructor(app: IonicApp, events: Events, nav: NavController) {
+    this.nav = nav;
+    this.app = app;
+    this.rootView = PageOne;
+    this.pages = [
+      { title: 'Home', component: PageOne },
+      { title: 'Friends', component: PageTwo },
+      { title: 'Events', component: PageThree }
+    ];
+
+  }
+
+  onViewWillUnload() {
+  }
+
+  openPage(menu, page) {
+    // close the menu when clicking a link from the menu
+    menu.close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    // let nav = this.app.getComponent('nav');
+    this.nav.setRoot(page.component);
+  }
+}
+
+
diff --git a/demos/component-docs/modals/modals.ts b/demos/component-docs/modals/modals.ts
index 4234adf900..2c7c0b86f2 100644
--- a/demos/component-docs/modals/modals.ts
+++ b/demos/component-docs/modals/modals.ts
@@ -1,8 +1,8 @@
-import {App, IonicApp, Animation, Modal, NavController, IonicView, Events} from 'ionic/ionic';
+import {App, IonicApp, Animation, Modal, NavController, Page, Events} from 'ionic/ionic';
 import * as helpers from 'helpers';
 
 
-@IonicView({
+@Page({
   templateUrl: 'modals/modals.html'
 })
 class ModalsFirstPage {
@@ -26,7 +26,7 @@ class ModalsFirstPage {
 
 }
 
-@IonicView({
+@Page({
   templateUrl: 'modals/modals-content.html'
 })
 class ModalsContentPage {
@@ -46,7 +46,7 @@ class ModalsContentPage {
   }
 }
 
-@IonicView({
+@Page({
   template: '<ion-nav [root]="rootView"></ion-nav>'
 })
 export class ModalsPage {
diff --git a/demos/component-docs/navigation/navigation.ts b/demos/component-docs/navigation/navigation.ts
index 5c5f5250e2..be2bca4162 100644
--- a/demos/component-docs/navigation/navigation.ts
+++ b/demos/component-docs/navigation/navigation.ts
@@ -1,8 +1,8 @@
 import {NavController, NavParams} from 'ionic/ionic';
-import {IonicView, Events} from 'ionic/ionic';
+import {Page, Events} from 'ionic/ionic';
 import * as helpers from 'helpers';
 
-@IonicView({
+@Page({
   templateUrl: 'navigation/navigation-details.html'
 })
 class NavigationDetailsPage {
@@ -26,7 +26,7 @@ class NavigationDetailsPage {
   }
 }
 
-@IonicView({
+@Page({
     templateUrl: 'navigation/navigation.html',
 })
 export class NavigationPage {
diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/popups/popups.ts
index 609975601b..8744fbb3c0 100644
--- a/demos/component-docs/popups/popups.ts
+++ b/demos/component-docs/popups/popups.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView, Popup} from 'ionic/ionic';
+import {IonicPlatform, Page, Popup} from 'ionic/ionic';
 
-@IonicView({
+@Page({
     templateUrl: 'popups/popups.html',
 })
 export class PopupsPage {
diff --git a/demos/component-docs/slides/slides.ts b/demos/component-docs/slides/slides.ts
index dfaf615154..d817c341c9 100644
--- a/demos/component-docs/slides/slides.ts
+++ b/demos/component-docs/slides/slides.ts
@@ -1,6 +1,6 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {IonicPlatform, Page} from 'ionic/ionic';
 
-@IonicView({
+@Page({
     templateUrl: 'slides/slides.html',
 })
 export class SlidesPage {
diff --git a/demos/component-docs/tabs/tabs.ts b/demos/component-docs/tabs/tabs.ts
index 22e1a53966..e69eae67cd 100644
--- a/demos/component-docs/tabs/tabs.ts
+++ b/demos/component-docs/tabs/tabs.ts
@@ -1,8 +1,8 @@
 import {NavController, NavParams} from 'ionic/ionic';
-import {IonicView, ViewController} from 'ionic/ionic';
+import {Page, ViewController} from 'ionic/ionic';
 import * as helpers from 'helpers';
 
-@IonicView({
+@Page({
   template: 'Hello 1',
 })
 class TabOneCtrl {
@@ -12,7 +12,7 @@ class TabOneCtrl {
   }
 }
 
-@IonicView({
+@Page({
   templateUrl: 'tabs.html'
 })
 export class TabsPage {