diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index 7bacb0dd0..0a3185058 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -34,18 +34,18 @@
         </div>
 
         <ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal"
-            *ngIf="displayCourseIndex && sections?.length">
-            <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline" color="primary"
+            *ngIf="displayCourseIndex && (previousSection || nextSection)">
+            <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" color="primary" fill="solid" expand="block"
                 [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
-                <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                <core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
+                <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
+                <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
             </ion-button>
-            <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid" color="primary"
+            <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" color="primary" fill="solid" expand="block"
                 [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
-                <core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
+                <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
-                <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
     </core-loading>
@@ -74,26 +74,32 @@
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </h2>
-                <p *ngIf="section.visible === 0 || section.availabilityinfo || (section.highlighted && highlighted)">
-                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap block">
+                <div *ngIf="section.visible === 0 && section.uservisible !== false">
+                    <ion-chip>
                         <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        {{ 'core.course.hiddenfromstudents' | translate }}
-                    </ion-badge>
-                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap block">
+                        <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
+                    </ion-chip>
+                </div>
+                <div *ngIf="section.visible === 0 && section.uservisible === false">
+                    <ion-chip>
                         <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        {{ 'core.notavailable' | translate }}
-                    </ion-badge>
-                    <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap block">
+                        <ion-label>{{ 'core.notavailable' | translate }}</ion-label>
+                    </ion-chip>
+                </div>
+                <div *ngIf="section.availabilityinfo">
+                    <ion-chip>
                         <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                        <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id">
-                        </core-format-text>
-                    </ion-badge>
-                </p>
+                        <ion-label>
+                            <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id">
+                            </core-format-text>
+                        </ion-label>
+                    </ion-chip>
+                </div>
             </ion-label>
-            <ion-badge class="ion-text-wrap block" *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
+            <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
         </ion-item-divider>
 
-        <ion-item class="ion-text-wrap" *ngIf="section.summary">
+        <ion-item class="ion-text-wrap" *ngIf="section.summary" lines="none">
             <ion-label>
                 <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index 7c33a30cc..8167ba66a 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -1,17 +1,12 @@
 .core-course-section-nav-buttons {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
 
-    core-format-text {
+    ion-button {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         text-transform: none;
-    }
-}
-
-.course-section {
-    ion-badge {
-        text-align: start;
+        flex: 1;
     }
 }