diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts
index f80e891..74e770f 100644
--- a/src/managers/AllDayManager.ts
+++ b/src/managers/AllDayManager.ts
@@ -462,7 +462,10 @@ export class AllDayManager {
           element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
 
           if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
-            element.classList.add('max-event-overflow-hide');
+            if (!this.isExpanded)
+              element.classList.add('max-event-overflow-hide');
+            else
+              element.classList.add('max-event-overflow-show');
 
           // Remove transition class after animation
           setTimeout(() => element.classList.remove('transitioning'), 200);
@@ -539,62 +542,62 @@ export class AllDayManager {
    * Count number of events in a specific column using ColumnBounds
    */
   private countEventsInColumn(columnBounds: ColumnBounds): number {
-      let columnIndex = columnBounds.index;
-      let count = 0;
+    let columnIndex = columnBounds.index;
+    let count = 0;
 
-      this.currentLayouts.forEach((layout) => {
-        // Check if event spans this column
-        if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
-          count++;
-        }
-      });
-      return count;
-    }
+    this.currentLayouts.forEach((layout) => {
+      // Check if event spans this column
+      if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
+        count++;
+      }
+    });
+    return count;
+  }
 
   /**
    * Update overflow indicators for collapsed state
    */
   private updateOverflowIndicators(): void {
-      const container = this.getAllDayContainer();
-      if(!container) return;
+    const container = this.getAllDayContainer();
+    if (!container) return;
 
-      // Create overflow indicators for each column that needs them
-      let columns = ColumnDetectionUtils.getColumns();
+    // Create overflow indicators for each column that needs them
+    let columns = ColumnDetectionUtils.getColumns();
 
-      columns.forEach((columnBounds) => {
-        let totalEventsInColumn = this.countEventsInColumn(columnBounds);
-        let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
+    columns.forEach((columnBounds) => {
+      let totalEventsInColumn = this.countEventsInColumn(columnBounds);
+      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-indicator';
-          overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
-          overflowElement.style.gridColumn = columnBounds.index.toString();
-          overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
-          overflowElement.onclick = (e) => {
-            e.stopPropagation();
-            this.toggleExpanded();
-          };
+      if (overflowCount > 0) {
+        // Create new overflow indicator element
+        let overflowElement = document.createElement('swp-event');
+        overflowElement.className = 'max-event-indicator';
+        overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
+        overflowElement.style.gridColumn = columnBounds.index.toString();
+        overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
+        overflowElement.onclick = (e) => {
+          e.stopPropagation();
+          this.toggleExpanded();
+        };
 
-          container.appendChild(overflowElement);
-        }
-      });
-    }
+        container.appendChild(overflowElement);
+      }
+    });
+  }
 
   /**
    * Clear overflow indicators and restore normal state
    */
   private clearOverflowIndicators(): void {
-      const container = this.getAllDayContainer();
-      if(!container) return;
+    const container = this.getAllDayContainer();
+    if (!container) return;
 
-      // Remove all overflow indicator elements
-      container.querySelectorAll('.max-event-indicator').forEach((element) => {
-        element.remove();
-      });
+    // Remove all overflow indicator elements
+    container.querySelectorAll('.max-event-indicator').forEach((element) => {
+      element.remove();
+    });
 
 
-    }
+  }
 
 }
\ No newline at end of file
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 61d1ffc..e6c9fd0 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -379,11 +379,13 @@ swp-allday-container swp-event.max-event-indicator span {
 }
 
 swp-allday-container swp-event.max-event-overflow-show {
-  display: block;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
 }
 
 swp-allday-container swp-event.max-event-overflow-hide {
-  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
 }
 
 /* Hide time element for all-day styled events */