diff --git a/demos/component-docs/buttons/buttons.html b/demos/component-docs/buttons/basic/basic.html
similarity index 100%
rename from demos/component-docs/buttons/buttons.html
rename to demos/component-docs/buttons/basic/basic.html
diff --git a/demos/component-docs/buttons/basic/pages.ts b/demos/component-docs/buttons/basic/pages.ts
new file mode 100644
index 0000000000..dd668f91ed
--- /dev/null
+++ b/demos/component-docs/buttons/basic/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/basic/basic.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/block.html b/demos/component-docs/buttons/block/block.html
similarity index 100%
rename from demos/component-docs/buttons/block.html
rename to demos/component-docs/buttons/block/block.html
diff --git a/demos/component-docs/buttons/block/pages.ts b/demos/component-docs/buttons/block/pages.ts
new file mode 100644
index 0000000000..5cfebde02e
--- /dev/null
+++ b/demos/component-docs/buttons/block/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/block.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BlockPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/buttons.ts b/demos/component-docs/buttons/buttons.ts
index d10bea7ecb..e6f2aae6d2 100644
--- a/demos/component-docs/buttons/buttons.ts
+++ b/demos/component-docs/buttons/buttons.ts
@@ -1,103 +1,10 @@
-import {Page} from 'ionic/ionic';
-import {forwardRef} from 'angular2/angular2';
-import {AndroidAttribute} from '../helpers';
-
-@Page({
-  templateUrl: 'buttons/buttons.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/block.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class BlockButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/clear.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ClearButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/full.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class FullButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/outline.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class OutlineButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/round.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class RoundButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/fab.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class FabPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/sizes.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ButtonSizesPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/icons.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class IconButtonsPage {
-    constructor() {
-
-    }
-}
-
-@Page({
-  templateUrl: 'buttons/components.html',
-  directives: [forwardRef(() => AndroidAttribute)]
-})
-export class ButtonsInComponentsPage {
-    constructor() {
-
-    }
-}
+export * from './basic/pages';
+export * from './block/pages';
+export * from './clear/pages';
+export * from './components/pages';
+export * from './fab/pages';
+export * from './full/pages';
+export * from './icons/pages';
+export * from './outline/pages';
+export * from './round/pages';
+export * from './sizes/pages';
diff --git a/demos/component-docs/buttons/clear.html b/demos/component-docs/buttons/clear/clear.html
similarity index 100%
rename from demos/component-docs/buttons/clear.html
rename to demos/component-docs/buttons/clear/clear.html
diff --git a/demos/component-docs/buttons/clear/pages.ts b/demos/component-docs/buttons/clear/pages.ts
new file mode 100644
index 0000000000..2622ddbf26
--- /dev/null
+++ b/demos/component-docs/buttons/clear/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/clear.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ClearPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/components.html b/demos/component-docs/buttons/components/components.html
similarity index 100%
rename from demos/component-docs/buttons/components.html
rename to demos/component-docs/buttons/components/components.html
diff --git a/demos/component-docs/buttons/components/pages.ts b/demos/component-docs/buttons/components/pages.ts
new file mode 100644
index 0000000000..4fd151ef1a
--- /dev/null
+++ b/demos/component-docs/buttons/components/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/components.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ComponentsPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/fab.html b/demos/component-docs/buttons/fab/fab.html
similarity index 100%
rename from demos/component-docs/buttons/fab.html
rename to demos/component-docs/buttons/fab/fab.html
diff --git a/demos/component-docs/buttons/fab/pages.ts b/demos/component-docs/buttons/fab/pages.ts
new file mode 100644
index 0000000000..93c01d1804
--- /dev/null
+++ b/demos/component-docs/buttons/fab/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/fab.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class FabPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/full.html b/demos/component-docs/buttons/full/full.html
similarity index 100%
rename from demos/component-docs/buttons/full.html
rename to demos/component-docs/buttons/full/full.html
diff --git a/demos/component-docs/buttons/full/pages.ts b/demos/component-docs/buttons/full/pages.ts
new file mode 100644
index 0000000000..aadf415638
--- /dev/null
+++ b/demos/component-docs/buttons/full/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/full.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class FullPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/icons.html b/demos/component-docs/buttons/icons/icons.html
similarity index 100%
rename from demos/component-docs/buttons/icons.html
rename to demos/component-docs/buttons/icons/icons.html
diff --git a/demos/component-docs/buttons/icons/pages.ts b/demos/component-docs/buttons/icons/pages.ts
new file mode 100644
index 0000000000..f2f247e34c
--- /dev/null
+++ b/demos/component-docs/buttons/icons/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/icons.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class IconsPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/outline.html b/demos/component-docs/buttons/outline/outline.html
similarity index 100%
rename from demos/component-docs/buttons/outline.html
rename to demos/component-docs/buttons/outline/outline.html
diff --git a/demos/component-docs/buttons/outline/pages.ts b/demos/component-docs/buttons/outline/pages.ts
new file mode 100644
index 0000000000..5f74737ab6
--- /dev/null
+++ b/demos/component-docs/buttons/outline/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/outline.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class OutlinePage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/round/pages.ts b/demos/component-docs/buttons/round/pages.ts
new file mode 100644
index 0000000000..fad823f814
--- /dev/null
+++ b/demos/component-docs/buttons/round/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/round.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class RoundPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/round.html b/demos/component-docs/buttons/round/round.html
similarity index 100%
rename from demos/component-docs/buttons/round.html
rename to demos/component-docs/buttons/round/round.html
diff --git a/demos/component-docs/buttons/sizes/pages.ts b/demos/component-docs/buttons/sizes/pages.ts
new file mode 100644
index 0000000000..a60e3decea
--- /dev/null
+++ b/demos/component-docs/buttons/sizes/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+  templateUrl: 'buttons/sizes.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class SizesPage {
+    constructor() {
+
+    }
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/sizes.html b/demos/component-docs/buttons/sizes/sizes.html
similarity index 100%
rename from demos/component-docs/buttons/sizes.html
rename to demos/component-docs/buttons/sizes/sizes.html
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index 36f4ffd672..017bb459e9 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -4,17 +4,7 @@ import {Platform, Navbar} from 'ionic/ionic';
 
 import {ActionSheetPage} from './actionSheet/actionSheet';
 
-import {ButtonsPage,
-        BlockButtonsPage,
-        ClearButtonsPage,
-        FullButtonsPage,
-        OutlineButtonsPage,
-        RoundButtonsPage,
-        FabPage,
-        ButtonSizesPage,
-        IconButtonsPage,
-        ButtonsInComponentsPage} from './buttons/buttons';
-
+import * as buttons from './buttons/buttons';
 import * as cards from './cards/cards';
 
 import {FormsPage,
@@ -106,16 +96,17 @@ export function hasScrollbar() {
 export function getPageFor(hash) {
     return {
         'action-sheets': ActionSheetPage,
-        'buttons': ButtonsPage,
-        'block-buttons': BlockButtonsPage,
-        'clear-buttons': ClearButtonsPage,
-        'full-buttons': FullButtonsPage,
-        'outline-buttons': OutlineButtonsPage,
-        'round-buttons': RoundButtonsPage,
-        'floating-action-buttons': FabPage,
-        'buttons-in-components': ButtonsInComponentsPage,
-        'button-sizes': ButtonSizesPage,
-        'icon-buttons': IconButtonsPage,
+
+        'buttons': buttons.BasicPage,
+        'block-buttons': buttons.BlockPage,
+        'clear-buttons': buttons.ClearPage,
+        'full-buttons': buttons.FullPage,
+        'outline-buttons': buttons.OutlinePage,
+        'round-buttons': buttons.RoundPage,
+        'floating-action-buttons': buttons.FabPage,
+        'buttons-in-components': buttons.ComponentsPage,
+        'button-sizes': buttons.SizesPage,
+        'icon-buttons': buttons.IconsPage,
 
         'cards': cards.BasicPage,
         'card-header': cards.HeaderPage,