diff --git a/tuskar_ui/infrastructure/nodes/tabs.py b/tuskar_ui/infrastructure/nodes/tabs.py
index e7eead1f3..40b2b1117 100644
--- a/tuskar_ui/infrastructure/nodes/tabs.py
+++ b/tuskar_ui/infrastructure/nodes/tabs.py
@@ -59,6 +59,8 @@ class OverviewTab(tabs.Tab):
             'nodes_down_count': utils.length(nodes_down),
             'nodes_provisioned_count': utils.length(nodes_provisioned),
             'nodes_free_count': utils.length(nodes_free),
+            'nodes_all_count': (utils.length(nodes_provisioned) +
+                                utils.length(nodes_free))
         }
 
         if api_base.is_service_enabled(self.request, 'metering'):
diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html b/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html
index d41c9ca14..d88e08684 100644
--- a/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html
+++ b/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html
@@ -6,144 +6,37 @@
   <div class="col-xs-4">
     <div class="widget">
       <h3>{% trans 'Hardware Inventory' %}</h3>
-      <table class="table">
-        <tbody>
-          <tr>
-            <td>{{ cpus }} {% trans 'CPU cores' %}</td>
-          </tr>
-          <tr>
-            <td>{{ memory_gb }} {% trans 'GB of memory' %}</td>
-          </tr>
-          <tr>
-            <td>{{ local_gb }} {% trans 'GB of storage' %}</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="widget-info">
+          <a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered">
+            <span class="info">{{ nodes_all_count }} {% trans 'nodes' %}</span>
+          </a>
+      </div>
+      <p>
+        {{ cpus }} {% trans 'CPUs' %} | {{ memory_gb }} {% trans 'GB RAM' %} | {{ local_gb }} {% trans 'GB HDD' %}
+      </p>
     </div>
-  </div>
-  <div class="col-xs-4">
     <div class="widget">
-      <h3>{% trans 'Free Nodes' %}</h3>
+      <h3>{% trans 'Nodes Status' %}</h3>
       <div class="d3_pie_chart_distribution" data-used="Provisioned={{ nodes_provisioned_count }}|Free={{ nodes_free_count }}"></div>
-      <div class="widget-info">
-        <a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&free">
-          <span class="info">{{ nodes_free_count }}</span>
-          {% trans 'Free Nodes' %}
-        </a>
-      </div>
-      <div class="widget-info">
-        <a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&provisioned">
-          <span class="info">{{ nodes_provisioned_count }}</span>
-          {% trans 'Provisioned Nodes' %}
-        </a>
-      </div>
     </div>
-  </div>
-  <div class="col-xs-4">
     <div class="widget">
-      <h2>{% trans 'Power Status' %}</h2>
+      <h3>{% trans 'Power Status' %}</h3>
       <div class="d3_pie_chart_distribution" data-used="Running={{ nodes_up_count }}|Stopped={{ nodes_down_count }}"></div>
     </div>
   </div>
