diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index cde4c68c3..d8932c734 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -23,134 +23,139 @@
             </ion-icon>
         </div>
         <div *ngIf="course" class="course-container">
-            <ion-item class="ion-text-wrap course-name">
-                <ion-label>
-                    <p *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>
-                    </p>
-                    <h1>
-                        <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
-                        <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
-                        </core-format-text>
-                    </h1>
-                    <ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
-                        <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
-                        <ion-label>
-                            <core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
-                            </core-format-text>
-                        </ion-label>
-                    </ion-chip>
-                </ion-label>
-                <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
-                    [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
-                    <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
-                <ion-label>
-                    <div class="core-course-progress" *ngIf="progress !== undefined">
-                        <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
-                        </core-progress-bar>
-                    </div>
-                    <div *ngIf="course.startdate || course.enddate" class="core-course-dates">
-                        <p *ngIf="course.startdate">
-                            <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
-                            <strong>{{ 'core.course.startdate' | translate }}</strong><br>
-                            {{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
-                        </p>
-                        <p *ngIf="course.enddate">
-                            <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
-                            <strong>{{ 'core.course.enddate' | translate }}</strong><br>
-                            {{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
-                        </p>
-                    </div>
-                </ion-label>
-            </ion-item>
-
-            <ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
-                <ion-label>
-                    <p class="item-heading">
-                        {{'core.course.coursesummary' | translate}}
-                    </p>
-                    <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
-                </ion-label>
-            </ion-item>
-
-            <ion-list *ngIf="course.contacts && course.contacts.length">
-                <ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
-                    [attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
-                    <ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
-                    </ion-icon>
+            <div class="list-item-limited-width">
+                <ion-item class="ion-text-wrap course-name">
                     <ion-label>
-                        <p class="item-heading">
-                            {{ 'core.teachers' | translate }}
+                        <p *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>
                         </p>
+                        <h1>
+                            <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
+                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
+                            </core-format-text>
+                        </h1>
+                        <ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
+                            <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
+                            <ion-label>
+                                <core-format-text [text]="course.categoryname" contextLevel="coursecat"
+                                    [contextInstanceId]="course.categoryid">
+                                </core-format-text>
+                            </ion-label>
+                        </ion-chip>
+                    </ion-label>
+                    <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
+                        [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
+                        <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
+                    <ion-label>
+                        <div class="core-course-progress" *ngIf="progress !== undefined">
+                            <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
+                            </core-progress-bar>
+                        </div>
+                        <div *ngIf="course.startdate || course.enddate" class="core-course-dates">
+                            <p *ngIf="course.startdate">
+                                <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
+                                <strong>{{ 'core.course.startdate' | translate }}</strong><br>
+                                {{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
+                            </p>
+                            <p *ngIf="course.enddate">
+                                <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
+                                <strong>{{ 'core.course.enddate' | translate }}</strong><br>
+                                {{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
+                            </p>
+                        </div>
                     </ion-label>
                 </ion-item>
-                <ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
-                    <ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
-                        [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
-                        <core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
-                            [linkProfile]="false">
-                        </core-user-avatar>
+
+                <ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
+                    <ion-label>
+                        <p class="item-heading">
+                            {{'core.course.coursesummary' | translate}}
+                        </p>
+                        <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
+                        </core-format-text>
+                    </ion-label>
+                </ion-item>
+
+                <ion-list *ngIf="course.contacts && course.contacts.length">
+                    <ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
+                        [attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                        <ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
+                            class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
+                        </ion-icon>
                         <ion-label>
-                            <p class="item-heading">{{contact.fullname}}</p>
+                            <p class="item-heading">
+                                {{ 'core.teachers' | translate }}
+                            </p>
                         </ion-label>
                     </ion-item>
-                </ng-container>
-                <core-spacer></core-spacer>
-            </ion-list>
-
-            <ion-item class="ion-text-wrap" *ngIf="course.customfields">
-                <ion-label>
-                    <ng-container *ngFor="let field of course.customfields">
-                        <div *ngIf="field.value"
-                            class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
-                            <span class="core-customfieldname">
-                                <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
-                                </core-format-text>
-                                <span class="core-customfieldseparator">: </span>
-                            </span>
-                            <span class="core-customfieldvalue">
-                                <core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea'  ? '' : null"
-                                    contextLevel="course" [contextInstanceId]="course.id">
-                                </core-format-text>
-                            </span>
-                        </div>
+                    <ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
+                        <ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
+                            [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
+                            <core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
+                                [linkProfile]="false">
+                            </core-user-avatar>
+                            <ion-label>
+                                <p class="item-heading">{{contact.fullname}}</p>
+                            </ion-label>
+                        </ion-item>
                     </ng-container>
-                </ion-label>
-            </ion-item>
+                    <core-spacer></core-spacer>
+                </ion-list>
+
+                <ion-item class="ion-text-wrap" *ngIf="course.customfields">
+                    <ion-label>
+                        <ng-container *ngFor="let field of course.customfields">
+                            <div *ngIf="field.value"
+                                class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
+                                <span class="core-customfieldname">
+                                    <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
+                                    </core-format-text>
+                                    <span class="core-customfieldseparator">: </span>
+                                </span>
+                                <span class="core-customfieldvalue">
+                                    <core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea'  ? '' : null"
+                                        contextLevel="course" [contextInstanceId]="course.id">
+                                    </core-format-text>
+                                </span>
+                            </div>
+                        </ng-container>
+                    </ion-label>
+                </ion-item>
+            </div>
         </div>
     </core-loading>
 </ion-content>
 
 <ion-footer *ngIf="course && dataLoaded">
-    <ng-container *ngIf="canAccessCourse">
-        <ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
-            expand="block">
-            <ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{item.data.title | translate }}</ion-label>
+    <div class="list-item-limited-width">
+        <ng-container *ngIf="canAccessCourse">
+            <ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
+                expand="block">
+                <ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>{{item.data.title | translate }}</ion-label>
+            </ion-button>
+        </ng-container>
+
+        <ion-button expand="block" (click)="enrolMe()" *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || otherEnrolments)"
+            class="ion-text-wrap">
+            {{ 'core.courses.enrolme' | translate }}
         </ion-button>
-    </ng-container>
 
-    <ion-button expand="block" (click)="enrolMe()" *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || otherEnrolments)"
-        class="ion-text-wrap">
-        {{ 'core.courses.enrolme' | translate }}
-    </ion-button>
+        <ion-card class="core-info-card ion-text-wrap" *ngIf="!isEnrolled && !selfEnrolInstances.length && !otherEnrolments">
+            <ion-item>
+                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
+            </ion-item>
+        </ion-card>
 
-    <ion-card class="core-info-card ion-text-wrap" *ngIf="!isEnrolled && !selfEnrolInstances.length && !otherEnrolments">
-        <ion-item>
-            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
-        </ion-item>
-    </ion-card>
-
-    <ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
-        <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
-        {{ 'core.course.viewcourse' | translate }}
-    </ion-button>
+        <ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
+            <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
+            {{ 'core.course.viewcourse' | translate }}
+        </ion-button>
+    </div>
 </ion-footer>
diff --git a/src/core/features/course/pages/course-summary/course-summary.scss b/src/core/features/course/pages/course-summary/course-summary.scss
index 477f4a454..17f6c76af 100644
--- a/src/core/features/course/pages/course-summary/course-summary.scss
+++ b/src/core/features/course/pages/course-summary/course-summary.scss
@@ -39,11 +39,14 @@
     .course-container {
         position: relative;
         top: calc(var(--thumb-height) - var(--big-radius));
+        border-radius: var(--big-radius) var(--big-radius) 0 0;
+        background-color: var(--ion-background-color);
+        box-shadow: var(--drop-shadow-top);
+        clip-path: inset(-5px 0px 0px 0px);
     }
 
     .course-name {
-        border-radius: var(--big-radius) var(--big-radius) 0 0;
-        box-shadow: var(--drop-shadow-top);
+        --background: transparent;
         ion-label {
             margin-bottom: 0px;
         }