diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml
index 2f1a6198a..db5da0210 100644
--- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml
+++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml
@@ -149,6 +149,7 @@ Item {
         anchors.fill: parent
         colOnBackground: root.colOnBackground
         style: Config.options.background.clock.cookie.dateStyle
+        dateSquareSize: root.dateSquareSize
     }
 
 }
diff --git a/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml
index f16f0c0cb..f9824bae3 100644
--- a/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml
+++ b/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml
@@ -11,167 +11,177 @@ Item {
     id: root
     property string style: "rotating"
     property color colOnBackground: Appearance.colors.colOnSecondaryContainer
-    property color colOnSecondary: Appearance.colors.colOnSecondaryContainer
-    
+    property color colBackground: Appearance.colors.colOnSecondaryContainer
+    property real dateSquareSize: 64
 
-    Canvas {
-        z: 0
+    Loader {
         anchors.fill: parent
-        rotation: {
-            if (!Config.options.time.secondPrecision) return 0;
-            return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
-        }
-        
         opacity: root.style === "rotating" ? 1.0 : 0
         Behavior on opacity {
             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
         }
-        
-        onPaint: {
-            var ctx = getContext("2d");
-            ctx.clearRect(0, 0, width, height);
-            ctx.font = "700 30px " + Appearance.font.family.title;
 
-            var text = Qt.locale().toString(DateTime.clock.date, "ddd dd");
-            var radius = 78;
-            var angleStep = Math.PI / 2.35 / text.length;
+        active: opacity > 0
+        sourceComponent: Canvas {
+            z: 0
+            rotation: {
+                if (!Config.options.time.secondPrecision)
+                    return 0;
+                return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
+            }
 
-            for (var i = 0; i < text.length; i++) {
-                var angle = i * angleStep - Math.PI / 2;
-                var x = width / 2 + radius * Math.cos(angle);
-                var y = height / 2 + radius * Math.sin(angle);
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.clearRect(0, 0, width, height);
+                ctx.font = "700 30px " + Appearance.font.family.title;
 
-                ctx.save();
-                ctx.translate(x, y);
-                ctx.rotate(angle + Math.PI / 2);
+                var text = Qt.locale().toString(DateTime.clock.date, "ddd dd");
+                var radius = 78;
+                var angleStep = Math.PI / 2.35 / text.length;
 
-                if (i >= 3)
-                    ctx.fillStyle = root.colOnBackground;
-                else
-                    ctx.fillStyle = Appearance.colors.colSecondaryHover;
+                for (var i = 0; i < text.length; i++) {
+                    var angle = i * angleStep - Math.PI / 2;
+                    var x = width / 2 + radius * Math.cos(angle);
+                    var y = height / 2 + radius * Math.sin(angle);
 
-                ctx.fillText(text[i], 0, 0);
-                ctx.restore();
+                    ctx.save();
+                    ctx.translate(x, y);
+                    ctx.rotate(angle + Math.PI / 2);
+
+                    if (i >= 3)
+                        ctx.fillStyle = root.colOnBackground;
+                    else
+                        ctx.fillStyle = Appearance.colors.colSecondaryHover;
+
+                    ctx.fillText(text[i], 0, 0);
+                    ctx.restore();
+                }
             }
         }
     }
 
     // Square date (only today's number) in right side of the clock
-    Rectangle {
-        z: 1
-        implicitWidth: root.style === "rect" ? 45 : 0
-        implicitHeight: root.style === "rect" ? 30 : 0
-        color: root.colOnSecondary
-        radius: Appearance.rounding.small
+    Loader {
         anchors {
             verticalCenter: parent.verticalCenter
             right: parent.right
             rightMargin: 10
         }
-        Behavior on implicitHeight {
+        width: root.style === "rect" ? 45 : 0
+        height: root.style === "rect" ? 30 : 0
+        Behavior on width {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        Behavior on implicitWidth {
+        Behavior on height {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        StyledText {
-            opacity: root.style === "rect" ? 1.0 : 0
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            }
-            anchors.centerIn: parent
-            color: Appearance.colors.colSecondaryHover
-            text: DateTime.date.substring(5, 7)
-            font {
-                family: Appearance.font.family.expressive
-                pixelSize: 20
-                weight: 1000
+        active: height > 0
+        sourceComponent: Rectangle {
+            z: 1
+            color: root.colBackground
+            radius: Appearance.rounding.small
+            StyledText {
+                opacity: root.style === "rect" ? 1.0 : 0
+                Behavior on opacity {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                anchors.centerIn: parent
+                color: Appearance.colors.colSecondaryHover
+                text: DateTime.date.substring(5, 7)
+                font {
+                    family: Appearance.font.family.expressive
+                    pixelSize: 20
+                    weight: 1000
+                }
             }
         }
     }
 
     // Date bubble style left side
-    Item {
-        width: root.style === "bubble" ? dateSquareSize : 0
-        height: root.style === "bubble" ? dateSquareSize : 0
+    Loader {
         anchors {
             left: parent.left
             bottom: parent.bottom
             topMargin: 50
         }
-        Behavior on width {
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        width: targetSize
+        height: targetSize
+        Behavior on targetSize {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        Behavior on height {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        MaterialCookie {
-            z: 5
-            sides: 4
-            anchors.centerIn: parent
-            color: Appearance.colors.colPrimaryContainer
-            implicitSize: root.style === "bubble" ? dateSquareSize : 0
-            constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
-            Behavior on implicitSize {
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        active: targetSize > 0
+        sourceComponent: Item {
+            MaterialCookie {
+                z: 5
+                sides: 4
+                anchors.centerIn: parent
+                color: Appearance.colors.colPrimaryContainer
+                implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
+                constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
+                Behavior on implicitSize {
+                    animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                }
             }
-        }
-        StyledText {
-            z: 6
-            anchors.centerIn: parent
-            text: DateTime.date.substring(5, 7)
-            color: Appearance.colors.colPrimary
-            opacity: root.style === "bubble" ? 1.0 : 0
-            font {
-                family: Appearance.font.family.expressive
-                pixelSize: 30
-                weight: 1000
-            }
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            StyledText {
+                z: 6
+                anchors.centerIn: parent
+                text: DateTime.date.substring(5, 7)
+                color: Appearance.colors.colPrimary
+                opacity: root.style === "bubble" ? 1.0 : 0
+                font {
+                    family: Appearance.font.family.expressive
+                    pixelSize: 30
+                    weight: 1000
+                }
+                Behavior on opacity {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
             }
         }
     }
 
     // Date bubble style right side
-    Item {
-        width: root.style === "bubble" ? dateSquareSize : 0
-        height: root.style === "bubble" ? dateSquareSize : 0
+    Loader {
         anchors {
             right: parent.right
             top: parent.top
             bottomMargin: 50
         }
-        Behavior on width {
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        width: targetSize
+        height: targetSize
+        Behavior on targetSize {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        Behavior on height {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        MaterialCookie {
-            z: 5
-            sides: 1
-            anchors.centerIn: parent
-            color: Appearance.colors.colTertiaryContainer
-            implicitSize: root.style === "bubble" ? dateSquareSize : 0
-            constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
-            Behavior on implicitSize {
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+
+        active: targetSize > 0
+        sourceComponent: Item {
+            MaterialCookie {
+                z: 5
+                sides: 1
+                anchors.centerIn: parent
+                color: Appearance.colors.colTertiaryContainer
+                implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
+                constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
+                Behavior on implicitSize {
+                    animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                }
             }
-        }
-        StyledText {
-            z: 6
-            anchors.centerIn: parent
-            text: DateTime.date.substring(8, 10)
-            color: Appearance.colors.colTertiary
-            opacity: root.style === "bubble" ? 1.0 : 0
-            font {
-                family: Appearance.font.family.expressive
-                pixelSize: 30
-                weight: 1000
-            }
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            StyledText {
+                z: 6
+                anchors.centerIn: parent
+                text: DateTime.date.substring(8, 10)
+                color: Appearance.colors.colTertiary
+                opacity: root.style === "bubble" ? 1.0 : 0
+                font {
+                    family: Appearance.font.family.expressive
+                    pixelSize: 30
+                    weight: 1000
+                }
+                Behavior on opacity {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
             }
         }
     }