diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index 834845a06..fde877cb2 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -13,7 +13,7 @@
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded">
+    <core-loading [hideUntil]="badgeLoaded" class="list-item-limited-width">
         <ion-item-group *ngIf="badge">
             <ion-item class="ion-text-wrap ion-text-center">
                 <ion-label>
diff --git a/src/addons/calendar/components/components.module.ts b/src/addons/calendar/components/components.module.ts
index 283909027..68b2bdee2 100644
--- a/src/addons/calendar/components/components.module.ts
+++ b/src/addons/calendar/components/components.module.ts
@@ -18,14 +18,14 @@ import { CoreSharedModule } from '@/core/shared.module';
 
 import { AddonCalendarCalendarComponent } from './calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from './upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from './filter/filter';
+import { AddonCalendarFilterComponent } from './filter/filter';
 import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/reminder-time-modal';
 
 @NgModule({
     declarations: [
         AddonCalendarCalendarComponent,
         AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
         AddonCalendarReminderTimeModalComponent,
     ],
     imports: [
@@ -36,7 +36,7 @@ import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/r
     exports: [
         AddonCalendarCalendarComponent,
         AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
         AddonCalendarReminderTimeModalComponent,
     ],
 })
diff --git a/src/addons/calendar/components/filter/addon-calendar-filter-popover.html b/src/addons/calendar/components/filter/addon-calendar-filter-popover.html
deleted file mode 100644
index fd88358b3..000000000
--- a/src/addons/calendar/components/filter/addon-calendar-filter-popover.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<ion-list>
-    <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
-        <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
-        <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
-    </ion-item>
-    <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
-    <ng-container *ngIf="filter.course || filter.category || filter.group">
-        <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
-            <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <ion-label>
-                    <core-format-text [text]="course.fullname"></core-format-text>
-                </ion-label>
-                <ion-radio slot="end" [value]="course.id"></ion-radio>
-            </ion-item>
-        </ion-radio-group>
-    </ng-container>
-</ion-list>
diff --git a/src/addons/calendar/components/filter/filter.html b/src/addons/calendar/components/filter/filter.html
new file mode 100644
index 000000000..c49826ce1
--- /dev/null
+++ b/src/addons/calendar/components/filter/filter.html
@@ -0,0 +1,29 @@
+<ion-header class="no-title">
+    <ion-toolbar>
+        <ion-buttons slot="end">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+    <ion-list>
+        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
+            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
+            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
+        </ion-item>
+        <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
+        <ng-container *ngIf="filter.course || filter.category || filter.group">
+            <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
+                <ion-item class="ion-text-wrap" *ngFor="let course of courses">
+                    <ion-label>
+                        <core-format-text [text]="course.fullname"></core-format-text>
+                    </ion-label>
+                    <ion-radio slot="end" [value]="course.id"></ion-radio>
+                </ion-item>
+            </ion-radio-group>
+        </ng-container>
+    </ion-list>
+</ion-content>
diff --git a/src/addons/calendar/components/filter/filter-popover.scss b/src/addons/calendar/components/filter/filter.scss
similarity index 100%
rename from src/addons/calendar/components/filter/filter-popover.scss
rename to src/addons/calendar/components/filter/filter.scss
diff --git a/src/addons/calendar/components/filter/filter.ts b/src/addons/calendar/components/filter/filter.ts
index 8827846c5..9d25721b2 100644
--- a/src/addons/calendar/components/filter/filter.ts
+++ b/src/addons/calendar/components/filter/filter.ts
@@ -15,6 +15,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreUtils } from '@services/utils/utils';
+import { ModalController } from '@singletons';
 import { CoreEvents } from '@singletons/events';
 import { AddonCalendarEventType, AddonCalendarProvider } from '../../services/calendar';
 import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/calendar-helper';
@@ -23,11 +24,11 @@ import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/cal
  * Component to display the events filter that includes events types and a list of courses.
  */
 @Component({
-    selector: 'addon-calendar-filter-popover',
-    templateUrl: 'addon-calendar-filter-popover.html',
-    styleUrls: ['../../calendar-common.scss', 'filter-popover.scss'],
+    selector: 'addon-calendar-filter',
+    templateUrl: 'filter.html',
+    styleUrls: ['../../calendar-common.scss', 'filter.scss'],
 })
