diff --git a/smart-hut/public/img/security-icon.png b/smart-hut/public/img/security-icon.png
new file mode 100644
index 0000000..652ce35
Binary files /dev/null and b/smart-hut/public/img/security-icon.png differ
diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js
index 449642e..70f34f5 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={3}
+        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/Curtains.css b/smart-hut/src/components/dashboard/devices/Curtains.css
index e98e37f..5d1939b 100644
--- a/smart-hut/src/components/dashboard/devices/Curtains.css
+++ b/smart-hut/src/components/dashboard/devices/Curtains.css
@@ -1,69 +1,73 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  overflow-y: hidden;
 }
 
 .container.curtain-container {
-    position: relative;
-    margin-top: 10%;
-    width: 18rem;
-    height: 9rem;
-    background-color: #f7f7f7;
-    border-radius: 5px;
-    box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
+  position: relative;
+  margin-top: 10%;
+  width: 18rem;
+  height: 9rem;
+  background-color: #f7f7f7;
+  border-radius: 5px;
+  box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
 }
 
 .open-container {
-    position: absolute;
-    width: 18rem;
-    background-color: #f79071;
-    border-radius: 5px;
+  position: absolute;
+  width: 18rem;
+  background-color: #f79071;
+  border-radius: 5px;
 }
 
 .slider {
-    -webkit-appearance: none;
-    width: 9rem;
-    position: absolute;
-    left: 75%;
-    top: 50%;
-    transform: translateY(-50%) rotateZ(90deg);
-    background: transparent;
-    outline: none;
+  -webkit-appearance: none;
+  width: 9rem;
+  position: absolute;
+  left: 75%;
+  top: 50%;
+  transform: translateY(-50%) rotateZ(90deg);
+  background: transparent;
+  outline: none;
 }
 
 .slider::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-    height: 5px;
-    background-color: #1b1c1d;
-    border-radius: 50px;
-    cursor: pointer;
+  -webkit-appearance: none;
+  height: 5px;
+  background-color: #1b1c1d;
+  border-radius: 50px;
+  cursor: pointer;
 }
 
 .slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #1b1c1d;
-    position: relative;
-    transition: all;
-    top: -5.5px;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #1b1c1d;
+  position: relative;
+  transition: all;
+  top: -5.5px;
 }
 
 .slider::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
