diff --git a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/BarIndicatorStyle.js b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/BarIndicatorStyle.js
index cf012c39ef4..53e830a654a 100644
--- a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/BarIndicatorStyle.js
+++ b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/BarIndicatorStyle.js
@@ -2,15 +2,16 @@ const Lang = imports.lang;
 const St = imports.gi.St;
 const Clutter = imports.gi.Clutter;
 
-function BarIndicatorStyle(applet, cols, rows, height) {
-    this._init(applet, cols, rows, height);
+function BarIndicatorStyle(applet, cols, rows, height, uiColor) {
+    this._init(applet, cols, rows, height, uiColor);
 }
 
 BarIndicatorStyle.prototype = {
 
-    _init: function (applet, cols, rows, height) {
+    _init: function (applet, cols, rows, height, uiColor) {
         this.applet = applet;
         this.button = [];
+        this.uiColor = uiColor;
         this.update_grid(cols, rows, height);
         this.switch_id = global.window_manager.connect('switch-workspace', Lang.bind(this, this.update));
         this.scroll_id = this.applet.actor.connect('scroll-event', Lang.bind(this, this.onMouseScroll));
@@ -153,10 +154,12 @@ BarIndicatorStyle.prototype = {
             if (i == active_ws) {
                 this.button[i].get_child().set_text((i + 1).toString());
                 this.button[i].add_style_pseudo_class('outlined');
+                this.button[i].style = `background-color: ${this.uiColor};`;
             }
             else {
                 this.button[i].get_child().set_text((i + 1).toString());
                 this.button[i].remove_style_pseudo_class('outlined');
+                this.button[i].style = `border: 1px solid ${this.uiColor}; opacity: 1;`;
             }
         }
 
diff --git a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/applet.js b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/applet.js
index 225e6350250..9a9483d637c 100644
--- a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/applet.js
+++ b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/applet.js
@@ -106,6 +106,7 @@ MyApplet.prototype = {
             this.settings.bindProperty(Settings.BindingDirection.IN, "style", "style", this.onUpdateStyle, null);
             this.settings.bindProperty(Settings.BindingDirection.IN, "registerUpDownKeyBindings", "registerUpDownKeyBindings", this.onKeyBindingChanged, null);
             this.settings.bindProperty(Settings.BindingDirection.IN, "scrollWheelBehavior", "scrollWheelBehavior", this.onUpdateScrollWheelBehavior, null);
+            this.settings.bindProperty(Settings.BindingDirection.IN, "uiColor", "uiColor", this.onUiColorChanged, null);
 
             this.wscon = new WorkspaceController.WorkspaceController(this.numCols, this.numRows);
             this.onUpdateStyle();
@@ -136,12 +137,16 @@ MyApplet.prototype = {
         this.ui.update_grid(this.numCols, this.numRows, this._panelHeight);
     },
 
+    onUiColorChanged: function() {
+        this.onUpdateStyle();
+    },
+
     onUpdateStyle: function () {
         if (this.ui) this.ui.cleanup();
         if (this.style == 'single-row')
-            this.ui = new BarIndicatorStyle.BarIndicatorStyle(this, this.numCols, this.numRows, this._panelHeight);
+            this.ui = new BarIndicatorStyle.BarIndicatorStyle(this, this.numCols, this.numRows, this._panelHeight, this.uiColor);
         else
-            this.ui = new GridStyle.GridStyle(this, this.numCols, this.numRows, this._panelHeight);
+            this.ui = new GridStyle.GridStyle(this, this.numCols, this.numRows, this._panelHeight, this.uiColor);
         this.onUpdateScrollWheelBehavior();
     },
 
diff --git a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/settings-schema.json b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/settings-schema.json
index d91dcad3215..65c0c79985a 100644
--- a/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/settings-schema.json
+++ b/workspace-grid@hernejj/files/workspace-grid@hernejj/5.6/settings-schema.json
@@ -40,5 +40,10 @@
             "Scroll By Column": "col",
             "Scroll By Row": "row"
         }
+    },
+    "uiColor": {
+        "type": "entry",
+        "default": "#0C75DE",
+        "description": "Choose the UI color by entering a hex color value:"
     }
 }