diff --git a/modules/NotifCenter.qml b/modules/NotifCenter.qml
index 2c0bf61..139922b 100644
--- a/modules/NotifCenter.qml
+++ b/modules/NotifCenter.qml
@@ -207,6 +207,22 @@ M.PopupPanel {
                             anchors.rightMargin: 4
                             color: notifArea.containsMouse ? M.Theme.base02 : "transparent"
                             radius: M.Theme.radius
+
+                            Rectangle {
+                                visible: (notifItem.modelData.hints?.value ?? -1) >= 0
+                                anchors.top: parent.top
+                                anchors.bottom: parent.bottom
+                                anchors.left: parent.left
+                                width: parent.width * Math.min(1, Math.max(0, (notifItem.modelData.hints?.value ?? 0) / 100))
+                                color: M.Theme.base02
+                                radius: parent.radius
+
+                                Behavior on width {
+                                    NumberAnimation {
+                                        duration: 200
+                                    }
+                                }
+                            }
                         }
 
                         // Urgency accent
@@ -300,25 +316,6 @@ M.PopupPanel {
                                 visible: text !== ""
                             }
 
-                            // Progress bar (hints.value)
-                            Item {
-                                width: parent.width
-                                height: 3
-                                visible: (notifItem.modelData.hints?.value ?? -1) >= 0
-
-                                Rectangle {
-                                    anchors.fill: parent
-                                    color: M.Theme.base02
-                                    radius: 1
-                                }
-                                Rectangle {
-                                    width: parent.width * Math.min(1, Math.max(0, (notifItem.modelData.hints?.value ?? 0) / 100))
-                                    height: parent.height
-                                    radius: 1
-                                    color: M.Theme.base0D
-                                }
-                            }
-
                             // Actions
                             Row {
                                 spacing: 4
diff --git a/modules/NotifPopup.qml b/modules/NotifPopup.qml
index 356c370..8c71b48 100644
--- a/modules/NotifPopup.qml
+++ b/modules/NotifPopup.qml
@@ -111,6 +111,23 @@ PanelWindow {
                     color: M.Theme.base01
                     opacity: Math.max(M.Theme.barOpacity, 0.9)
                     radius: M.Theme.radius
+
+                    // Progress fill as background
+                    Rectangle {
+                        visible: (popupItem.modelData.hints?.value ?? -1) >= 0
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        width: parent.width * Math.min(1, Math.max(0, (popupItem.modelData.hints?.value ?? 0) / 100))
+                        color: M.Theme.base02
+                        radius: parent.radius
+
+                        Behavior on width {
+                            NumberAnimation {
+                                duration: 200
+                            }
+                        }
+                    }
                 }
 
                 // Urgency accent bar
@@ -213,28 +230,6 @@ PanelWindow {
                         visible: text !== ""
                     }
 
-                    // Progress bar (hints.value)
-                    Item {
-                        width: parent.width
-                        height: 4
-                        visible: (popupItem.modelData.hints?.value ?? -1) >= 0
-
-                        Rectangle {
-                            anchors.fill: parent
-                            color: M.Theme.base02
-                            radius: 2
-                        }
-                        Rectangle {
-                            width: parent.width * Math.min(1, Math.max(0, (popupItem.modelData.hints?.value ?? 0) / 100))
-                            height: parent.height
-                            radius: 2
-                            color: {
-                                const u = popupItem.modelData.urgency;
-                                return u === NotificationUrgency.Critical ? M.Theme.base08 : M.Theme.base0D;
-                            }
-                        }
-                    }
-
                     // Actions
                     Row {
                         spacing: 6