diff --git a/src/js/date-picker/calendar.jsx b/src/js/date-picker/calendar.jsx
index 195cf11599f2f3..491e047b3fff22 100644
--- a/src/js/date-picker/calendar.jsx
+++ b/src/js/date-picker/calendar.jsx
@@ -160,7 +160,6 @@ var Calendar = React.createClass({
 
   _setSelectedDate: function(d) {
     var newDisplayDate = DateTime.getFirstDayOfMonth(d);
-
     if (newDisplayDate !== this.state.displayDate) {
       this._setDisplayDate(newDisplayDate, d);
     } else {
diff --git a/src/js/date-picker/date-picker-dialog.jsx b/src/js/date-picker/date-picker-dialog.jsx
index 723c40fae1f7d4..bf9e1d3ef96253 100644
--- a/src/js/date-picker/date-picker-dialog.jsx
+++ b/src/js/date-picker/date-picker-dialog.jsx
@@ -54,7 +54,7 @@ var DatePickerDialog = React.createClass({
         fontSize: '14px',
         color: CustomVariables.datePickerCalendarTextColor
       },
-
+      
       dialogContents: {
         width: this.props.mode === 'landscape' ? '560px' : '280px'
       }
diff --git a/src/js/date-picker/date-picker.jsx b/src/js/date-picker/date-picker.jsx
index bf294e6efd6e6a..ff25f8ff456f22 100644
--- a/src/js/date-picker/date-picker.jsx
+++ b/src/js/date-picker/date-picker.jsx
@@ -68,6 +68,7 @@ var DatePicker = React.createClass({
           onTouchTap={this._handleInputTouchTap} />
         <DatePickerDialog
           ref="dialogWindow"
+          mode={this.props.mode}
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}
           onShow={onShow}
diff --git a/src/js/date-picker/day-button.jsx b/src/js/date-picker/day-button.jsx
index 731332dce1e9a7..72235a7859a8dc 100644
--- a/src/js/date-picker/day-button.jsx
+++ b/src/js/date-picker/day-button.jsx
@@ -1,11 +1,13 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
+var StylePropable = require('../mixins/style-propable');
+var Transition = require('../styles/mixins/transitions');
+var CustomVariables = require('../styles/variables/custom-variables');
 var DateTime = require('../utils/date-time');
 var EnhancedButton = require('../enhanced-button');
 
 var DayButton = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     date: React.PropTypes.object,
@@ -21,28 +23,62 @@ var DayButton = React.createClass({
       selected,
       ...other
     } = this.props;
-    var classes = this.getClasses('mui-date-picker-day-button', { 
-      'mui-is-current-date': DateTime.isEqualDate(this.props.date, new Date()),
-      'mui-is-selected': this.props.selected
-    });
+
+    var styles = {
+      root: {
+        position: 'relative',
+        float: 'left',
+        width: 36,
+        padding: '4px 2px',
+      },
+
+      label: {
+        position: 'relative',
+      },
+
+      select: {
+        position: 'absolute',
+        height: 32,
+        width: 32,
+        opacity: 0,
+        borderRadius: '50%',
+        transform: 'scale(0)',
+        transition: Transition.easeOut(),
+        backgroundColor: CustomVariables.datePickerSelectColor,
+      },
+    };
+
+    if (this.props.selected) {
+      styles.label.color = CustomVariables.datePickerSelectTextColor;
+      styles.select.opacity = 1;
+      styles.select.transform = 'scale(1)';
+      if (DateTime.isEqualDate(this.props.date, new Date())) {
+        styles.root.color = CustomVariables.datePickerColor;
+      }
+    }
 
     return this.props.date ? (
       <EnhancedButton {...other}
-        className={classes}
+        style={styles.root}
         disableFocusRipple={true}
         disableTouchRipple={true}
-        onTouchTap={this._handleTouchTap}>
-        <div className="mui-date-picker-day-button-select" />
-        <span className="mui-date-picker-day-button-label">{this.props.date.getDate()}</span>
+        onTouchTap={this._handleTouchTap}
+        onKeyboardFocus={this._handleKeyboardFocus}>
+        <div style={styles.select}/>
+        <span style={styles.label}>{this.props.date.getDate()}</span>
       </EnhancedButton>
     ) : (
-      <span className={classes} />
+      <span style={styles.root} />
     );
   },
 
   _handleTouchTap: function(e) {
     if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.date);
-  }
+  },
+
+  _handleKeyboardFocus: function(e, keyboardFocused) {
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused, this.props.date);
+  } 
 
 });
 
diff --git a/src/js/enhanced-button.jsx b/src/js/enhanced-button.jsx
index 329eb07acf4164..9fe5106604f2bf 100644
--- a/src/js/enhanced-button.jsx
+++ b/src/js/enhanced-button.jsx
@@ -22,7 +22,8 @@ var EnhancedButton = React.createClass({
     touchRippleOpacity: React.PropTypes.number,
     onBlur: React.PropTypes.func,
     onFocus: React.PropTypes.func,
-    onTouchTap: React.PropTypes.func
+    onTouchTap: React.PropTypes.func,
+    onKeyboardFocus: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -141,8 +142,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onBlur) this.props.onBlur(e);
   },
 
@@ -156,7 +156,7 @@ var EnhancedButton = React.createClass({
         this.setState({
           isKeyboardFocused: true
         });
-        this.props.onKeyboardFocus(true);
+        if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, true);
       }
     }.bind(this), 150);
     
