diff --git a/smart-hut/src/client_server.js b/smart-hut/src/client_server.js
index 18c2ae4..229497b 100644
--- a/smart-hut/src/client_server.js
+++ b/smart-hut/src/client_server.js
@@ -59,6 +59,28 @@ export var call  = {
                 return err;
             });
     },
+    getAllDevices: function(token) {
+        if (!token){
+            token = tkn;
+        }
+        return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } })
+            .then(res => {
+                return res;
+            }).catch(err => {
+                return err;
+            });
+    },
+    getAllDevicesByRoom: function(id, token) {
+        if (!token){
+            token = tkn;
+        }
+        return axios.get(config + 'room/' + id + '/device' , { headers: { Authorization : "Bearer " + token } })
+            .then(res => {
+                return res;
+            }).catch(err => {
+                return err;
+            });
+    },
     createRoom: function(data, headers) {
         return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) 
             .then(res => {
diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js
index 52c877e..c64a7d0 100644
--- a/smart-hut/src/components/dashboard/DevicePanel.js
+++ b/smart-hut/src/components/dashboard/DevicePanel.js
@@ -2,17 +2,13 @@ import React, {Component} from 'react';
 import {
     Grid,
 } from "semantic-ui-react";
-import Device from "./devices/Device";
-import NewDevice from "./devices/NewDevice";
-import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices";
 import {editButtonStyle, panelStyle} from "./devices/styleComponents";
 import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
-import Light from "./devices/Light";
-import SmartPlug from "./devices/SmartPlug";
-import Sensor from "./devices/Sensor";
+import DeviceType from './devices/DeviceTypeController';
+import NewDevice from "./devices/NewDevice";
 
 
-const devices = [
+/* const devices = [
     {
         "id" : 1,
         "name": "Bedroom Light",
@@ -50,15 +46,15 @@ const devices = [
         "name": "Bedroom Thermometer",
         "type" : "temperature-sensor",
     },
-];
+];*/
 
-class Panel extends Component {
+export default class DevicePanel extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
             editMode : false,
-            devices : devices,
+            devices : this.props.devices,
         };
     }
 
@@ -94,16 +90,19 @@ class Panel extends Component {
         return (
             <div style={panelStyle}>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
-                <Grid doubling columns={5} divided="vertically">
-                    <Grid.Column>
-                        <Light onChangeData={this.changeDeviceData}  device={devices[0]} edit={this.state.editMode}/>
-                    </Grid.Column>
-                    <Grid.Column>
-                        <SmartPlug onChangeData={this.changeDeviceData}  device={devices[4]} edit={this.state.editMode}/>
-                    </Grid.Column>
-                    <Grid.Column>
-                        <Sensor onChangeData={this.changeDeviceData}  device={devices[5]} edit={this.state.editMode}/>
-                    </Grid.Column>
+                <Grid doubling divided="vertically">
+                    {
+                        this.props.devices ?
+                            this.props.devices.map((e, i) => {
+                                return (
+                                    <Grid.Column>
+                                        <DeviceType type={e.type} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
+                                    </Grid.Column>
+                                )
+                            })
+                        :
+                            null
+                    }
                     <Grid.Column>
                         <NewDevice/>
                     </Grid.Column>
@@ -112,23 +111,5 @@ class Panel extends Component {
         )
     }
 
-}
-
-
-export default class DevicePanel extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            shownRoom: "All"
-        }
-    }
-
-    render() {
-        return (
-            <Panel/>
-        )
-    }
-
-}
+} 
 
diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js
new file mode 100644
index 0000000..b67ae7b
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Light from "./Light";
+import SmartPlug from "./SmartPlug";
+import Sensor from "./Sensor";
+import DefaultDimmer from "./Dimmer";
+import Switcher from "./Switcher";
+
+
+
+const DeviceType = (props) => {
+    switch(props.type) {
+        case "light":
+            return <Light onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+        case "sensor":
+            return <Sensor onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+        case "dimmer":
+            return <DefaultDimmer onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+        case "smartplug":
+            return <SmartPlug onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+        case "switch":
+            return <Switcher onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+    }
+}
+
+export default DeviceType;
\ No newline at end of file
diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js
index 078fe94..862095a 100644
--- a/smart-hut/src/components/dashboard/devices/Dimmer.js
+++ b/smart-hut/src/components/dashboard/devices/Dimmer.js
@@ -30,7 +30,7 @@ export class StatefulDimmer extends Component{
     }
 }
 
