diff --git a/modules/bar/popouts/Calendar.qml b/modules/bar/popouts/Calendar.qml
index 40d2a8d..2b4141a 100644
--- a/modules/bar/popouts/Calendar.qml
+++ b/modules/bar/popouts/Calendar.qml
@@ -86,29 +86,72 @@ Column {
         anchors.leftMargin: 12
         spacing: Appearance.spacing.normal
 
-        // Today's date
-        StyledText {
-            text: Qt.formatDateTime(new Date(), "dd MMM yyyy")
-            font.pointSize: Appearance.font.size.small
-            font.family: Appearance.font.family.mono
-        }
-
-        // Arrow and selected date (when applicable)
+        // Show dates in chronological order
         Row {
-            visible: root.hasSelection
             spacing: Appearance.spacing.small
 
             StyledText {
-                text: "→"
-                font.pointSize: Appearance.font.size.small
-                color: Colours.palette.m3onSurfaceVariant
-            }
-
-            StyledText {
-                text: Qt.formatDateTime(root.selectedStartDate, "dd MMM yyyy")
+                text: {
+                    if (!root.hasSelection) return Qt.formatDateTime(new Date(), "dd MMM yyyy")
+                    
+                    const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+                    const selected = new Date(root.selectedStartDate.getFullYear(), root.selectedStartDate.getMonth(), root.selectedStartDate.getDate())
+                    const diffDays = Math.round((selected - today) / (1000 * 60 * 60 * 24))
+                    
+                    // For past dates, show selected date first
+                    if (diffDays < 0) {
+                        return Qt.formatDateTime(root.selectedStartDate, "dd MMM yyyy")
+                    }
+                    // For future dates, show today first
+                    return Qt.formatDateTime(new Date(), "dd MMM yyyy")
+                }
                 font.pointSize: Appearance.font.size.small
                 font.family: Appearance.font.family.mono
-                color: Colours.palette.m3primary
+                color: {
+                    if (!root.hasSelection) return Colours.palette.m3onSurface
+                    const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+                    const selected = new Date(root.selectedStartDate.getFullYear(), root.selectedStartDate.getMonth(), root.selectedStartDate.getDate())
+                    const diffDays = Math.round((selected - today) / (1000 * 60 * 60 * 24))
+                    return diffDays < 0 ? Colours.palette.m3primary : Colours.palette.m3onSurface
+                }
+            }
+
+            // Arrow and second date (when applicable)
+            Row {
+                visible: root.hasSelection
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    text: "→"
+                    font.pointSize: Appearance.font.size.small
+                    color: Colours.palette.m3onSurfaceVariant
+                }
+
+                StyledText {
+                    text: {
+                        if (!root.hasSelection) return ""
+                        
+                        const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+                        const selected = new Date(root.selectedStartDate.getFullYear(), root.selectedStartDate.getMonth(), root.selectedStartDate.getDate())
+                        const diffDays = Math.round((selected - today) / (1000 * 60 * 60 * 24))
+                        
+                        // For past dates, show today second
+                        if (diffDays < 0) {
+                            return Qt.formatDateTime(new Date(), "dd MMM yyyy")
+                        }
+                        // For future dates, show selected date second
+                        return Qt.formatDateTime(root.selectedStartDate, "dd MMM yyyy")
+                    }
+                    font.pointSize: Appearance.font.size.small
+                    font.family: Appearance.font.family.mono
+                    color: {
+                        if (!root.hasSelection) return Colours.palette.m3onSurface
+                        const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+                        const selected = new Date(root.selectedStartDate.getFullYear(), root.selectedStartDate.getMonth(), root.selectedStartDate.getDate())
+                        const diffDays = Math.round((selected - today) / (1000 * 60 * 60 * 24))
+                        return diffDays < 0 ? Colours.palette.m3onSurface : Colours.palette.m3primary
+                    }
+                }
             }
         }
     }