diff --git a/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml b/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml
index 397371c6..75130df1 100644
--- a/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml
+++ b/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml
@@ -102,9 +102,9 @@ DeviceListPageBase {
                     property State brightnessState: thing.stateByName("brightness")
                     property State colorState: thing.stateByName("color")
 
-                    property bool tileColored: enabled && colorState && powerState.value === true
+                    property bool tileColored: isConnected && colorState && powerState.value === true
                     property bool colorInverted: tileColored && NymeaUtils.isDark(app.foregroundColor) === NymeaUtils.isDark(colorState.value)
-                    property bool isConnected: connectedState && connectedState.value === true
+                    property bool isConnected: connectedState === null || connectedState.value === true
 
 
                     onClicked: {
@@ -122,11 +122,11 @@ DeviceListPageBase {
                     }
 
                     contentItem: Rectangle {
-                        color: enabled && itemDelegate.powerState.value === true && itemDelegate.colorState ? itemDelegate.colorState.value : "#00000000"
+                        color: itemDelegate.tileColored ? itemDelegate.colorState.value : "#00000000"
                         implicitHeight: contentColumn.implicitHeight
                         Behavior on implicitHeight { NumberAnimation { duration: 100 } }
                         radius: 6
-                        enabled: itemDelegate.connectedState == null || connectedState.value === true
+                        enabled: itemDelegate.isConnected
 
                         ColumnLayout {
                             id: contentColumn
@@ -236,10 +236,6 @@ DeviceListPageBase {
                                                     duration: 300
                                                 }
                                             }
-//                                            layer.enabled: indicator.Material.elevation > 0
-//                                            layer.effect: ElevationEffect {
-//                                                elevation: indicator.Material.elevation
-//                                            }
                                         }
                                         DropShadow {
                                             anchors.fill: handle
@@ -272,7 +268,25 @@ DeviceListPageBase {
                                         GradientStop { position: 1; color: "#55ffffff" }
                                     }
                                 }
-
+                                MouseArea {
+                                    id: brightnessMouseArea
+                                    anchors.fill: parent
+                                    anchors.margins: -app.margins
+                                    preventStealing: true
+                                    property bool active: false
+                                    onPressed: {
+                                        print("pressed", mouseX, mouseY, active)
+                                        if (!active) {
+                                            mouse.accepted = false
+                                        }
+                                    }
+                                    onReleased: active = false
+                                    onMouseXChanged: {
+                                        if (active) {
+                                            actionQueue.sendValue(Math.max(1, Math.min(100, mouseX / width * 100)))
+                                        }
+                                    }
+                                }
                                 Rectangle {
                                     id: knob
                                     height: 14
@@ -283,6 +297,15 @@ DeviceListPageBase {
                                     x: itemDelegate.brightnessState ?
                                            (actionQueue.queuedValue || actionQueue.pendingValue || itemDelegate.brightnessState.value) * (parent.width - width) / 100
                                          : 0
+                                    MouseArea {
+                                        id: knobMouseArea
+                                        anchors.fill: parent
+                                        anchors.margins: -app.margins
+                                        onPressed: {
+                                            brightnessMouseArea.active = true
+                                            mouse.accepted = false
+                                        }
+                                    }
                                 }
                                 DropShadow {
                                     anchors.fill: knob
@@ -293,15 +316,6 @@ DeviceListPageBase {
                                     color: "#80000000"
                                     source: knob
                                 }
-
-                                MouseArea {
-                                    id: brightnessMouseArea
-                                    anchors.fill: parent
-                                    preventStealing: true
-                                    onMouseXChanged: {
-                                        actionQueue.sendValue(Math.max(1, Math.min(100, mouseX / width * 100)))
-                                    }
-                                }
                             }
                         }
                     }