diff --git a/src/core/CalendarConfig.ts b/src/core/CalendarConfig.ts
index fd29c66..f6b1155 100644
--- a/src/core/CalendarConfig.ts
+++ b/src/core/CalendarConfig.ts
@@ -12,6 +12,7 @@ export const ALL_DAY_CONSTANTS = {
   EVENT_HEIGHT: 22,    // Height of single all-day event
   EVENT_GAP: 2,        // Gap between stacked events
   CONTAINER_PADDING: 4, // Container padding (top + bottom)
+  MAX_COLLAPSED_ROWS: 4, // Show 4 rows when collapsed (3 events + 1 indicator row)
   get SINGLE_ROW_HEIGHT() {
     return this.EVENT_HEIGHT + this.EVENT_GAP; // 28px
   }
diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts
index 1d04e86..8e4dbf1 100644
--- a/src/managers/AllDayManager.ts
+++ b/src/managers/AllDayManager.ts
@@ -37,18 +37,18 @@ export class AllDayManager {
   // Expand/collapse state
   private isExpanded: boolean = false;
   private actualRowCount: number = 0;
-  private readonly MAX_COLLAPSED_ROWS = 4; // Show 4 rows when collapsed (3 events + 1 indicator row)
+
 
   constructor(eventManager: EventManager) {
     this.eventManager = eventManager;
     this.allDayEventRenderer = new AllDayEventRenderer();
-    
+
     // Sync CSS variable with TypeScript constant to ensure consistency
     document.documentElement.style.setProperty(
       '--single-row-height',
       `${ALL_DAY_CONSTANTS.EVENT_HEIGHT}px`
     );
-    
+
     this.setupEventListeners();
   }
 
@@ -143,7 +143,7 @@ export class AllDayManager {
 
       this.currentLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements)
 
-      this.allDayEventRenderer.renderAllDayEventsForPeriod(this.currentLayouts );
+      this.allDayEventRenderer.renderAllDayEventsForPeriod(this.currentLayouts);
       this.checkAndAnimateAllDayHeight();
     });
 
@@ -206,7 +206,7 @@ export class AllDayManager {
 
       // Max rows = highest row number (e.g. if row 3 is used, height = 3 rows)
       maxRows = highestRow;
- 
+
     }
 
     // Store actual row count
@@ -215,14 +215,14 @@ export class AllDayManager {
     // Determine what to display
     let displayRows = maxRows;
 
-    if (maxRows > this.MAX_COLLAPSED_ROWS) {
+    if (maxRows > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS) {
       // Show chevron button
       this.updateChevronButton(true);
 
       // Show 4 rows when collapsed (3 events + indicators)
       if (!this.isExpanded) {
 
-        displayRows = this.MAX_COLLAPSED_ROWS;
+        displayRows = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS;
         this.updateOverflowIndicators();
 
       } else {
@@ -461,6 +461,9 @@ export class AllDayManager {
           element.style.gridRow = layout.row.toString();
           element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
 
+          if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
+            element.style.display = "none";
+
           // Remove transition class after animation
           setTimeout(() => element.classList.remove('transitioning'), 200);
         }
@@ -550,15 +553,15 @@ export class AllDayManager {
 
     columns.forEach((columnBounds) => {
       let totalEventsInColumn = this.countEventsInColumn(columnBounds);
-      let overflowCount = Math.max(0, totalEventsInColumn - 3);
+      let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
 
       if (overflowCount > 0) {
         // Create new overflow indicator element
         let overflowElement = document.createElement('swp-event');
         overflowElement.className = 'max-event-overflow';
-        overflowElement.style.gridRow = '4';
+        overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
         overflowElement.style.gridColumn = columnBounds.index.toString();
-        overflowElement.innerHTML = `<span>+${overflowCount} more</span>`;
+        overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
         overflowElement.onclick = (e) => {
           e.stopPropagation();
           this.toggleExpanded();