diff --git a/src/components/app/test/typography/app.module.ts b/src/components/app/test/typography/app.module.ts
deleted file mode 100644
index 524f4fbd56..0000000000
--- a/src/components/app/test/typography/app.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { IonicApp, IonicModule, App } from '../../../..';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class AppComponent {
-  constructor(app: App) {
-    app.setTitle('Basic Buttons');
-  }
-}
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(AppComponent)
-  ],
-  bootstrap: [IonicApp]
-})
-export class AppModule {}
diff --git a/src/components/app/test/typography/app/app.component.ts b/src/components/app/test/typography/app/app.component.ts
new file mode 100644
index 0000000000..40cb41e266
--- /dev/null
+++ b/src/components/app/test/typography/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}
diff --git a/src/components/app/test/typography/app/app.module.ts b/src/components/app/test/typography/app/app.module.ts
new file mode 100644
index 0000000000..5f208149a9
--- /dev/null
+++ b/src/components/app/test/typography/app/app.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, {}),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+  ]
+})
+export class AppModule {}
diff --git a/src/components/app/test/typography/main.ts b/src/components/app/test/typography/app/main.ts
similarity index 100%
rename from src/components/app/test/typography/main.ts
rename to src/components/app/test/typography/app/main.ts
diff --git a/src/components/app/test/typography/main.html b/src/components/app/test/typography/pages/page-one/page-one.html
similarity index 56%
rename from src/components/app/test/typography/main.html
rename to src/components/app/test/typography/pages/page-one/page-one.html
index 2a84763109..12c5ab5d4e 100644
--- a/src/components/app/test/typography/main.html
+++ b/src/components/app/test/typography/pages/page-one/page-one.html
@@ -11,11 +11,11 @@
 
   <h1>H1: The quick brown fox jumps over the lazy dog</h1>
 
-  <h2 primary>H2: The quick brown fox jumps over the lazy dog</h2>
+  <h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
 
   <h3>H3: The quick brown fox jumps over the lazy dog</h3>
 
-  <h4 danger>H4: The quick brown fox jumps over the lazy dog</h4>
+  <h4 ion-text color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
 
   <h5>H5: The quick brown fox jumps over the lazy dog</h5>
 
@@ -23,9 +23,9 @@
 
   <p>
     I saw a werewolf with a Chinese menu in his hand.
-    Walking through the <sub danger>streets</sub> of Soho in the rain.
-    He <i primary>was</i> looking for a place called Lee Ho Fook's.
-    Gonna get a <a secondary>big dish of beef chow mein.</a>
+    Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+    He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+    Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
   </p>
 
   <p>
@@ -34,7 +34,7 @@
     Better stay away from him.
     He'll rip your lungs out, Jim.
     I'd like to meet his tailor.
-    <ion-icon danger name="cut"></ion-icon>
+    <ion-icon ion-text color="danger" name="cut"></ion-icon>
   </p>
 
 </ion-content>
\ No newline at end of file
diff --git a/src/components/app/test/typography/pages/page-one/page-one.module.ts b/src/components/app/test/typography/pages/page-one/page-one.module.ts
new file mode 100644
index 0000000000..8b48a5850d
--- /dev/null
+++ b/src/components/app/test/typography/pages/page-one/page-one.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}
diff --git a/src/components/app/test/typography/pages/page-one/page-one.ts b/src/components/app/test/typography/pages/page-one/page-one.ts
new file mode 100644
index 0000000000..b822cceac5
--- /dev/null
+++ b/src/components/app/test/typography/pages/page-one/page-one.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IonicPage } from '../../../../../..';
+
+@IonicPage({
+  name: 'page-one'
+})
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne { }