diff --git a/web/themes/colors/chargePointList.js b/web/themes/colors/chargePointList.js
index 01c51ce13..1a6198173 100644
--- a/web/themes/colors/chargePointList.js
+++ b/web/themes/colors/chargePointList.js
@@ -25,6 +25,7 @@ class ChargePointList {
 
   // update if data has changed
   update() {
+    console.log(wbdata);
     this.updateValues();
     this.table.selectAll("*").remove();
 
@@ -55,7 +56,7 @@ class ChargePointList {
       .data(row => [
         formatWatt(row.power) + " " + this.phaseSymbols[row.phasesInUse] + " " + row.targetCurrent + " A",
         row.energy + " kWh / " + Math.round(row.energy / row.energyPer100km * 1000) / 10 + " km"
-      //  row.soc + " %"
+        //  row.soc + " %"
       ]).enter()
       .append("td")
       .attr("class", "tablecell px-1 py-1")
@@ -63,12 +64,12 @@ class ChargePointList {
       .text(data => data);
     rows.append((row, i) => this.cpSocButtonCell(row, i));
 
-    
-      
+
+
     // for debugging only
- /*    var body = d3.select("body");
-    this.footer
-      .text("Page Width:" + body.style("width")); */
+    /*    var body = d3.select("body");
+       this.footer
+         .text("Page Width:" + body.style("width")); */
   }
 
   updateValues() {
@@ -112,26 +113,27 @@ class ChargePointList {
     return cell.node();
   }
 
-  cpSocButtonCell (row, index) {
+  cpSocButtonCell(row, index) {
+
     const cell = d3.create("td")
       .attr("class", "tablecell px-1 py-1")
       .style("text-align", "center")
       .style("vertical-align", "middle");
-
-    cell.text (row.soc + " %");
-    cell.append ("span").text("   ");  
-    const button = cell
-      .append("button")
-      .attr("class", "btn btn-sm btn-outline-info px-2 pt-0 mt-0 pb-1")
-      .style("text-align", "center")
-      .style("vertical-align", "middle")
-      // .style("color", row.color)
-      .attr("onClick", (row, i) => ("socButtonClicked(" + i + ")"))
-    button.append("i")
-      .attr("class", "small reloadLpSoc fas fa-redo-alt")
-      .attr ("id", "soclabel-" + index)
-    ;
-
+    if (row.isSocConfigured) {
+      cell.text(row.soc + " %");
+      cell.append("span").text("   ");
+      const button = cell
+        .append("button")
+        .attr("class", "btn btn-sm btn-outline-info px-2 pt-0 mt-0 pb-1")
+        .style("text-align", "center")
+        .style("vertical-align", "middle")
+        // .style("color", row.color)
+        .attr("onClick", (row, i) => ("socButtonClicked(" + i + ")"))
+      button.append("i")
+        .attr("class", "small reloadLpSoc fas fa-redo-alt")
+        .attr("id", "soclabel-" + index)
+        ;
+    }
     return cell.node();
   }
 }
@@ -148,8 +150,8 @@ function lpButtonClicked(i) {
 
 function socButtonClicked(i) {
   publish("1", "openWB/set/lp/" + (+i + 1) + "/ForceSoCUpdate");
-  d3.select ("i#soclabel-" + i)
-    .classed ("fa-spin", true)
+  d3.select("i#soclabel-" + i)
+    .classed("fa-spin", true)
 }
- 
- var chargePointList = new ChargePointList();
+
+var chargePointList = new ChargePointList();
diff --git a/web/themes/colors/powermeter.js b/web/themes/colors/powermeter.js
index 005eb5d56..3a801134e 100644
--- a/web/themes/colors/powermeter.js
+++ b/web/themes/colors/powermeter.js
@@ -67,16 +67,17 @@ class PowerMeter {
       .style("font-size", "24")
       ;
 
-    svg.append("text")
-      .attr("x", 0)
-      .attr("y", 0)
-
-      .text("SOC (" + wbdata.chargePoint[0].name + "): " + (wbdata.chargePoint[0].soc) + " %")
-      .attr("fill", this.chargeColor)
-      .attr("backgroundcolor", this.bgColor)
-      .style("text-anchor", "middle")
-      .style("font-size", "24");
-
+    if (wbdata.chargePoint[0].isSocConfigured) {
+      svg.append("text")
+        .attr("x", 0)
+        .attr("y", 0)
+
+        .text("SOC (" + wbdata.chargePoint[0].name + "): " + (wbdata.chargePoint[0].soc) + " %")
+        .attr("fill", this.chargeColor)
+        .attr("backgroundcolor", this.bgColor)
+        .style("text-anchor", "middle")
+        .style("font-size", "24");
+    }
     svg.append("text")
       .attr("x", 0)
       .attr("y", this.height / 8)
diff --git a/web/themes/colors/setupMqttServices.js b/web/themes/colors/setupMqttServices.js
index 8d081f017..70864ed95 100644
--- a/web/themes/colors/setupMqttServices.js
+++ b/web/themes/colors/setupMqttServices.js
@@ -371,7 +371,7 @@ var options = {
 	},
 	//Gets Called if the connection could not be established
 	onFailure: function (message) {
-		setTimeout(function() { client.conect(options); }, 5000);
+		setTimeout(function() { client.connect(options); }, 5000);
 	}
 };
 
diff --git a/web/themes/colors/smartHomeList.js b/web/themes/colors/smartHomeList.js
index e79f52600..c2b92b741 100644
--- a/web/themes/colors/smartHomeList.js
+++ b/web/themes/colors/smartHomeList.js
@@ -5,70 +5,78 @@
 
 class SmartHomeList {
 
+  div;
+
   constructor() {
     var consumers = [];
   };
 
   // initialize after document is created
-  init() { }
+  init() {
+    this.div = d3.select("div#smartHomeTable");
+  }
 
   // update if data has changed
   update() {
-    
     this.updateValues();
-    const table = d3.select("table#smartHomeTable");
-    table.selectAll("*").remove();
-
-    table.attr("class", "table table-borderless table-condensed p-0 m-0");
-    // table.attr("style", "border-spacing:0;")
-
-    const headers = ["Gerät", "Verbrauch", "Laufzeit", "Modus"];
-    const thead = table.append("thead")
-      .selectAll("headers")
-      .data(headers).enter()
-      .append("th")
-      .attr("style", "color:white;text-align:center;")
-      .attr("class", "tablecell ")
-      .text((data) => data)
-      ;
-
-    const rows = table.append("tbody").selectAll("rows")
-      .data(this.consumers).enter()
-      .append("tr")
-      .attr("style", row => this.calcColor(row));
-
-    rows.append("td")
-      .attr("class", "tablecell py-1 px-1")
-      .append("button")
-      .attr ("id", (row,i) => "shbutton-" + i)
-      .attr("class", row => this.deviceClass(row))
-      .attr("style", row => this.calcColor(row))
-      .attr("onClick", (row, i) => "shDeviceClicked(" + i + ")")
-      .classed ("disabled", (row => (row.isAutomatic)))
-      .text(row => row.name);
-
-    rows.append("td")
-      .attr("class", "tablecell py-1 px-1")
-      .attr("style", "vertical-align: middle;")
-      .text(row => formatWatt(row.power) + " (" + row.energy + " kWh)",);
-
-
-
-    rows.append("td")
-      .attr("class", "tablecell py-1 px-1")
-      .attr("style", "vertical-align: middle;")
-      .text(row => formatTime(row.runningTime))
-
-    rows.append("td")
-      .attr("class", "tablecell py-1 px-1")
-      .append("button")
-      .attr ("id", (row,i) => "shmodebutton-" + i)
-      .attr("class", row => this.modeClass(row))
-      .attr("style", row => this.calcColor(row))
-      .attr("onClick", (row, i) => "shModeClicked(" + i + ")")
-      .classed ("disabled", false)
-      .text(row => row.isAutomatic ? "Automatik" : "Manuell");
-
+    this.div.selectAll("*").remove();
+
+    if (this.consumers.length > 0) {
+      var table = this.div.append("table")
+        .attr("class", "table table-borderless table-condensed p-0 m-0");
+      // table.attr("style", "border-spacing:0;")
+
+      const headers = ["Gerät", "Verbrauch", "Laufzeit", "Modus"];
+      const thead = table.append("thead")
+        .selectAll("headers")
+        .data(headers).enter()
+        .append("th")
+        .attr("style", "color:white;text-align:center;")
+        .attr("class", "tablecell ")
+        .text((data) => data)
+        ;
+
+      const rows = table.append("tbody").selectAll("rows")
+        .data(this.consumers).enter()
+        .append("tr")
+        .attr("style", row => this.calcColor(row));
+
+      rows.append("td")
+        .attr("class", "tablecell py-1 px-1")
+        .append("button")
+        .attr("id", (row, i) => "shbutton-" + i)
+        .attr("class", row => this.deviceClass(row))
+        .attr("style", row => this.calcColor(row))
+        .attr("onClick", (row, i) => "shDeviceClicked(" + i + ")")
+        .classed("disabled", (row => (row.isAutomatic)))
+        .text(row => row.name);
+
+      rows.append("td")
+        .attr("class", "tablecell py-1 px-1")
+        .attr("style", "vertical-align: middle;")
+        .text(row => formatWatt(row.power) + " (" + row.energy + " kWh)",);
+
+      rows.append("td")
+        .attr("class", "tablecell py-1 px-1")
+        .attr("style", "vertical-align: middle;")
+        .text(row => formatTime(row.runningTime))
+
+      rows.append("td")
+        .attr("class", "tablecell py-1 px-1")
+        .append("button")
+        .attr("id", (row, i) => "shmodebutton-" + i)
+        .attr("class", row => this.modeClass(row))
+        .attr("style", row => this.calcColor(row))
+        .attr("onClick", (row, i) => "shModeClicked(" + i + ")")
+        .classed("disabled", false)
+        .text(row => row.isAutomatic ? "Automatik" : "Manuell");
+    }
+    else {
+      this.div.append("h4")
+        .attr("class", "tablecell text-white pt-3")
+        .attr("style", "text-align:center; vertical-align:middle;")
+        .text("Es sind keine Geräte konfiguriert");
+    }
   }
   calcColor(row) {
     return ("color:" + row.color + "; text-align:center");
@@ -97,8 +105,8 @@ function shModeClicked(i) {
   } else {
     publish("0", "openWB/config/set/SmartHome/Devices/" + (+i + 1) + "/mode");
   }
-  d3.select ("button#shmodebutton-" + i)
-    .classed ("disabled", true);
+  d3.select("button#shmodebutton-" + i)
+    .classed("disabled", true);
 };
 
 function shDeviceClicked(i) {
@@ -108,8 +116,8 @@ function shDeviceClicked(i) {
     } else {
       publish("1", "openWB/config/set/SmartHome/Device" + (+i + 1) + "/device_manual_control");
     }
-    d3.select ("button#shbutton-" + i)
-      .classed ("disabled", true)
+    d3.select("button#shbutton-" + i)
+      .classed("disabled", true)
   }
 }
 
diff --git a/web/themes/colors/style.css b/web/themes/colors/style.css
index 22b9f8b23..7c043910b 100644
--- a/web/themes/colors/style.css
+++ b/web/themes/colors/style.css
@@ -10,7 +10,7 @@ html{
 }
 
 body {
-	color: black;
+	color: lightgrey;
 	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
 	/* Old browsers */
 	background: white;
@@ -18,7 +18,9 @@ body {
 body > .container {
 	padding: 55px 15px 0;
 }
-
+h3 {
+	color: black;
+}
 body > .container-fluid {
 	padding: 55px 15px 0;
 }
@@ -102,6 +104,10 @@ body > .container-fluid {
 	text-decoration: line-through;
 }
 
+input[type=range]::-webkit-slider-runnable-track {
+	background: slategrey;
+	
+}
 .text-green {
 	color: #006515;
 }
diff --git a/web/themes/colors/theme.html b/web/themes/colors/theme.html
index 4f426bd38..92add7903 100644
--- a/web/themes/colors/theme.html
+++ b/web/themes/colors/theme.html
@@ -193,7 +193,7 @@ <h3 class="mt-0">Ladepunkte</h3>
 			<div class="col-md-6 p-1 m-0">
 				<h3>Geräte</h3>
 				<div class="wb-widget pb-3 ">
-					<table id="smartHomeTable"></table>
+					<div id="smartHomeTable"></div>
 				</div>
 			</div>
 		</div>