diff --git a/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss b/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
index c3d4b4c40..c34c11af4 100644
--- a/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
+++ b/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
@@ -28,7 +28,7 @@
                 }
 
                 .userpicture {
-                    vertical-align: text-bottom;
+                    border-radius: 50%;
                 }
             }
 
diff --git a/src/addons/block/timeline/components/components.module.ts b/src/addons/block/timeline/components/components.module.ts
index dfd4a5fc4..f54298186 100644
--- a/src/addons/block/timeline/components/components.module.ts
+++ b/src/addons/block/timeline/components/components.module.ts
@@ -15,8 +15,6 @@
 import { NgModule } from '@angular/core';
 
 import { CoreSharedModule } from '@/core/shared.module';
-import { CoreCoursesComponentsModule } from '@features/courses/components/components.module';
-import { CoreCourseComponentsModule } from '@features/course/components/components.module';
 
 import { AddonBlockTimelineComponent } from './timeline/timeline';
 import { AddonBlockTimelineEventsComponent } from './events/events';
@@ -28,8 +26,6 @@ import { AddonBlockTimelineEventsComponent } from './events/events';
     ],
     imports: [
         CoreSharedModule,
-        CoreCoursesComponentsModule,
-        CoreCourseComponentsModule,
     ],
     exports: [
         AddonBlockTimelineComponent,
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 0622e2e0b..7907f508c 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -1,50 +1,61 @@
+<ion-item lines="none" *ngIf="course">
+    <ion-label class="ion-text-wrap">
+        <h3>
+            <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
+            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
+        </h3>
+    </ion-label>
+</ion-item>
 <ion-item-group *ngFor="let dayEvents of filteredEvents">
-    <ion-item-divider [color]="dayEvents.color">
-        <ion-label><h3>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h3></ion-label>
-    </ion-item-divider>
+    <ion-item lines="none">
+        <ion-label>
+            <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h4>
+        </ion-label>
+    </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">
-        <ion-item class="ion-text-wrap core-course-module-handler item-media" detail="false" (click)="action($event, event.url)"
-            [attr.aria-label]="event.name" button>
-            <core-mod-icon *ngIf="event.iconUrl" slot="start" [modicon]="event.iconUrl" [componentId]="event.instance"
-                [modname]="event.modulename">
-            </core-mod-icon>
+        <ion-item class="addon-block-timeline-activity" detail="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
+            button lines="full">
             <ion-label>
-                <p class="item-heading">
-                    <core-format-text [text]="event.name" contextLevel="module" [contextInstanceId]="event.id"
-                        [courseId]="event.course && event.course.id">
-                    </core-format-text>
-                </p>
-                <p *ngIf="showCourse && event.course">
-                    <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
-                        [contextInstanceId]="event.course.id">
-                    </core-format-text>
-                </p>
-
-                <ion-button fill="clear" class="ion-hide-md-up ion-text-wrap" (click)="action($event, event.action.url)"
-                    [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
-                    {{event.action.name}}
-                    <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">{{event.action.itemcount}}
-                    </ion-badge>
-                </ion-button>
+                <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
+                    <ion-col class="addon-block-timeline-activity-main ion-no-padding">
+                        <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
+                            <ion-col class="addon-block-timeline-activity-time ion-no-padding">
+                                <ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
+                                <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
+                                    [modname]="event.modulename">
+                                </core-mod-icon>
+                            </ion-col>
+                            <ion-col class="addon-block-timeline-activity-name ion-no-padding">
+                                <p class="item-heading">
+                                    <core-format-text [text]="event.activityname || event.name" contextLevel="module"
+                                        [contextInstanceId]="event.id" [courseId]="event.course && event.course.id">
+                                    </core-format-text>
+                                    <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
+                                    </ion-badge>
+                                </p>
+                                <p *ngIf="(showCourse && event.course) || event.activitystr">
+                                    <span *ngIf="showCourse && event.course">
+                                        <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
+                                            [contextInstanceId]="event.course.id">
+                                        </core-format-text> ·
+                                    </span>
+                                    <core-format-text [text]="event.activitystr" contextLevel="module" [contextInstanceId]="event.id">
+                                    </core-format-text>
+                                </p>
+                            </ion-col>
+                        </ion-row>
+                    </ion-col>
+                    <ion-col class="addon-block-timeline-activity-action ion-no-padding">
+                        <ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name"
+                            [disabled]="!event.action.actionable" *ngIf="event.action">
+                            {{event.action.name}}
+                            <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
+                                {{event.action.itemcount}}
+                            </ion-badge>
+                        </ion-button>
+                    </ion-col>
+                </ion-row>
             </ion-label>
-
-            <div slot="end" class="events-info">
-                <div>
-                    <ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
-                </div>
-                <ion-button
-                    class="ion-hide-md-down"
-                    fill="clear"
-                    (click)="action($event, event.action.url)"
-                    [title]="event.action.name"
-                    [disabled]="!event.action.actionable" *ngIf="event.action"
-                >
-                    {{event.action.name}}
-                    <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
-                        {{event.action.itemcount}}
-                    </ion-badge>
-                </ion-button>
-            </div>
         </ion-item>
     </ng-container>
 </ion-item-group>
@@ -57,6 +68,10 @@
     <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 </div>
 
-<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate"
-    inline="true">
-</core-empty-box>
+<ion-item lines="none" *ngIf="empty && course">
+    <ion-label class="ion-text-wrap">
+        <p>{{'addon.block_timeline.noevents' | translate}}</p>
+    </ion-label>
+</ion-item>
+<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" inline="true"
+    [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index c863dbb2a..8ea49fcb1 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -1,6 +1,41 @@
-.events-info {
-    display: flex;
-    flex-direction: column;
-    text-align: end;
-    padding: 10px 0;
+@import "~theme/globals";
+
+h3 {
+    font-weight: bold;
+    font-size: 18px;
+}
+
+h4 {
+    font-size: 15px;
+}
+
+h4.core-bold {
+    font-weight: bold;
+}
+
+.addon-block-timeline-activity ion-badge {
+    @include margin-horizontal(0.25rem, 0.5rem);
+}
+
+.addon-block-timeline-activity core-mod-icon {
+    --margin-end: 0.5rem;
+}
+
+.addon-block-timeline-activity-time,
+.addon-block-timeline-activity-action {
+    flex-grow: 0;
+}
+
+.addon-block-timeline-activity-main,
+.addon-block-timeline-activity-name {
+    flex-grow: 1;
+    p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.addon-block-timeline-activity-name {
+    flex-grow: 1;
+    overflow: hidden;
 }
diff --git a/src/addons/block/timeline/components/events/events.ts b/src/addons/block/timeline/components/events/events.ts
index b0db9c8a0..b9047ff2b 100644
--- a/src/addons/block/timeline/components/events/events.ts
+++ b/src/addons/block/timeline/components/events/events.ts
@@ -17,11 +17,11 @@ import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreTimeUtils } from '@services/utils/time';
-import { CoreUtils } from '@services/utils/utils';
 import { CoreCourse } from '@features/course/services/course';
 import moment from 'moment';
 import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
 import { AddonCalendarEvent } from '@addons/calendar/services/calendar';
+import { CoreEnrolledCourseDataWithOptions } from '@features/courses/services/courses-helper';
 
 /**
  * Directive to render a list of events in course overview.
@@ -34,34 +34,37 @@ import { AddonCalendarEvent } from '@addons/calendar/services/calendar';
 export class AddonBlockTimelineEventsComponent implements OnChanges {
 
     @Input() events: AddonBlockTimelineEvent[] = []; // The events to render.
-    @Input() showCourse?: boolean | string; // Whether to show the course name.
+    @Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name.
     @Input() from = 0; // Number of days from today to offset the events.
     @Input() to?: number; // Number of days from today to limit the events to. If not defined, no limit.
-    @Input() canLoadMore?: boolean; // Whether more events can be loaded.
-    @Output() loadMore: EventEmitter<void>; // Notify that more events should be loaded.
+    @Input() canLoadMore = false; // Whether more events can be loaded.
+    @Output() loadMore = new EventEmitter(); // Notify that more events should be loaded.
 
+    showCourse = false; // Whether to show the course name.
     empty = true;
     loadingMore = false;
     filteredEvents: AddonBlockTimelineEventFilteredEvent[] = [];
 
-    constructor() {
-        this.loadMore = new EventEmitter();
-    }
-
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
     async ngOnChanges(changes: {[name: string]: SimpleChange}): Promise<void> {
-        this.showCourse = CoreUtils.isTrueOrOne(this.showCourse);
+        this.showCourse = !this.course;
 
         if (changes.events || changes.from || changes.to) {
             if (this.events && this.events.length > 0) {
                 const filteredEvents = await this.filterEventsByTime(this.from, this.to);
                 this.empty = !filteredEvents || filteredEvents.length <= 0;
 
+                const now = CoreTimeUtils.timestamp();
+
                 const eventsByDay: Record<number, AddonCalendarEvent[]> = {};
                 filteredEvents.forEach((event) => {
                     const dayTimestamp = CoreTimeUtils.getMidnightForTimestamp(event.timesort);
+
+                    // Already calculated on 4.0 onwards but this will be live.
+                    event.overdue = event.timesort < now;
+
                     if (eventsByDay[dayTimestamp]) {
                         eventsByDay[dayTimestamp].push(event);
                     } else {
@@ -69,15 +72,13 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
                     }
                 });
 
-                const todaysMidnight = CoreTimeUtils.getMidnightForTimestamp();
-                this.filteredEvents = [];
-                Object.keys(eventsByDay).forEach((key) => {
+                this.filteredEvents =  Object.keys(eventsByDay).map((key) => {
                     const dayTimestamp = parseInt(key);
-                    this.filteredEvents.push({
-                        color: dayTimestamp < todaysMidnight ? 'danger' : 'light',
+
+                    return {
                         dayTimestamp,
                         events: eventsByDay[dayTimestamp],
-                    });
+                    };
                 });
             } else {
                 this.empty = true;
@@ -94,7 +95,7 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
      */
     protected async filterEventsByTime(start: number, end?: number): Promise<AddonBlockTimelineEvent[]> {
         start = moment().add(start, 'days').startOf('day').unix();
-        end = typeof end != 'undefined' ? moment().add(end, 'days').startOf('day').unix() : end;
+        end = end !== undefined ? moment().add(end, 'days').startOf('day').unix() : end;
 
         return await Promise.all(this.events.filter((event) => {
             if (end) {
@@ -122,12 +123,12 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
     /**
      * Action clicked.
      *
-     * @param e Click event.
+     * @param event Click event.
      * @param url Url of the action.
      */
-    async action(e: Event, url: string): Promise<void> {
-        e.preventDefault();
-        e.stopPropagation();
+    async action(event: Event, url: string): Promise<void> {
+        event.preventDefault();
+        event.stopPropagation();
 
         // Fix URL format.
         url = CoreTextUtils.decodeHTMLEntities(url);
@@ -137,7 +138,7 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
         try {
             const treated = await CoreContentLinksHelper.handleLink(url);
             if (!treated) {
-                return CoreSites.getCurrentSite()?.openInBrowserWithAutoLoginIfSameSite(url);
+                return CoreSites.getRequiredCurrentSite().openInBrowserWithAutoLoginIfSameSite(url);
             }
         } finally {
             modal.dismiss();
@@ -154,5 +155,4 @@ type AddonBlockTimelineEvent = AddonCalendarEvent & {
 type AddonBlockTimelineEventFilteredEvent = {
     events: AddonBlockTimelineEvent[];
     dayTimestamp: number;
-    color: string;
 };
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index 62105627c..81c32360d 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -1,5 +1,7 @@
 <ion-item-divider sticky="true">
-    <ion-label><h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2></ion-label>
+    <ion-label>
+        <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
+    </ion-label>
     <core-context-menu slot="end">
         <core-context-menu-item *ngIf="loaded" [priority]="900" [content]="'addon.block_timeline.sortbydates' | translate"
             (action)="switchSort('sortbydates')" [iconAction]="sort == 'sortbydates' ? 'far-dot-circle' : 'far-circle'">
@@ -18,7 +20,7 @@
             <ion-select-option class="ion-text-wrap" value="overdue">
                 {{ 'addon.block_timeline.overdue' | translate }}
             </ion-select-option>
-            <ion-select-option class="ion-text-wrap" disabled value="disabled">
+            <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
                 {{ 'addon.block_timeline.duedate' | translate }}
             </ion-select-option>
             <ion-select-option class="ion-text-wrap" value="next7days">
@@ -36,21 +38,14 @@
         </core-combobox>
     </div>
     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
-        <addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore"
-            (loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
+        <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
+            [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
     </core-loading>
-    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'"
-        [fullscreen]="false" class="safe-area-padding">
-        <ion-grid class="ion-no-padding">
-            <ion-row class="ion-no-padding">
-                <ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">
-                    <core-courses-course-progress [course]="course">
-                        <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore"
-                            (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
-                    </core-courses-course-progress>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" [fullscreen]="false" class="safe-area-page">
+        <ng-container *ngFor="let course of timelineCourses.courses">
+            <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
+                [course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
+        </ng-container>
         <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
             [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
     </core-loading>
diff --git a/src/addons/block/timeline/components/timeline/timeline.ts b/src/addons/block/timeline/components/timeline/timeline.ts
index 29f2e1487..c8ef64b77 100644
--- a/src/addons/block/timeline/components/timeline/timeline.ts
+++ b/src/addons/block/timeline/components/timeline/timeline.ts
@@ -24,6 +24,7 @@ import { CoreCoursesHelper, CoreEnrolledCourseDataWithOptions } from '@features/
 import { CoreSite } from '@classes/site';
 import { CoreCourses } from '@features/courses/services/courses';
 import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate';
+import { CoreNavigator } from '@services/navigator';
 
 /**
  * Component to render a timeline block.
@@ -36,7 +37,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
 
     sort = 'sortbydates';
     filter = 'next30days';
-    currentSite?: CoreSite;
+    currentSite!: CoreSite;
     timeline: {
         events: AddonCalendarEvent[];
         loaded: boolean;
@@ -66,10 +67,18 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
     }
 
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        this.currentSite = CoreSites.getRequiredCurrentSite();
+        try {
+            this.currentSite = CoreSites.getRequiredCurrentSite();
+        } catch (error) {
+            CoreDomUtils.showErrorModal(error);
+
+            CoreNavigator.back();
+
+            return;
+        }
 
         this.filter = await this.currentSite.getLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
         this.switchFilter(this.filter);
@@ -117,28 +126,21 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
         }
     }
 
-    /**
-     * Load more events.
-     */
-    async loadMoreTimeline(): Promise<void> {
-        try {
-            await this.fetchMyOverviewTimeline(this.timeline.canLoadMore);
-        } catch (error) {
-            CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError);
-        }
-    }
-
     /**
      * Load more events.
      *
-     * @param course Course.
+     * @param course Course. If defined, it will update the course events, timeline otherwise.
      * @return Promise resolved when done.
      */
-    async loadMoreCourse(course: AddonBlockTimelineCourse): Promise<void> {
+    async loadMore(course?: AddonBlockTimelineCourse): Promise<void> {
         try {
-            const courseEvents = await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore);
-            course.events = course.events?.concat(courseEvents.events);
-            course.canLoadMore = courseEvents.canLoadMore;
+            if (course) {
+                const courseEvents = await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore);
+                course.events = course.events?.concat(courseEvents.events);
+                course.canLoadMore = courseEvents.canLoadMore;
+            } else {
+                await this.fetchMyOverviewTimeline(this.timeline.canLoadMore);
+            }
         } catch (error) {
             CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError);
         }
@@ -188,12 +190,12 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
      */
     switchFilter(filter: string): void {
         this.filter = filter;
-        this.currentSite?.setLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
+        this.currentSite.setLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
 
         switch (this.filter) {
             case 'overdue':
                 this.dataFrom = -14;
-                this.dataTo = 0;
+                this.dataTo = 1;
                 break;
             case 'next7days':
                 this.dataFrom = 0;
@@ -226,7 +228,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
      */
     switchSort(sort: string): void {
         this.sort = sort;
-        this.currentSite?.setLocalSiteConfig('AddonBlockTimelineSort', this.sort);
+        this.currentSite.setLocalSiteConfig('AddonBlockTimelineSort', this.sort);
 
         if (!this.timeline.loaded && this.sort == 'sortbydates') {
             this.fetchContent();
@@ -237,7 +239,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
 
 }
 
-type AddonBlockTimelineCourse = CoreEnrolledCourseDataWithOptions & {
+export type AddonBlockTimelineCourse = CoreEnrolledCourseDataWithOptions & {
     events?: AddonCalendarEvent[];
     canLoadMore?: number;
 };
diff --git a/src/addons/calendar/services/calendar.ts b/src/addons/calendar/services/calendar.ts
index b4ab29361..f21f71869 100644
--- a/src/addons/calendar/services/calendar.ts
+++ b/src/addons/calendar/services/calendar.ts
@@ -1707,14 +1707,19 @@ export type AddonCalendarEventBase = {
     userid?: number; // Userid.
     repeatid?: number; // Repeatid.
     eventcount?: number; // Eventcount.
+    component?: string; // Component.
     modulename?: string; // Modulename.
+    activityname?: string; // Activityname.
+    activitystr?: string; // Activitystr.
     instance?: number; // Instance.
     eventtype: AddonCalendarEventType; // Eventtype.
     timestart: number; // Timestart.
     timeduration: number; // Timeduration.
     timesort: number; // Timesort.
+    timeusermidnight: number; // Timeusermidnight.
     visible: number; // Visible.
     timemodified: number; // Timemodified.
+    overdue?: boolean; // Overdue.
     icon: {
         key: string; // Key.
         component: string; // Component.
diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
index c33c495a9..72e49c32f 100644
--- a/src/core/features/block/components/block/block.scss
+++ b/src/core/features/block/components/block/block.scss
@@ -7,4 +7,8 @@
     ion-item-divider {
         min-height: var(--item-divider-min-height);
     }
+
+    ::ng-deep core-loading {
+        --loading-inline-min-height: 44px;
+    }
 }
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index d36b8cb38..7adb8fcc3 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -1,14 +1,12 @@
 <ion-card [attr.course-color]="course.color ? null : course.colorNumber">
     <div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"
         [style.background-color]="course.color">
-        <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
+        <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
     </div>
     <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
         class="core-course-header" [class.item-disabled]="course.visible == 0"
-        [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false"
-        detail="false">
-        <ion-label
-            class="ion-text-wrap core-course-title"
+        [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">
+        <ion-label class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
             [class.core-course-with-spinner]="(downloadCourseEnabled && prefetchCourseData.icon == 'spinner') || showSpinner">
             <p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)"
@@ -19,8 +17,7 @@
                 </span>
                 <span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname"
                     class="core-course-category"> | </span>
-                <span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
-                    class="core-course-shortname">
+                <span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname">
                     <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </span>
@@ -35,12 +32,8 @@
         </ion-label>
 
         <div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled && showDownload" slot="end">
-            <core-download-refresh
-                [status]="prefetchCourseData.status"
-                [enabled]="downloadCourseEnabled"
-                [statusTranslatable]="prefetchCourseData.statusTranslatable"
-                canTrustDownload="false"
-                [loading]="prefetchCourseData.loading"
+            <core-download-refresh [status]="prefetchCourseData.status" [enabled]="downloadCourseEnabled"
+                [statusTranslatable]="prefetchCourseData.statusTranslatable" canTrustDownload="false" [loading]="prefetchCourseData.loading"
                 (action)="prefetchCourse()"></core-download-refresh>
         </div>
 
@@ -50,9 +43,8 @@
                 [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 
             <!-- Downloaded icon. -->
-            <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner"
-                class="core-icon-downloaded" name="cloud-done" color="success" role="status"
-                [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
+            <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded"
+                name="cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
 
             <!-- Options menu. -->
             <ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
@@ -61,11 +53,9 @@
             </ion-button>
         </div>
     </ion-item>
-    <ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" lines="none"
-        class="core-course-progress">
+    <ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" lines="none" class="core-course-progress">
         <ion-label>
             <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </ion-label>
     </ion-item>
-    <ng-content></ng-content>
 </ion-card>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c74dae05a..4605eabae 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -788,6 +788,13 @@ ion-select::part(icon) {
     opacity: 1;
 }
 
+ion-select-popover ion-item.core-select-option-title {
+    cursor: pointer;
+    ion-radio {
+        display: none;
+    }
+}
+
 ion-searchbar {
     .searchbar-search-icon.ios {
         top: 4px;