-</div>
-
-<div class="row">
-  <div class="col-xs-12">
-    <h3>{% trans "Provisioned nodes" %}</h3>
-    {% if meter_conf %}
-    {% url 'horizon:infrastructure:nodes:nodes_performance' as node_perf_url %}
-    <div id="ceilometer-stats" class="clearfix">
-      <form class="form-horizontal" id="linechart_general_form">
-        <div class="form-group">
-          <label for="date_options" class="control-label col-sm-3">{% trans "Period" %}:&nbsp;</label>
-          <div class="col-sm-4">
-            <select data-line-chart-command="select_box_change"
-                    id="date_options"
-                    name="date_options"
-                    class="form-control">
-              <option value="0.041666">{% trans "Last hour" %}</option>
-              <option value="0.25">{% trans "Last 6 hours" %}</option>
-              <option value="0.5">{% trans "Last 12 hours" %}</option>
-              <option value="1" selected="selected">{% trans "Last day" %}</option>
-              <option value="7">{% trans "Last week" %}</option>
-              <option value="{% now 'j' %}">{% trans "Month to date" %}</option>
-              <option value="15">{% trans "Last 15 days" %}</option>
-              <option value="30">{% trans "Last 30 days" %}</option>
-              <option value="365">{% trans "Last year" %}</option>
-              <option value="other">{% trans "Other" %}</option>
-            </select>
-          </div>
-        </div>
-        <div class="form-group" id="date_from_group">
-          <label for="date_from" class="control-label col-sm-3">{% trans "From" %}:&nbsp;</label>
-          <div class="col-sm-4">
-            <input data-line-chart-command="date_picker_change"
-                   type="text"
-                   id="date_from"
-                   name="date_from"
-                   class="form-control"/>
-          </div>
-        </div>
-        <div class="form-group" id="date_to_group">
-          <label for="date_to" class="control-label col-sm-3">{% trans "To" %}:&nbsp;</label>
-          <div class="col-sm-4">
-            <input data-line-chart-command="date_picker_change"
-                   type="text"
-                   id="date_to"
-                   name="date_to"
-                   class="form-control"/>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <script type="text/javascript">
-      if (typeof $ !== 'undefined') {
-        show_hide_datepickers();
-      } else {
-        addHorizonLoadEvent(function() {
-          show_hide_datepickers();
-        });
-      }
-      // TODO(lsmola) Pull the common code into a js file.
-      function show_hide_datepickers() {
-        var date_options = $("#date_options");
-        date_options.change(function(evt) {
-          if ($(this).find("option:selected").val() === "other"){
-            evt.stopPropagation();
-            $("#date_from, #date_to").val('');
-            $("#date_from_group, #date_to_group").show();
-          } else {
-            $("#date_from_group, #date_to_group").hide();
-          }
-        });
-        if (date_options.find("option:selected").val() === "other"){
-          $("#date_from_group, #date_to_group").show();
-        } else {
-          $("#date_from_group, #date_to_group").hide();
-        }
-      }
-    </script>
-
-    <div id="node-charts" class="nodes row">
-      <div class="col-lg-1">
+  <div class="col-xs-8">
+    <div class="nodes row">
+      <div class="col-xs-12">
+        <h3>{% trans "Provisioned nodes" %}</h3>
         <div class="widget-info">
           <a href="{% url 'horizon:infrastructure:nodes:index' %}?tab=nodes__registered&provisioned">
-            <span class="info">{{ nodes_provisioned_count }}</span><br>
-            {% trans 'Provisioned' %}<br>
-            {% trans 'Nodes' %}<br>
+            <span class="info">{{ nodes_provisioned_count }} {% trans 'provisioned nodes' %}</span>
           </a>
         </div>
       </div>
-      {% for meter_label, url_part, y_max in meter_conf %}
-        <div class="col-lg-3">
-          {% include "infrastructure/_performance_chart.html" with label=meter_label y_max=y_max url=node_perf_url|add:"?"|add:url_part only %}
-        </div>
-      {% endfor %}
-
-      {% else %}
-        <p>{% trans 'Metering service is not enabled.' %}</p>
-      {% endif %}
     </div>
+    {% url 'horizon:infrastructure:nodes:nodes_performance' as node_perf_url %}
+    {% include "infrastructure/_performance_chart_box.html" with meter_conf=meter_conf node_perf_url=node_perf_url %}
   </div>
 </div>
+
diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss
new file mode 100644
index 000000000..9de60356d
--- /dev/null
+++ b/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss
@@ -0,0 +1,7 @@
+form.performance_charts {
+    .pull-right {
+        input {
+            margin-left: 0;
+        }
+    }
+}
diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss
index 1c3492201..dc24139c8 100644
--- a/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss
+++ b/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss
@@ -11,3 +11,4 @@
 @import "_index_pages";
 @import "_individual_pages";
 @import "_tables";
