diff --git a/horizon/static/horizon/js/horizon.forms.js b/horizon/static/horizon/js/horizon.forms.js
index 4cdea8d3d9..2e38906262 100644
--- a/horizon/static/horizon/js/horizon.forms.js
+++ b/horizon/static/horizon/js/horizon.forms.js
@@ -145,7 +145,7 @@ horizon.forms = {
   },
 
   datepicker: function() {
-    var startDate = $('input#id_start').datepicker({ language: horizon.datepickerLocale })
+    var startDate = $('#id_start').datepicker({ language: horizon.datepickerLocale })
       .on('changeDate', function(ev) {
         if (ev.dates[0].valueOf() > endDate.dates[0].valueOf()) {
           var newDate = new Date(ev.dates[0]);
@@ -158,20 +158,24 @@ horizon.forms = {
         endDate.update();
       }).data('datepicker');
 
-    var endDate = $('input#id_end').datepicker({
+    var endDate = $('#id_end').datepicker({
       language: horizon.datepickerLocale,
       startDate: startDate ? startDate.dates[0] : null
     }).on('changeDate', function() {
         endDate.hide();
       }).data('datepicker');
 
-    $("input#id_start").mousedown(function(){
+    $("#id_start").mousedown(function(){
       endDate.hide();
     });
 
-    $("input#id_end").mousedown(function(){
+    $("#id_end").mousedown(function(){
       startDate.hide();
     });
+
+    $('.datepicker-addon').on('click', function() {
+      $(this).siblings('input').trigger('focus');
+    });
   }
 };
 
diff --git a/horizon/templates/horizon/common/_datepicker.html b/horizon/templates/horizon/common/_datepicker.html
new file mode 100644
index 0000000000..98ebb993b4
--- /dev/null
+++ b/horizon/templates/horizon/common/_datepicker.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  <div class='input-group date'>
+    {{ datepicker_input }}
+    <label class="sr-only">{{ datepicker_label }}</label>
+      <span class="input-group-addon datepicker-addon">
+        <span class="fa fa-calendar"></span>
+      </span>
+  </div>
+{% endblocktrans %}
diff --git a/horizon/templates/horizon/common/_datepicker_form.html b/horizon/templates/horizon/common/_datepicker_form.html
new file mode 100644
index 0000000000..eb5fe8de53
--- /dev/null
+++ b/horizon/templates/horizon/common/_datepicker_form.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+
+<form action="?" method="get" id="{{ datepicker_id }}" class="form-inline">
+  <h4>{% trans "Select a period of time to query its usage:" %}
+    <span class="small help-block">{% trans "The date should be in YYYY-MM-DD format." %}</span>
+  </h4>
+  <div class="datepicker form-group">
+    {%  with datepicker_input=form.start datepicker_label="From" %}
+      {% include 'horizon/common/_datepicker.html' %}
+    {% endwith %}
+  </div>
+  <span class="datepicker-delimiter">
+    <span class="datepicker-delimiter-text">{% trans 'to' %}</span>
+  </span>
+  <div class="datepicker form-group">
+    {%  with datepicker_input=form.end datepicker_label="To" %}
+      {% include 'horizon/common/_datepicker.html' %}
+    {% endwith %}
+  </div>
+  <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+</form>
diff --git a/horizon/templates/horizon/common/_usage_summary.html b/horizon/templates/horizon/common/_usage_summary.html
index 8a50d70eb2..ae3770dd8a 100644
--- a/horizon/templates/horizon/common/_usage_summary.html
+++ b/horizon/templates/horizon/common/_usage_summary.html
@@ -3,24 +3,21 @@
   <h3 class="quota-heading">{% trans "Usage Summary" %}</h3>
 </div>
 <div class="usage_info_wrapper">
-  <form action="?" method="get" id="date_form" class="form-inline">
-    <h3>{% trans "Select a period of time to query its usage:" %}</h3>
-    <div class="datepicker form-group">
-      {% blocktrans trimmed with start=form.start %}
-      <label>From:</label> {{ start }}{% endblocktrans %}
-    </div>
-    <div class="datepicker form-group">
-      {% blocktrans trimmed with end=form.end %}
-      <label>To:</label>{{ end }}{% endblocktrans %}
-    </div>
-    <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
-    <small>{% trans "The date should be in YYYY-MM-DD format." %}</small>
-  </form>
-  <p id="activity">
-    <span><strong>{% trans "Active Instances:" %}</strong> {{ usage.summary.instances|default:'0' }}</span>
-    <span><strong>{% trans "Active RAM:" %}</strong> {{ usage.summary.memory_mb|mb_float_format|default:'0' }}</span>
-    <span><strong>{% trans "This Period's VCPU-Hours:" %}</strong> {{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}</span>
-    <span><strong>{% trans "This Period's GB-Hours:" %}</strong> {{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}</span>
-    <span><strong>{% trans "This Period's RAM-Hours:" %}</strong> {{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}</span>
-  </p>
+
+  {% with start=form.start end=form.end datepicker_id='date_form' %}
+    {% include 'horizon/common/_datepicker_form.html' %}
+  {% endwith %}
+
+  <dl id="activity" class="dl-horizontal">
+    <dt class="small">{% trans "Active Instances:" %}</dt>
+    <dd class="small">{{ usage.summary.instances|default:'0' }}</dd>
+    <dt class="small">{% trans "Active RAM:" %}</dt>
+    <dd class="small">{{ usage.summary.memory_mb|mb_float_format|default:'0' }}</dd>
+    <dt class="small">{% trans "This Period's VCPU-Hours:" %}</dt>
+    <dd class="small">{{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}</dd>
+    <dt class="small">{% trans "This Period's GB-Hours:" %}</dt>
+    <dd class="small">{{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}</dd>
+    <dt class="small">{% trans "This Period's RAM-Hours:" %}</dt>
+    <dd class="small">{{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}</dd>
+  </dl>
 </div>
diff --git a/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss b/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss
index ed9da6589c..53b62cabc3 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss
@@ -1,7 +1,59 @@
 .datepicker {
   z-index: $zindex-popover !important;
-}
 
-.datepicker input{
-  @extend .form-control;
-}
\ No newline at end of file
+  input {
+    @extend .form-control;
+  }
+
+  &.dropdown-menu {
+    padding: $padding-small-vertical;
+  }
+
+  .year,
+  .month,
+  .day {
+    padding: $padding-small-horizontal;
+    width: 2em;
+    height: 2em;
+    line-height: 1;
+    border-radius: $border-radius-base;
+
+    &:hover {
+      background-color: darken($btn-primary-bg, 10%);
+    }
+
+    &.active {
+      background-color: $btn-primary-bg;
+    }
+
+    &:hover,
+    &.active {
+      color: $btn-primary-color;
+    }
+
+    &.disabled {
+      color: $dropdown-link-disabled-color;
+      &:hover {
+        background-color: transparent;
+        cursor: $cursor-disabled;
+      }
+    }
+  }
+
+  .datepicker-switch,
+  .prev,
+  .next,
+  .year,
+  .month,
+  .day {
+    text-align: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .datepicker-addon {
+    cursor: pointer;
+  }
+}
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index f5776c6a10..2509ae4783 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -20,6 +20,7 @@ $icon-swap: (
   ban: 'block-helper',
   bars: 'menu',
   bug: 'bug',
+  calendar: 'calendar',
   caret-up: 'menu-up',
   caret-down: 'menu-down',
   caret-up: 'menu-up',
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index c42ef6aafd..047af99431 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -2,6 +2,7 @@
 @import "icons";
 @import "components/checkboxes";
 @import "components/context_selection";
+@import "components/datepicker";
 @import "components/dropdowns";
 @import "components/hamburger";
 @import "components/help_panel";
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss
new file mode 100644
index 0000000000..d967c72a06
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss
@@ -0,0 +1,16 @@
+.datepicker-delimiter {
+  @extend .mdi;
+  @extend .mdi-arrow-right;
+  padding-right: $padding-base-horizontal;
+
+  &-text {
+    display: none;
+  }
+}
+.datepicker table tr td.active.active {
+  background-color: $brand-primary;
+
+  &:hover{
+    background-color: $brand-primary;
+  }
+}