diff --git a/ionic/components/action-menu/modes/ios.scss b/ionic/components/action-menu/modes/ios.scss
index 491d0f469d..6abbf0feff 100644
--- a/ionic/components/action-menu/modes/ios.scss
+++ b/ionic/components/action-menu/modes/ios.scss
@@ -20,7 +20,7 @@ $action-menu-ios-background-active:        #ebebeb !default;
 $action-menu-ios-icon-font-size:           1.4em !default;
 
 
-ion-action-menu[mode=ios] {
+ion-action-menu {
   text-align: center;
 
   .action-menu-container {
@@ -90,7 +90,7 @@ ion-action-menu[mode=ios] {
 
 }
 
-.hairlines .action-menu[mode=ios] {
+&.hairlines .action-menu {
   .action-menu-title,
   .action-menu-option {
     border-bottom-width: 0.55px;
diff --git a/ionic/components/action-menu/modes/material.scss b/ionic/components/action-menu/modes/material.scss
index 5916999601..612c40d81b 100644
--- a/ionic/components/action-menu/modes/material.scss
+++ b/ionic/components/action-menu/modes/material.scss
@@ -18,7 +18,7 @@ $action-menu-md-icon-font-size:           2.4rem !default;
 $action-menu-md-icon-margin:              0 28px 0 0 !default;
 
 
-ion-action-menu[mode=md] {
+ion-action-menu {
   margin: 0;
 
   .action-menu-container {
diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts
index adb6d60240..ee1bdb8153 100644
--- a/ionic/components/app/app.ts
+++ b/ionic/components/app/app.ts
@@ -167,7 +167,7 @@ export class IonicApp {
       }
     });
 
-    bodyEle.setAttribute('mode', config.setting('mode'));
+    bodyEle.classList.add(config.setting('mode'));
 
     /**
     * Hairline Shim
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 1f22b3f1c7..6a1c112faa 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -1,4 +1,4 @@
-/*! Ionic fork of normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
 
 
 // HTML5 display definitions
diff --git a/ionic/components/app/test/hn/main.html b/ionic/components/app/test/hn/main.html
index 1262b134b0..ddd6495220 100644
--- a/ionic/components/app/test/hn/main.html
+++ b/ionic/components/app/test/hn/main.html
@@ -5,7 +5,7 @@
 .navbar-container {
   background-color: #ff6600 !important;
 }
-.nav[mode=ios] ion-title {
+.md .nav ion-title {
   color: #fff !important;
 }
 </style>
diff --git a/ionic/components/app/test/yerk/main.html b/ionic/components/app/test/yerk/main.html
index 8ea812ecec..f917ad2c7e 100644
--- a/ionic/components/app/test/yerk/main.html
+++ b/ionic/components/app/test/yerk/main.html
@@ -1,10 +1,10 @@
 <ion-nav [root]="root"></ion-nav>
 
 <style>
-  .nav[mode=ios] .navbar-container {
+  .md .nav .navbar-container {
     background-color: #2FD9BB !important;
   }
-  .nav[mode=ios] .navbar-title {
+  .md .nav .navbar-title {
     color: #FDFEFE;
   }
   #tabs .tab-bar:before {
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index 825ba4695e..daf88a219a 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -101,7 +101,3 @@ sup {
 sub {
   bottom: -0.25em;
 }
-
-body[mode=md] {
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
-}
diff --git a/ionic/components/button/modes/material.scss b/ionic/components/button/modes/material.scss
index 63a5f6bce2..c8af86b546 100644
--- a/ionic/components/button/modes/material.scss
+++ b/ionic/components/button/modes/material.scss
@@ -8,13 +8,14 @@ $button-md-padding:                  0 1.1em !default;
 $button-md-box-shadow:               0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default;
 $button-md-box-shadow-active:        0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
 $button-md-border-radius:            2px !default;
+$button-md-animation-curve:          cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 $button-md-clear-hover-bg-color:     rgba(158, 158, 158, 0.1);
 $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
 
 
-[mode=md] button,
-[mode=md] [button] {
+button,
+[button] {
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
@@ -26,9 +27,9 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
   font-size: $button-md-font-size;
   box-shadow: $button-md-box-shadow;
 
-  transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
-              background-color 0.2s $animation-curve-default,
-              color 0.2s $animation-curve-default;
+  transition: box-shadow 0.2s $button-md-animation-curve,
+              background-color 0.2s $button-md-animation-curve,
+              color 0.2s $button-md-animation-curve;
 
   &.activated {
     box-shadow: $button-md-box-shadow-active;
@@ -54,12 +55,6 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
   &[outline] {
     box-shadow: none;
 
-    /*.md-ripple {
-      &.is-visible {
-        opacity: 0.2;
-      }
-    }*/
-
     &.activated {
       opacity: 1;
     }
@@ -97,15 +92,8 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
 
     &[#{$color}] {
 
-      @if lightness(get-color($color, base)) < 80 {
-        .md-ripple {
-          //background-color: white;
-        }
-      }
-
       &.activated {
         opacity: 1;
-        //background-color: get-color($color, base);
       }
 
       &[outline] {
@@ -128,8 +116,6 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
           }
 
           opacity: 1;
-          //background: transparent;
-          //color: $fg-color;
         }
       }
 
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 7ed85c006c..ec72aedfe2 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -31,7 +31,7 @@ $card-ios-header-padding:              16px !default;
 $card-ios-header-color:                #333 !default;
 
 
-ion-card[mode=ios] {
+ion-card {
   margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
   font-size: $card-ios-font-size;
 
@@ -134,6 +134,6 @@ ion-card[mode=ios] {
 
 }
 
-ion-card[mode=ios] + ion-card {
+ion-card + ion-card {
   margin-top: 0;
 }
diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss
index c1f99173ac..567bca8f71 100644
--- a/ionic/components/card/modes/material.scss
+++ b/ionic/components/card/modes/material.scss
@@ -34,7 +34,7 @@ $card-md-header-padding:              16px !default;
 $card-md-header-color:                #222 !default;
 
 
-ion-card[mode=md] {
+ion-card {
   margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
   font-size: $card-md-font-size;
 
@@ -137,6 +137,6 @@ ion-card[mode=md] {
 
 }
 
-ion-card[mode=md] + ion-card {
+ion-card + ion-card {
   margin-top: 0;
 }
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index ec81c26df9..c46304550b 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -10,7 +10,7 @@ $checkbox-ios-border-color-on:       color(primary) !default;
 $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 
-.checkbox[mode=ios] {
+.checkbox {
 
   .checkbox-icon {
     position: relative;
@@ -47,7 +47,7 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  .checkbox[mode=ios][#{$color-name}] {
+  .checkbox[#{$color-name}] {
 
     &[aria-checked=true] .checkbox-icon {
       background-color: $bg-on;
diff --git a/ionic/components/checkbox/modes/material.scss b/ionic/components/checkbox/modes/material.scss
index 999727539a..121517aa40 100644
--- a/ionic/components/checkbox/modes/material.scss
+++ b/ionic/components/checkbox/modes/material.scss
@@ -12,7 +12,7 @@ $checkbox-md-border-color-on:       color(primary) !default;
 $checkbox-md-checkmark-color-on:    $background-color !default;
 
 
-.checkbox[mode=md] {
+.checkbox {
 
   .checkbox-icon {
     position: relative;
@@ -49,7 +49,7 @@ $checkbox-md-checkmark-color-on:    $background-color !default;
 
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
-  .checkbox[mode=md][#{$color-name}] {
+  .checkbox[#{$color-name}] {
 
     &[aria-checked=true] .checkbox-icon {
       background-color: $bg-on;
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index bd5df78ed8..565a53bd7a 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -5,6 +5,6 @@
 $outer-content-md-background-color:         #efeff4 !default;
 
 
-[mode=ios] .outer-content {
+.outer-content {
   background: $outer-content-md-background-color;
 }
diff --git a/ionic/components/content/modes/material.scss b/ionic/components/content/modes/material.scss
index 8458913df3..64e33ab07b 100644
--- a/ionic/components/content/modes/material.scss
+++ b/ionic/components/content/modes/material.scss
@@ -5,39 +5,35 @@
 $content-padding-md:    16px !default;
 
 
-[mode=md] {
-
-  .padding,
-  [padding],
-  .padding > scroll-content,
-  [padding] > scroll-content {
-    padding: $content-padding-md;
-  }
-
-  .padding-top {
-    padding-top: $content-padding-md;
-  }
-
-  .padding-right {
-    padding-right: $content-padding-md;
-  }
-
-  .padding-bottom {
-    padding-bottom: $content-padding-md;
-  }
-
-  .padding-left {
-    padding-left: $content-padding-md;
-  }
-
-  .padding-vertical {
-    padding-top: $content-padding-md;
-    padding-bottom: $content-padding-md;
-  }
-
-  .padding-horizontal {
-    padding-right: $content-padding-md;
-    padding-left: $content-padding-md;
-  }
-
+.padding,
+[padding],
+.padding > scroll-content,
+[padding] > scroll-content {
+  padding: $content-padding-md;
+}
+
+.padding-top {
+  padding-top: $content-padding-md;
+}
+
+.padding-right {
+  padding-right: $content-padding-md;
+}
+
+.padding-bottom {
+  padding-bottom: $content-padding-md;
+}
+
+.padding-left {
+  padding-left: $content-padding-md;
+}
+
+.padding-vertical {
+  padding-top: $content-padding-md;
+  padding-bottom: $content-padding-md;
+}
+
+.padding-horizontal {
+  padding-right: $content-padding-md;
+  padding-left: $content-padding-md;
 }
diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
index 05f8565b4c..70dcd0211f 100644
--- a/ionic/components/ion.ts
+++ b/ionic/components/ion.ts
@@ -11,7 +11,6 @@ export class Ion {
   constructor(elementRef: ElementRef, config: IonicConfig) {
     this.elementRef = elementRef;
     this.config = config;
-    this.clsMode = config.setting('mode');
   }
 
   onInit() {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 4b84dfa59a..d45a2a5911 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -23,7 +23,7 @@ $item-ios-note-color:             darken($item-ios-border-color, 10%) !default;
 $item-ios-forward-icon-color:     $item-ios-border-color !default;
 
 
-.list[mode=ios] {
+.list {
 
   .item {
     margin-top: -1px;
@@ -141,7 +141,7 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
 }
 
 
-.hairlines .list[mode=ios] .item {
+&.hairlines .list .item {
   margin-top: -0.5px;
 
   &:last-child {
diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index 9b3ddaa027..d07453abec 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -26,7 +26,7 @@ $item-md-note-color:             darken($item-md-border-color, 10%) !default;
 $item-md-forward-icon-color:     $item-md-border-color !default;
 
 
-.list[mode=md] {
+.list {
 
   .item {
     margin-top: -1px;
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 5fdaa954e1..018a860e7b 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -20,7 +20,7 @@ $list-ios-header-letter-spacing:      0.1rem !default;
 $list-ios-header-color:               #333 !default;
 
 
-.list[mode=ios] {
+.list {
   margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
 
   ion-header {
@@ -34,16 +34,16 @@ $list-ios-header-color:               #333 !default;
 
 }
 
-.list[mode=ios] + .list {
+.list + .list {
   margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
 }
 
-.list[mode=ios] + .list ion-header {
+.list + .list ion-header {
   margin-top: -$list-ios-margin-top;
   padding-top: 0;
 }
 
-.list[mode=ios][inset] {
+.list[inset] {
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
   border-radius: $list-inset-ios-border-radius;
 
@@ -68,6 +68,6 @@ $list-ios-header-color:               #333 !default;
   }
 }
 
-.list[mode=ios][inset] + .list[inset] {
+.list[inset] + .list[inset] {
   margin-top: 0;
 }
diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss
index 2dd5fc8162..ac2d936bda 100644
--- a/ionic/components/list/modes/material.scss
+++ b/ionic/components/list/modes/material.scss
@@ -18,7 +18,7 @@ $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
 
-.list[mode=md] {
+.list {
   margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
 
   ion-header {
@@ -29,16 +29,16 @@ $list-md-header-color:           #858585 !default;
 
 }
 
-.list[mode=md] + .list {
+.list + .list {
   margin-top: $list-md-margin-top + $list-md-margin-bottom;
 }
 
-.list[mode=md] + .list ion-header {
+.list + .list ion-header {
   margin-top: -$list-md-margin-top;
   padding-top: 0;
 }
 
-.list[mode=md][inset] {
+.list[inset] {
   margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
   border-radius: $list-inset-md-border-radius;
 
@@ -59,10 +59,10 @@ $list-md-header-color:           #858585 !default;
   }
 }
 
-.list[mode=md][inset] .item:not(ion-input):last-child:after {
+.list[inset] .item:not(ion-input):last-child:after {
   border-top: none;
 }
 
-.list[mode=md][inset] + .list[inset] {
+.list[inset] + .list[inset] {
   margin-top: 0;
 }
diff --git a/ionic/components/material/variables.scss b/ionic/components/material/variables.scss
deleted file mode 100644
index bf4698c0c6..0000000000
--- a/ionic/components/material/variables.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
-$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
-
-$animation-curve-default: $animation-curve-fast-out-slow-in !default;
-
-$shadow-multiplier: 0.7;
-$shadow-key-umbra-opacity:      $shadow-multiplier * 0.2;
-$shadow-key-penumbra-opacity:   $shadow-multiplier * 0.14;
-$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;
-
-$md-whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
diff --git a/ionic/components/nav-bar/modes/ios.scss b/ionic/components/nav-bar/modes/ios.scss
index 2d48752b92..06c00aec01 100644
--- a/ionic/components/nav-bar/modes/ios.scss
+++ b/ionic/components/nav-bar/modes/ios.scss
@@ -5,27 +5,6 @@
 $navbar-ios-height:                        4.4rem !default;
 
 
-.nav[mode=ios] {
-
-  .navbar-container {
-    min-height: $navbar-ios-height;
-  }
-
-  .back-button {
-    padding: 0;
-    margin: 0 4px;
-
-    min-height: 3.2rem;
-    line-height: 1;
-
-    order: map-get($toolbar-order-ios, 'back-button');
-    overflow: inherit;
-  }
-
-  .back-button-icon {
-    display: inherit;
-    font-size: 3.2rem;
-    padding-right: 7px;
-  }
-
+.nav .navbar-container {
+  min-height: $navbar-ios-height;
 }
diff --git a/ionic/components/nav-bar/modes/material.scss b/ionic/components/nav-bar/modes/material.scss
index e9a19c56e0..a19dbfcc3f 100644
--- a/ionic/components/nav-bar/modes/material.scss
+++ b/ionic/components/nav-bar/modes/material.scss
@@ -5,23 +5,22 @@
 $navbar-md-height:                  5.6rem !default;
 
 
-.nav[mode=md] {
+.nav {
 
   .navbar-container {
     min-height: $navbar-md-height;
   }
 
   .back-button {
-    padding: 0;
     margin: 0 0 0 12px;
     box-shadow: none;
   }
 
   .back-button-icon {
     margin: 0;
-    font-weight: normal;
-    font-size: 2.4rem;
     min-width: 44px;
+    font-size: 2.4rem;
+    font-weight: normal;
     text-align: left;
   }
 
diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index 37adeb4b60..05a8fbd55f 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -7,7 +7,7 @@ $popup-ios-bg-color:              #f8f8f8 !default;
 $popup-ios-button-text-color:     color(primary) !default;
 
 
-.popup[mode=ios] {
+.popup {
 
   popup-wrapper {
     border-radius: $popup-ios-border-radius;
diff --git a/ionic/components/popup/modes/material.scss b/ionic/components/popup/modes/material.scss
index dba8c15ce8..2f57979c29 100644
--- a/ionic/components/popup/modes/material.scss
+++ b/ionic/components/popup/modes/material.scss
@@ -6,7 +6,7 @@ $popup-md-border-radius:       13px !default;
 $popup-md-bg-color:            #f8f8f8 !default;
 
 
-.popup[mode=md] {
+.popup {
 
   popup-wrapper {
     border-radius: $popup-md-border-radius;
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 0f3de483cd..d268fe683a 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -5,7 +5,7 @@
 $radio-ios-active-color:       color(primary) !default;
 
 
-.radio[mode=ios] {
+.radio {
 
   .radio-icon {
     position: relative;
@@ -38,7 +38,7 @@ $radio-ios-active-color:       color(primary) !default;
 
 @mixin radio-theme-ios($color-name, $color-value) {
 
-  .radio[mode=ios][#{$color-name}] {
+  .radio[#{$color-name}] {
 
     &[aria-checked=true] .radio-icon:after {
       border-color: $color-value;
diff --git a/ionic/components/radio/modes/material.scss b/ionic/components/radio/modes/material.scss
index 6f04d7d917..108e87600c 100644
--- a/ionic/components/radio/modes/material.scss
+++ b/ionic/components/radio/modes/material.scss
@@ -12,7 +12,7 @@ $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 
-.radio[mode=md] {
+.radio {
 
   .radio-icon {
     position: relative;
@@ -58,7 +58,7 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 @mixin radio-theme-md($color-name, $color-value) {
 
-  .radio[mode=md][#{$color-name}] {
+  .radio[#{$color-name}] {
 
     &[aria-checked=true] .radio-icon {
       border-color: $color-value;
diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 3ad5102dfa..a541ed0280 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -10,7 +10,7 @@ $search-bar-ios-background-svg:       "<svg xmlns='http://www.w3.org/2000/svg' v
 $search-bar-ios-background-size:      13px 13px !default;
 
 
-.search-bar[mode=ios] {
+.search-bar {
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
   border-bottom: 1px solid $search-bar-ios-border-color;
@@ -20,7 +20,6 @@ $search-bar-ios-background-size:      13px 13px !default;
     height: 13px;
 
     transform: translateX(calc(50% - 60px));
-    -webkit-transform: translateX(-webkit-calc(50% - 60px));
 
     @include svg-background-image($search-bar-ios-background-svg);
     background-size: $search-bar-ios-background-size;
@@ -56,6 +55,6 @@ $search-bar-ios-background-size:      13px 13px !default;
   }
 }
 
-.hairlines .search-bar[mode=ios] {
+&.hairlines .search-bar {
   border-bottom-width: 0.55px;
 }
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 12def88bc7..4dbc9d3df3 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 
-.segment[mode=ios] .ion-segment {
+.segment .ion-segment {
   > button,
   > [button] {
     border-width: 1px;
@@ -26,6 +26,7 @@
     &:first-of-type {
       border-right-width: 0px;
     }
+
     &:last-of-type {
       border-left-width: 0px;
     }
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 8185f35556..c81573b718 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -22,7 +22,7 @@ $switch-ios-handle-bg-color:           $switch-ios-off-bg-color !default;
 $switch-ios-transition-duration:       300ms !default;
 
 
-.switch[mode=ios] {
+.switch {
 
   .item-media {
     margin: 0;
@@ -125,7 +125,7 @@ $switch-ios-transition-duration:       300ms !default;
 
 @mixin switch-theme-ios($color-name, $bg-on) {
 
-  .switch[mode=ios][#{$color-name}] {
+  .switch[#{$color-name}] {
 
     &[aria-checked=true] .switch-icon {
       background-color: $bg-on;
diff --git a/ionic/components/switch/modes/material.scss b/ionic/components/switch/modes/material.scss
index fd5ac16660..2f3321f8cd 100644
--- a/ionic/components/switch/modes/material.scss
+++ b/ionic/components/switch/modes/material.scss
@@ -18,7 +18,7 @@ $switch-md-handle-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p
 $switch-md-transition-duration:       300ms !default;
 
 
-.switch[mode=md] {
+.switch {
 
   .item-media {
     margin: 0;
@@ -85,7 +85,7 @@ $switch-md-transition-duration:       300ms !default;
 
 @mixin switch-theme-md($color-name, $bg-on) {
 
-  .switch[mode=md][#{$color-name}] {
+  .switch[#{$color-name}] {
 
     &[aria-checked=true] .switch-icon {
       background-color: lighten($bg-on, 25%);
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 39fc940ad3..ad0d8e0641 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -8,7 +8,7 @@ $tab-bar-ios-item-icon-size:           32px !default;
 $tab-bar-ios-height:                   49px !default;
 
 
-.tabs[mode=ios] {
+.tabs {
 
   .tab-bar {
     border-top: 1px solid $toolbar-ios-border-color;
@@ -46,8 +46,8 @@ $tab-bar-ios-height:                   49px !default;
 
 }
 
-[mode=ios][tab-bar-icons=right] .tab-button,
-[mode=ios][tab-bar-icons=left] .tab-button {
+[tab-bar-icons=right] .tab-button,
+[tab-bar-icons=left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -63,7 +63,7 @@ $tab-bar-ios-height:                   49px !default;
   }
 }
 
-[mode=ios] .tab-button.has-title-only {
+.tab-button.has-title-only {
   min-height: $tab-bar-ios-height - 8;
 
   .tab-button-text {
@@ -72,11 +72,11 @@ $tab-bar-ios-height:                   49px !default;
   }
 }
 
-[mode=ios] .tab-button.icon-only {
+.tab-button.icon-only {
   min-height: $tab-bar-ios-height - 8;
 }
 
-.hairlines .tabs[mode=ios] {
+&.hairlines .tabs {
 
   .tab-bar {
     border-top-width: 0.5px;
diff --git a/ionic/components/tabs/modes/material.scss b/ionic/components/tabs/modes/material.scss
index f61ee35d08..66eaa463ad 100644
--- a/ionic/components/tabs/modes/material.scss
+++ b/ionic/components/tabs/modes/material.scss
@@ -9,7 +9,7 @@ $tab-bar-md-item-icon-size:           2.4rem !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
-.tabs[mode=md] {
+.tabs {
 
   .tab-button {
     padding: $tab-bar-md-item-padding;
@@ -39,12 +39,12 @@ $tab-bar-md-item-height:              4.8rem !default;
 
 }
 
-[mode=md][tab-bar-icons=bottom] .tab-button {
+[tab-bar-icons=bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-[mode=md][tab-bar-icons=right] .tab-button,
-[mode=md][tab-bar-icons=left] .tab-button {
+[tab-bar-icons=right] .tab-button,
+[tab-bar-icons=left] .tab-button {
   padding-bottom: 10px;
 
   icon {
@@ -52,7 +52,7 @@ $tab-bar-md-item-height:              4.8rem !default;
   }
 }
 
-[mode=md] .tab-button.icon-only,
-[mode=md] .tab-button.has-title-only {
+.tab-button.icon-only,
+.tab-button.has-title-only {
   padding: 6px 10px 6px 10px;
 }
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index 2392fc6555..6b63302892 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -58,8 +58,6 @@
 <style>
   ion-tabs {
     height: auto;
-  }
-  ion-tabs[mode=md] {
-    border-bottom: 1px solid gray;
+    border-top: 1px solid gray;
   }
 </style>
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index aa2eea8477..a0937abf27 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -5,8 +5,8 @@
 $input-label-ios-color:         #7f7f7f !default;
 
 
-.list[mode=ios],
-ion-card[mode=ios] {
+.list,
+ion-card {
 
   .text-input {
     margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
diff --git a/ionic/components/text-input/modes/material.scss b/ionic/components/text-input/modes/material.scss
index 53f3ce9e46..403012248a 100644
--- a/ionic/components/text-input/modes/material.scss
+++ b/ionic/components/text-input/modes/material.scss
@@ -6,8 +6,8 @@ $text-input-highlight-color:      map-get($colors, primary) !default;
 $input-label-md-color:            #999 !default;
 
 
-.list[mode=md],
-ion-card[mode=md] {
+.list,
+ion-card {
 
   .text-input {
     margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
@@ -67,7 +67,7 @@ ion-card[mode=md] {
   }
 }
 
-.list[mode=md][inset] ion-input.item {
+.list[inset] ion-input.item {
   padding-right: 0;
   padding-left: 0;
 }
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 45fc460cb1..1c6bb9de58 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -16,8 +16,7 @@ $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
 
-.nav[mode=ios] .toolbar,
-.toolbar[mode=ios] {
+.toolbar {
   border-bottom-width: 1px;
   border-bottom-style: solid;
   min-height: $toolbar-ios-height;
@@ -46,12 +45,17 @@ $toolbar-ios-title-font-size:               1.7rem !default;
   }
 
   .back-button {
+    margin: 0 4px;
+    min-height: 3.2rem;
+    line-height: 1;
     order: map-get($toolbar-order-ios, 'back-button');
     overflow: inherit;
   }
 
   .back-button-icon {
-    padding-right: 0.6rem;
+    display: inherit;
+    min-width: 20px;
+    font-size: 3.2rem;
   }
 
   button,
@@ -76,6 +80,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
-.hairlines .toolbar[mode=ios] {
+&.hairlines .toolbar {
   border-bottom-width: 0.55px;
 }
diff --git a/ionic/components/toolbar/modes/material.scss b/ionic/components/toolbar/modes/material.scss
index e0e9412504..0293ee6b5d 100644
--- a/ionic/components/toolbar/modes/material.scss
+++ b/ionic/components/toolbar/modes/material.scss
@@ -7,8 +7,7 @@ $toolbar-md-title-font-size:         2rem !default;
 $toolbar-md-button-font-size:        1.4rem !default;
 
 
-.nav[mode=md] .toolbar,
-.toolbar[mode=md] {
+.toolbar {
   min-height: $toolbar-md-height;
 
   .toolbar-inner-title {
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index 9ab90a36c1..3ff092ee81 100644
--- a/ionic/config/annotations.ts
+++ b/ionic/config/annotations.ts
@@ -159,9 +159,6 @@ function appendConfig(cls, config) {
   let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
   config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
 
-  // the mode will get figured out when the component is constructed
-  config.host['[attr.mode]'] = 'clsMode';
-
   return config;
 }
 
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 2fea3ed4ed..62e6353b07 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -1,4 +1,8 @@
 
+// Theme
+@import "themes/default";
+
+
 // Globals
 @import
   "util/mixins",
@@ -43,3 +47,14 @@
   "components/switch/switch",
   "components/tabs/tabs",
   "components/view/view";
+
+
+// Ionicons
+$ionicons: true !default;
+@if ($ionicons) {
+  @import "fonts/ionicons";
+}
+
+
+// Engine
+@import  "platform/cordova";
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 91f35c6197..6c6242da25 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -1,3 +1,5 @@
+/*! Ionic: iOS */
+
 
 // iOS Components
 @import
diff --git a/ionic/ionic.material.scss b/ionic/ionic.md.scss
similarity index 94%
rename from ionic/ionic.material.scss
rename to ionic/ionic.md.scss
index 89b9a0ef9e..54de598adf 100644
--- a/ionic/ionic.material.scss
+++ b/ionic/ionic.md.scss
@@ -1,7 +1,8 @@
+/*! Ionic: Material Design */
+
 
 // Material Design Components
 @import
-  "components/material/variables",
   "components/material/ripple",
   "components/toolbar/modes/material",
   "components/action-menu/modes/material",
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 2c72878eb0..b541ccbb4b 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -1,41 +1,27 @@
 @charset "UTF-8";
 
 
-// Default Theme
-@import "themes/default";
-
-
 // Core Components
 @import "ionic.core";
 
 
 // iOS Components
-$ios-mode: true !default;
-@if ($ios-mode) {
+.ios {
   @import "ionic.ios";
 }
 
 
 // Material Design Components
-$material-design-mode: true !default;
-@if ($material-design-mode) {
-  @import "ionic.material";
+.md {
+  @import "ionic.md";
 }
 
 
-// Ionicons
-$ionicons: true !default;
-@if ($ionicons) {
-  @import "fonts/ionicons";
-}
-
-
-// Roboto
+// Roboto Font
 $roboto: true !default;
 @if ($roboto) {
   @import "fonts/roboto";
+  .md {
+    font-family: "Roboto", "Helvetica Neue", sans-serif;
+  }
 }
-
-
-// Platforms
-@import  "platform/cordova";