diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 97c5b70d6..086b5a8e0 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../animations';
-import FontIcon from '../font_icon';
+import { IconButton } from '../button';
 import Ripple from '../ripple';
 import CalendarMonth from './CalendarMonth';
 import time from '../utils/time';
@@ -50,19 +50,10 @@ class Calendar extends React.Component {
     this.props.onChange(viewDate);
   };
 
-  incrementViewMonth = () => {
-    this.refs.rippleRight.start(event);
+  changeViewMonth = (direction, step) => {
     this.setState({
-      direction: 'right',
-      viewDate: time.addMonths(this.state.viewDate, 1)
-    });
-  };
-
-  decrementViewMonth = () => {
-    this.refs.rippleLeft.start(event);
-    this.setState({
-      direction: 'left',
-      viewDate: time.addMonths(this.state.viewDate, -1)
+      direction,
+      viewDate: time.addMonths(this.state.viewDate, step)
     });
   };
 
@@ -92,12 +83,8 @@ class Calendar extends React.Component {
     const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
     return (
       <div data-react-toolbox='calendar'>
-        <FontIcon className={style.prev} value='chevron_left' onMouseDown={this.decrementViewMonth}>
-          <Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
-        <FontIcon className={style.next} value='chevron_right' onMouseDown={this.incrementViewMonth}>
-          <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
+        <IconButton className={style.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
+        <IconButton className={style.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <CalendarMonth
             key={this.state.viewDate.getMonth()}
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index d5da9cc96..f7f9af682 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -12,14 +12,9 @@
     position: absolute;
     top: 0;
     z-index: $z-index-high;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    font-size: $calendar-arrows-font-size;
-    line-height: $calendar-row-height;
-    color: $calendar-arrows-color;
-    text-align: center;
     cursor: pointer;
     opacity: .7;
+    height: 3.6 * $unit;
   }
   .prev {
     left: 0;
@@ -30,7 +25,9 @@
 }
 
 .title {
+  display: inline-block;
   font-weight: 500;
+  line-height: 3.6 * $unit;
 }
 
 .years {