+@import "_charts";
diff --git a/tuskar_ui/infrastructure/templates/infrastructure/_performance_chart_box.html b/tuskar_ui/infrastructure/templates/infrastructure/_performance_chart_box.html
new file mode 100644
index 000000000..2cef86868
--- /dev/null
+++ b/tuskar_ui/infrastructure/templates/infrastructure/_performance_chart_box.html
@@ -0,0 +1,91 @@
+{% load i18n %}
+{% load url from future%}
+
+{% if meter_conf %}
+  <div class="nodes row">
+    <div id="ceilometer-stats" class="clearfix">
+      <form class="form-inline performance_charts" id="linechart_general_form">
+        <div class="pull-right">
+          <div class="form-group">
+            <div class="input-group input-group-sm">
+              <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
+              <select data-line-chart-command="select_box_change"
+                      id="date_options"
+                      name="date_options"
+                      class="form-control">
+                <option value="0.041666">{% trans "Last hour" %}</option>
+                <option value="0.25">{% trans "Last 6 hours" %}</option>
+                <option value="0.5">{% trans "Last 12 hours" %}</option>
+                <option value="1" selected="selected">{% trans "Last day" %}</option>
+                <option value="7">{% trans "Last week" %}</option>
+                <option value="{% now 'j' %}">{% trans "Month to date" %}</option>
+                <option value="15">{% trans "Last 15 days" %}</option>
+                <option value="30">{% trans "Last 30 days" %}</option>
+                <option value="365">{% trans "Last year" %}</option>
+                <option value="other">{% trans "Other" %}</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group" id="date_from_group">
+            <div class="input-group input-group-sm">
+              <div class="input-group-addon">{% trans "From" %}</div>
+              <input data-line-chart-command="date_picker_change"
+                    type="text"
+                    id="date_from"
+                    name="date_from"
+                    class="form-control"/>
+            </div>
+          </div>
+          <div class="form-group" id="date_to_group">
+            <div class="input-group input-group-sm">
+              <div class="input-group-addon">{% trans "To" %}</div>
+              <input data-line-chart-command="date_picker_change"
+                     type="text"
+                     id="date_to"
+                     name="date_to"
+                     class="form-control"/>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    if (typeof $ !== 'undefined') {
+      show_hide_datepickers();
+    } else {
+      addHorizonLoadEvent(function() {
+        show_hide_datepickers();
+      });
+    }
+    // TODO(lsmola) Pull the common code into a js file.
+    function show_hide_datepickers() {
+      var date_options = $("#date_options");
+      date_options.change(function(evt) {
+        if ($(this).find("option:selected").val() === "other"){
+          evt.stopPropagation();
+          $("#date_from, #date_to").val('');
+          $("#date_from_group, #date_to_group").show();
+        } else {
+          $("#date_from_group, #date_to_group").hide();
+        }
+      });
+      if (date_options.find("option:selected").val() === "other"){
+        $("#date_from_group, #date_to_group").show();
+      } else {
+        $("#date_from_group, #date_to_group").hide();
+      }
+    }
+  </script>
+
+  <div id="node-charts" class="nodes row">
+    {% for meter_label, url_part, y_max in meter_conf %}
+      <div class="col-lg-4">
+        {% include "infrastructure/_performance_chart.html" with label=meter_label y_max=y_max url=node_perf_url|add:"?"|add:url_part only %}
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+    <p>{% trans 'Metering service is not enabled.' %}</p>
+{% endif %}
diff --git a/tuskar_ui/utils/metering.py b/tuskar_ui/utils/metering.py
index 981c93327..e286cff2c 100644
--- a/tuskar_ui/utils/metering.py
+++ b/tuskar_ui/utils/metering.py
@@ -20,6 +20,7 @@ from django.utils import timezone
 from django.utils.translation import ugettext_lazy as _
 from horizon import exceptions
 from openstack_dashboard.api import ceilometer
+import pytz
 
 SETTINGS = {
     'settings': {
@@ -140,8 +141,8 @@ def _calc_date_args(date_from, date_to, date_options):
     if date_options == "other":
         try:
             if date_from:
-                date_from = datetime.strptime(date_from,
-                                              "%Y-%m-%d")
+                date_from = pytz.utc.localize(
+                    datetime.strptime(date_from, "%Y-%m-%d"))
             else:
                 # TODO(lsmola) there should be probably the date
                 # of the first sample as default, so it correctly
@@ -149,8 +150,8 @@ def _calc_date_args(date_from, date_to, date_options):
                 # and limit of samples to obtain that.
                 pass
             if date_to:
-                date_to = datetime.strptime(date_to,
-                                            "%Y-%m-%d")
+                date_to = pytz.utc.localize(
+                    datetime.strptime(date_to, "%Y-%m-%d"))
                 # It return beginning of the day, I want the and of
                 # the day, so i will add one day without a second.
                 date_to = (date_to + timedelta(days=1) -