diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts
index 9bd0f2e..7240f04 100644
--- a/src/managers/GridManager.ts
+++ b/src/managers/GridManager.ts
@@ -263,6 +263,24 @@ export class GridManager {
     const headerSectionRight = document.createElement('swp-header-section-right');
     headerSectionRight.textContent = 'Right Section';
     weekHeader.appendChild(headerSectionRight);
+
+    // Update spacer heights based on all-day events
+    this.updateSpacerHeights();
+  }
+
+  /**
+   * Update spacer heights based on all-day events presence
+   */
+  private updateSpacerHeights(): void {
+    // TODO: Check for actual all-day events in current week
+    // For now, simulate having all-day events with 30px height
+    const hasAllDayEvents = true; // This should be determined from actual event data
+    const allDayHeight = hasAllDayEvents ? 30 : 0;
+    
+    // Set CSS variable for dynamic spacer height
+    document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
+    
+    console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`);
   }
 
   /**
diff --git a/wwwroot/css/calendar-base-css.css b/wwwroot/css/calendar-base-css.css
index ebe745a..c3e0ad1 100644
--- a/wwwroot/css/calendar-base-css.css
+++ b/wwwroot/css/calendar-base-css.css
@@ -16,6 +16,7 @@
   --day-column-min-width: 250px;
   --week-days: 7;
   --header-height: 80px;
+  --all-day-row-height: 0px; /* Default height for all-day events row */
   
   /* Time boundaries - Default fallback values */
   --day-start-hour: 0;
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 823ffa6..ef719c0 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -50,12 +50,13 @@ swp-calendar-container {
 swp-header-spacer {
   grid-column: 1;
   grid-row: 1;
-  height: var(--header-height); /* Use CSS variable for consistent height */
+  height: calc(var(--header-height) + var(--all-day-row-height)); /* Dynamic height including all-day events */
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   z-index: 5; /* Higher than time-axis to cover it when scrolling */
   position: relative;
+  transition: height 300ms ease; /* Smooth height transitions */
 }
 
 
@@ -63,12 +64,13 @@ swp-header-spacer {
 swp-right-header-spacer {
   grid-column: 3;
   grid-row: 1;
-  height: var(--header-height); /* Use CSS variable for consistent height */
+  height: calc(var(--header-height) + var(--all-day-row-height)); /* Dynamic height including all-day events */
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   z-index: 5; /* Higher than time-axis to cover it when scrolling */
   position: relative;
+  transition: height 300ms ease; /* Smooth height transitions */
 }
 
 /* Week container for sliding */