diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js
index 449642e..2fb222d 100644
--- a/smart-hut/src/components/dashboard/DevicePanel.js
+++ b/smart-hut/src/components/dashboard/DevicePanel.js
@@ -24,7 +24,12 @@ class DevicePanel extends Component {
 
   render() {
     return (
-      <Grid doubling columns={2} divided="vertically">
+      <Grid
+        doubling
+        columns={2}
+        divided="vertically"
+        style={{ paddingTop: "3rem" }}
+      >
         {this.props.devices.map((e, i) => {
           return (
             <Grid.Column key={i}>
diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js
index 43efc7f..17ad4c7 100644
--- a/smart-hut/src/components/dashboard/devices/Device.js
+++ b/smart-hut/src/components/dashboard/devices/Device.js
@@ -173,16 +173,7 @@ class Device extends React.Component {
     }
   }
 }
-/*
 
-{this.props.stateOrDevice ? 
-                        <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.stateOrDevice.id}
-                        /> :
-                        ""
-                    }
-*/
 const mapStateToProps = (state, ownProps) => ({
   get stateOrDevice() {
     if (state.active.activeTab === "Devices") {
diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
index 162e242..5a563e6 100644
--- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
@@ -26,23 +26,26 @@ const DeleteModal = (props) => (
 );
 
 const SettingsForm = (props) => {
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setValues({ ...values, [name]: value });
-  };
-
   const [values, setValues] = useState({ name: "" });
 
+  const handleInputChange = (e) => {
+    const { name, value } = e.target.value;
+    setValues({ ...values, [name]: value });
+    console.log("EDDDDITING!!", e.target.value);
+    console.log(props);
+  };
+
   return (
     <Form>
       <Form.Field>
-        <label>Edit Name: </label>
-        <Input
+        <label>Edit Name:</label>
+        <input
           autoComplete="off"
           name="name"
           onChange={handleInputChange}
-          placeholder={props.name}
-          // {this.props.device.name}
+          value={props.name}
+          autoFocus="on"
+          placeholder="Device name"
         />
       </Form.Field>
 
diff --git a/smart-hut/src/components/dashboard/devices/DimmerStyle.js b/smart-hut/src/components/dashboard/devices/DimmerStyle.js
index cdc6216..a8b3260 100644
--- a/smart-hut/src/components/dashboard/devices/DimmerStyle.js
+++ b/smart-hut/src/components/dashboard/devices/DimmerStyle.js
@@ -35,6 +35,7 @@ export const ValueStyle = {
   fontSize: "1.3rem",
   fontFamily: "Lato",
   textAnchor: "middle",
+  userSelect: "none",
 };
 
 export const CircularThumbStyle = {
@@ -52,6 +53,7 @@ export const textStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const knobIcon = {
diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
index 54af2e7..c6b6cca 100644
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -164,8 +164,8 @@ class Light extends Component {
     );
 
     const normalLightView = (
-      <StyledDiv>
-        <div onClick={this.onClickDevice}>
+      <StyledDiv onClick={this.onClickDevice}>
+        <div>
           <Image src={this.getIcon()} style={iconStyle} />
           <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
             <h5 style={nameStyle}>Light</h5>
diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js
index 35577cd..54ebc5d 100644
--- a/smart-hut/src/components/dashboard/devices/LightStyle.js
+++ b/smart-hut/src/components/dashboard/devices/LightStyle.js
@@ -20,6 +20,7 @@ export const textStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -29,6 +30,7 @@ export const nameStyle = {
   left: "50%",
   transform: "translateX(-50%)",
   color: "white",
+  userSelect: "none",
 };
 
 export const LightDimmerStyle = {
diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js
index c07927c..7527326 100644
--- a/smart-hut/src/components/dashboard/devices/SensorStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js
@@ -21,12 +21,14 @@ export const sensorText = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const valueStyle = {
   fill: "#3e99ff",
   fontSize: "2.4rem",
   fontFamily: "Lato",
+  userSelect: "none",
 };
 
 export const errorStyle = {
@@ -34,6 +36,7 @@ export const errorStyle = {
   fontSize: "1.5rem",
   fontFamily: "Lato",
   textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+  userSelect: "none",
 };
 
 export const motionSensorInnerCircle = {
diff --git a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
index 41fe567..b4e37e2 100644
--- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
@@ -5,6 +5,7 @@ export const energyConsumedStyle = {
   top: "20%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const kwhStyle = {
@@ -14,6 +15,7 @@ export const kwhStyle = {
   top: "50%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const imageStyle = {
@@ -24,6 +26,7 @@ export const imageStyle = {
   left: "50%",
   transform: "translateX(-35%)",
   filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -35,4 +38,5 @@ export const nameStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
index e06e2f0..11b7856 100644
--- a/smart-hut/src/components/dashboard/devices/SwitchStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
@@ -5,6 +5,7 @@ export const imageStyle = {
   top: "5%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -16,6 +17,7 @@ export const nameStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const turnedOnStyle = {
@@ -25,4 +27,5 @@ export const turnedOnStyle = {
   top: "20%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js
index 7815ce7..9750404 100644
--- a/smart-hut/src/components/dashboard/devices/styleComponents.js
+++ b/smart-hut/src/components/dashboard/devices/styleComponents.js
@@ -75,6 +75,7 @@ export const iconStyle = {
   top: "10%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 export const nameStyle = {
   position: "absolute",