diff --git a/templates/calendar.html b/templates/calendar.html
index fb6013c..a4656aa 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -99,8 +99,7 @@
 
   </div>
 
-      
-<!-- TOAST UI Calendar JS -->
+  <!-- TOAST UI Calendar JS -->
   <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
   <script src="{{ url_for("static", filename="bootstrap5/js/bootstrap.bundle.min.js") }}"></script>
   
@@ -134,8 +133,6 @@
             },
             month: {
                 startDayOfWeek: 1, // Monday
-                // We've removed `visibleWeeksCount: 6` to allow the calendar
-                // to dynamically show 4, 5, or 6 weeks as needed.
             },
             timezone: {
                 zones: [{
@@ -179,33 +176,66 @@
         const calendarTitle = document.getElementById('calendar-title');
         
         function updateCalendarTitle() {
-            const tzDate = calendar.getDate();
-            const nativeDate = tzDate.toDate();
-            
-            const year = nativeDate.getFullYear();
-            const monthName = nativeDate.toLocaleDateString('en-GB', { month: 'long' });
-            
-            calendarTitle.textContent = `${monthName} ${year}`;
+            const currentView = calendar.getViewName();
+            const currentDate = calendar.getDate().toDate();
+            let titleText = '';
+
+            if (currentView === 'month') {
+                const year = currentDate.getFullYear();
+                const monthName = currentDate.toLocaleDateString('en-GB', { month: 'long' });
+                titleText = `${monthName} ${year}`;
+            } else if (currentView === 'week') {
+                // Manually calculate the start and end of the week
+                const startDayOfWeek = options.week.startDayOfWeek; // 1 for Monday
+                const day = currentDate.getDay(); // 0 for Sunday, 1 for Monday...
+                
+                // Calculate days to subtract to get to the start of the week
+                const offset = (day - startDayOfWeek + 7) % 7;
+                
+                const startDate = new Date(currentDate);
+                startDate.setDate(currentDate.getDate() - offset);
+                
+                const endDate = new Date(startDate);
+                endDate.setDate(startDate.getDate() + 6);
+
+                const startMonth = startDate.toLocaleDateString('en-GB', { month: 'short' });
+                const endMonth = endDate.toLocaleDateString('en-GB', { month: 'short' });
+
+                if (startMonth === endMonth) {
+                    titleText = `${startDate.getDate()} - ${endDate.getDate()} ${startMonth} ${startDate.getFullYear()}`;
+                } else {
+                    titleText = `${startDate.getDate()} ${startMonth} - ${endDate.getDate()} ${endMonth} ${startDate.getFullYear()}`;
+                }
+            } else { // Day view
+                titleText = currentDate.toLocaleDateString('en-GB', { dateStyle: 'full' });
+            }
+            calendarTitle.textContent = titleText;
         }
 
-        // --- CORRECTED NAVIGATION LOGIC ---
+        // --- View-aware navigation logic (no changes here) ---
         prevBtn.addEventListener('click', () => {
-            const currentDate = calendar.getDate().toDate();
-            // Go to the previous month
-            currentDate.setMonth(currentDate.getMonth() - 1);
-            // **Crucially, set the day to the 1st to align the view**
-            currentDate.setDate(1);
-            calendar.setDate(currentDate);
+            const currentView = calendar.getViewName();
+            if (currentView === 'month') {
+                const currentDate = calendar.getDate().toDate();
+                currentDate.setMonth(currentDate.getMonth() - 1);
+                currentDate.setDate(1);
+                calendar.setDate(currentDate);
+            } else {
+                calendar.prev();
+            }
             updateCalendarTitle();
         });
 
         nextBtn.addEventListener('click', () => {
-            const currentDate = calendar.getDate().toDate();
-            // Go to the next month
-            currentDate.setMonth(currentDate.getMonth() + 1);
-            // **Crucially, set the day to the 1st to align the view**
-            currentDate.setDate(1);
-            calendar.setDate(currentDate);
+            const currentView = calendar.getViewName();
+            if (currentView === 'month') {
+                const currentDate = calendar.getDate().toDate();
+                currentDate.setMonth(currentDate.getMonth() + 1);
+                currentDate.setDate(1);
+                calendar.setDate(currentDate);
+            } else {
+                calendar.next();
+            }
             updateCalendarTitle();
         });
         
@@ -214,16 +244,23 @@
             updateCalendarTitle();
         });
 
-        monthViewBtn.addEventListener('click', () => calendar.changeView('month'));
-        weekViewBtn.addEventListener('click', () => calendar.changeView('week'));
-        dayViewBtn.addEventListener('click', () => calendar.changeView('day'));
+        monthViewBtn.addEventListener('click', () => {
+            calendar.changeView('month');
+            updateCalendarTitle();
+        });
+        weekViewBtn.addEventListener('click', () => {
+            calendar.changeView('week');
+            updateCalendarTitle();
+        });
+        dayViewBtn.addEventListener('click', () => {
+            calendar.changeView('day');
+            updateCalendarTitle();
+        });
         
         // Initial setup
         updateCalendarTitle();
     });
   </script>
 
-    
-      
 </body>
 </html>