-export class DefaultDimmer extends Component{
+export default class DefaultDimmer extends Component{
     // As far as I am concern, even though this dimmer doesn't have state, internally it's needed
     constructor(props){
         super(props);
diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js
index 30f36e0..f5e6476 100644
--- a/smart-hut/src/views/Dashboard.js
+++ b/smart-hut/src/views/Dashboard.js
@@ -4,18 +4,24 @@ import Navbar from './Navbar'
 import MyHeader from '../components/HeaderController'
 
 import { call } from '../client_server';
-import {Button} from 'semantic-ui-react';
-import { Menu } from 'semantic-ui-react'
-import { Grid, Image, Icon } from 'semantic-ui-react'
+import { Grid } from 'semantic-ui-react'
+/* 
+  rooms -> actual rooms
+  activeItem -> the current room in view 
+  devices -> current device in current room view
 
 
+  id of Home is -1
+*/
+
 export default class Dashboard extends Component{
   constructor(props) {
     super(props);
     this.state = {
       rooms: [],
-      activeItem: "Home",
-      tkn: this.props.tkn
+      activeItem: -1,
+      devices: [],
+      tkn: this.props.tkn,
     };
 
     this.addRoom = this.addRoom.bind(this);
@@ -33,6 +39,17 @@ export default class Dashboard extends Component{
       }).catch(err => {
         console.log(err);
       });
+    call.getAllDevices(this.props.tkn) 
+      .then(res => {
+        console.log(res);
+        res.data.forEach((e) => {
+          this.setState(state => ({
+            devices: state.devices.concat([e])
+          }));
+        });
+      }).catch(err => {
+        console.log(err);
+      });
   }
 
   addRoom(data) {
@@ -50,11 +67,27 @@ export default class Dashboard extends Component{
   };
 
   deleteRoom(id) {
-
+    call.deleteRoom(id)
+      .then(res => {
+        //remove room in state.rooms
+      }).catch(err => {
+        console.log(err);
+      });
   }
 
   handleItemClick(el) {
+    // el -> obj of name and id
     //da fare richiesta get della room e settare activeItem
+    call.getAllDevicesByRoom(el.id, this.props.tkn)
+      .then(res => {
+        res.data.forEach((e) => {
+          this.setState(state => ({
+            devices: state.devices.concat([e])
+          }));
+        });
+      }).catch(err => {
+        console.log(err);
+      });
   }
  
   render () {
@@ -72,7 +105,7 @@ export default class Dashboard extends Component{
             </Grid.Column>
       
             <Grid.Column width={13}>
-              <DevicePanel />
+              <DevicePanel devices={this.state.devices} />
             </Grid.Column>
           </Grid.Row>
         </Grid>
diff --git a/smart-hut/src/views/FourOhFour.js b/smart-hut/src/views/FourOhFour.js
index 99cca6c..2aa89f5 100644
--- a/smart-hut/src/views/FourOhFour.js
+++ b/smart-hut/src/views/FourOhFour.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { Message} from 'semantic-ui-react';
+import { Header, Grid, Message, Button} from 'semantic-ui-react';
 import {Link } from "react-router-dom";
 
 
@@ -7,13 +7,29 @@ export default class FourOhFour  extends Component {
 
     render() {
         return (
-            <Message>
-                <Message.Header>404 Page Not Found</Message.Header>
-                <p>
-                Hey what are you doing here? 
-                Go back to our homepage <Link to="/"/>
-                </p>
-            </Message>
+            <div style={{height : "110vh", background: '#1b1c1d'}}>
+                <Grid centered>
+                    <Grid.Row>
+                        <Header as='h1'>404</Header>
+                    </Grid.Row>
+                    <Grid.Row>
+                    <Grid.Column width={10}>
+                        <Message>
+                            <Message.Header>404 Page Not Found</Message.Header>
+                            <p>
+                            Hey what are you doing here? 
+                            Looks like you are lost, this room does not exist. 
+                            </p>
+                        </Message>
+                        </Grid.Column>
+                        <Grid.Column width={6}>
+                        <Button >
+                            <Link to="/">Go back to our main room</Link>
+                        </Button>
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </div>
         )
     }
 }
\ No newline at end of file