diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index f3529f2..09a4b71 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -43,6 +43,9 @@ const isDefaultDate = computed(() => {
     <ul
       v-if="eventsForTheDay.length > 0"
       class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1"
+      :class="{
+        'opacity-50': props.faded
+      }"
     >
       <li v-for="event in eventsForTheDay" :key="event.title" class="grid">
         <CalendarEvent :event />
diff --git a/src/stores/events.ts b/src/stores/events.ts
index d13846a..84539fd 100644
--- a/src/stores/events.ts
+++ b/src/stores/events.ts
@@ -92,7 +92,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
     switch (currentConfig.viewType) {
       case 'month':
-        return event.date.month === Number(currentDate.currentMonth)
+        return (
+          event.date.month === Number(currentDate.currentMonth) ||
+          (event.date.month === Number(currentDate.currentMonth) + 1 && event.date.day <= 8) // This is to allow leap events from appearing on the last 8 tiles
+        )
 
       case 'year':
         return event.date.year === Number(currentDate.currentYear)