diff --git a/Modules/Background/Dimmer.qml b/Modules/Background/Dimmer.qml
new file mode 100644
index 0000000..6185ad8
--- /dev/null
+++ b/Modules/Background/Dimmer.qml
@@ -0,0 +1,76 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+Variants {
+  model: Quickshell.screens
+
+  delegate: Loader {
+    required property ShellScreen modelData
+
+    // Dimmer is only active on the screen where the panel is currently open.
+    active: {
+      if (Settings.isLoaded && Settings.data.general.dimDesktop && modelData !== undefined && PanelService.openedPanel !== null && PanelService.openedPanel.item !== null) {
+        return (PanelService.openedPanel.item.screen === modelData)
+      }
+
+      return false
+    }
+
+    sourceComponent: PanelWindow {
+      id: panel
+
+      property real customOpacity: 0
+
+      Component.onCompleted: {
+        if (modelData) {
+          Logger.log("Dimmer", "component loaded on", modelData.name)
+        }
+
+        // When a NPanel opens it seems it is initialized with the primary screen for a very brief moment
+        // before the screen actually updates to the proper value. We use a timer to delay the fade in to avoid
+        // a single frame flicker on the main screen when opening a panel on another screen.
+        fadeInTimer.start()
+      }
+
+      Connections {
+        target: PanelService
+        function onWillClose() {
+          customOpacity = Style.opacityNone
+        }
+      }
+
+      Timer {
+        id: fadeInTimer
+        interval: 100
+        onTriggered: customOpacity = Style.opacityHeavy
+      }
+
+      screen: modelData
+
+      WlrLayershell.layer: WlrLayer.Top
+      WlrLayershell.exclusionMode: ExclusionMode.Ignore
+      WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+      WlrLayershell.namespace: "quickshell-dimmer"
+
+      // mask: Region {}
+      anchors {
+        top: true
+        bottom: true
+        right: true
+        left: true
+      }
+
+      color: Qt.alpha(Color.mShadow, customOpacity)
+      Behavior on color {
+        ColorAnimation {
+          duration: Style.animationSlow
+        }
+      }
+    }
+  }
+}
diff --git a/Services/PanelService.qml b/Services/PanelService.qml
index 8922034..f1df973 100644
--- a/Services/PanelService.qml
+++ b/Services/PanelService.qml
@@ -16,6 +16,9 @@ Singleton {
 
   property var registeredPanels: ({})
 
+  signal willOpen
+  signal willClose
+
   // Register this panel
   function registerPanel(panel) {
     registeredPanels[panel.objectName] = panel
@@ -38,6 +41,14 @@ Singleton {
       openedPanel.close()
     }
     openedPanel = panel
+
+    // emit signal
+    willOpen()
+  }
+
+  function willClosePanel(panel) {
+    // emit signal
+    willClose()
   }
 
   function closedPanel(panel) {
diff --git a/Widgets/NPanel.qml b/Widgets/NPanel.qml
index 3575801..88d3bb9 100644
--- a/Widgets/NPanel.qml
+++ b/Widgets/NPanel.qml
@@ -111,6 +111,7 @@ Loader {
     scaleValue = originalScale
     opacityValue = originalOpacity
     hideTimer.start()
+    PanelService.willClosePanel(root)
   }
 
   // -----------------------------------------
@@ -146,6 +147,10 @@ Loader {
       readonly property bool barIsVisible: (screen !== null) && (Settings.data.bar.monitors.includes(screen.name) || (Settings.data.bar.monitors.length === 0))
       readonly property real verticalBarWidth: Math.round(Style.barHeight * scaling)
 
+      Component.onCompleted: {
+        Logger.log("NPanel", "Opened", root.objectName)
+      }
+
       Connections {
         target: ScalingService
         function onScaleChanged(screenName, scale) {
@@ -172,6 +177,7 @@ Loader {
       // No dimming here
       color: Color.transparent
 
+      WlrLayershell.layer: Settings.data.general.dimDesktop ? WlrLayer.Overlay : WlrLayer.Top
       WlrLayershell.exclusionMode: ExclusionMode.Ignore
       WlrLayershell.namespace: "noctalia-panel"
       WlrLayershell.keyboardFocus: root.panelKeyboardFocus ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@@ -280,14 +286,14 @@ Loader {
 
         scale: root.scaleValue
         opacity: root.opacityValue
-
         x: calculatedX
         y: calculatedY
 
-        // ---------------------------------------------
         // ---------------------------------------------
         // All Style.marginXXX are handled above in the PanelWindow itself.
         // Does not account for corners are they are negligible and helps keep the code clean.
+        // ---------------------------------------------
+
         // ---------------------------------------------
         property int calculatedX: {
           // Priority to fixed anchoring
diff --git a/shell.qml b/shell.qml
index 24544f5..6f0e8ea 100644
--- a/shell.qml
+++ b/shell.qml
@@ -37,6 +37,7 @@ ShellRoot {
   Background {}
   Overview {}
   ScreenCorners {}
+  Dimmer {}
   Bar {}
   Dock {}