diff --git a/src/sunstone/public/app/tabs/clusters-tab/panels/info.js b/src/sunstone/public/app/tabs/clusters-tab/panels/info.js
index 40bbcc219f..22fee8f2e1 100644
--- a/src/sunstone/public/app/tabs/clusters-tab/panels/info.js
+++ b/src/sunstone/public/app/tabs/clusters-tab/panels/info.js
@@ -24,6 +24,7 @@ define(function(require) {
   var RenameTr = require('utils/panel/rename-tr');
   var TemplateTable = require('utils/panel/template-table');
   var Sunstone = require('sunstone');
+  var TemplateUtils = require('utils/template-utils');
 
   /*
     CONSTANTS
@@ -47,12 +48,13 @@ define(function(require) {
     this.icon = "fa-info-circle";
 
     this.element = info[XML_ROOT];
+    this.percent = false;
 
     // Hide information in the template table. Unshow values are stored
     // in the unshownTemplate object to be used when the element info is updated.
     that.unshownTemplate = {};
     that.strippedTemplate = {};
-    var unshownKeys = ['RESERVED_CPU', 'RESERVED_MEM'];
+    var unshownKeys = ['HOST', 'RESERVED_CPU', 'RESERVED_MEM'];
     $.each(that.element.TEMPLATE, function(key, value) {
       if ($.inArray(key, unshownKeys) > -1) {
         that.unshownTemplate[key] = value;
@@ -80,14 +82,43 @@ define(function(require) {
                                       this.strippedTemplate,
                                       RESOURCE,
                                       Locale.tr("Attributes"));
-
+    var reservedMem;
+    (this.element.TEMPLATE.RESERVED_MEM != "0%")?reservedMem = parseInt(this.element.TEMPLATE.RESERVED_MEM): reservedMem = 0;
+    var reservedCPU
+    (this.element.TEMPLATE.RESERVED_CPU != "0%")? reservedCPU = parseInt(this.element.TEMPLATE.RESERVED_CPU): reservedCPU = 0;
     return TemplateHTML({
       'element': this.element,
       'renameTrHTML': renameTrHTML,
-      'templateTableHTML': templateTableHTML
+      'templateTableHTML': templateTableHTML,
+      'percentCPU': reservedCPU,
+      'percentMEM': reservedMem,
     });
   }
 
+  function changeBarCPU(){
+    if(parseInt(document.getElementById('change_bar_cpu').value) > 0)
+      document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
+    if(parseInt(document.getElementById('change_bar_cpu').value) < 0)
+      document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
+    document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value;
+  }
+
+   function changeInputCPU(){
+    document.getElementById('change_bar_cpu').value = document.getElementById('textInput_reserved_cpu').value;
+  }
+
+  function changeBarMEM(){
+    if(parseInt(document.getElementById('change_bar_mem').value) > 0)
+      document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
+    if(parseInt(document.getElementById('change_bar_mem').value) < 0)
+      document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
+    document.getElementById('textInput_reserved_mem').value = document.getElementById('change_bar_mem').value;
+  }
+
+   function changeInputMEM(){
+    document.getElementById('change_bar_mem').value = document.getElementById('textInput_reserved_mem').value;
+  }
+
   function _setup(context) {
     var that = this;
 
@@ -95,18 +126,17 @@ define(function(require) {
 
     TemplateTable.setup(this.strippedTemplate, RESOURCE, this.element.ID, context, this.unshownTemplate);
 
-    $(".edit_reserved", context).on("click", function(){
-      var dialog = Sunstone.getDialog(OVERCOMMIT_DIALOG_ID);
+    document.getElementById("change_bar_cpu").addEventListener("change", changeBarCPU);
+    document.getElementById("textInput_reserved_cpu").addEventListener("change", changeInputCPU);
+    document.getElementById("change_bar_mem").addEventListener("change", changeBarMEM);
+    document.getElementById("textInput_reserved_mem").addEventListener("change", changeInputMEM);
 
-      dialog.setParams(
-        { element: that.element,
-          action : "Cluster.append_template",
-          resourceName : Locale.tr("Cluster"),
-          tabId : TAB_ID
-        });
+    $(document).off('click', '.update_reserved').on("click", '.update_reserved', function(){
+        var reservedCPU = document.getElementById('change_bar_cpu').value+'%'; 
+        var reservedMem = document.getElementById('change_bar_mem').value+'%';
 
-      dialog.show();
-      return false;
+        var obj = {RESERVED_CPU: reservedCPU, RESERVED_MEM: reservedMem};
+        Sunstone.runAction("Cluster.append_template", that.element.ID, TemplateUtils.templateToString(obj)); 
     });
   }
 });
diff --git a/src/sunstone/public/app/tabs/clusters-tab/panels/info/html.hbs b/src/sunstone/public/app/tabs/clusters-tab/panels/info/html.hbs
index 0cff5f2cb7..8cf496f1eb 100644
--- a/src/sunstone/public/app/tabs/clusters-tab/panels/info/html.hbs
+++ b/src/sunstone/public/app/tabs/clusters-tab/panels/info/html.hbs
@@ -31,31 +31,39 @@
       {{{renameTrHTML}}}
     </tbody>
   </table>
-  <table class="dataTable">
-    <thead>
-      <tr>
-        <th colspan="3">{{tr "Overcommitment"}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="key_td">{{tr "Reserved CPU"}}</td>
-        <td class="value_td" style="width:50%;">{{valOrDefault element.TEMPLATE.RESERVED_CPU "-"}}</td>
-        <td>
-          <a class="edit_reserved edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>
-        </td>
-      </tr>
-      <tr>
-        <td class="key_td">{{tr "Reserved Memory"}}</td>
-        <td class="value_td" style="width:50%;">{{humanizeSize "KB" element.TEMPLATE.RESERVED_MEM}}</td>
-        <td>
-          <a class="edit_reserved edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 </div>
 </div>
+<div class="row">
+  <div class="large-12 columns">
+    <table class="dataTable">
+      <thead>
+        <tr>
+          <th colspan="4">{{tr "Overcommitment"}} 
+          <span class="right">
+            <button id="update_reserved" type="button" class="button small success update_reserved right radius">
+              {{tr "Update"}}
+            </button>
+          </span> 
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+          <tr colspan="3" class= "overcommit_percent">
+            <td class="key_td">{{tr "Reserved CPU"}}</td>
+            <td><input type="range" name="rangeInput" id="change_bar_cpu" min="-100" value="{{percentCPU}}" max="100">
+            <label align="center">0%</label></td>
+            <td><input type="text" id="textInput_reserved_cpu" value="{{percentCPU}}" min="-100" max="100" size="1"></td>
+          </tr>
+          <tr colspan="3" class= "overcommit_percent">
+            <td class="key_td">{{tr "Reserved Memory"}}</td>
+            <td><input type="range" name="rangeInput" id="change_bar_mem" min="-100" value="{{percentMEM}}" max="100">
+            <label align="center">0%</label></td>
+            <td><input type="text" id="textInput_reserved_mem" value="{{percentMEM}}" min="-100" max="100" size="1"></td>
+          </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
 <div class="row">
   <div class="large-9 columns">
     {{{templateTableHTML}}}
diff --git a/src/sunstone/public/app/tabs/hosts-tab/panels/info.js b/src/sunstone/public/app/tabs/hosts-tab/panels/info.js
index d80dce0c21..91f6831b01 100644
--- a/src/sunstone/public/app/tabs/hosts-tab/panels/info.js
+++ b/src/sunstone/public/app/tabs/hosts-tab/panels/info.js
@@ -92,19 +92,16 @@ define(function(require) {
                                       this.strippedTemplate,
                                       RESOURCE,
                                       Locale.tr("Attributes"));
-
+    console.log(this.element);
     var renameTrHTML = RenameTr.html(TAB_ID, RESOURCE, this.element.NAME);
     var clusterTrHTML = ClusterTr.html(this.element.CLUSTER);
     var permissionsTableHTML = PermissionsTable.html(TAB_ID, RESOURCE, this.element);
     var cpuBars = CPUBars.html(this.element);
     var memoryBars = MemoryBars.html(this.element);
     var datastoresCapacityTableHTML = DatastoresCapacityTable.html(this.element);
-    var realCPU = parseInt(this.element.HOST_SHARE.FREE_CPU);
-    if(this.element.HOST_SHARE.USED_CPU != "")
-      realCPU += parseInt(this.element.HOST_SHARE.USED_CPU);
-    var realMEM = parseInt(this.element.HOST_SHARE.FREE_MEM);
-    if(this.element.HOST_SHARE.USED_MEM != "")
-      realMEM += parseInt(this.element.HOST_SHARE.USED_MEM);
+    var realCPU = parseInt(this.element.HOST_SHARE.TOTAL_CPU);
+    var realMEM = parseInt(this.element.HOST_SHARE.TOTAL_MEM);
+  
 
     return TemplateInfo({
       'element': this.element,
@@ -116,15 +113,19 @@ define(function(require) {
       'memoryBars': memoryBars,
       'stateStr': OpenNebulaHost.stateStr(this.element.STATE),
       'datastoresCapacityTableHTML': datastoresCapacityTableHTML,
+      'maxReservedMEM': realMEM * 2,
       'maxReservedCPU': realCPU * 2,
       'realCPU': realCPU,
       'realMEM': Humanize.size(realMEM),
-      'maxReservedMEM': realMEM * 2,
       'virtualMEMInput': Humanize.size(this.element.HOST_SHARE.MAX_MEM)
     });
   }
 
   function changeBarCPU(){
+    if(parseInt(document.getElementById('change_bar_cpu').value) > this.element.HOST_SHARE.TOTAL_CPU)
+      document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
+    if(parseInt(document.getElementById('change_bar_cpu').value) < this.element.HOST_SHARE.TOTAL_CPU)
+      document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
     document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value;
   }
 
@@ -133,6 +134,10 @@ define(function(require) {
   }
 
   function changeBarMEM(){
+    if(parseInt(document.getElementById('change_bar_mem').value) > this.element.HOST_SHARE.TOTAL_MEM)
+      document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
+    if(parseInt(document.getElementById('change_bar_mem').value) < this.element.HOST_SHARE.TOTAL_MEM)
+      document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
     document.getElementById('textInput_reserved_mem').value = Humanize.size(parseInt(document.getElementById('change_bar_mem').value));
   }
 
@@ -148,20 +153,6 @@ define(function(require) {
     TemplateTable.setup(this.strippedTemplate, RESOURCE, this.element.ID, context, this.unshownTemplate);
     PermissionsTable.setup(TAB_ID, RESOURCE, this.element, context);
 
-    $("", context).on("click", function(){
-      var dialog = Sunstone.getDialog(OVERCOMMIT_DIALOG_ID);
-
-      dialog.setParams(
-        { element: that.element,
-          action : "Host.append_template",
-          resourceName : Locale.tr("Host"),
-          tabId : TAB_ID
-        });
-
-      dialog.show();
-      return false;
-    });
-
     //.off and .on prevent multiple clicks events
     $(document).off('click', '.update_reserved').on("click", '.update_reserved', function(){
         var reservedCPU = parseInt(document.getElementById('change_bar_cpu').value); 
diff --git a/src/sunstone/public/app/tabs/hosts-tab/panels/monitor.js b/src/sunstone/public/app/tabs/hosts-tab/panels/monitor.js
index 7170801aeb..04e189632e 100644
--- a/src/sunstone/public/app/tabs/hosts-tab/panels/monitor.js
+++ b/src/sunstone/public/app/tabs/hosts-tab/panels/monitor.js
@@ -76,21 +76,23 @@ define(function(require) {
       data: {
         id: this.element.ID,
         monitor: {
-          monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU,HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM"
+          monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU,HOST_SHARE/TOTAL_CPU,HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM,HOST_SHARE/TOTAL_MEM"
         }
       },
       success: function(req, response) {
+        console.log(response);
         var host_graphs = [
             {
-              monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU",
-              labels : Locale.tr("Allocated") + "," + Locale.tr("Real") + "," + Locale.tr("Total"),
+              monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU,HOST_SHARE/TOTAL_CPU",
+              labels : Locale.tr("Allocated") + "," + Locale.tr("Real") + "," + Locale.tr("Total") + "," + Locale.tr("Total +/- reserved"),
               humanize_figures : false,
               div_graph : $("#host_cpu_graph"),
               div_legend : $("#host_cpu_legend")
             },
             {
-              monitor_resources : "HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM",
-              labels : Locale.tr("Allocated") + "," + Locale.tr("Real") + "," + Locale.tr("Total"),
+              monitor_resources : "HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM,HOST_SHARE/TOTAL_MEM",
+              labels : Locale.tr("Allocated") + "," + Locale.tr("Real") + "," + Locale.tr("Total") + "," + Locale.tr("Total +/- reserved"),
+              humanize_figures : false,
               humanize_figures : true,
               div_graph : $("#host_mem_graph"),
               div_legend : $("#host_mem_legend")