diff --git a/ionic/components/slides/test/intro/index.ts b/ionic/components/slides/test/intro/index.ts
index 277825b69e..b1c509f9fb 100644
--- a/ionic/components/slides/test/intro/index.ts
+++ b/ionic/components/slides/test/intro/index.ts
@@ -1,11 +1,44 @@
-import {App} from '../../../../../ionic/ionic';
+import {App, Page, NavController} from 'ionic/ionic';
 
 
 @App({
-  templateUrl: 'main.html'
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
 class MyApp {
+  constructor() {
+    this.rootPage = IntroPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+class IntroPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+
   onSlideChanged(slider) {
     console.log('Slide changed', slider);
   }
+
+  skip() {
+    this.nav.push(MainPage);
+  }
+}
+
+@Page({
+  template: `
+  <ion-navbar *navbar>
+    <ion-title>Slides</ion-title>
+  </ion-navbar>
+
+  <ion-content padding>
+    <h1>Another Page</h1>
+  </ion-content>
+
+  `
+})
+class MainPage {
+
 }
diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html
index dd0363c796..e840a1522c 100644
--- a/ionic/components/slides/test/intro/main.html
+++ b/ionic/components/slides/test/intro/main.html
@@ -1,3 +1,41 @@
+<ion-navbar *navbar>
+  <ion-buttons end>
+    <button (click)="skip()">
+      Skip
+    </button>
+  </ion-buttons>
+  <ion-title>Slides</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-slides pager (change)="onSlideChanged($event)" loop="true">
+    <ion-slide>
+      <h3>Thank you for choosing the Awesome App!</h3>
+      <div id="logo">
+        <img src="appicon.png" style="max-width: 128px">
+      </div>
+      <p>
+        The number one app for everything awesome.
+      </p>
+    </ion-slide>
+    <ion-slide>
+      <h3>Using Awesome</h3>
+
+       <div id="list">
+         <h5>Just three steps:</h5>
+         <ol>
+           <li>Be awesome</li>
+           <li>Stay awesome</li>
+           <li>There is no step 3</li>
+         </ol>
+       </div>
+    </ion-slide>
+    <ion-slide>
+      <h3>Any questions?</h3>
+    </ion-slide>
+  </ion-slides>
+</ion-content>
+
 <style>
 .slide {
   color: #000;
@@ -29,42 +67,3 @@
   display:none;
 }
 </style>
-<ion-navbar *navbar>
-  <ion-buttons start>
-    <button>
-      Skip
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button (click)="next()">
-      Next
-    </button>
-  </ion-buttons>
-  <ion-title>Grid Icons</ion-title>
-</ion-navbar>
-<ion-slides pager (change)="onSlideChanged($event)" loop="true" autoplay="true">
-  <ion-slide>
-    <h3>Thank you for choosing the Awesome App!</h3>
-    <div id="logo">
-      <img src="appicon.png" style="max-width: 128px">
-    </div>
-    <p>
-      The number one app for everything awesome.
-    </p>
-  </ion-slide>
-  <ion-slide>
-    <h3>Using Awesome</h3>
-
-     <div id="list">
-       <h5>Just three steps:</h5>
-       <ol>
-         <li>Be awesome</li>
-         <li>Stay awesome</li>
-         <li>There is no step 3</li>
-       </ol>
-     </div>
-  </ion-slide>
-  <ion-slide>
-    <h3>Any questions?</h3>
-  </ion-slide>
-</ion-slides>