diff --git a/src/components/app/_scaffolding.scss b/src/components/app/_scaffolding.scss
index 1d0a1a227c..137e3d1aef 100644
--- a/src/components/app/_scaffolding.scss
+++ b/src/components/app/_scaffolding.scss
@@ -4,7 +4,7 @@ html {
 
 [ion-app] {
   @include flex-display();
-  @include flex-direction(row);
+  @include flex-direction(column);
 
   overflow: hidden;
   height: 100%;
diff --git a/src/components/button/test/basic/index.html b/src/components/button/test/basic/index.html
deleted file mode 100644
index b6fcb86b00..0000000000
--- a/src/components/button/test/basic/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<style>
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-light" href="#">a.light</a>
-    <button class="button button-light">button.light</button>
-    <button class="button button-light hover">hover</button>
-    <button class="button button-light activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-stable" href="#">a.stable</a>
-    <button class="button button-stable">button.stable</button>
-    <button class="button button-stable hover">hover</button>
-    <button class="button button-stable activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-positive" href="#">a.positive</a>
-    <button class="button button-positive">button.positive</button>
-    <button class="button button-positive hover">hover</button>
-    <button class="button button-positive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-assertive" href="#">a.assertive</a>
-    <button class="button button-assertive">button.assertive</button>
-    <button class="button button-assertive hover">hover</button>
-    <button class="button button-assertive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-dark" href="#">a.dark</a>
-    <button class="button button-dark">button.dark</button>
-    <button class="button button-dark hover">hover</button>
-    <button class="button button-dark activated">activated</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/basic/main.html b/src/components/button/test/basic/main.html
new file mode 100644
index 0000000000..b66ef1500c
--- /dev/null
+++ b/src/components/button/test/basic/main.html
@@ -0,0 +1,35 @@
+
+<p>
+  <a class="button button-light" href="#">a.light</a>
+  <button class="button button-light">button.light</button>
+  <button class="button button-light hover">hover</button>
+  <button class="button button-light activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-stable" href="#">a.stable</a>
+  <button class="button button-stable">button.stable</button>
+  <button class="button button-stable hover">hover</button>
+  <button class="button button-stable activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-positive" href="#">a.positive</a>
+  <button class="button button-positive">button.positive</button>
+  <button class="button button-positive hover">hover</button>
+  <button class="button button-positive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-assertive" href="#">a.assertive</a>
+  <button class="button button-assertive">button.assertive</button>
+  <button class="button button-assertive hover">hover</button>
+  <button class="button button-assertive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-dark" href="#">a.dark</a>
+  <button class="button button-dark">button.dark</button>
+  <button class="button button-dark hover">hover</button>
+  <button class="button button-dark activated">activated</button>
+</p>
diff --git a/src/components/button/test/basic/main.js b/src/components/button/test/basic/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/basic/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/button/test/block/index.html b/src/components/button/test/block/index.html
deleted file mode 100644
index ad7e596c89..0000000000
--- a/src/components/button/test/block/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<style>
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-block button-positive" href="#">a.button-block</a>
-    <button class="button button-block button-positive">button.button-block</button>
-  </p>
-
-  <p>
-    <a class="button button-block button-outline button-positive" href="#">a.button-block</a>
-    <button class="button button-block button-outline button-positive">button.button-block</button>
-  </p>
-
-  <p>
-    <a class="button button-block button-clear button-positive" href="#">a.button-block</a>
-    <button class="button button-block button-clear button-positive">button.button-block</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/block/main.html b/src/components/button/test/block/main.html
new file mode 100644
index 0000000000..dd8f61b8fb
--- /dev/null
+++ b/src/components/button/test/block/main.html
@@ -0,0 +1,15 @@
+
+<p>
+  <a class="button button-block button-positive" href="#">a.button-block</a>
+  <button class="button button-block button-positive">button.button-block</button>
+</p>
+
+<p>
+  <a class="button button-block button-outline button-positive" href="#">a.button-block</a>
+  <button class="button button-block button-outline button-positive">button.button-block</button>
+</p>
+
+<p>
+  <a class="button button-block button-clear button-positive" href="#">a.button-block</a>
+  <button class="button button-block button-clear button-positive">button.button-block</button>
+</p>
diff --git a/src/components/button/test/block/main.js b/src/components/button/test/block/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/block/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/button/test/block/test.e2e.js b/src/components/button/test/block/test.e2e.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/button/test/clear/index.html b/src/components/button/test/clear/index.html
deleted file mode 100644
index a4b661980a..0000000000
--- a/src/components/button/test/clear/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<style>
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-clear button-light" href="#">a.light</a>
-    <button class="button button-clear button-light">button.light</button>
-    <button class="button button-clear button-light hover">hover</button>
-    <button class="button button-clear button-light activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-clear button-stable" href="#">a.stable</a>
-    <button class="button button-clear button-stable">button.stable</button>
-    <button class="button button-clear button-stable hover">hover</button>
-    <button class="button button-clear button-stable activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-clear button-positive" href="#">a.positive</a>
-    <button class="button button-clear button-positive">button.positive</button>
-    <button class="button button-clear button-positive hover">hover</button>
-    <button class="button button-clear button-positive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-clear button-assertive" href="#">a.assertive</a>
-    <button class="button button-clear button-assertive">button.assertive</button>
-    <button class="button button-clear button-assertive hover">hover</button>
-    <button class="button button-clear button-assertive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-clear button-dark" href="#">a.dark</a>
-    <button class="button button-clear button-dark">button.dark</button>
-    <button class="button button-clear button-dark hover">hover</button>
-    <button class="button button-clear button-dark activated">activated</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/clear/main.html b/src/components/button/test/clear/main.html
new file mode 100644
index 0000000000..e570e69dc5
--- /dev/null
+++ b/src/components/button/test/clear/main.html
@@ -0,0 +1,35 @@
+
+<p>
+  <a class="button button-clear button-light" href="#">a.light</a>
+  <button class="button button-clear button-light">button.light</button>
+  <button class="button button-clear button-light hover">hover</button>
+  <button class="button button-clear button-light activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-clear button-stable" href="#">a.stable</a>
+  <button class="button button-clear button-stable">button.stable</button>
+  <button class="button button-clear button-stable hover">hover</button>
+  <button class="button button-clear button-stable activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-clear button-positive" href="#">a.positive</a>
+  <button class="button button-clear button-positive">button.positive</button>
+  <button class="button button-clear button-positive hover">hover</button>
+  <button class="button button-clear button-positive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-clear button-assertive" href="#">a.assertive</a>
+  <button class="button button-clear button-assertive">button.assertive</button>
+  <button class="button button-clear button-assertive hover">hover</button>
+  <button class="button button-clear button-assertive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-clear button-dark" href="#">a.dark</a>
+  <button class="button button-clear button-dark">button.dark</button>
+  <button class="button button-clear button-dark hover">hover</button>
+  <button class="button button-clear button-dark activated">activated</button>
+</p>
diff --git a/src/components/button/test/clear/main.js b/src/components/button/test/clear/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/clear/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/button/test/full/index.html b/src/components/button/test/full/index.html
deleted file mode 100644
index 42823ba577..0000000000
--- a/src/components/button/test/full/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<style>
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-full button-positive" href="#">a.button-full</a>
-    <button class="button button-full button-positive">button.button-full</button>
-  </p>
-
-  <p>
-    <a class="button button-full button-outline button-positive" href="#">a.button-full</a>
-    <button class="button button-full button-outline button-positive">button.button-full</button>
-  </p>
-
-  <p>
-    <a class="button button-full button-clear button-positive" href="#">a.button-full</a>
-    <button class="button button-full button-clear button-positive">button.button-full</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/full/main.html b/src/components/button/test/full/main.html
new file mode 100644
index 0000000000..4f53aae9d9
--- /dev/null
+++ b/src/components/button/test/full/main.html
@@ -0,0 +1,15 @@
+
+<p>
+  <a class="button button-full button-positive" href="#">a.button-full</a>
+  <button class="button button-full button-positive">button.button-full</button>
+</p>
+
+<p>
+  <a class="button button-full button-outline button-positive" href="#">a.button-full</a>
+  <button class="button button-full button-outline button-positive">button.button-full</button>
+</p>
+
+<p>
+  <a class="button button-full button-clear button-positive" href="#">a.button-full</a>
+  <button class="button button-full button-clear button-positive">button.button-full</button>
+</p>
diff --git a/src/components/button/test/full/main.js b/src/components/button/test/full/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/full/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/button/test/outline/index.html b/src/components/button/test/outline/index.html
deleted file mode 100644
index aefef78b40..0000000000
--- a/src/components/button/test/outline/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<style>
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-outline button-light" href="#">a.light</a>
-    <button class="button button-outline button-light">button.light</button>
-    <button class="button button-outline button-light hover">hover</button>
-    <button class="button button-outline button-light activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-outline button-stable" href="#">a.stable</a>
-    <button class="button button-outline button-stable">button.stable</button>
-    <button class="button button-outline button-stable hover">hover</button>
-    <button class="button button-outline button-stable activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-outline button-positive" href="#">a.positive</a>
-    <button class="button button-outline button-positive">button.positive</button>
-    <button class="button button-outline button-positive hover">hover</button>
-    <button class="button button-outline button-positive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-outline button-assertive" href="#">a.assertive</a>
-    <button class="button button-outline button-assertive">button.assertive</button>
-    <button class="button button-outline button-assertive hover">hover</button>
-    <button class="button button-outline button-assertive activated">activated</button>
-  </p>
-
-  <p>
-    <a class="button button-outline button-dark" href="#">a.dark</a>
-    <button class="button button-outline button-dark">button.dark</button>
-    <button class="button button-outline button-dark hover">hover</button>
-    <button class="button button-outline button-dark activated">activated</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/outline/main.html b/src/components/button/test/outline/main.html
new file mode 100644
index 0000000000..4182418c09
--- /dev/null
+++ b/src/components/button/test/outline/main.html
@@ -0,0 +1,35 @@
+
+<p>
+  <a class="button button-outline button-light" href="#">a.light</a>
+  <button class="button button-outline button-light">button.light</button>
+  <button class="button button-outline button-light hover">hover</button>
+  <button class="button button-outline button-light activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-outline button-stable" href="#">a.stable</a>
+  <button class="button button-outline button-stable">button.stable</button>
+  <button class="button button-outline button-stable hover">hover</button>
+  <button class="button button-outline button-stable activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-outline button-positive" href="#">a.positive</a>
+  <button class="button button-outline button-positive">button.positive</button>
+  <button class="button button-outline button-positive hover">hover</button>
+  <button class="button button-outline button-positive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-outline button-assertive" href="#">a.assertive</a>
+  <button class="button button-outline button-assertive">button.assertive</button>
+  <button class="button button-outline button-assertive hover">hover</button>
+  <button class="button button-outline button-assertive activated">activated</button>
+</p>
+
+<p>
+  <a class="button button-outline button-dark" href="#">a.dark</a>
+  <button class="button button-outline button-dark">button.dark</button>
+  <button class="button button-outline button-dark hover">hover</button>
+  <button class="button button-outline button-dark activated">activated</button>
+</p>
diff --git a/src/components/button/test/outline/main.js b/src/components/button/test/outline/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/outline/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/button/test/sizes/index.html b/src/components/button/test/sizes/index.html
deleted file mode 100644
index 8ed3601963..0000000000
--- a/src/components/button/test/sizes/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<style>
-  [ion-app] {
-    display: block;
-  }
-</style>
-
-<div ion-app>
-
-  <p>
-    <a class="button button-small button-positive" href="#">a.small</a>
-    <button class="button button-small button-positive">button.small</button>
-
-    <a class="button button-outline button-small button-positive" href="#">a.outline.small</a>
-    <button class="button button-outline button-small button-positive">button.outline.small</button>
-
-    <a class="button button-clear button-small button-positive" href="#">a.clear.small</a>
-    <button class="button button-clear button-small button-positive">button.clear.small</button>
-  </p>
-
-  <p>
-    <a class="button button-large button-positive" href="#">
-      <span style="font-size:44px">H</span>
-      a</a>
-    <button class="button button-large button-positive">button</button>
-
-    <a class="button button-outline button-large button-positive" href="#">a</a>
-    <button class="button button-outline button-large button-positive">button</button>
-
-    <a class="button button-clear button-large button-positive" href="#">a</a>
-    <button class="button button-clear button-large button-positive">button</button>
-  </p>
-
-</div>
diff --git a/src/components/button/test/sizes/main.html b/src/components/button/test/sizes/main.html
new file mode 100644
index 0000000000..b1f4ad10ad
--- /dev/null
+++ b/src/components/button/test/sizes/main.html
@@ -0,0 +1,24 @@
+
+<p>
+  <a class="button button-small button-positive" href="#">a.small</a>
+  <button class="button button-small button-positive">button.small</button>
+
+  <a class="button button-outline button-small button-positive" href="#">a.outline.small</a>
+  <button class="button button-outline button-small button-positive">button.outline.small</button>
+
+  <a class="button button-clear button-small button-positive" href="#">a.clear.small</a>
+  <button class="button button-clear button-small button-positive">button.clear.small</button>
+</p>
+
+<p>
+  <a class="button button-large button-positive" href="#">
+    <span style="font-size:44px">H</span>
+    a</a>
+  <button class="button button-large button-positive">button</button>
+
+  <a class="button button-outline button-large button-positive" href="#">a</a>
+  <button class="button button-outline button-large button-positive">button</button>
+
+  <a class="button button-clear button-large button-positive" href="#">a</a>
+  <button class="button button-clear button-large button-positive">button</button>
+</p>
diff --git a/src/components/button/test/sizes/main.js b/src/components/button/test/sizes/main.js
new file mode 100644
index 0000000000..a70ef9ab9a
--- /dev/null
+++ b/src/components/button/test/sizes/main.js
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)