diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml
index e9635fbeb..a1bb15f61 100644
--- a/.config/quickshell/modules/common/Appearance.qml
+++ b/.config/quickshell/modules/common/Appearance.qml
@@ -130,6 +130,7 @@ Singleton {
         property color colSecondaryContainerActive: mix(m3colors.m3secondaryContainer, colLayer1Active, 0.6)
         property color colTooltip: m3colors.m3inverseSurface
         property color colOnTooltip: m3colors.m3inverseOnSurface
+        property color colScrim: transparentize(m3colors.m3scrim, 0.5)
     }
 
     rounding: QtObject {
diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
index b84368634..2554aaa07 100644
--- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
+++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
@@ -175,9 +175,20 @@ Item {
 
     Item {
         anchors.fill: parent
-        visible: root.showAddDialog
+        visible: false
         z: 1000
 
+        opacity: root.showAddDialog ? 1 : 0
+        Behavior on opacity {
+            NumberAnimation { 
+                duration: Appearance.animation.elementDecelFast.duration
+                easing.type: Appearance.animation.elementDecelFast.type
+            }
+        }
+        onOpacityChanged: {
+            visible = opacity > 0
+        }
+
         onVisibleChanged: {
             if (!visible) {
                 todoInput.text = ""
@@ -188,7 +199,7 @@ Item {
         Rectangle { // Scrim
             anchors.fill: parent
             radius: Appearance.rounding.small
-            color: "#80000000"
+            color: Appearance.colors.colScrim
             MouseArea {
                 hoverEnabled: true
                 anchors.fill: parent