diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js
index 5569ef1a42..5225219d8a 100644
--- a/ionic/components/nav/pane.js
+++ b/ionic/components/nav/pane.js
@@ -8,6 +8,7 @@ import {bind} from 'angular2/di';
 import {ViewController} from '../view/view-controller';
 import {Nav} from './nav';
 import {SwipeHandle} from './swipe-handle';
+import {ModeComponent} from '../../config/component';
 
 
 export class PaneController {
@@ -92,11 +93,9 @@ export class PaneController {
 
 }
 
-@Component({
+@ModeComponent({
   selector:'ion-pane',
-  hostAttributes: {
-    'class': 'nav nav-ios'
-  }
+  classId: 'nav'
 })
 @View({
   template: `
diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js
index 4d7977ce5c..514de71b16 100644
--- a/ionic/components/tabs/tabs.js
+++ b/ionic/components/tabs/tabs.js
@@ -14,14 +14,16 @@ import {ViewItem} from '../view/view-item';
 import {TabButton} from './tab-button';
 import {Icon} from '../icon/icon';
 import {IonicComponent} from '../../config/component';
+import {ModeComponent} from '../../config/component';
 
 
-@Component({
+@ModeComponent({
   selector: 'ion-tabs',
   properties: [
     'tabBarPlacement',
     'tabBarIcons'
-  ]
+  ],
+  classId: 'tabs'
 })
 @View({
   template: `
@@ -51,9 +53,6 @@ export class Tabs extends ViewController {
   ) {
     super(viewController, compiler, elementRef, loader, injector);
     this.item = item;
-
-    this.domElement = elementRef.domElement;
-    this.config = Tabs.config.invoke(this);
   }
 
   addTab(tabItem) {
@@ -104,21 +103,21 @@ export class Tabs extends ViewController {
   }
 
 }
-new IonicComponent(Tabs, {
-  properties: {
-    tabBarPlacement: {
-      defaults: {
-        ios: 'bottom',
-        android: 'top',
-        core: 'bottom'
-      }
-    },
-    tabBarIcons: {
-      defaults: {
-        ios: 'top',
-        android: 'top',
-        core: 'top'
-      }
-    }
-  }
-});
+// new IonicComponent(Tabs, {
+//   properties: {
+//     tabBarPlacement: {
+//       defaults: {
+//         ios: 'bottom',
+//         android: 'top',
+//         core: 'bottom'
+//       }
+//     },
+//     tabBarIcons: {
+//       defaults: {
+//         ios: 'top',
+//         android: 'top',
+//         core: 'top'
+//       }
+//     }
+//   }
+// });
diff --git a/ionic/config/component.js b/ionic/config/component.js
index 39766bcd9e..1e8a8e9a08 100644
--- a/ionic/config/component.js
+++ b/ionic/config/component.js
@@ -1,3 +1,5 @@
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+
 import * as util from 'ionic/util'
 import {dom} from 'ionic/util'
 import {Platform} from 'ionic/platform/platform'
@@ -8,6 +10,16 @@ let platformMode = Platform.getMode();
 // BackButton.config.bind.icon.value = 'ion-chevron-right'
 // BackButton.config._computeDefaultValue(BackButton.config.bind.icon)
 
+export class ModeComponent extends Component {
+  constructor(config) {
+    config.hostAttributes = config.hostAttributes || {};
+    let className = (config.hostAttributes['class'] || '');
+    let id = config.classId || config.selector.replace('ion-', '');
+    config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
+    super(config);
+  }
+}
+
 export class IonicComponent {
   constructor(ComponentClass, {
     properties,