diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx
index ca15e4973095e8..878f0541baa95f 100644
--- a/src/js/ink-bar.jsx
+++ b/src/js/ink-bar.jsx
@@ -1,4 +1,8 @@
 var React = require('react');
+var Transitions = require('./styles/mixins/transitions.js');
+var StylePropable = require('./mixins/style-propable.js');
+var Colors = require('./styles/colors.js')
+
 
 var InkBar = React.createClass({
   
@@ -6,15 +10,24 @@ var InkBar = React.createClass({
     position: React.PropTypes.string
   },
   
+  mixins: [StylePropable],
+
   render: function() {
 
-    var styles = {
+    var styles = this.mergeAndPrefix({
       left: this.props.left,
-      width: this.props.width
-    }
+      width: this.props.width,
+      bottom: '0',
+      display: 'block',
+      backgroundColor: Colors.yellowA200,
+      height: '2px',
+      marginTop: '-2px',
+      position: 'relative',
+      transition: Transitions.easeOut('1s', 'left')
+    });
 
     return (
-      <div className='mui-ink-bar' style={styles}>
+      <div style={styles}>
         &nbsp;
       </div>
     );
@@ -22,4 +35,4 @@ var InkBar = React.createClass({
 
 });
 
-module.exports = InkBar;
\ No newline at end of file
+module.exports = InkBar;
diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx
index 52da93756a6ceb..b26441797f4848 100644
--- a/src/js/tabs/tab.jsx
+++ b/src/js/tabs/tab.jsx
@@ -1,11 +1,11 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
 var TabTemplate = require('./tabTemplate');
-
-
+var StylePropable = require('../mixins/style-propable.js');
+var Theme = require('../styles/theme.js');
+var Colors = require('../styles/colors.js')
 var Tab = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     handleTouchTap: React.PropTypes.func,
@@ -18,16 +18,24 @@ var Tab = React.createClass({
   },
 
   render: function(){
-    var styles = {
-      width: this.props.width
-    };
-
-    var classes = this.getClasses('mui-tab-item', {
-      'mui-tab-is-active': this.props.selected
+    var styles = this.mergeAndPrefix({
+      'display': 'inline-block',
+      'height': '100%',
+      'cursor': 'pointer',
+      'textAlign': 'center',
+      'lineHeight': '48px',
+      'color': Colors.white,
+      'opacity': '.6',
+      'fontSize': '14sp',
+      'fontWeight': '500',
+      'font': Theme.fontFamily,
+      'width': this.props.width
     });
 
+    if (this.props.selected) styles.opacity = '1';
+
     return (
-    <div className={classes} style={styles} onTouchTap={this.handleTouchTap} routeName={this.props.route}>
+    <div style={styles} onTouchTap={this.handleTouchTap} routeName={this.props.route}>
       {this.props.label}
     </div>
     )
@@ -35,4 +43,4 @@ var Tab = React.createClass({
 
 });
 
-module.exports = Tab;
\ No newline at end of file
+module.exports = Tab;
diff --git a/src/js/tabs/tabTemplate.jsx b/src/js/tabs/tabTemplate.jsx
index 03a3832d6985f2..16bb7ec8ba41ba 100644
--- a/src/js/tabs/tabTemplate.jsx
+++ b/src/js/tabs/tabTemplate.jsx
@@ -4,8 +4,15 @@ var TabTemplate = React.createClass({
 
   render: function(){
 
+    var styles = {
+      'display': 'block',
+      'width': '100%',
+      'position': 'relative',
+      'text-align': 'initial'
+    };
+
     return (
-      <div className='mui-tab-template'>
+      <div styles={styles}>
         {this.props.children}
       </div>
     );
diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx
index c620e55d6eb472..e17637a9233691 100644
--- a/src/js/tabs/tabs.jsx
+++ b/src/js/tabs/tabs.jsx
@@ -2,41 +2,30 @@ var React = require('react/addons');
 var Tab = require('./tab');
 var TabTemplate = require('./tabTemplate');
 var InkBar = require('../ink-bar');
+var Transitions = require('../styles/mixins/transitions.js');
+var StylePropable = require('../mixins/style-propable.js');
+var Colors = require('../styles/colors.js')
+
 
 var Tabs = React.createClass({
 
+  mixins: [StylePropable],
+
   propTypes: {
-    onActive: React.PropTypes.func
+    onActive: React.PropTypes.func,
+    tabWidth: React.PropTypes.number
   },
 
   getInitialState: function(){
     return {
-      selectedIndex: 0
+      selectedIndex: 0,
+      fixed: true,
+      width: this.props.tabWidth || (100/this.props.children.length) + '%'
     };
   },
 
-  getEvenWidth: function(){
-    return (
-      parseInt(window
-        .getComputedStyle(this.getDOMNode())
-        .getPropertyValue('width'), 10)
-    );
-  },
-
-  componentDidMount: function(){
-    if(this.props.tabWidth) {
-      if(!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())){
-        this.setState({
-          width: this.props.tabWidth,
-          fixed: false
-        });
-        return;
-      }
-    }
-    this.setState({
-      width: this.getEvenWidth(),
-      fixed: true
-    });
+  getLeft: function(){
+    return ((100/this.props.children.length) * this.state.selectedIndex) + '%'
   },
 
   handleTouchTap: function(tabIndex, tab){
@@ -47,11 +36,18 @@ var Tabs = React.createClass({
   },
 
   render: function(){
+    var tabItemContainerStyle = this.mergeStyles({
+      margin: '0',
+      padding: '0',
+      width: '100%',
+      height: '48px',
+      backgroundColor: Colors.cyan500,
+      whiteSpace: 'nowrap',
+      display: 'block'
+    }, this.props.tabItemContainerStyle);
     var _this = this; 
-    var width = this.state.fixed ?
-      this.state.width/this.props.children.length :
-      this.props.tabWidth;
-    var left = width * this.state.selectedIndex || 0;
+    var width = this.state.width;
+    var left = typeof(width) === 'number' ? width * this.state.selectedIndex : this.getLeft();
     var currentTemplate;
     var tabs = React.Children.map(this.props.children, function(tab, index){
       if(tab.type.displayName === "Tab"){
@@ -70,8 +66,8 @@ var Tabs = React.createClass({
     });
 
     return (
-      <div className="mui-tabs-container">
-        <div className="mui-tab-item-container">
+      <div style={{position: 'relative'}}>
+        <div style={tabItemContainerStyle}>
           {tabs}
         </div>
         <InkBar left={left} width={width}/>
@@ -84,4 +80,4 @@ var Tabs = React.createClass({
 
 });
 
-module.exports = Tabs;
\ No newline at end of file
+module.exports = Tabs;
diff --git a/src/less/components/components.less b/src/less/components/components.less
index 5be24d0bf5c816..24fd340113a4a9 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -9,7 +9,6 @@
 @import "flat-button.less";
 @import "floating-action-button.less";
 @import "icon-button.less";
-@import "ink-bar.less";
 @import "left-nav.less";
 @import "menu.less";
 @import "menu-item.less";
@@ -19,7 +18,6 @@
 @import "snackbar.less";
 @import "subheader.less";
 @import "table.less";
-@import "tabs.less";
 @import "text-field.less";
 @import "toolbar.less";
 @import "tooltip.less";
diff --git a/src/less/components/ink-bar.less b/src/less/components/ink-bar.less
deleted file mode 100644
index 9801e7a502dbf6..00000000000000
--- a/src/less/components/ink-bar.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.mui-ink-bar {
-  bottom: 0;
-  display: block;
-  background-color: yellow;
-  height: 2px;
-  margin-top: -2px;
-  position: relative;
-  .ease-out(1s, left);
-}
diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less
deleted file mode 100644
index 21d512be2d3d34..00000000000000
--- a/src/less/components/tabs.less
+++ /dev/null
@@ -1,41 +0,0 @@
-.mui-tabs-container {
-  position: relative;
-
-  .mui-tab-item-container {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 48px;
-    background-color: #00bcd4;
-    white-space: nowrap;
-    display: block;
-
-
-    .mui-tab-item {
-      display: inline-block;
-      height: 100%;
-      cursor: pointer;
-      text-align: center;
-      line-height: 48px;
-      color: #fff;
-      opacity: .6;
-      font-size: 14sp;
-      font-weight: 500;
-      font: @headingFontFamily;
-
-
-      &.mui-tab-is-active {
-        color: #fff;
-        opacity: 1;
-        font: @headingFontFamily;
-      }
-    
-      .mui-tab-template {
-        display: block;
-        width: 100%;
-        position: relative;
-        text-align: initial;
-      }
-    }
-  }
-}
\ No newline at end of file