-export class AddonCalendarFilterPopoverComponent implements OnInit {
+export class AddonCalendarFilterComponent implements OnInit {
 
     @Input() filter: AddonCalendarFilter = {
         filtered: false,
@@ -56,7 +57,7 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
     }
 
     /**
-     * Init the component.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.courseId = this.filter.courseId || -1;
@@ -80,4 +81,11 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
         CoreEvents.trigger(AddonCalendarProvider.FILTER_CHANGED_EVENT, this.filter);
     }
 
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        ModalController.dismiss();
+    }
+
 }
diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index 23283d242..e5a295569 100644
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@@ -6,7 +6,7 @@
         <ng-container *ngFor="let event of filteredEvents">
             <ion-card>
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
-                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" detail="true">
+                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
                     <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
                         [componentId]="event.instance" [showAlt]="false"></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/day/day.html b/src/addons/calendar/pages/day/day.html
index e3f7b3766..daf9206dd 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -7,7 +7,7 @@
             <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
diff --git a/src/addons/calendar/pages/day/day.page.ts b/src/addons/calendar/pages/day/day.page.ts
index 03b10b0b2..be2c15588 100644
--- a/src/addons/calendar/pages/day/day.page.ts
+++ b/src/addons/calendar/pages/day/day.page.ts
@@ -31,7 +31,7 @@ import { AddonCalendarFilter, AddonCalendarHelper } from '../../services/calenda
 import { AddonCalendarSync, AddonCalendarSyncProvider } from '../../services/calendar-sync';
 import { CoreCategoryData, CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import moment from 'moment';
 import { Network, NgZone } from '@singletons';
 import { CoreNavigator } from '@services/navigator';
@@ -348,18 +348,15 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Show the context menu.
-     *
-     * @param event Event.
+     * Show the filter menu.
      */
-    async openFilter(event: MouseEvent): Promise<void> {
-        await CoreDomUtils.openPopover({
-            component: AddonCalendarFilterPopoverComponent,
+    async openFilter(): Promise<void> {
+        await CoreDomUtils.openSideModal({
+            component: AddonCalendarFilterComponent,
             componentProps: {
                 courses: this.manager?.getSource().courses,
                 filter: this.filter,
             },
-            event,
         });
     }
 
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index 8675bca95..61b07e7d5 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -7,7 +7,7 @@
             <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
diff --git a/src/addons/calendar/pages/index/index.page.ts b/src/addons/calendar/pages/index/index.page.ts
index 0b55de067..c0ac2fb1c 100644
--- a/src/addons/calendar/pages/index/index.page.ts
+++ b/src/addons/calendar/pages/index/index.page.ts
@@ -29,7 +29,7 @@ import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { ActivatedRoute, Params } from '@angular/router';
 import { AddonCalendarCalendarComponent } from '../../components/calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from '../../components/upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import { CoreNavigator } from '@services/navigator';
 import { CoreLocalNotifications } from '@services/local-notifications';
 import { CoreConstants } from '@/core/constants';
@@ -328,18 +328,15 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Show the context menu.
-     *
-     * @param event Event.
+     * Show the filter menu.
      */
-    async openFilter(event: MouseEvent): Promise<void> {
-        await CoreDomUtils.openPopover({
-            component: AddonCalendarFilterPopoverComponent,
+    async openFilter(): Promise<void> {
+        await CoreDomUtils.openSideModal({
+            component: AddonCalendarFilterComponent,
             componentProps: {
                 courses: this.courses,
                 filter: this.filter,
             },
-            event,
         });
     }
 
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index a73a97e2c..53b0778d7 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
diff --git a/src/addons/competency/pages/competencysummary/competencysummary.html b/src/addons/competency/pages/competencysummary/competencysummary.html
index 1467f6e50..b5314d334 100644
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
         <ion-card *ngIf="competency">
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                 <ion-label>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index fd6746901..6ca87f8af 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
         <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
             <ng-container *ngIf="courseCompetencies.cangradecompetencies">
                 <ion-item class="ion-text-wrap" *ngIf="courseCompetencies.settings.pushratingstouserplans">
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 0f84cbb7f..1f2275c70 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index 4072066ff..2c09b70b1 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index 40b51ef5a..3289a134c 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -18,7 +18,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index e66b33145..3b4c9b000 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -16,7 +16,8 @@
         (ionRefresh)="refreshDatabase($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
+        class="list-item-limited-width">
         <!-- Database entries found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
             <ion-item>
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index 7a1c4b742..f74b6c412 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index cf24bdd04..bcac791b8 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index 734fbbe7e..0b115989f 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index 3ddf3e3f7..a3555462f 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -14,7 +14,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="list-item-limited-width">
         <!-- Allow selecting the files to see: private or site. -->
         <core-combobox [selection]="root" (onChange)="rootChanged($event)" *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select-option class="ion-text-wrap" value="my">
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html
index 1534cdcef..4e1336a18 100644
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@@ -38,7 +38,7 @@
         <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
         </core-infinite-loading>
 
-        <ion-list class="addon-messages-discussion-container">
+        <ion-list class="addon-messages-discussion-container  list-item-limited-width">
             <ng-container *ngFor="let comment of comments; index as index; last as last">
 
                 <p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
diff --git a/src/core/features/course/components/tag-area/core-course-tag-area.html b/src/core/features/course/components/tag-area/core-course-tag-area.html
index aa0f0df2b..033ffc509 100644
--- a/src/core/features/course/components/tag-area/core-course-tag-area.html
+++ b/src/core/features/course/components/tag-area/core-course-tag-area.html
@@ -1,8 +1,10 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button
-    detail="true">
-    <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
-    <ion-label>
-        <p class="item-heading">{{ item.courseName }}</p>
-        <p *ngIf="item.categoryName">{{ 'core.category' | translate }}: {{ item.categoryName }}</p>
-    </ion-label>
-</ion-item>
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button detail="true">
+        <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
+        <ion-label>
+            <p class="item-heading">{{ item.courseName }}</p>
+            <p *ngIf="item.categoryName">{{ 'core.category' | translate }}: {{ item.categoryName }}</p>
+        </ion-label>
+    </ion-item>
+
+</ion-card>
diff --git a/src/core/features/tag/components/feed/core-tag-feed.html b/src/core/features/tag/components/feed/core-tag-feed.html
index 629c2189c..9e8f44309 100644
--- a/src/core/features/tag/components/feed/core-tag-feed.html
+++ b/src/core/features/tag/components/feed/core-tag-feed.html
@@ -1,11 +1,13 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" [href]="item.url" core-link [capture]="true">
-    <ion-avatar slot="start" *ngIf="item.avatarUrl">
-        <img [src]="item.avatarUrl" core-external-content alt="" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-    </ion-avatar>
-    <core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
-    </core-mod-icon>
-    <ion-label>
-        <h2>{{ item.heading }}</h2>
-        <p *ngFor="let text of item.details">{{ text }}</p>
-    </ion-label>
-</ion-item>
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" [href]="item.url" core-link [capture]="true">
+        <ion-avatar slot="start" *ngIf="item.avatarUrl">
+            <img [src]="item.avatarUrl" core-external-content alt="" role="presentation" onError="this.src='assets/img/user-avatar.png'">
+        </ion-avatar>
+        <core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
+        </core-mod-icon>
+        <ion-label>
+            <h2>{{ item.heading }}</h2>
+            <p *ngFor="let text of item.details">{{ text }}</p>
+        </ion-label>
+    </ion-item>
+</ion-card>
diff --git a/src/core/features/tag/pages/index-area/index-area.html b/src/core/features/tag/pages/index-area/index-area.html
index 5a03671d8..9cb089c17 100644
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
         <ng-container *ngIf="loaded">
             <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
         </ng-container>
diff --git a/src/core/features/user/components/tag-area/core-user-tag-area.html b/src/core/features/user/components/tag-area/core-user-tag-area.html
index f4f4a9392..bfd6c0af4 100644
--- a/src/core/features/user/components/tag-area/core-user-tag-area.html
+++ b/src/core/features/user/components/tag-area/core-user-tag-area.html
@@ -1,6 +1,9 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" core-user-link [userId]="item.user.id">
-    <core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
-    <ion-label>
-        <h2>{{ item.heading }}</h2>
-    </ion-label>
-</ion-item>
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
+        <core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
+        <ion-label>
+            <h2>{{ item.heading }}</h2>
+        </ion-label>
+    </ion-item>
+
+</ion-card>
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index d31800b14..295192bbe 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
         <ion-list *ngIf="user">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index e135eced7..5dbb82b82 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">