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 ee2d8ace74..d80dce0c21 100644
--- a/src/sunstone/public/app/tabs/hosts-tab/panels/info.js
+++ b/src/sunstone/public/app/tabs/hosts-tab/panels/info.js
@@ -13,12 +13,11 @@
 /* See the License for the specific language governing permissions and        */
 /* limitations under the License.                                             */
 /* -------------------------------------------------------------------------- */
-
 define(function(require) {
   /*
     DEPENDENCIES
    */
-
+  require('foundation');
   var Locale = require('utils/locale');
   var Humanize = require('utils/humanize');
   var RenameTr = require('utils/panel/rename-tr');
@@ -31,6 +30,7 @@ define(function(require) {
   var DatastoresCapacityTable = require('../utils/datastores-capacity-table');
   var CanImportWilds = require('../utils/can-import-wilds');
   var Sunstone = require('sunstone');
+  var TemplateUtils = require('utils/template-utils');
 
   /*
     TEMPLATES
@@ -59,7 +59,6 @@ define(function(require) {
     that.icon = "fa-info-circle";
 
     that.element = info[XML_ROOT];
-
     that.canImportWilds = CanImportWilds(that.element);
 
     // Hide information of the Wild VMs of the Host and the ESX Hosts
@@ -88,7 +87,6 @@ define(function(require) {
   /*
     FUNCTION DEFINITIONS
    */
-
   function _html() {
     var templateTableHTML = TemplateTable.html(
                                       this.strippedTemplate,
@@ -101,6 +99,12 @@ define(function(require) {
     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);
 
     return TemplateInfo({
       'element': this.element,
@@ -111,10 +115,31 @@ define(function(require) {
       'cpuBars': cpuBars,
       'memoryBars': memoryBars,
       'stateStr': OpenNebulaHost.stateStr(this.element.STATE),
-      'datastoresCapacityTableHTML': datastoresCapacityTableHTML
+      'datastoresCapacityTableHTML': datastoresCapacityTableHTML,
+      'maxReservedCPU': realCPU * 2,
+      'realCPU': realCPU,
+      'realMEM': Humanize.size(realMEM),
+      'maxReservedMEM': realMEM * 2,
+      'virtualMEMInput': Humanize.size(this.element.HOST_SHARE.MAX_MEM)
     });
   }
 
+  function changeBarCPU(){
+    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(){
+    document.getElementById('textInput_reserved_mem').value = Humanize.size(parseInt(document.getElementById('change_bar_mem').value));
+  }
+
+   function changeInputMEM(){
+    document.getElementById('change_bar_mem').value = parseInt(document.getElementById('textInput_reserved_mem').value);
+  }
+
   function _setup(context) {
     var that = this;
 
@@ -123,7 +148,7 @@ define(function(require) {
     TemplateTable.setup(this.strippedTemplate, RESOURCE, this.element.ID, context, this.unshownTemplate);
     PermissionsTable.setup(TAB_ID, RESOURCE, this.element, context);
 
-    $(".edit_reserved", context).on("click", function(){
+    $("", context).on("click", function(){
       var dialog = Sunstone.getDialog(OVERCOMMIT_DIALOG_ID);
 
       dialog.setParams(
@@ -137,6 +162,29 @@ define(function(require) {
       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); 
+        var CPU = parseInt(that.element.HOST_SHARE.FREE_CPU);
+        var reservedMem = parseInt(document.getElementById('change_bar_mem').value); 
+        var MEM = parseInt(that.element.HOST_SHARE.FREE_MEM);
+        if(parseInt(that.element.HOST_SHARE.USED_CPU) > 0)
+          CPU += parseInt(that.element.HOST_SHARE.USED_CPU);
+        reservedCPU = CPU - reservedCPU;
+        if(parseInt(that.element.HOST_SHARE.USED_MEM) > 0)
+          MEM += parseInt(that.element.HOST_SHARE.USED_MEM);
+        reservedMem = MEM - reservedMem;
+
+        var obj = {RESERVED_CPU: reservedCPU, RESERVED_MEM: reservedMem};
+        Sunstone.runAction("Host.append_template", that.element.ID, TemplateUtils.templateToString(obj)); 
+    });
+    
+
+    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);
+
     return false;
   }
 });
diff --git a/src/sunstone/public/app/tabs/hosts-tab/panels/info/html.hbs b/src/sunstone/public/app/tabs/hosts-tab/panels/info/html.hbs
index 972e0236a3..819b54698c 100644
--- a/src/sunstone/public/app/tabs/hosts-tab/panels/info/html.hbs
+++ b/src/sunstone/public/app/tabs/hosts-tab/panels/info/html.hbs
@@ -73,30 +73,38 @@
         </tr>
       </tbody>
     </table>
+    {{{datastoresCapacityTableHTML}}}
+  </div>
+</div>
+<div class="row">
+  <div class="large-12 columns">
     <table class="dataTable">
       <thead>
         <tr>
-          <th colspan="3">{{tr "Overcommitment"}}</th>
+          <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>
+        <tr colspan="3">
           <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>
+          <td><input type="range" name="rangeInput" id="change_bar_cpu" min="0" value="{{element.HOST_SHARE.MAX_CPU}}" max="{{maxReservedCPU}}">
+          <label align="center">{{realCPU}}</label></td>
+          <td><input type="text" id="textInput_reserved_cpu"value="{{element.HOST_SHARE.MAX_CPU}}" min="0" size="1"></td>
         </tr>
-        <tr>
+        <tr colspan="3">
           <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>
+          <td><input type="range" name="rangeInput" id="change_bar_mem" value="{{element.HOST_SHARE.MAX_MEM}}" max="{{maxReservedMEM}}">
+          <label align="center">{{realMEM}}</label></td>
+          <td><input type="text" id="textInput_reserved_mem" value="{{virtualMEMInput}}" min="0" size="1"></td>
         </tr>
       </tbody>
     </table>
-    {{{datastoresCapacityTableHTML}}}
   </div>
 </div>
 <div class="row">