diff --git a/frontend-js/src/main/js/ConfigurationOption.js b/frontend-js/src/main/js/ConfigurationOption.js
index 57f5b1dd5680fc6cb93e51aa3bf93b28129325db..53841aa0dc6b8dd5d4963324477207ef48648bd6 100644
--- a/frontend-js/src/main/js/ConfigurationOption.js
+++ b/frontend-js/src/main/js/ConfigurationOption.js
@@ -13,10 +13,12 @@ function ConfigurationOption(data) {
     self.setType(data.getType());
     self.setCommonName(data.getCommonName());
     self.setValue(data.getValue());
+    self.setGroup(data.getGroup());
     self.setValueType(data.getValueType());
   } else {
     self.setType(data.type);
     self.setCommonName(data.commonName);
+    self.setGroup(data.group);
     self.setValue(data.value);
     self.setValueType(data.valueType);
   }
@@ -57,4 +59,13 @@ ConfigurationOption.prototype.getCommonName = function () {
   return this._commonName;
 };
 
+ConfigurationOption.prototype.setGroup = function (group) {
+  this._group = group;
+};
+
+ConfigurationOption.prototype.getGroup = function () {
+  return this._group;
+};
+
+
 module.exports = ConfigurationOption;
diff --git a/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js b/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
index a1270d7f91f70dee80e668693a34439c0788ad0b..6e39815750303d6fe9a5da15ece08eba61f6bbbb 100644
--- a/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
+++ b/frontend-js/src/main/js/gui/admin/ConfigurationAdminPanel.js
@@ -35,6 +35,16 @@ ConfigurationAdminPanel.prototype._createGui = function () {
   });
   self.getElement().appendChild(configurationDiv);
 
+  configurationDiv.appendChild(Functions.createElement({
+    type: "h3",
+    content: 'Configuration category: <select name="categorySelect"></select>',
+    xss: false
+  }));
+
+  configurationDiv.appendChild(Functions.createElement({
+    type: "br"
+  }));
+
   var configurationTable = Functions.createElement({
     type: "table",
     name: "configurationTable",
@@ -45,16 +55,17 @@ ConfigurationAdminPanel.prototype._createGui = function () {
 
   // noinspection JSUnusedGlobalSymbols
   $(configurationTable).DataTable({
-    fnRowCallback: function (nRow, aData) {
-      nRow.setAttribute('id', aData[0]);
-    },
     columns: [{
+      title: 'Category'
+    }, {
       title: 'Name'
     }, {
       title: 'Value'
     }, {
-      title: 'Save'
-    }]
+      title: 'Save',
+      orderable: false
+    }],
+    order: [[1, "asc"]]
   });
   $(configurationTable).on("click", "[name='saveOption']", function () {
     var button = this;
@@ -73,7 +84,6 @@ ConfigurationAdminPanel.prototype._createGui = function () {
     var button = this;
     var value = $(button).css("background-color");
     var type = $(button).attr("data");
-    logger.debug(type);
     var colorPicker = $(button).parent().spectrum({
       color: value,
       move: function (color) {
@@ -106,13 +116,30 @@ ConfigurationAdminPanel.prototype.init = function () {
 
 ConfigurationAdminPanel.prototype.setOptions = function (options, editable) {
   var self = this;
-  var dataTable = $($("[name='configurationTable']", self.getElement())[0]).DataTable();
+  var dataTable = $("[name='configurationTable']", self.getElement()).DataTable();
   var data = [];
+
+  var categoryDropDown = $("[name='categorySelect']", self.getElement());
+  categoryDropDown.empty();
+
+  var categories = {"": true};
+  categoryDropDown.append('<option value=""></option>');
   for (var i = 0; i < options.length; i++) {
     var option = options[i];
     var rowData = self.optionToTableRow(option, editable);
     data.push(rowData);
+
+    var group = option.getGroup();
+    if (categories[group] === undefined && group !== undefined) {
+      categories[group] = true;
+      categoryDropDown.append('<option value="' + group + '">' + group + '</option>')
+    }
   }
+  categoryDropDown.change(function () {
+    logger.warn($(this).val());
+    dataTable.column(0).search($(this).val()).draw();
+  });
+
   dataTable.clear().rows.add(data).draw();
 };
 
@@ -149,9 +176,14 @@ ConfigurationAdminPanel.prototype.optionToTableRow = function (option, editable)
     logger.warn("Don't know how to handle: " + option.getValueType());
     editOption = "<input name='edit-" + option.getType() + "' value='" + value + "'readonly/>";
   }
-  row[0] = option.getCommonName();
-  row[1] = editOption;
-  row[2] = "<button name='saveOption' data='" + option.getType() + "' " + disabled + "><i class='fa fa-save' style='font-size:17px'></i></button>";
+  var group = option.getGroup();
+  if (group === undefined) {
+    group = "";
+  }
+  row[0] = group;
+  row[1] = option.getCommonName();
+  row[2] = editOption;
+  row[3] = "<button name='saveOption' data='" + option.getType() + "' " + disabled + "><i class='fa fa-save' style='font-size:17px'></i></button>";
   return row;
 };