diff --git a/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js b/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
index 7a043d17e8ff1f03ee9fdfd2cac9722a6d34217e..c2357d11fcf7df0234ec5282594c99f6a75ddd74 100644
--- a/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
+++ b/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
@@ -6,6 +6,7 @@ var ConfigurationType = require('../../ConfigurationType');
 
 var Functions = require('../../Functions');
 var GuiConnector = require('../../GuiConnector');
+var ValidationError = require('../../ValidationError');
 
 var logger = require('../../logger');
 
@@ -16,7 +17,6 @@ var xss = require("xss");
  *
  * @param {Configuration} [params.configuration]
  * @param {HTMLElement} params.element
- * @param {Project} params.project
  * @param {string} params.panelName
  * @param params.parent
  *
@@ -45,10 +45,6 @@ ConfigurationAdminPanel.prototype._createGui = function () {
   self.getGuiUtils().initTabContent(self);
 
 
-  $(self.getElement()).on("click", "[name='saveOption']", function () {
-    var button = this;
-    return self.saveOption($(button).attr("data")).then(null, GuiConnector.alert);
-  });
   $(self.getElement()).on("input", ".minerva-color-input", function () {
     var input = this;
     var value = $(input).val();
@@ -58,6 +54,17 @@ ConfigurationAdminPanel.prototype._createGui = function () {
     }
     $("[name='edit-color-" + type + "']", self.getElement()).css("background-color", "#" + value);
   });
+
+  // $("[name='configurationTable']", self.getElement()).on("change", "input", function () {
+  $(self.getElement()).on("change", "input, textarea", function () {
+    var input = this;
+    var type = $(input).attr("data");
+    var name = $(input).attr("name");
+    if (name !== undefined && name.indexOf("edit") === 0) {
+      return self.saveOption(type);
+    }
+  });
+
   $(self.getElement()).on("click", ".minerva-color-button", function () {
     var button = this;
     var value = $(button).css("background-color");
@@ -72,6 +79,7 @@ ConfigurationAdminPanel.prototype._createGui = function () {
       },
       hide: function () {
         colorPicker.spectrum("destroy");
+        return self.saveOption(type);
       }
     });
     return new Promise.delay(1).then(function () {
@@ -107,9 +115,6 @@ ConfigurationAdminPanel.prototype.createOptionsTable = function (options, type)
       title: 'Name'
     }, {
       title: 'Value'
-    }, {
-      title: 'Save',
-      orderable: false
     }],
     order: [[1, "asc"]]
   });
@@ -202,17 +207,17 @@ ConfigurationAdminPanel.prototype.optionToTableRow = function (option) {
     option.getValueType() === "DOUBLE" ||
     option.getValueType() === "EMAIL" ||
     option.getValueType() === "URL") {
-    editOption = "<input name='edit-" + option.getType() + "' value='" + value + "'/>";
+    editOption = "<input name='edit-" + option.getType() + "' data='" + option.getType() + "' value='" + value + "'/>";
   } else if (option.getValueType() === "PASSWORD") {
-    editOption = "<input type='password' name='edit-" + option.getType() + "' autocomplete='new-password' value='" + value + "'/>";
+    editOption = "<input type='password' name='edit-" + option.getType() + "' autocomplete='new-password' data='" + option.getType() + "' value='" + value + "'/>";
   } else if (option.getValueType() === "TEXT") {
-    editOption = "<textarea name='edit-" + option.getType() + "'>" + xss(value) + "</textarea>";
+    editOption = "<textarea name='edit-" + option.getType() + "' data='" + option.getType() + "' >" + xss(value) + "</textarea>";
   } else if (option.getValueType() === "BOOLEAN") {
     var checked = "";
     if (value.toLowerCase() === "true") {
       checked = " checked ";
     }
-    editOption = "<input type='checkbox' name='edit-" + option.getType() + "' " + checked + " />";
+    editOption = "<input type='checkbox' name='edit-" + option.getType() + "' " + checked + " data='" + option.getType() + "' />";
   } else if (option.getValueType() === "COLOR") {
     editOption = "<div>" +
       "<input class='minerva-color-input' name='edit-" + option.getType() + "' data='" + option.getType() + "' value='" + value + "'/>" +
@@ -220,11 +225,10 @@ ConfigurationAdminPanel.prototype.optionToTableRow = function (option) {
       "</div>";
   } else {
     logger.warn("Don't know how to handle: " + option.getValueType());
-    editOption = "<input name='edit-" + option.getType() + "' value='" + value + "' readonly/>";
+    editOption = "<input name='edit-" + option.getType() + "' value='" + value + "' readonly data='" + option.getType() + "' />";
   }
   row[0] = option.getCommonName();
   row[1] = editOption;
-  row[2] = "<button name='saveOption' data='" + option.getType() + "' ><i class='fa fa-save' style='font-size:17px'></i></button>";
   return row;
 };
 
