diff --git a/src/core/features/course/pages/index/index.module.ts b/src/core/features/course/pages/index/index.module.ts
index 314528baa..b3dcd1791 100644
--- a/src/core/features/course/pages/index/index.module.ts
+++ b/src/core/features/course/pages/index/index.module.ts
@@ -19,6 +19,7 @@ import { resolveModuleRoutes } from '@/app/app-routing.module';
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreCourseIndexPage } from '.';
 import { COURSE_INDEX_ROUTES } from './index-routing.module';
+import { CoreCoursePreviewPageComponentModule } from '../preview/preview.module';
 
 function buildRoutes(injector: Injector): Routes {
     const routes = resolveModuleRoutes(injector, COURSE_INDEX_ROUTES);
@@ -42,6 +43,7 @@ function buildRoutes(injector: Injector): Routes {
     ],
     imports: [
         CoreSharedModule,
+        CoreCoursePreviewPageComponentModule,
     ],
     declarations: [
         CoreCourseIndexPage,
diff --git a/src/core/features/course/pages/index/index.ts b/src/core/features/course/pages/index/index.ts
index 6f0f32b25..cf49aea06 100644
--- a/src/core/features/course/pages/index/index.ts
+++ b/src/core/features/course/pages/index/index.ts
@@ -28,6 +28,7 @@ import { CoreNavigator } from '@services/navigator';
 import { CONTENTS_PAGE_NAME } from '@features/course/course.module';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreCollapsibleHeaderDirective } from '@directives/collapsible-header';
+import { CoreCoursePreviewPage } from '../preview/preview.page';
 
 /**
  * Page that displays the list of courses the user is enrolled in.
@@ -279,10 +280,13 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
             return;
         }
 
-        CoreNavigator.navigateToSitePath(
-            `/course/${this.course.id}/preview`,
-            { params: { course: this.course, avoidOpenCourse: true } },
-        );
+        CoreDomUtils.openSideModal<void>({
+            component: CoreCoursePreviewPage,
+            componentProps: {
+                courseId: this.course.id,
+                course: this.course,
+            },
+        });
     }
 
     /**
diff --git a/src/core/features/course/pages/preview/preview.html b/src/core/features/course/pages/preview/preview.html
index 7aeaeda68..e787a7d42 100644
--- a/src/core/features/course/pages/preview/preview.html
+++ b/src/core/features/course/pages/preview/preview.html
@@ -8,6 +8,11 @@
                 {{'core.course.coursesummary' | translate}}
             </h1>
         </ion-title>
+        <ion-buttons slot="end" *ngIf="avoidOpenCourse">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
+            </ion-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -15,12 +20,10 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
-        <div *ngIf="courseImageUrl" class="core-course-thumb-parallax">
-            <div class="core-course-thumb">
-                <img [src]="courseImageUrl" core-external-content alt="" />
-            </div>
+        <div *ngIf="courseImageUrl" class="core-course-thumb">
+            <img [src]="courseImageUrl" core-external-content alt="" />
         </div>
-        <div class="core-course-thumb-parallax-content" *ngIf="course">
+        <div *ngIf="course">
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p *ngIf="course.categoryname">
@@ -40,6 +43,10 @@
                         </core-progress-bar>
                     </div>
                 </ion-label>
+                <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false" color="dark"
+                    [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
+                    <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
+                </ion-button>
             </ion-item>
 
             <ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
@@ -87,59 +94,53 @@
                     </ng-container>
                 </ion-label>
             </ion-item>
-
-            <!-- Enrol -->
-            <ng-container *ngIf="!isEnrolled">
-                <ion-item class="ion-text-wrap" *ngFor="let instance of selfEnrolInstances">
-                    <ion-label>
-                        <p class="item-heading">{{ instance.name }}</p>
-                        <ion-button expand="block" class="ion-margin-top" (click)="selfEnrolClicked(instance.id)">
-                            {{ 'core.courses.enrolme' | translate }}
-                        </ion-button>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="paypalEnabled">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.courses.otherenrolments' | translate }}</p>
-                        <ion-button expand="block" class="ion-margin-top" (click)="browserEnrol()">
-                            {{ 'core.courses.completeenrolmentbrowser' | translate }}
-                        </ion-button>
-                    </ion-label>
-                </ion-item>
-                <ion-item *ngIf="!selfEnrolInstances.length && !paypalEnabled">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.courses.notenrollable' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-            </ng-container>
-
-            <ion-button class="ion-margin" *ngIf="canAccessCourse && downloadCourseEnabled" (click)="prefetchCourse()" expand="block"
-                [attr.aria-label]="prefetchCourseData.statusTranslatable | translate">
-                <ion-icon *ngIf="(prefetchCourseData.status != statusDownloaded) && !prefetchCourseData.loading"
-                    [name]="prefetchCourseData.icon" slot="start" aria-hidden="true">
-                </ion-icon>
-                <ion-icon *ngIf="(prefetchCourseData.status == statusDownloaded) && !prefetchCourseData.loading" slot="start"
-                    [name]="prefetchCourseData.icon" color="success" aria-hidden="true" role="status">
-                </ion-icon>
-                <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-                <ion-label *ngIf="prefetchCourseData.status != statusDownloaded">{{ 'core.course.downloadcourse' | translate }}</ion-label>
-                <ion-label *ngIf="prefetchCourseData.status == statusDownloaded">{{ 'core.course.refreshcourse' | translate }}</ion-label>
-            </ion-button>
-
-            <ion-button class="ion-margin" (click)="openCourse()" *ngIf="!avoidOpenCourse && canAccessCourse" expand="block">
-                <ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>
-                    {{ 'core.course' | translate }}
-                </ion-label>
-            </ion-button>
-
-            <ion-button class="ion-margin" [href]="courseUrl" core-link [showBrowserWarning]="false" expand="block">
-                <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>
-                    {{ 'core.openinbrowser' | translate }}
-                </ion-label>
-            </ion-button>
-
         </div>
     </core-loading>
 </ion-content>
+
+<ion-footer>
+    <!-- Enrol -->
+    <ng-container *ngIf="!isEnrolled">
+        <ion-item class="ion-text-wrap" *ngFor="let instance of selfEnrolInstances">
+            <ion-label>
+                <p class="item-heading">{{ instance.name }}</p>
+                <ion-button expand="block" class="ion-margin-top" (click)="selfEnrolClicked(instance.id)">
+                    {{ 'core.courses.enrolme' | translate }}
+                </ion-button>
+            </ion-label>
+        </ion-item>
+       <ion-item class="ion-text-wrap" *ngIf="paypalEnabled">
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.otherenrolments' | translate }}</p>
+                <ion-button expand="block" class="ion-margin-top" (click)="browserEnrol()">
+                    {{ 'core.courses.completeenrolmentbrowser' | translate }}
+                </ion-button>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="!selfEnrolInstances.length && !paypalEnabled">
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.notenrollable' | translate }}</p>
+            </ion-label>
+        </ion-item>
+    </ng-container>
+
+    <ion-button class="ion-margin" *ngIf="canAccessCourse && downloadCourseEnabled" (click)="prefetchCourse()" expand="block"
+        [attr.aria-label]="prefetchCourseData.statusTranslatable | translate">
+        <ion-icon *ngIf="(prefetchCourseData.status != statusDownloaded) && !prefetchCourseData.loading" [name]="prefetchCourseData.icon"
+            slot="start" aria-hidden="true">
+        </ion-icon>
+        <ion-icon *ngIf="(prefetchCourseData.status == statusDownloaded) && !prefetchCourseData.loading" slot="start"
+            [name]="prefetchCourseData.icon" color="success" aria-hidden="true" role="status">
+        </ion-icon>
+        <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+        <ion-label *ngIf="prefetchCourseData.status != statusDownloaded">{{ 'core.course.downloadcourse' | translate }}</ion-label>
+        <ion-label *ngIf="prefetchCourseData.status == statusDownloaded">{{ 'core.course.refreshcourse' | translate }}</ion-label>
+    </ion-button>
+
+    <ion-button class="ion-margin" (click)="openCourse()" *ngIf="!avoidOpenCourse && canAccessCourse" expand="block">
+        <ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
+        <ion-label>
+            {{ 'core.course' | translate }}
+        </ion-label>
+    </ion-button>
+</ion-footer>
diff --git a/src/core/features/course/pages/preview/preview.module.ts b/src/core/features/course/pages/preview/preview.module.ts
index 168aed845..3ef168504 100644
--- a/src/core/features/course/pages/preview/preview.module.ts
+++ b/src/core/features/course/pages/preview/preview.module.ts
@@ -24,15 +24,22 @@ const routes: Routes = [
         component: CoreCoursePreviewPage,
     },
 ];
-
 @NgModule({
     imports: [
-        RouterModule.forChild(routes),
         CoreSharedModule,
     ],
     declarations: [
         CoreCoursePreviewPage,
     ],
+})
+export class CoreCoursePreviewPageComponentModule { }
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        CoreSharedModule,
+        CoreCoursePreviewPageComponentModule,
+    ],
     exports: [RouterModule],
 })
 export class CoreCoursePreviewPageModule { }
diff --git a/src/core/features/course/pages/preview/preview.page.ts b/src/core/features/course/pages/preview/preview.page.ts
index 425bf962b..561dcb8a4 100644
--- a/src/core/features/course/pages/preview/preview.page.ts
+++ b/src/core/features/course/pages/preview/preview.page.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { IonRefresher } from '@ionic/angular';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreSites } from '@services/sites';
@@ -29,7 +29,7 @@ import {
 import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate';
 import { CoreCourse, CoreCourseProvider } from '@features/course/services/course';
 import { CoreCourseHelper, CorePrefetchStatusInfo } from '@features/course/services/course-helper';
-import { NgZone, Platform, Translate } from '@singletons';
+import { ModalController, NgZone, Platform, Translate } from '@singletons';
 import { CoreConstants } from '@/core/constants';
 import { CoreCoursesSelfEnrolPasswordComponent } from '../../../courses/components/self-enrol-password/self-enrol-password';
 import { CoreNavigator } from '@services/navigator';
@@ -47,7 +47,9 @@ import { Subscription } from 'rxjs';
 })
 export class CoreCoursePreviewPage implements OnInit, OnDestroy {
 
-    course?: CoreCourseSummaryData;
+    @Input() course?: CoreCourseSummaryData;
+    @Input() courseId = 0;
+
     isEnrolled = false;
     canAccessCourse = true;
     selfEnrolInstances: CoreCourseEnrolmentMethod[] = [];
@@ -76,7 +78,6 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
     protected enrolUrl = '';
     protected pageDestroyed = false;
     protected courseStatusObserver?: CoreEventObserver;
-    protected courseId!: number;
     protected appResumeSubscription: Subscription;
     protected waitingForBrowserEnrol = false;
 
@@ -111,18 +112,24 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        try {
-            this.courseId = CoreNavigator.getRequiredRouteNumberParam('courseId');
-        } catch (error) {
-            CoreDomUtils.showErrorModal(error);
-            CoreNavigator.back();
+        if (!this.courseId) {
+            // Opened as a page.
+            try {
+                this.courseId = CoreNavigator.getRequiredRouteNumberParam('courseId');
+            } catch (error) {
+                CoreDomUtils.showErrorModal(error);
+                CoreNavigator.back();
+                this.closeModal(); // Just in case.
 
-            return;
+                return;
+            }
+
+            this.course = CoreNavigator.getRouteParam('course');
+        } else {
+            // Opened as a modal.
+            this.avoidOpenCourse = true;
         }
 
-        this.avoidOpenCourse = !!CoreNavigator.getRouteBooleanParam('avoidOpenCourse');
-        this.course = CoreNavigator.getRouteParam('course');
-
         const currentSiteUrl = CoreSites.getRequiredCurrentSite().getURL();
         this.enrolUrl = CoreTextUtils.concatenatePaths(currentSiteUrl, 'enrol/index.php?id=' + this.courseId);
         this.courseUrl = CoreTextUtils.concatenatePaths(currentSiteUrl, 'course/view.php?id=' + this.courseId);
@@ -452,6 +459,13 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * Close the modal.
+     */
+    closeModal(): void {
+        ModalController.dismiss();
+    }
+
     /**
      * Prefetch the course.
      */
diff --git a/src/core/features/course/pages/preview/preview.scss b/src/core/features/course/pages/preview/preview.scss
index 8f159c333..ae3a0347f 100644
--- a/src/core/features/course/pages/preview/preview.scss
+++ b/src/core/features/course/pages/preview/preview.scss
@@ -1,43 +1,12 @@
 :host {
-    ion-content:not(.animating) {
-        &::part(scroll) {
-            perspective: 1px;
-            perspective-origin: center top;
-            transform-style: preserve-3d;
-        }
-
-        .core-course-thumb {
-            transform-origin: center top;
-
-            --scroll-factor: 0.5;
-            --translate-z: calc(-2 * var(--scroll-factor))px;
-            --scale: calc(1 + var(--scroll-factor) * 2);
-
-            /**
-            * Calculated with scroll-factor: 0.5;
-            * translate-z: -2 * $scroll-factor px;
-            * scale: 1 + $scroll-factor * 2;
-            */
-            transform: translateZ(-1px) scale(2);
-        }
-    }
-
-    .core-course-thumb-parallax-content {
-        transform: translateZ(0);
-        -webkit-filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
-    }
-
-    .core-course-thumb-parallax {
+    .core-course-thumb {
+        overflow: hidden;
+        text-align: center;
         height: 40vw;
         max-height: 35vh;
         z-index: -1;
         overflow: hidden;
-    }
-
-    .core-course-thumb {
-        overflow: hidden;
-        text-align: center;
+        border-bottom: 1px solid var(--stroke);
     }
 
 
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
index ce23461e3..f1140b4ec 100644
--- a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
@@ -58,7 +58,6 @@ export class CoreMainMenuUserButtonComponent implements OnInit {
 
         CoreDomUtils.openSideModal<void>({
             component: CoreMainMenuUserMenuComponent,
-            cssClass: 'core-modal-lateral',
         });
     }