diff --git a/modules/bar/popouts/Calendar.qml b/modules/bar/popouts/Calendar.qml
index c5bd293..87fc229 100644
--- a/modules/bar/popouts/Calendar.qml
+++ b/modules/bar/popouts/Calendar.qml
@@ -11,6 +11,18 @@ Column {
 
     property date currentDate: new Date()
     property bool isCurrentMonth: true
+    property string currentTime: Qt.formatDateTime(new Date(), "HH:mm:ss")
+    property int currentYear: new Date().getFullYear()
+
+    // Update time every second
+    Timer {
+        interval: 1000
+        running: true
+        repeat: true
+        onTriggered: {
+            root.currentTime = Qt.formatDateTime(new Date(), "HH:mm:ss")
+        }
+    }
 
     // Time and Date header
     Column {
@@ -19,7 +31,7 @@ Column {
 
         StyledText {
             anchors.horizontalCenter: parent.horizontalCenter
-            text: Qt.formatDateTime(new Date(), "HH:mm:ss")
+            text: root.currentTime
             font.pointSize: Appearance.font.size.larger
             font.family: Appearance.font.family.mono
         }
@@ -28,10 +40,38 @@ Column {
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: Appearance.spacing.small
 
-            StyledText {
-                text: Qt.formatDateTime(root.currentDate, "yyyy")
-                font.pointSize: Appearance.font.size.large
-                font.weight: 700
+            Row {
+                spacing: Appearance.spacing.small
+
+                MaterialIcon {
+                    text: "chevron_left"
+                    color: Colours.palette.m3onSurfaceVariant
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            root.currentYear--
+                            root.currentDate = new Date(root.currentYear, monthView.currentIndex, 1)
+                        }
+                    }
+                }
+
+                StyledText {
+                    text: root.currentYear
+                    font.pointSize: Appearance.font.size.large
+                    font.weight: 700
+                }
+
+                MaterialIcon {
+                    text: "chevron_right"
+                    color: Colours.palette.m3onSurfaceVariant
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            root.currentYear++
+                            root.currentDate = new Date(root.currentYear, monthView.currentIndex, 1)
+                        }
+                    }
+                }
             }
 
             Row {
@@ -70,15 +110,19 @@ Column {
     }
 
     // Calendar grid
-    Item {
-        width: 250
-        height: 200
+    Rectangle {
+        width: 280
+        height: 250
         anchors.horizontalCenter: parent.horizontalCenter
-        clip: true
+        color: "transparent"
+        border.color: Colours.palette.m3outline
+        border.width: 1
+        radius: 8
 
         ListView {
             id: monthView
             anchors.fill: parent
+            anchors.margins: 12
             orientation: ListView.Horizontal
             snapMode: ListView.SnapOneItem
             highlightRangeMode: ListView.StrictlyEnforceRange
@@ -112,26 +156,41 @@ Column {
                 // Calendar days
                 Repeater {
                     model: {
-                        const firstDay = new Date(new Date().getFullYear(), monthView.currentIndex, 1);
-                        const lastDay = new Date(new Date().getFullYear(), monthView.currentIndex + 1, 0);
+                        const firstDay = new Date(root.currentYear, monthView.currentIndex, 1);
+                        const lastDay = new Date(root.currentYear, monthView.currentIndex + 1, 0);
                         const daysInMonth = lastDay.getDate();
                         const firstDayOfWeek = firstDay.getDay() || 7; // Convert Sunday (0) to 7
                         const today = new Date();
                         
                         let days = [];
-                        // Add empty cells for days before the first of the month
-                        for (let i = 1; i < firstDayOfWeek; i++) {
-                            days.push({ day: "", isCurrentMonth: false });
+                        // Add previous month's days
+                        const prevMonthLastDay = new Date(root.currentYear, monthView.currentIndex, 0).getDate();
+                        for (let i = firstDayOfWeek - 1; i > 0; i--) {
+                            days.push({ 
+                                day: prevMonthLastDay - i + 1,
+                                isCurrentMonth: false,
+                                isNextMonth: false
+                            });
                         }
                         // Add days of the current month
                         for (let i = 1; i <= daysInMonth; i++) {
                             const isToday = i === today.getDate() && 
                                           monthView.currentIndex === today.getMonth() && 
-                                          new Date().getFullYear() === today.getFullYear();
+                                          root.currentYear === today.getFullYear();
                             days.push({ 
                                 day: i,
                                 isCurrentMonth: true,
-                                isToday: isToday
+                                isToday: isToday,
+                                isNextMonth: false
+                            });
+                        }
+                        // Add next month's days
+                        const remainingCells = Math.ceil((firstDayOfWeek - 1 + daysInMonth) / 7) * 7 - days.length;
+                        for (let i = 1; i <= remainingCells; i++) {
+                            days.push({ 
+                                day: i,
+                                isCurrentMonth: false,
+                                isNextMonth: true
                             });
                         }
                         return days;
@@ -147,19 +206,22 @@ Column {
                             anchors.centerIn: parent
                             text: modelData.day
                             font.pointSize: Appearance.font.size.small
+                            font.family: Appearance.font.family.mono
                             color: modelData.isToday ? 
                                    Colours.palette.m3onPrimary : 
                                    modelData.isCurrentMonth ? 
                                    Colours.palette.m3onSurface : 
-                                   Colours.palette.m3outline
+                                   modelData.isNextMonth ?
+                                   "#404040" :
+                                   "#505050"
                         }
                     }
                 }
             }
 
             onCurrentIndexChanged: {
-                root.currentDate = new Date(new Date().getFullYear(), currentIndex, 1)
-                root.isCurrentMonth = currentIndex === new Date().getMonth()
+                root.currentDate = new Date(root.currentYear, currentIndex, 1)
+                root.isCurrentMonth = currentIndex === new Date().getMonth() && root.currentYear === new Date().getFullYear()
             }
         }
     }
@@ -170,6 +232,7 @@ Column {
         function onVisibleChanged() {
             if (!root.parent.visible) {
                 monthView.currentIndex = new Date().getMonth()
+                root.currentYear = new Date().getFullYear()
                 root.currentDate = new Date()
                 root.isCurrentMonth = true
             }