diff --git a/front/src/components/boxs/device-in-room/DeviceRow.jsx b/front/src/components/boxs/device-in-room/DeviceRow.jsx
index a2892cae6e..db5ed290de 100644
--- a/front/src/components/boxs/device-in-room/DeviceRow.jsx
+++ b/front/src/components/boxs/device-in-room/DeviceRow.jsx
@@ -1,8 +1,17 @@
+import { createElement } from 'preact';
+import { DEVICE_FEATURE_TYPES } from '../../../../../server/utils/constants';
+
 import BinaryDeviceFeature from './device-features/BinaryDeviceFeature';
 import ColorDeviceFeature from './device-features/ColorDeviceFeature';
 import SensorDeviceFeature from './device-features/SensorDeviceFeature';
-import MultilevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
-import BrightnessDeviceFeature from './device-features/BrightnessDeviceFeature';
+import MultiLevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
+
+const ROW_TYPE_BY_FEATURE_TYPE = {
+  [DEVICE_FEATURE_TYPES.LIGHT.BINARY]: BinaryDeviceFeature,
+  [DEVICE_FEATURE_TYPES.LIGHT.COLOR]: ColorDeviceFeature,
+  [DEVICE_FEATURE_TYPES.SWITCH.DIMMER]: MultiLevelDeviceFeature,
+  [DEVICE_FEATURE_TYPES.LIGHT.BRIGHTNESS]: MultiLevelDeviceFeature
+};
 
 const DeviceRow = ({ children, ...props }) => {
   // if device is a sensor, we display the sensor deviceFeature
@@ -10,66 +19,14 @@ const DeviceRow = ({ children, ...props }) => {
     return <SensorDeviceFeature user={props.user} deviceFeature={props.deviceFeature} />;
   }
 
-  // else, it's not a sensor
-  // if it's a binary
-  if (props.deviceFeature.type === 'binary') {
-    return (
-      <BinaryDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'color') {
-    return (
-      <ColorDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'dimmer') {
-    return (
-      <MultilevelDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'brightness') {
-    return (
-      <BrightnessDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
+  const elementType = ROW_TYPE_BY_FEATURE_TYPE[props.deviceFeature.type];
+
+  if (!elementType) {
+    // if no related components, we return nothing
+    return null;
   }
-  // if not, we return nothing
-  return null;
+
+  return createElement(elementType, props);
 };
 
 export default DeviceRow;
diff --git a/front/src/components/boxs/device-in-room/device-features/BrightnessDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/BrightnessDeviceFeature.jsx
deleted file mode 100644
index 9e12c9603d..0000000000
--- a/front/src/components/boxs/device-in-room/device-features/BrightnessDeviceFeature.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getDeviceName } from './utils';
-
-const BrightnessDeviceType = ({ children, ...props }) => {
-  function updateValue(e) {
-    props.updateValue(
-      props.x,
-      props.y,
-      props.device,
-      props.deviceFeature,
-      props.deviceIndex,
-      props.deviceFeatureIndex,
-      e.target.value,
-      props.deviceFeature.last_value
-    );
-  }
-
-  return (
-    <tr>
-      <td>
-        <i class="fe fe-sun" />
-      </td>
-      <td>{getDeviceName(props.device, props.deviceFeature)}</td>
-      <td class="text-right" style="padding-top: 0px; padding-bottom: 0px">
-        <div class="col">
-          <input
-            style={{
-              minHeight: '30px'
-            }}
-            type="range"
-            value={props.deviceFeature.last_value}
-            onChange={updateValue}
-            class="form-control custom-range"
-            step="1"
-            min={props.deviceFeature.min}
-            max={props.deviceFeature.max}
-          />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-export default BrightnessDeviceType;
diff --git a/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx
index ba1f7d7baf..f56e858445 100644
--- a/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx
+++ b/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx
@@ -1,4 +1,7 @@
-import { Text } from 'preact-i18n';
+import get from 'get-value';
+
+import { getDeviceName } from './utils';
+import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 
 const MultiLevelDeviceType = ({ children, ...props }) => {
   function updateValue(e) {
@@ -17,17 +20,15 @@ const MultiLevelDeviceType = ({ children, ...props }) => {
   return (
     <tr>
       <td>
-        <i class="fe fe-toggle-right" />
+        <i
+          class={`fe fe-${get(
+            DeviceFeatureCategoriesIcon,
+            `${props.deviceFeature.category}.${props.deviceFeature.type}`,
+            { default: 'arrow-right' }
+          )}`}
+        />
       </td>
-      {props.deviceFeature.deviceFeatureName && <td>{props.deviceFeature.deviceFeatureName}</td>}
-      {!props.deviceFeature.deviceFeatureName && (
-        <td>
-          <Text
-            id="dashboard.boxes.devicesInRoom.deviceTitle"
-            fields={{ name: props.deviceFeature.name, type: props.deviceFeature.type }}
-          />
-        </td>
-      )}
+      <td>{getDeviceName(props.device, props.deviceFeature)}</td>
 
       <td class="text-right" style="padding-top: 0px; padding-bottom: 0px">
         <div class="col">
diff --git a/front/src/config/demo.json b/front/src/config/demo.json
index f5d66514d8..8eec963f44 100644
--- a/front/src/config/demo.json
+++ b/front/src/config/demo.json
@@ -126,6 +126,7 @@
             "tv-lamp-color",
             "tv-lamp-brightness",
             "mqtt-living-room-switch",
+            "mqtt-living-room-dimmer",
             "mqtt-living-room-temp"
           ]
         }
@@ -337,6 +338,17 @@
             "last_value": 1,
             "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
           },
+          {
+            "name": "Main Dimmer",
+            "selector": "mqtt-living-room-dimmer",
+            "category": "switch",
+            "type": "dimmer",
+            "min": 0,
+            "max": 100,
+            "read_only": false,
+            "last_value": 17,
+            "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
+          },
           {
             "name": "Window Temp",
             "selector": "mqtt-living-room-temp",