diff --git a/src/js/left-nav.jsx b/src/js/left-nav.jsx
index 0b5de6dd0dbfcc..3319ba69a0a74e 100644
--- a/src/js/left-nav.jsx
+++ b/src/js/left-nav.jsx
@@ -1,21 +1,25 @@
-var React = require('react'),
-  KeyCode = require('./utils/key-code'),
-  Classable = require('./mixins/classable'),
-  WindowListenable = require('./mixins/window-listenable'),
-  Overlay = require('./overlay'),
-  Paper = require('./paper'),
-  Menu = require('./menu/menu');
+var React = require('react');
+var KeyCode = require('./utils/key-code');
+var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/mixins/transitions');
+var Theme = require('./styles/theme').get();
+var CustomVariables = require('./styles/variables/custom-variables');
+var WindowListenable = require('./mixins/window-listenable');
+var Overlay = require('./overlay');
+var Paper = require('./paper');
+var Menu = require('./menu/menu');
 
 var LeftNav = React.createClass({
 
-  mixins: [Classable, WindowListenable],
+  mixins: [StylePropable, WindowListenable],
 
   propTypes: {
     docked: React.PropTypes.bool,
     header: React.PropTypes.element,
     onChange: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
-    selectedIndex: React.PropTypes.number
+    selectedIndex: React.PropTypes.number,
+    className: React.PropTypes.string,
   },
 
   windowListeners: {
@@ -49,33 +53,63 @@ var LeftNav = React.createClass({
     return this;
   },
 
+  /** Styles */
+  _main: function() {
+    var style = {
+      height: '100%',
+      width: CustomVariables.leftNavWidth,
+      position: 'fixed',
+      zIndex: 10,
+      left: 0,
+      top: 0,
+      transition: Transitions.easeOut(),
+      backgroundColor: CustomVariables.leftNavColor,
+    };
+
+    var x = ((-1 * CustomVariables.leftNavWidth) - 10) + 'px';
+    if (!this.state.open) style.transform = 'translate3d(' + x + ', 0, 0)';
+
+    return this.mergeAndPrefix(style);
+  },
+
+  _menuItem: function() {
+    return {
+      height: CustomVariables.spacing.desktopLeftNavMenuItemHeight,
+      lineDeight: CustomVariables.spacing.desktopLeftNavMenuItemHeight,
+    };
+  },
+
+  _menuItemLink: function() {
+    return this.mergeAndPrefix({
+      display: 'block',
+      textDecoration: 'none',
+      color: Theme.textColor,
+    }, this._menuItem());
+  },
+
   render: function() {
-    var classes = this.getClasses('mui-left-nav', {
-        'mui-closed': !this.state.open
-      }),
-      selectedIndex = this.props.selectedIndex,
-      overlay;
+    var selectedIndex = this.props.selectedIndex;
+    var overlay;
 
     if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
 
     return (
-      <div className={classes}>
-
+      <div className={this.props.className}>
         {overlay}
         <Paper
           ref="clickAwayableElement"
-          className="mui-left-nav-menu"
+          style={this._main()}
           zDepth={2}
           rounded={false}>
-          
-          {this.props.header}
-          <Menu 
-            ref="menuItems"
-            zDepth={0}
-            menuItems={this.props.menuItems}
-            selectedIndex={selectedIndex}
-            onItemClick={this._onMenuItemClick} />
-
+            {this.props.header}
+            <Menu 
+              ref="menuItems"
+              zDepth={0}
+              menuItems={this.props.menuItems}
+              menuItemStyle={this._menuItem()} 
+              menuItemStyleLink={this._menuItemLink()}
+              selectedIndex={selectedIndex}
+              onItemClick={this._onMenuItemClick} />
         </Paper>
       </div>
     );
@@ -99,7 +133,6 @@ var LeftNav = React.createClass({
       this.close();
     }
   }
-
 });
 
-module.exports = LeftNav;
\ No newline at end of file
+module.exports = LeftNav;
diff --git a/src/js/menu/link-menu-item.jsx b/src/js/menu/link-menu-item.jsx
index 447ed9d8fb69e7..bcfbd8db2c88cd 100644
--- a/src/js/menu/link-menu-item.jsx
+++ b/src/js/menu/link-menu-item.jsx
@@ -16,9 +16,9 @@ var LinkMenuItem = React.createClass({
   },
   
   getDefaultProps: function() {
-      return {
-          disabled: false
-      };
+    return {
+        disabled: false
+    };
   },
 
   getInitialState: function() {
diff --git a/src/js/styles/variables/custom-variables.js b/src/js/styles/variables/custom-variables.js
index 9c49f4f8a09ee5..78f83afc05da75 100644
--- a/src/js/styles/variables/custom-variables.js
+++ b/src/js/styles/variables/custom-variables.js
@@ -20,13 +20,9 @@ var customVariables = new (function() {
   // Component Colors
   this.canvasColor = Colors.white;
   this.dropDownMenuIconColor = Colors.minBlack;
-  this.leftNavColor = Colors.white;
   this.subheaderBorderColor = this.borderColor;
   this.subheaderTextColor = Theme.primary1Color;
   
-  // Layout
-  this.leftNavWidth = Spacing.desktopKeylineIncrement * 4;
-
   // appbar
   this.appBarColor = Theme.primary1Color;
   this.appBarTextColor = Colors.darkWhite;
@@ -74,6 +70,10 @@ var customVariables = new (function() {
   this.datePickerSelectColor = Theme.primary2Color;
   this.datePickerSelectTextColor = Colors.white;
 
+  // leftnav
+  this.leftNavWidth = Spacing.desktopKeylineIncrement * 4;
+  this.leftNavColor = Colors.white;
+
   // menu
   this.menuBackgroundColor = Colors.white;
   this.menuItemDataHeight = 32;
diff --git a/src/less/components/components.less b/src/less/components/components.less
index cce06349b6c249..04cad2f5119629 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -1,4 +1,3 @@
 @import "date-picker/date-picker.less";
-@import "left-nav.less";
 @import "paper.less";
 @import "toolbar.less";
\ No newline at end of file
diff --git a/src/less/components/left-nav.less b/src/less/components/left-nav.less
deleted file mode 100644
index 5f81899ce36ab0..00000000000000
--- a/src/less/components/left-nav.less
+++ /dev/null
@@ -1,31 +0,0 @@
-.mui-left-nav {
-
-  .mui-left-nav-menu {
-    height: 100%;
-    position: fixed;
-    width: @left-nav-width;
-    background-color: @left-nav-color;
-    z-index: 10;
-    left: 0px;
-    top: 0px;
-    .ease-out();
-
-    .mui-menu {
-      .mui-menu-item {
-        height: @desktop-left-nav-menu-item-height;
-        line-height: @desktop-left-nav-menu-item-height;
-      }
-      a.mui-menu-item {
-        display: block;
-        text-decoration: none;
-        color: @body-text-color;
-      }
-    }
-  }
-
-  &.mui-closed {
-    .mui-left-nav-menu {
-      transform: translate3d((-1 * @left-nav-width) - 10px, 0, 0);
-    }
-  }
-}
\ No newline at end of file