diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index db867c4..e577721 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -329,20 +329,24 @@ if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
 button.innerHTML = "Disabled!";
+button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
+button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
 } else {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
+button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
@@ -370,20 +374,24 @@ if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
 button.innerHTML = "Enabled!";
+button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
+button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
 } else {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
+button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
@@ -437,13 +445,13 @@ input.value = value;
 input.style = "1px solod darkgray";
 input.classList.add("pure-slider-range");
 if (id.startsWith("ch1_")) {
-input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)";
+input.style.background = "linear-gradient(to left, " + rgb2Hex(31, 119, 180) + ", white)";
 } else if (id.startsWith("ch2_")) {
-input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
+input.style.background = "linear-gradient(to left, " + rgb2Hex(255, 127, 14) + ", white)";
 } else if (id.startsWith("ch3_")) {
-input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)";
+input.style.background = "linear-gradient(to left, " + rgb2Hex(44, 160, 44) + ", white)";
 } else if (id.startsWith("ch4_")) {
-input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
+input.style.background = "linear-gradient(to left, " + rgb2Hex(214, 39, 40) + ", white)";
 }
 div = document.createElement("div");
 div.appendChild(input);
@@ -523,9 +531,11 @@ if (!jsonData) {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
+button.style.backgroundColor = "";
 button.innerHTML = "save";
 }, 2000);
 console.log('Error while generating timing control data.');
@@ -542,20 +552,24 @@ if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
 button.innerHTML = "Saved!";
+button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
 button.innerHTML = "save";
+button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
 } else {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "save";
+button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending timing control data to server.', 'error');
 console.log('Error while sending data to server.');
diff --git a/firmware/data/top.js b/firmware/data/top.js
index 6db1365..59e8c6e 100644
--- a/firmware/data/top.js
+++ b/firmware/data/top.js
@@ -11,20 +11,24 @@ if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
 button.innerHTML = "Enabled!";
+button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
+button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
 } else {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
+button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
@@ -49,20 +53,24 @@ if (xhr.status === 200) {
 button.classList.remove("pure-button-primary");
 button.classList.add("success");
 button.innerHTML = "Disabled!";
+button.style.backgroundColor = "green";
 setTimeout(function () {
 button.classList.remove("success");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
+button.style.backgroundColor = "";
 }, 2000);
 console.log('Data successfully sent to server!');
 } else {
 button.classList.remove("pure-button-primary");
 button.classList.add("error");
 button.innerHTML = "Error!";
+button.style.backgroundColor = "red";
 setTimeout(function () {
 button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
+button.style.backgroundColor = "";
 }, 2000);
 showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index 91a7463..776c4c8 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -383,20 +383,24 @@ links.forEach(function(link) {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("success");
                     button.innerHTML = "Disabled!";
+                    button.style.backgroundColor = "green";
                     setTimeout(function () {
                         button.classList.remove("success");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     console.log('Data successfully sent to server!');
                 } else {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("error");
                     button.innerHTML = "Error!";
+                    button.style.backgroundColor = "red";
                     setTimeout(function () {
                         button.classList.remove("error");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
@@ -432,20 +436,24 @@ links.forEach(function(link) {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("success");
                     button.innerHTML = "Enabled!";
+                    button.style.backgroundColor = "green";
                     setTimeout(function () {
                         button.classList.remove("success");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     console.log('Data successfully sent to server!');
                 } else {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("error");
                     button.innerHTML = "Error!";
+                    button.style.backgroundColor = "red";
                     setTimeout(function () {
                         button.classList.remove("error");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
@@ -520,13 +528,13 @@ function createSlider(id, max, value, step) {
     input.classList.add("pure-slider-range");
     // Change the color of the slider based on the id
     if (id.startsWith("ch1_")) {
-        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)";
+        input.style.background = "linear-gradient(to left, " + rgb2Hex(31, 119, 180) + ", white)";
     } else if (id.startsWith("ch2_")) {
-        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
+        input.style.background = "linear-gradient(to left, " + rgb2Hex(255, 127, 14) + ", white)";
     } else if (id.startsWith("ch3_")) {
-        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)";
+        input.style.background = "linear-gradient(to left, " + rgb2Hex(44, 160, 44) + ", white)";
     } else if (id.startsWith("ch4_")) {
-        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
+        input.style.background = "linear-gradient(to left, " + rgb2Hex(214, 39, 40) + ", white)";
     }
 
     div = document.createElement("div");
@@ -642,9 +650,11 @@ function sendDataToServer() {
         button.classList.remove("pure-button-primary");
         button.classList.add("error");
         button.innerHTML = "Error!";
+        button.style.backgroundColor = "red";
         setTimeout(function () {
           button.classList.remove("error");
           button.classList.add("pure-button-primary");
+          button.style.backgroundColor = "";
           button.innerHTML = "save";
         }, 2000);
         console.log('Error while generating timing control data.');
@@ -662,20 +672,24 @@ function sendDataToServer() {
                 button.classList.remove("pure-button-primary");
                 button.classList.add("success");
                 button.innerHTML = "Saved!";
+                button.style.backgroundColor = "green";
                 setTimeout(function () {
                     button.classList.remove("success");
                     button.classList.add("pure-button-primary");
                     button.innerHTML = "save";
+                    button.style.backgroundColor = "";
                 }, 2000);
                 console.log('Data successfully sent to server!');
             } else {
                 button.classList.remove("pure-button-primary");
                 button.classList.add("error");
                 button.innerHTML = "Error!";
+                button.style.backgroundColor = "red";
                 setTimeout(function () {
                     button.classList.remove("error");
                     button.classList.add("pure-button-primary");
                     button.innerHTML = "save";
+                    button.style.backgroundColor = "";
                 }, 2000);
                 showToast('Error while sending timing control data to server.', 'error');
                 console.log('Error while sending data to server.');
diff --git a/firmware/html/top.js b/firmware/html/top.js
index a895793..b8ed203 100644
--- a/firmware/html/top.js
+++ b/firmware/html/top.js
@@ -12,20 +12,24 @@ links.forEach(function(link) {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("success");
                     button.innerHTML = "Enabled!";
+                    button.style.backgroundColor = "green";
                     setTimeout(function () {
                         button.classList.remove("success");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     console.log('Data successfully sent to server!');
                 } else {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("error");
                     button.innerHTML = "Error!";
+                    button.style.backgroundColor = "";
                     setTimeout(function () {
                         button.classList.remove("error");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
@@ -53,20 +57,24 @@ links.forEach(function(link) {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("success");
                     button.innerHTML = "Disabled!";
+                    button.style.backgroundColor = "green";
                     setTimeout(function () {
                         button.classList.remove("success");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     console.log('Data successfully sent to server!');
                 } else {
                     button.classList.remove("pure-button-primary");
                     button.classList.add("error");
                     button.innerHTML = "Error!";
+                    button.style.backgroundColor = "red";
                     setTimeout(function () {
                         button.classList.remove("error");
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
+                        button.style.backgroundColor = "";
                     }, 2000);
                     showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');