diff --git a/packages/core/src/components/app/app.scss b/packages/core/src/components/app/app.scss
index 20f8879d53..c5f36845e4 100644
--- a/packages/core/src/components/app/app.scss
+++ b/packages/core/src/components/app/app.scss
@@ -147,11 +147,23 @@ sub {
   bottom: -.25em;
 }
 
-
 ion-app {
-  @extend .ion-page
+  position: absolute;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: $z-index-page-container;
+
+  width: 100%;
+  height: 100%;
+
+  contain: layout size style;
 }
 
+
 // Page Container Structure
 // --------------------------------------------------
 
@@ -167,24 +179,6 @@ ion-app {
   opacity: 0;
 }
 
-// Toolbar Container Structure
-// --------------------------------------------------
-
-ion-header,
-ion-footer {
-  position: relative;
-  z-index: $z-index-toolbar;
-  display: block;
-
-  order: 1;
-
-  width: 100%;
-}
-
-ion-header {
-  order: -1;
-}
-
 
 // Misc
 // --------------------------------------------------
diff --git a/packages/core/src/components/footer/footer.ios.scss b/packages/core/src/components/footer/footer.ios.scss
index 77f55a640a..60a6013f36 100644
--- a/packages/core/src/components/footer/footer.ios.scss
+++ b/packages/core/src/components/footer/footer.ios.scss
@@ -1,3 +1,4 @@
+@import "./footer";
 @import "./footer.ios.vars";
 
 // iOS Footer
diff --git a/packages/core/src/components/footer/footer.md.scss b/packages/core/src/components/footer/footer.md.scss
new file mode 100644
index 0000000000..3bc837f16e
--- /dev/null
+++ b/packages/core/src/components/footer/footer.md.scss
@@ -0,0 +1,4 @@
+@import "./footer";
+
+// Material Design Footer
+// --------------------------------------------------
diff --git a/packages/core/src/components/footer/footer.scss b/packages/core/src/components/footer/footer.scss
new file mode 100644
index 0000000000..bb9bfe8cde
--- /dev/null
+++ b/packages/core/src/components/footer/footer.scss
@@ -0,0 +1,14 @@
+@import "../../themes/ionic.globals";
+
+// Footer
+// --------------------------------------------------
+
+ion-footer {
+  position: relative;
+  z-index: $z-index-toolbar;
+  display: block;
+
+  order: 1;
+
+  width: 100%;
+}
diff --git a/packages/core/src/components/footer/footer.tsx b/packages/core/src/components/footer/footer.tsx
index 867c082627..5cb7ec2b1e 100644
--- a/packages/core/src/components/footer/footer.tsx
+++ b/packages/core/src/components/footer/footer.tsx
@@ -4,6 +4,10 @@ import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-footer',
+  styleUrls: {
+    ios: 'footer.ios.scss',
+    md: 'footer.md.scss'
+  },
   host: {
     theme: 'footer'
   }
diff --git a/packages/core/src/components/header/header.ios.scss b/packages/core/src/components/header/header.ios.scss
index 2065f2ff0c..32428af83a 100644
--- a/packages/core/src/components/header/header.ios.scss
+++ b/packages/core/src/components/header/header.ios.scss
@@ -1,3 +1,4 @@
+@import "./header";
 @import "./header.ios.vars";
 
 // iOS Header
diff --git a/packages/core/src/components/header/header.md.scss b/packages/core/src/components/header/header.md.scss
new file mode 100644
index 0000000000..aad873768a
--- /dev/null
+++ b/packages/core/src/components/header/header.md.scss
@@ -0,0 +1,4 @@
+@import "./header";
+
+// Material Design Header
+// --------------------------------------------------
diff --git a/packages/core/src/components/header/header.scss b/packages/core/src/components/header/header.scss
new file mode 100644
index 0000000000..e20ec2ca08
--- /dev/null
+++ b/packages/core/src/components/header/header.scss
@@ -0,0 +1,14 @@
+@import "../../themes/ionic.globals";
+
+// Header
+// --------------------------------------------------
+
+ion-header {
+  position: relative;
+  z-index: $z-index-toolbar;
+  display: block;
+
+  order: -1;
+
+  width: 100%;
+}
diff --git a/packages/core/src/components/header/header.tsx b/packages/core/src/components/header/header.tsx
index 59b6109116..2711bf6a5c 100644
--- a/packages/core/src/components/header/header.tsx
+++ b/packages/core/src/components/header/header.tsx
@@ -5,7 +5,8 @@ import { createThemedClasses } from '../../utils/theme';
 @Component({
   tag: 'ion-header',
   styleUrls: {
-    ios: 'header.ios.scss'
+    ios: 'header.ios.scss',
+    md: 'header.md.scss'
   },
   host: {
     theme: 'header'