+  transform: scale(1.2);
 }
 
 .span-open {
-    -webkit-user-select: none;
-    font-family: "Lato";
-    font-weight: bold;
-    font-size: 3rem;
-    text-emphasis: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+  font-family: "Lato";
+  font-weight: bold;
+  font-size: 3rem;
+  text-emphasis: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js
index 43efc7f..954c67e 100644
--- a/smart-hut/src/components/dashboard/devices/Device.js
+++ b/smart-hut/src/components/dashboard/devices/Device.js
@@ -7,11 +7,18 @@ import Switcher from "./Switch";
 import Videocam from "./Videocam";
 import Curtains from "./Curtain";
 import Thermostat from "./Thermostats";
-import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
+import { Segment, Grid, Header, Button, Icon, Card } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import DeviceSettingsModal from "./DeviceSettingsModal";
 
+const centerComponent = {
+  marginLeft: "50%",
+  transform: "translateX(-50%)",
+  marginTop: "10%",
+  marginBottom: "10%",
+};
+
 class Device extends React.Component {
   constructor(props) {
     super(props);
@@ -101,88 +108,87 @@ class Device extends React.Component {
           <Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
         );
       default:
-        //throw new Error("Device type unknown");
-        return undefined;
+        throw new Error("Device type unknown");
     }
   }
 
+  deviceDescription() {
+    return (
+      <div className="ui two buttons">
+        <Button color="blue" icon onClick={this.edit} labelPosition="left">
+          <Icon name="pencil" />
+          Edit
+        </Button>
+        {this.props.stateOrDevice.kind === "smartPlug" ? (
+          <Button
+            color="orange"
+            icon
+            onClick={this.resetSmartPlug}
+            labelPosition="left"
+          >
+            <Icon name="undo" />
+            Reset
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+
+  stateDescription() {
+    return (
+      <div class="ui one button">
+        <Button
+          color="red"
+          icon
+          onClick={this.deleteState}
+          labelPosition="left"
+        >
+          <Icon name="undo" />
+          Delete
+        </Button>
+      </div>
+    );
+  }
+
+  get deviceName() {
+    return this.props.tab === "Devices"
+      ? this.props.stateOrDevice.name
+      : this.props.device.name;
+  }
+
   render() {
     {
-      if (this.props.type !== "") {
-        return (
-          <Segment>
-            <Grid columns={2}>
-              <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
-              {this.props.tab === "Devices" ? (
-                <Grid.Column textAlign="center">
-                  <Header as="h3">{this.props.stateOrDevice.name}</Header>
-                  <Button
-                    color="blue"
-                    icon
-                    onClick={this.edit}
-                    labelPosition="left"
-                  >
-                    <Icon name="pencil" />
-                    Edit
-                  </Button>
-                  {this.props.stateOrDevice.kind === "smartPlug" ? (
-                    <Button
-                      color="orange"
-                      icon
-                      onClick={this.resetSmartPlug}
-                      labelPosition="left"
-                    >
-                      <Icon name="undo" />
-                      Reset
-                    </Button>
-                  ) : null}
-                </Grid.Column>
+      return (
+        <Card>
+          <Card.Content>
+            <Card.Header textAlign="center">
+              <Header as="h3">{this.deviceName}</Header>
+              {this.props.tab === "Scenes" ? (
+                <Header as="h4">{this.props.roomName}</Header>
               ) : (
-                <Grid.Column textAlign="center">
-                  <Header as="h3">{this.props.device.name}</Header>
-                  {this.props.tab === "Scenes" ? (
-                    <Header as="h4">{this.props.roomName}</Header>
-                  ) : (
-                    ""
-                  )}
-                  <Button
-                    color="red"
-                    icon
-                    onClick={this.deleteState}
-                    labelPosition="left"
-                  >
-                    <Icon name="undo" />
-                    Delete
-                  </Button>
-                </Grid.Column>
+                ""
               )}
-            </Grid>
-            {this.props.stateOrDevice && this.props.tab === "Devices" ? (
-              <DeviceSettingsModal
-                ref={this.modalRef}
-                id={this.props.stateOrDevice.id}
-              />
-            ) : (
-              ""
-            )}
-          </Segment>
-        );
-      } else {
-        return null;
-      }
+            </Card.Header>
+
+            <Card.Description style={centerComponent}>
+              {this.renderDeviceComponent()}
+            </Card.Description>
+          </Card.Content>
+          <Card.Content extra>
+            {this.props.tab === "Devices"
+              ? this.deviceDescription()
+              : this.stateDescription()}
+          </Card.Content>
+          <DeviceSettingsModal
+            ref={this.modalRef}
+            id={this.props.stateOrDevice.id}
+          />
+        </Card>
+      );
     }
   }
 }
-/*
 
-{this.props.stateOrDevice ? 
-                        <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.stateOrDevice.id}
-                        /> :
-                        ""
-                    }
-*/
 const mapStateToProps = (state, ownProps) => ({
   get stateOrDevice() {
     if (state.active.activeTab === "Devices") {
@@ -207,7 +213,6 @@ const mapStateToProps = (state, ownProps) => ({
     }
   },
   get type() {
-    console.log("ALPACA", state, ownProps);
     if (state.active.activeTab === "Scenes") {
       if (state.sceneStates[ownProps.id]) {
         //console.log(state.sceneStates[ownProps.id], ownProps.id);
diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
index 162e242..fc7956b 100644
--- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
@@ -33,6 +33,8 @@ const SettingsForm = (props) => {
 
   const [values, setValues] = useState({ name: "" });
 
+  console.log(props);
+
   return (
     <Form>
       <Form.Field>
@@ -42,7 +44,6 @@ const SettingsForm = (props) => {
           name="name"
           onChange={handleInputChange}
           placeholder={props.name}
-          // {this.props.device.name}
         />
       </Form.Field>
 
@@ -106,20 +107,25 @@ class DeviceSettingsModal extends Component {
       );
   }
 
+  _editForm = null;
+  get editForm() {
+    this._editForm = this._editForm || (
+      <SettingsForm
+        name={this.state.name}
+        removeDevice={this.deleteDevice}
+        saveFunction={this.updateDevice}
+      />
+    );
+    return this._editForm;
+  }
+
   render() {
-    const SettingsModal = () => (
+    return (
       <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
         <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
-        <Modal.Content>
-          <SettingsForm
-            name={this.state.name}
-            removeDevice={this.deleteDevice}
-            saveFunction={this.updateDevice}
-          />
-        </Modal.Content>
+        <Modal.Content>{this.editForm}</Modal.Content>
       </Modal>
     );
-    return <SettingsModal />;
   }
 }
 
diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js
index e9d7a72..d4762fd 100644
--- a/smart-hut/src/components/dashboard/devices/Dimmer.js
+++ b/smart-hut/src/components/dashboard/devices/Dimmer.js
@@ -129,10 +129,10 @@ export class KnobDimmerComponent extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  get stateOrDevice(){
-    if(state.active.activeTab==="Devices"){
+  get stateOrDevice() {
+    if (state.active.activeTab === "Devices") {
       return state.devices[ownProps.id];
-    }else{
+    } else {
       return state.sceneStates[ownProps.id];
     }
   },
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/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
index 7897c9e..2120ba0 100644
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -207,7 +207,7 @@ class NewDevice extends Component {
         key: "securityCamera",
         text: "Security Camera",
         value: "securityCamera",
-        image: { avatar: true, src: "/img/plusMinus.svg" },
+        image: { avatar: true, src: "/img/security-icon.png" },
       },
     ];
     const sensorOptions = [
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/Thermostat.css b/smart-hut/src/components/dashboard/devices/Thermostat.css
index 9c7097b..bfff9ee 100644
--- a/smart-hut/src/components/dashboard/devices/Thermostat.css
+++ b/smart-hut/src/components/dashboard/devices/Thermostat.css
@@ -1,38 +1,38 @@
 .slider-css {
-    -webkit-appearance: none;
-    width: 20rem;
-    font-family: "Lato";
-    position: absolute;
-    margin-top: 27%;
-    margin-left: 50%;
-    transform: translate(-50%, -50%);
+  -webkit-appearance: none;
+  width: 20rem;
+  font-family: "Lato";
+  position: absolute;
+  margin-top: 27%;
+  margin-left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .slider-css::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: 5px solid #ffffff;
-    width: 18px;
-    height: 18px;
-    border-radius: 10px;
-    background-color: rgba(94, 246, 152, 1);
-    cursor: pointer;
-    box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
-    margin-top: -7px;
+  -webkit-appearance: none;
+  border: 5px solid #ffffff;
+  width: 18px;
+  height: 18px;
+  border-radius: 10px;
+  background-color: rgba(94, 246, 152, 1);
+  cursor: pointer;
+  box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
+  margin-top: -7px;
 }
 
 .slider-css:focus {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 
-    outline: none;
+  outline: none;
 }
 
 .slider-css::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-    outline: none;
-    width: 100%;
-    height: 7px;
-    cursor: pointer;
-    box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
-    background: white;
-    border-radius: 5px;
+  -webkit-appearance: none;
+  outline: none;
+  width: 100%;
+  height: 7px;
+  cursor: pointer;
+  box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
+  background: white;
+  border-radius: 5px;
 }
diff --git a/smart-hut/src/components/dashboard/devices/VideocamModal.js b/smart-hut/src/components/dashboard/devices/VideocamModal.js
index 7a1e553..1062fac 100644
--- a/smart-hut/src/components/dashboard/devices/VideocamModal.js
+++ b/smart-hut/src/components/dashboard/devices/VideocamModal.js
@@ -2,16 +2,19 @@ import React from "react";
 import Modal from "react-modal";
 import { Button } from "semantic-ui-react";
 
-const ModalStyle = {
-  content: {
-    top: "20%",
-    left: "45%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-40%",
-    width: "80%",
-    transform: "translate(-40%, -10%)",
-  },
+const modal = {
+  opacity: 0,
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  transition: "opacity 200ms ease-in-out",
+  background: "grey",
+  color: "white",
+  maxWidth: "2rem",
+  outline: "none",
+  padding: "2rem",
+  textAlign: "center",
+  maxHeight: "50vh",
 };
 
 const VideocamModal = (props) => (
@@ -19,10 +22,10 @@ const VideocamModal = (props) => (
     isOpen={!!props.selectedVideo}
     contentLabel="Live Cam"
     onRequestClose={props.closeModal}
-    style={ModalStyle}
+    style={modal}
   >
     {props.selectedVideo && (
-      <video autoPlay loop muted width="100%" height="auto">
+      <video autoPlay loop muted width="100%" height="90%">
         <source src={props.url} type="video/mp4" />
       </video>
     )}
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",
diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js
index eade971..002c0db 100644
--- a/smart-hut/src/store.js
+++ b/smart-hut/src/store.js
@@ -499,7 +499,6 @@ function reducer(previousState, action) {
       console.warn(`Action type ${action.type} unknown`, action);
       return previousState;
   }
-  console.log("THETRUEALPACA", newState, action.type, action);
   return newState;
 }
 
diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js
index 1d97806..1985b23 100644
--- a/smart-hut/src/views/Dashboard.js
+++ b/smart-hut/src/views/Dashboard.js
@@ -21,7 +21,7 @@ class Dashboard extends Component {
     super(props);
     this.state = this.initialState;
     this.setInitialState();
-    this.activeTab = "Automations"; //TODO Remove this to not put automations first
+    this.activeTab = "Devices";
     this.selectTab = this.selectTab.bind(this);
   }