diff --git a/src/addons/calendar/calendar-common.scss b/src/addons/calendar/calendar-common.scss
index 8fdaaeefe..c12303e90 100644
--- a/src/addons/calendar/calendar-common.scss
+++ b/src/addons/calendar/calendar-common.scss
@@ -6,11 +6,7 @@
         > ion-icon {
             color: white;
             border-radius: 50%;
-            padding: 6px;
-        }
-
-        > core-mod-icon {
-            padding: 6px;
+            padding: 0.7rem;
         }
 
         &.addon-calendar-eventtype-category > ion-icon {
@@ -30,4 +26,4 @@
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index ca1e7dc08..9d072a910 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -81,13 +81,10 @@
                                         <span class="addon-calendar-event-time">
                                             {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
                                         </span>
-                                        <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false"
-                                            [modname]="event.modulename" [componentId]="event.instance">
-                                        </core-mod-icon>
                                         <!-- Add the icon title so accessibility tools read it. -->
                                         <span class="sr-only">
                                             {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                            <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">
+                                            <span class="sr-only" *ngIf="event.iconTitle">
                                                 {{ event.iconTitle }}
                                             </span>
                                         </span>
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index 24e0c2e99..f293233fc 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@@ -148,17 +148,6 @@
         }
     }
 
-    core-mod-icon {
-        margin-right: 1px;
-        margin-left: 1px;
-        --size: 16px;
-        display: inline-block;
-        vertical-align: bottom;
-        ::ng-deep img {
-            display: block;
-        }
-    }
-
     ion-slide {
         display: block;
         font-size: inherit;
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 01a7daceb..62939f984 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -68,7 +68,7 @@
                                 (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
                                 [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
                                 <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
-                                    [modname]="event.modname" [componentId]="event.instance">
+                                    [modname]="event.modulename" [componentId]="event.instance">
                                 </core-mod-icon>
                                 <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
                                     aria-hidden="true">
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index 8744742c3..bcdd07a0e 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -1,18 +1,10 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="event">
-                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
-                    [componentId]="event.instance"></core-mod-icon>
-                <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true"></ion-icon>
-                <!-- Add the icon title so accessibility tools read it. -->
-                <span class="sr-only">
-                    {{ 'addon.calendar.type' + event.formattedType | translate }}
-                    <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
-                </span>
                 <core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId">
                 </core-format-text>
             </h1>
@@ -47,79 +39,96 @@
             </ion-item>
         </ion-card>
 
-        <ion-card>
-            <ion-card-content *ngIf="event">
-                <ion-item>
-                    <ion-label>
-                        <h2>{{ 'addon.calendar.when' | translate }}</h2>
-                        <core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
+        <ion-list *ngIf="event">
+            <ion-item class="collapsible-title ion-text-wrap addon-calendar-event"
+                [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
+                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
+                    [componentId]="event.instance" slot="start"></core-mod-icon>
+                <ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start">
+                </ion-icon>
+                <ion-label>
+                    <!-- Add the icon title so accessibility tools read it. -->
+                    <span class="sr-only">
+                        {{ 'addon.calendar.type' + event.formattedType | translate }}
+                        <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                    </span>
+                    <h1>
+                        <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
+                            [contextInstanceId]="event.contextInstanceId">
+                        </core-format-text>
+                    </h1>
+                </ion-label>
+            </ion-item>
+            <ion-item>
+                <ion-label>
+                    <h2>{{ 'addon.calendar.when' | translate }}</h2>
+                    <core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
+                        [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                </ion-label>
+                <ion-note slot="end" *ngIf="event.deleted">
+                    <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
+                </ion-note>
+            </ion-item>
+            <ion-item>
+                <ion-label>
+                    <h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
+                    <p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true">
+                <ion-label>
+                    <h2>{{ 'core.course' | translate}}</h2>
+                    <p>
+                        <core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
+                        </core-format-text>
+                    </p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap" *ngIf="groupName">
+                <ion-label>
+                    <h2>{{ 'core.group' | translate}}</h2>
+                    <p>{{ groupName }}</p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap" *ngIf="categoryPath">
+                <ion-label>
+                    <h2>{{ 'core.category' | translate}}</h2>
+                    <p>
+                        <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
+                        </core-format-text>
+                    </p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap" *ngIf="event.description">
+                <ion-label>
+                    <h2>{{ 'core.description' | translate}}</h2>
+                    <p>
+                        <core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
                             [contextInstanceId]="event.contextInstanceId"></core-format-text>
-                    </ion-label>
-                    <ion-note slot="end" *ngIf="event.deleted">
-                        <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
-                    </ion-note>
-                </ion-item>
-                <ion-item>
-                    <ion-label>
-                        <h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
-                        <p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true">
-                    <ion-label>
-                        <h2>{{ 'core.course' | translate}}</h2>
-                        <p>
-                            <core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
-                            </core-format-text>
-                        </p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="groupName">
-                    <ion-label>
-                        <h2>{{ 'core.group' | translate}}</h2>
-                        <p>{{ groupName }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="categoryPath">
-                    <ion-label>
-                        <h2>{{ 'core.category' | translate}}</h2>
-                        <p>
-                            <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
-                            </core-format-text>
-                        </p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="event.description">
-                    <ion-label>
-                        <h2>{{ 'core.description' | translate}}</h2>
-                        <p>
-                            <core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
+                    </p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap" *ngIf="event.location">
+                <ion-label>
+                    <h2>{{ 'core.location' | translate}}</h2>
+                    <p>
+                        <a [href]="event.encodedLocation" core-link auto-login="no">
+                            <core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
                                 [contextInstanceId]="event.contextInstanceId"></core-format-text>
-                        </p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="event.location">
-                    <ion-label>
-                        <h2>{{ 'core.location' | translate}}</h2>
-                        <p>
-                            <a [href]="event.encodedLocation" core-link auto-login="no">
-                                <core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
-                                    [contextInstanceId]="event.contextInstanceId"></core-format-text>
-                            </a>
-                        </p>
-                    </ion-label>
-                </ion-item>
-                <ion-item *ngIf="moduleUrl">
-                    <ion-label>
-                        <ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
-                            {{ 'addon.calendar.gotoactivity' | translate }}
-                        </ion-button>
-                    </ion-label>
-                </ion-item>
-            </ion-card-content>
-        </ion-card>
+                        </a>
+                    </p>
+                </ion-label>
+            </ion-item>
+            <ion-item *ngIf="moduleUrl">
+                <ion-label>
+                    <ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
+                        {{ 'addon.calendar.gotoactivity' | translate }}
+                    </ion-button>
+                </ion-label>
+            </ion-item>
+        </ion-list>
 
-        <ion-card list *ngIf="notificationsEnabled && event">
+        <ion-card *ngIf="notificationsEnabled && event">
             <ion-item>
                 <ion-label>
                     <h2>{{ 'addon.calendar.reminders' | translate }}</h2>
diff --git a/src/addons/calendar/pages/event/event.page.ts b/src/addons/calendar/pages/event/event.page.ts
index e335e6b78..28c5de7e9 100644
--- a/src/addons/calendar/pages/event/event.page.ts
+++ b/src/addons/calendar/pages/event/event.page.ts
@@ -46,7 +46,7 @@ import { AddonCalendarReminderTimeModalComponent } from '@addons/calendar/compon
 @Component({
     selector: 'page-addon-calendar-event',
     templateUrl: 'event.html',
-    styleUrls: ['event.scss'],
+    styleUrls: ['../../calendar-common.scss', 'event.scss'],
 })
 export class AddonCalendarEventPage implements OnInit, OnDestroy {
 
diff --git a/src/addons/calendar/pages/event/event.scss b/src/addons/calendar/pages/event/event.scss
index 5403de162..24e862cd4 100644
--- a/src/addons/calendar/pages/event/event.scss
+++ b/src/addons/calendar/pages/event/event.scss
@@ -2,9 +2,4 @@
     ion-card ion-note {
         font-size: 1.6rem;
     }
-    h1 ion-icon, h1 img, h1 core-mod-icon {
-        margin-left: 10px;
-        margin-right: 10px;
-        display: inline-block;
-    }
 }