diff --git a/src/managers/CalendarManager.ts b/src/managers/CalendarManager.ts
index 66c0e7e..3fda062 100644
--- a/src/managers/CalendarManager.ts
+++ b/src/managers/CalendarManager.ts
@@ -269,12 +269,20 @@ export class CalendarManager {
             const customEvent = event as CustomEvent;
             console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
             this.handleWorkweekChange();
+            
+            // Also update week info display since workweek affects date range display
+            this.updateWeekInfoForWorkweekChange();
         });
 
         // Lyt efter reset requests
         this.eventBus.on(EventTypes.RESET_REQUESTED, () => {
             this.reset();
         });
+
+        // Update week info when grid is rendered with actual column dates
+        this.eventBus.on(EventTypes.GRID_RENDERED, () => {
+            this.updateWeekInfoFromRenderedColumns();
+        });
     }
 
     /**
@@ -410,11 +418,115 @@ export class CalendarManager {
         // Get current period data to determine date range
         const periodData = this.calculateCurrentPeriod();
         
-        // Trigger event rendering for the current date range
-        this.eventRenderer.renderEventsForDateRange(
-            periodData.startDate, 
-            periodData.endDate
-        );
+        // Find the grid container to render events in
+        const container = document.querySelector('swp-calendar-container');
+        if (!container) {
+            console.warn('CalendarManager: No container found for event re-rendering');
+            return;
+        }
+        
+        // Trigger event rendering for the current date range using correct method
+        this.eventRenderer.renderEvents({
+            container: container as HTMLElement,
+            startDate: new Date(periodData.startDate), 
+            endDate: new Date(periodData.endDate)
+        });
+    }
+
+    /**
+     * Update week info display after workweek changes
+     */
+    private updateWeekInfoForWorkweekChange(): void {
+        // Don't do anything here - let GRID_RENDERED event handle it
+        console.log('CalendarManager: Workweek changed - week info will update after grid renders');
+    }
+
+    /**
+     * Update week info based on actual rendered columns
+     */
+    private updateWeekInfoFromRenderedColumns(): void {
+        console.log('CalendarManager: Updating week info from rendered columns');
+        
+        // Get actual dates from rendered columns
+        const columns = document.querySelectorAll('swp-day-column');
+        if (columns.length === 0) {
+            console.warn('CalendarManager: No columns found for week info update');
+            return;
+        }
+        
+        // Get first and last column dates
+        const firstColumn = columns[0] as HTMLElement;
+        const lastColumn = columns[columns.length - 1] as HTMLElement;
+        
+        const firstDateStr = firstColumn.dataset.date;
+        const lastDateStr = lastColumn.dataset.date;
+        
+        if (!firstDateStr || !lastDateStr) {
+            console.warn('CalendarManager: Column dates not found');
+            return;
+        }
+        
+        // Parse dates
+        const firstDate = new Date(firstDateStr);
+        const lastDate = new Date(lastDateStr);
+        
+        // Calculate week number from first date
+        const weekNumber = this.getWeekNumber(firstDate);
+        
+        // Format date range
+        const dateRange = this.formatDateRange(firstDate, lastDate);
+        
+        console.log('CalendarManager: Week info from columns:', {
+            firstDate: firstDateStr,
+            lastDate: lastDateStr,
+            weekNumber,
+            dateRange
+        });
+        
+        // Emit week info update
+        this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, {
+            weekNumber,
+            dateRange,
+            weekStart: firstDate,
+            weekEnd: lastDate
+        });
+    }
+
+    /**
+     * Helper method to get week number
+     */
+    private getWeekNumber(date: Date): number {
+        const start = new Date(date.getFullYear(), 0, 1);
+        const days = Math.floor((date.getTime() - start.getTime()) / (24 * 60 * 60 * 1000));
+        return Math.ceil((days + start.getDay() + 1) / 7);
+    }
+
+    /**
+     * Helper method to get week start (Sunday)
+     */
+    private getWeekStart(date: Date): Date {
+        const weekStart = new Date(date);
+        weekStart.setDate(date.getDate() - date.getDay());
+        return weekStart;
+    }
+
+    /**
+     * Helper method to format date range
+     */
+    private formatDateRange(start: Date, end: Date): string {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        
+        const startMonth = months[start.getMonth()];
+        const endMonth = months[end.getMonth()];
+        const startDay = start.getDate();
+        const endDay = end.getDate();
+        const year = start.getFullYear();
+        
+        if (startMonth === endMonth) {
+            return `${startMonth} ${startDay} - ${endDay}, ${year}`;
+        } else {
+            return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
+        }
     }
 
 }
\ No newline at end of file
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 59c1af7..a501425 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -151,11 +151,37 @@ swp-calendar-header {
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
   height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
+  
+  /* Force scrollbar to appear for alignment */
+  overflow-y: scroll;
+  overflow-x: hidden;
+  
+  /* Ensure there's scrollable content by adding min-height slightly larger than container */
+  min-height: calc(var(--header-height) + var(--all-day-row-height) + 1px);
+  
+  /* Firefox - hide scrollbar but keep space */
+  scrollbar-width: auto; /* Normal width to match content scrollbar */
+  scrollbar-color: transparent transparent;
+}
+
+/* WebKit browsers (Chrome, Safari, Edge) - hide scrollbar but keep space */
+swp-calendar-header::-webkit-scrollbar {
+  width: 17px; /* Match system default scrollbar width */
+  background: transparent;
+}
+
+swp-calendar-header::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+swp-calendar-header::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 
 swp-day-header {
   padding: 12px;
+  pointer-events: auto; /* Ensure header clicks work despite parent scrollbar */
   text-align: center;
   border-right: 1px solid var(--color-grid-line);
   border-bottom: 1px solid var(--color-grid-line);