diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index b419d8a..3682501 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -409,8 +409,7 @@ tdMinute.id = "minute" + i;
 tr.appendChild(tdMinute);
 for (var j = 1; j <=4; j++)
 {
-var tdCh = createSelectCell(100, 0, 1);
-tdCh.id = "ch" + j + "_" + i;
+var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
 tr.appendChild(tdCh);
 }
 table.appendChild(tr);
@@ -428,13 +427,23 @@ input.max = max;
 input.step = step;
 input.value = value;
 input.classList.add("pure-slider-range");
-var div = document.createElement("div");
-div.classList.add("pure-control-group");
+if (id.startsWith("ch1_")) {
+input.style.backgroundColor = "blue";
+} else if (id.startsWith("ch2_")) {
+input.style.backgroundColor = "orange";
+} else if (id.startsWith("ch3_")) {
+input.style.backgroundColor = "green";
+} else if (id.startsWith("ch4_")) {
+input.style.backgroundColor = "red";
+}
+div = document.createElement("div");
 div.appendChild(input);
-var label = document.createElement("label");
-label.innerHTML = id;
-label.classList.add("pure-slider-label");
-div.insertBefore(label, input);
+var span = document.createElement("span");
+span.innerHTML = "&nbsp;" + value + " %";
+div.appendChild(span);
+input.oninput = function() {
+span.innerHTML = "&nbsp;" + this.value + " %";
+};
 var td = document.createElement("td");
 td.id = id;
 td.appendChild(div);
@@ -462,10 +471,14 @@ for (var i = 0; i < tcdata.length; i++) {
 var row = document.getElementById("hour" + (i+1)).parentNode;
 row.cells[0].childNodes[0].value = tcdata[i].hour;
 row.cells[1].childNodes[0].value = tcdata[i].min;
-row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
+row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
+row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
+row.cells[3].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[3].childNodes[0].childNodes[0].value + " %";
+row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
+row.cells[4].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[4].childNodes[0].childNodes[0].value + " %";
+row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+row.cells[5].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[5].childNodes[0].childNodes[0].value + " %";
 }
 loadTCGraphData();
 });
@@ -479,10 +492,10 @@ var row = document.getElementById("hour" + i).parentNode;
 var hour = parseInt(row.cells[0].childNodes[0].value);
 var min = parseInt(row.cells[1].childNodes[0].value);
 timeArr.push(hour * 60 + min);
-var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
-var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55);
-var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55);
-var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55);
+var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
+var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
+var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55);
+var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55);
 tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
 }
 for (var i = 0; i < timeArr.length - 1; i++) {
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index ba9c07b..7b6b029 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -486,8 +486,7 @@ function createTable() {
       for (var j = 1; j <=4; j++)
       {
         // chj_i
-        var tdCh = createSelectCell(100, 0, 1);
-        tdCh.id = "ch" + j + "_" + i;
+        var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
         tr.appendChild(tdCh);
       }
   
@@ -509,26 +508,38 @@ function createSlider(id, max, value, step) {
     input.step = step;
     input.value = value;
     input.classList.add("pure-slider-range");
-  
-    // Create a new div element to contain the input element
-    var div = document.createElement("div");
-    div.classList.add("pure-control-group");
+    // Change the color of the slider based on the id
+    if (id.startsWith("ch1_")) {
+        input.style.backgroundColor = "blue";
+    } else if (id.startsWith("ch2_")) {
+        input.style.backgroundColor = "orange";
+    } else if (id.startsWith("ch3_")) {
+        input.style.backgroundColor = "green";
+    } else if (id.startsWith("ch4_")) {
+        input.style.backgroundColor = "red";
+    }
+
+    div = document.createElement("div");
     div.appendChild(input);
-  
-    // Create a new label element for the slider
-    var label = document.createElement("label");
-    label.innerHTML = id;
-    label.classList.add("pure-slider-label");
-    div.insertBefore(label, input);
-  
+
+    // Create a new span element to contain the value of the slider
+    var span = document.createElement("span");
+    span.innerHTML = "&nbsp;" + value + " %";
+    div.appendChild(span);
+
+    // Update the span element when the value of the slider changes
+    input.oninput = function() {
+        span.innerHTML = "&nbsp;" + this.value + " %";
+    };
+
     // Create a new td element to contain the div element
     var td = document.createElement("td");
     td.id = id;
     td.appendChild(div);
-  
+
     // Return the td element
     return td;
-  }
+}
 
 function createSelectCell(max, value, step) {
     // Erstelle ein neues select-Element
@@ -564,10 +575,18 @@ function fillTableFromJson() {
             var row = document.getElementById("hour" + (i+1)).parentNode;
             row.cells[0].childNodes[0].value = tcdata[i].hour;
             row.cells[1].childNodes[0].value = tcdata[i].min;
-            row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-            row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-            row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-            row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+
+            row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
+            row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
+            row.cells[3].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[3].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
+            row.cells[4].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[4].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+            row.cells[5].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[5].childNodes[0].childNodes[0].value + " %";
         }
 
         loadTCGraphData();
@@ -585,10 +604,10 @@ function createJsonFromTable() {
       var hour = parseInt(row.cells[0].childNodes[0].value);
       var min = parseInt(row.cells[1].childNodes[0].value);
       timeArr.push(hour * 60 + min); // Speichert die Zeitangaben als Minuten seit Mitternacht
-      var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
-      var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55);
-      var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55);
-      var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55);
+      var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
+      var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
+      var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55);
+      var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55);
       tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
     }