diff --git a/applets/quicksettings/package/contents/ui/BrightnessDelegate.qml b/applets/quicksettings/package/contents/ui/BrightnessDelegate.qml
new file mode 100644
index 00000000..0e592700
--- /dev/null
+++ b/applets/quicksettings/package/contents/ui/BrightnessDelegate.qml
@@ -0,0 +1,75 @@
+/*
+ *   Copyright 2015 Marco Martin <notmart@gmail.com>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.4
+import QtQuick.Layouts 1.1
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 2.0 as PlasmaComponents
+
+Item {
+    id: delegateRoot
+    implicitWidth: delegate.implicitWidth
+    implicitHeight: delegate.implicitHeight + (slider.opacity > 0 ? slider.height : 0)
+
+    property int screenBrightness
+    readonly property int maximumScreenBrightness: pmSource.data["PowerDevil"] ? pmSource.data["PowerDevil"]["Maximum Screen Brightness"] || 0 : 0
+
+    PlasmaCore.DataSource {
+        id: pmSource
+        engine: "powermanagement"
+        connectedSources: ["PowerDevil"]
+
+        onDataChanged: {
+            delegateRoot.screenBrightness = source.data["PowerDevil"]["Screen Brightness"];
+        }
+    }
+
+    Delegate {
+        id: delegate
+        toggled: slider.opacity > 0
+        function toggle() {
+            slider.opacity = slider.opacity > 0 ? 0 : 1;
+        }
+    }
+    PlasmaComponents.Slider {
+        id: slider
+        anchors.top: delegate.bottom
+        width: flow.width
+        opacity: 0
+        x: -delegateRoot.parent.x
+        value: screenBrightness
+        minimumValue: maximumValue > 100 ? 1 : 0
+        maximumValue: delegateRoot.maximumScreenBrightness
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: units.shortDuration
+                easing.type: Easing.InOutQuad
+            }
+        }
+    }
+
+    onScreenBrightnessChanged: {
+        var service = pmSource.serviceForSource("PowerDevil");
+        var operation = service.operationDescription("setBrightness");
+        operation.brightness = slider.value;
+        operation.silent = true
+        service.startOperationCall(operation);
+    }
+}
+
diff --git a/applets/quicksettings/package/contents/ui/Delegate.qml b/applets/quicksettings/package/contents/ui/Delegate.qml
index 1e3c4dfa..5752de39 100644
--- a/applets/quicksettings/package/contents/ui/Delegate.qml
+++ b/applets/quicksettings/package/contents/ui/Delegate.qml
@@ -23,12 +23,14 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
 RowLayout {
+    id: delegateRoot
+    property bool toggled: model.enabled
     spacing: units.smallSpacing
-    width: parent.width / 2 - units.largeSpacing / 2
+    implicitWidth: flow.width / 2 - units.largeSpacing / 2
     Rectangle {
         Layout.minimumWidth: units.iconSizes.large
         Layout.minimumHeight: width
-        color: model.enabled ? 
+        color: toggled ? 
             Qt.rgba(PlasmaCore.ColorScope.highlightColor.r, PlasmaCore.ColorScope.highlightColor.g, PlasmaCore.ColorScope.highlightColor.b, iconMouseArea.pressed ? 0.5 : 0.3) :
             Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, iconMouseArea.pressed ? 0.5 : 0.2)
 
@@ -43,7 +45,9 @@ RowLayout {
                 id: iconMouseArea
                 anchors.fill: parent
                 onClicked: {
-                    if (model.toggleFunction) {
+                    if (delegateRoot.toggle) {
+                        delegateRoot.toggle();
+                    } else if (model.toggleFunction) {
                         root[model.toggleFunction]();
                     } else if (model.settingsCommand) {
                         plasmoid.nativeInterface.executeCommand(model.settingsCommand);
diff --git a/applets/quicksettings/package/contents/ui/main.qml b/applets/quicksettings/package/contents/ui/main.qml
index e38f9806..85f20ec3 100644
--- a/applets/quicksettings/package/contents/ui/main.qml
+++ b/applets/quicksettings/package/contents/ui/main.qml
@@ -42,6 +42,7 @@ Item {
             enabled: false
             settingsCommand: "active-settings"
             toggleFunction: ""
+            delegate: ""
         }
         ListElement {
             text: "Mobile network"
@@ -85,6 +86,7 @@ Item {
             icon: "video-display-brightness"
             enabled: false
             settingsCommand: "active-settings -m org.kde.active.settings.powermanagement"
+            delegate: "BrightnessDelegate"
         }
         ListElement {
             text: "Flashlight"
@@ -101,6 +103,7 @@ Item {
     }
 
     Flow {
+        id: flow
         anchors {
             fill: parent
             margins: units.largeSpacing
@@ -108,7 +111,18 @@ Item {
         spacing: units.largeSpacing
         Repeater {
             model: settingsModel
-            delegate: Delegate {}
+            delegate: Loader {
+                width: item ? item.implicitWidth : 0
+                height: item ? item.implicitHeight : 0
+                source: Qt.resolvedUrl((model.delegate ? model.delegate : "Delegate") + ".qml")
+            }
+        }
+        move: Transition {
+            NumberAnimation {
+                duration: units.shortDuration
+                easing.type: Easing.InOutQuad
+                properties: "x,y"
+            }
         }
     }
 }