diff --git a/smart-hut/src/components/dashboard/NewSceneDevice.js b/smart-hut/src/components/dashboard/NewSceneDevice.js
index 7ea1664..cef04f9 100644
--- a/smart-hut/src/components/dashboard/NewSceneDevice.js
+++ b/smart-hut/src/components/dashboard/NewSceneDevice.js
@@ -80,11 +80,13 @@ class NewSceneDevice extends Component {
     const availableDevices = [];
     this.props.devices.forEach((e) => {
       if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
-        availableDevices.push({
-          key: e.id,
-          text: e.name,
-          value: e.id,
-        });
+        if (e.flowType === "OUTPUT") {
+          availableDevices.push({
+            key: e.id,
+            text: e.name,
+            value: e.id,
+          });
+        }
       }
     });
     return (
diff --git a/smart-hut/src/components/dashboard/devices/Thermostat.css b/smart-hut/src/components/dashboard/devices/Thermostat.css
index d098c2f..9c7097b 100644
--- a/smart-hut/src/components/dashboard/devices/Thermostat.css
+++ b/smart-hut/src/components/dashboard/devices/Thermostat.css
@@ -3,7 +3,7 @@
     width: 20rem;
     font-family: "Lato";
     position: absolute;
-    margin-top: 32%;
+    margin-top: 27%;
     margin-left: 50%;
     transform: translate(-50%, -50%);
 }
diff --git a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js b/smart-hut/src/components/dashboard/devices/ThermostatStyle.js
index 9f266c7..934f258 100644
--- a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js
+++ b/smart-hut/src/components/dashboard/devices/ThermostatStyle.js
@@ -1,73 +1,73 @@
 export const container = {
-    position: "relative",
-    width: "25rem",
-    height: "12rem",
-    boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
-    borderRadius: "30px",
-    backgroundColor: "white",
+  position: "relative",
+  width: "25rem",
+  height: "12rem",
+  boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
+  borderRadius: "30px",
+  backgroundColor: "white",
 };
 
 export const line = {
-    width: "250px",
-    height: "47px",
-    borderBottom: "1px solid #646464",
-    position: "absolute",
-    left: "5%",
+  width: "250px",
+  height: "47px",
+  borderBottom: "1px solid #646464",
+  position: "absolute",
+  left: "5%",
 };
 
 export const deviceName = {
-    fontFamily: "Lato",
-    position: "absolute",
-    marginTop: "5%",
-    marginLeft: "8%",
-    fontSize: "1rem",
-    fontWeight: "bold",
-    color: "#646464",
+  fontFamily: "Lato",
+  position: "absolute",
+  marginTop: "5%",
+  marginLeft: "8%",
+  fontSize: "1rem",
+  fontWeight: "bold",
+  color: "#646464",
 };
 
 export const targetTemperature = {
-    fontFamily: "Lato",
-    position: "absolute",
-    marginTop: "20%",
-    marginLeft: "50%",
-    transform: "translate(-50%,-50%)",
-    fontSize: "3.5rem",
-    fontWeight: "bold",
-    color: "#646464",
+  fontFamily: "Lato",
+  position: "absolute",
+  marginTop: "20%",
+  marginLeft: "50%",
+  transform: "translate(-50%,-50%)",
+  fontSize: "2rem",
+  fontWeight: "bold",
+  color: "#646464",
 };
 
 export const slider = {
-    width: "25rem",
-    fontFamily: "Lato",
-    position: "absolute",
-    marginTop: "35%",
-    marginLeft: "50%",
-    transform: "translate(-50%,-50%)",
+  width: "25rem",
+  fontFamily: "Lato",
+  position: "absolute",
+  marginTop: "35%",
+  marginLeft: "50%",
+  transform: "translate(-50%,-50%)",
 };
 
 export const stateTagContainer = {
-    textAlign: "center",
-    position: "absolute",
-    width: "4rem",
-    height: "1rem",
-    marginTop: "40%",
-    marginLeft: "50%",
-    transform: "translate(-50%,-50%)",
-    padding: "0.5rem 4rem",
-    backgroundColor: "rgba(94,246,152,1)",
-    borderRadius: "50px",
+  textAlign: "center",
+  position: "absolute",
+  //width: "3rem",
+  height: "2rem",
+  marginTop: "35%",
+  marginLeft: "50%",
+  transform: "translate(-50%,-50%)",
+  padding: "0.5rem 4rem",
+  backgroundColor: "rgba(94,246,152,1)",
+  borderRadius: "50px",
 };
 
 export const stateTag = {
-    fontFamily: "Lato",
-    fontSize: "1.2rem",
-    color: "white",
-    textTransform: "uppercase",
+  fontFamily: "Lato",
+  fontSize: "1.2rem",
+  color: "white",
+  textTransform: "uppercase",
 };
 
 export const toggle = {
-    position: "absolute",
-    top: "10%",
-    left: "35%",
-    transform: "rotate(-360deg)",
+  position: "absolute",
+  top: "10%",
+  left: "35%",
+  transform: "rotate(-360deg)",
 };
diff --git a/smart-hut/src/components/dashboard/devices/Thermostats.js b/smart-hut/src/components/dashboard/devices/Thermostats.js
index 7e5bdf0..4a628b7 100644
--- a/smart-hut/src/components/dashboard/devices/Thermostats.js
+++ b/smart-hut/src/components/dashboard/devices/Thermostats.js
@@ -64,6 +64,7 @@ class Thermostats extends Component {
     //i came to the conclusion that is not possible to set mode.
     //this.mode = "HEATING";
     const turnOn = mode;
+    console.log(turnOn);
     if (this.props.tab === "Devices") {
       this.props
         .saveDevice({ ...this.props.stateOrDevice, turnOn })
@@ -92,9 +93,14 @@ class Thermostats extends Component {
 
   //It seems to work
   saveTargetTemperature(targetTemperature) {
+    const turn = this.props.stateOrDevice.mode !== "OFF" ? true : false;
     if (this.props.tab === "Devices") {
       this.props
-        .saveDevice({ ...this.props.stateOrDevice, targetTemperature })
+        .saveDevice({
+          ...this.props.stateOrDevice,
+          targetTemperature,
+          turnOn: turn,
+        })
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
@@ -174,6 +180,7 @@ class Thermostats extends Component {
         <h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
         <div style={line}></div>
         <Checkbox
+          checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
           slider
           style={toggle}
           // TODO Manage the state hereconsole.log("CHANGE", val.checked)