@@ -173,8 +173,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onTouchTap) this.props.onTouchTap(e);
   }
 
diff --git a/src/js/flat-button.jsx b/src/js/flat-button.jsx
index e123e6f7ab0006..a5ab90560a0bba 100644
--- a/src/js/flat-button.jsx
+++ b/src/js/flat-button.jsx
@@ -120,7 +120,7 @@ var FlatButton = React.createClass({
     if (this.props.onMouseOut) this.props.onMouseOut(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
 
     if (keyboardFocused && !this.props.disabled) {
       this.getDOMNode().style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(this._main().color, 0.4), 0.15);
diff --git a/src/js/floating-action-button.jsx b/src/js/floating-action-button.jsx
index 6489a801786045..3501ab3be9af0c 100644
--- a/src/js/floating-action-button.jsx
+++ b/src/js/floating-action-button.jsx
@@ -209,7 +209,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
       this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this._icon().color, 0.4);
diff --git a/src/js/icon-button.jsx b/src/js/icon-button.jsx
index c0320ccfa56aeb..bec9516aacf14f 100644
--- a/src/js/icon-button.jsx
+++ b/src/js/icon-button.jsx
@@ -154,7 +154,7 @@ var IconButton = React.createClass({
     if (this.props.onMouseOver) this.props.onMouseOver(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this._showTooltip();
       if (this.props.onFocus) this.props.onFocus(e);
diff --git a/src/js/raised-button.jsx b/src/js/raised-button.jsx
index 9e442b2a3952be..a85b4da265e526 100644
--- a/src/js/raised-button.jsx
+++ b/src/js/raised-button.jsx
@@ -188,7 +188,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
       var amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;
diff --git a/src/less/components/components.less b/src/less/components/components.less
index 04cad2f5119629..e3aae64c969f1a 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -1,3 +1,2 @@
-@import "date-picker/date-picker.less";
 @import "paper.less";
 @import "toolbar.less";
\ No newline at end of file
diff --git a/src/less/components/date-picker/date-picker.less b/src/less/components/date-picker/date-picker.less
deleted file mode 100644
index 2586ca17089146..00000000000000
--- a/src/less/components/date-picker/date-picker.less
+++ /dev/null
@@ -1,2 +0,0 @@
-
-@import "day-button.less";
diff --git a/src/less/components/date-picker/day-button.less b/src/less/components/date-picker/day-button.less
deleted file mode 100644
index 61e7fc3292be9d..00000000000000
--- a/src/less/components/date-picker/day-button.less
+++ /dev/null
@@ -1,35 +0,0 @@
-.mui-date-picker-day-button {
-  position: relative;
-  float: left;
-  width: 36px;
-  padding: 4px 2px;
-
-  .mui-date-picker-day-button-select {
-    position: absolute;
-    background-color: @date-picker-select-color;
-    height: 32px;
-    width: 32px;
-    opacity: 0;
-    border-radius: 50%;
-    transform: scale(0);
-    .ease-out();
-  }
-
-  .mui-date-picker-day-button-label {
-    position: relative;
-  }
-
-  &.mui-is-selected {
-    .mui-date-picker-day-button-label {
-      color: @date-picker-select-text-color;
-    }
-    .mui-date-picker-day-button-select {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &.mui-is-current-date {
-    color: @date-picker-color;
-  }
-}
\ No newline at end of file
diff --git a/src/less/variables/custom-variables.less b/src/less/variables/custom-variables.less
index e0ade7eb1b0264..dfbfa79b0f4bca 100644
--- a/src/less/variables/custom-variables.less
+++ b/src/less/variables/custom-variables.less
@@ -30,13 +30,6 @@
 //Disabled Colors
 @disabled-color: fade(@body-text-color, 30%);
 
-//Date Picker
-@date-picker-color: @primary-1-color;
-@date-picker-text-color: @white;
-@date-picker-calendar-text-color: @body-text-color;
-@date-picker-select-color: @primary-2-color;
-@date-picker-select-text-color: @white;
-
 // buttons
 @button-height: 36px;
 @button-min-width: 88px;