@@ -236,18 +240,24 @@ ConfigurationAdminPanel.prototype.optionToTableRow = function (option) {
 ConfigurationAdminPanel.prototype.saveOption = function (type) {
   var self = this;
   var option;
+
+  var value;
+  var element = $("[name='edit-" + type + "']", self.getElement());
+  if (element.is(':checkbox')) {
+    if (element.is(':checked')) {
+      value = "true";
+    } else {
+      value = "false";
+    }
+  } else {
+    value = element.val();
+  }
+
+  GuiConnector.showProcessing();
   return self.getServerConnector().getConfiguration().then(function (configuration) {
     option = configuration.getOption(type);
-    var element = $("[name='edit-" + type + "']", self.getElement());
-    var value;
-    if (element.is(':checkbox')) {
-      if (element.is(':checked')) {
-        value = "true";
-      } else {
-        value = "false";
-      }
-    } else {
-      value = element.val();
+    if (option === undefined) {
+      return Promise.reject(new ValidationError("Unknown configuration type: " + type));
     }
     if (option.getValueType() === 'PASSWORD' && value === '') {
       return new Promise(function (resolve) {
@@ -276,17 +286,6 @@ ConfigurationAdminPanel.prototype.saveOption = function (type) {
     }
   }).then(function (performUpdate) {
     if (performUpdate) {
-      var element = $("[name='edit-" + type + "']", self.getElement());
-      var value;
-      if (element.is(':checkbox')) {
-        if (element.is(':checked')) {
-          value = "true";
-        } else {
-          value = "false";
-        }
-      } else {
-        value = element.val();
-      }
       option.setValue(value);
       return self.getServerConnector().updateConfigurationOption(option);
     }
@@ -318,7 +317,7 @@ ConfigurationAdminPanel.prototype.saveOption = function (type) {
         }
       });
     }
-  });
+  }).catch(GuiConnector.alert).finally(GuiConnector.hideProcessing);
 };
 
 /**
diff --git a/frontend-js/src/test/js/gui/admin/ConfigurationAdminPanel-test.js b/frontend-js/src/test/js/gui/admin/ConfigurationAdminPanel-test.js
index e587f9681a1f832ff9c69ec2c533cb8bf246a9f6..975a37203887ad3a7b1eee71dedb6a2bae8fdc8b 100644
--- a/frontend-js/src/test/js/gui/admin/ConfigurationAdminPanel-test.js
+++ b/frontend-js/src/test/js/gui/admin/ConfigurationAdminPanel-test.js
@@ -30,8 +30,8 @@ describe('ConfigurationAdminPanel', function () {
       var mapTab = createConfigurationTab();
       return mapTab.init().then(function () {
         assert.equal(0, logger.getWarnings().length);
-        assert.ok($("[name='saveOption']", testDiv).length > 0);
-        assert.notOk($("[name='saveOption']", testDiv).prop('disabled'));
+        assert.ok($("[name^='edit-']", testDiv).length > 0);
+        assert.notOk($("[name^='edit-']", testDiv).prop('disabled'));
         return mapTab.destroy();
       });
     });
@@ -40,7 +40,7 @@ describe('ConfigurationAdminPanel', function () {
       var mapTab = createConfigurationTab();
       return mapTab.init().then(function () {
         assert.equal(0, logger.getWarnings().length);
-        assert.equal($("[name='saveOption']", testDiv).length, 0);
+        assert.equal($("[name^='edit']", testDiv).length, 0);
         return mapTab.destroy();
       });
     });