diff --git a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml
index 6ac1a3e0d..40ca0b3c7 100644
--- a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml
+++ b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml
@@ -16,6 +16,7 @@ Item {
     property int minuteLineSize: 4
     property color color: Appearance.colors.colOnSecondaryContainer
     property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide"
+    property string dateStyle : Config.options.background.clock.cookie.dateStyle 
 
     Repeater {
         model: 12
@@ -64,7 +65,7 @@ Item {
                 anchors {
                     left: parent.left
                     verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "numbers" ? 32 : 96
+                    leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96
                 }
                 Behavior on anchors.leftMargin {
                     animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
@@ -78,9 +79,12 @@ Item {
                     rotation: numberItem.index % 2 === 0 ? numberItem.index * 90 : -numberItem.index * 90 //A better way can be found to show texts on right angle
                     font {
                         family: Appearance.font.family.reading
-                        pixelSize: 80
+                        pixelSize: root.dateStyle === "rotating" ? 70 : 80
                         weight: 1000
                     }
+                    Behavior on font.pixelSize {
+                        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                    }
                 }
             }
         }
diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml
index 96c39fe5a..9ba30530e 100644
--- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml
+++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml
@@ -6,44 +6,42 @@ import qs.modules.common
 import qs.modules.common.widgets
 import QtQuick
 
-Canvas {
-    z: 0
+Item {
+    id: root
 
-    opacity: root.style === "rotating" ? 1.0 : 0
-    Behavior on opacity {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
+    property real radius: 65
+
+    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
+    property real angleStep: Math.PI / 2.35 / dateText.length
+
+    property color dayColor: Appearance.colors.colSecondary
+    property color monthColor: Appearance.colors.colSecondaryHover
 
     rotation: {
-        if (!Config.options.time.secondPrecision)
-            return 0;
-        return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
+        if (!Config.options.time.secondPrecision) return 0
+        else return secondHandLoader.item.rotation + 45 // +45 to center the text
     }
-    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 = 65;
-        var angleStep = Math.PI / 2.35 / text.length;
+    Repeater {
+        model: root.dateText.length 
 
-        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);
+        delegate: Text {
+            required property int index
+            property real angle: index * root.angleStep - Math.PI / 2
 
-            ctx.save();
-            ctx.translate(x, y);
-            ctx.rotate(angle + Math.PI / 2);
+            x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
+            y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
 
-            if (i >= 3)
-                ctx.fillStyle = root.colOnBackground;
-            else
-                ctx.fillStyle = Appearance.colors.colSecondaryHover;
+            text: root.dateText.charAt(index)
+
+            font.family: Appearance.font.family.title
+            font.pixelSize: 30
+            font.weight: Font.DemiBold 
+
+            color: index < 3 ? root.dayColor : root.monthColor
+
+            rotation: angle * 180 / Math.PI + 90
 
-            ctx.fillText(text[i], 0, 0);
-            ctx.restore();
         }
     }
-}
\ No newline at end of file
+}