diff --git a/src/addons/mod/resource/services/handlers/module.ts b/src/addons/mod/resource/services/handlers/module.ts
index a889ac9ed..0eaab6861 100644
--- a/src/addons/mod/resource/services/handlers/module.ts
+++ b/src/addons/mod/resource/services/handlers/module.ts
@@ -95,7 +95,7 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
 
         this.getResourceData(module, courseId, handlerData).then((extra) => {
             handlerData.extraBadge = extra;
-            handlerData.extraBadgeColor = 'light';
+            handlerData.extraBadgeColor = '';
 
             return;
         }).catch(() => {
diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts
index 87c653fb2..712e87e37 100644
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@@ -14,7 +14,7 @@
 
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 
-import { CoreCourseModuleData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper';
+import { CoreCourseModuleData, CoreCourseSection } from '@features/course/services/course-helper';
 import {
     CoreCourseModuleCompletionStatus,
     CoreCourseModuleCompletionTracking,
@@ -126,7 +126,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
      * @param event Event.
      * @param section Selected section object.
      */
-    selectSection(event: Event, section: CoreCourseSectionWithStatus): void {
+    selectSection(event: Event, section: CoreCourseSection): void {
         if (section.uservisible !== false) {
             ModalController.dismiss({ event, section });
         }
@@ -139,7 +139,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
      * @param section Selected section object.
      * @param module Selected module object.
      */
-    selectModule(event: Event,section: CoreCourseSectionWithStatus, module: CoreCourseModuleData): void {
+    selectModule(event: Event,section: CoreCourseSection, module: CoreCourseModuleData): void {
         if (module.uservisible !== false) {
             ModalController.dismiss({ event, section, module });
         }
@@ -147,7 +147,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
 
 }
 
-type CourseIndexSection = Omit<CoreCourseSectionWithStatus, 'modules'> & {
+type CourseIndexSection = Omit<CoreCourseSection, 'modules'> & {
     highlighted?: boolean;
     expanded?: boolean;
     modules: (CoreCourseModuleData & {
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 1b34598a3..3c8036beb 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -74,19 +74,23 @@
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </h2>
-                <p *ngIf="section.visible === 0 || section.availabilityinfo">
-                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap">
+                <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">
+                        <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">
+                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap block">
+                        <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">
+                    <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap block">
+                        <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>
+            <ion-badge class="ion-text-wrap block" *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
         </ion-item-divider>
 
         <ion-item class="ion-text-wrap" *ngIf="section.summary">
diff --git a/src/core/features/course/components/format/format.ts b/src/core/features/course/components/format/format.ts
index 760637898..25a3cd218 100644
--- a/src/core/features/course/components/format/format.ts
+++ b/src/core/features/course/components/format/format.ts
@@ -38,7 +38,6 @@ import {
     CoreCourseModuleData,
     CoreCourseModuleCompletionData,
     CoreCourseSection,
-    CoreCourseSectionWithStatus,
 } from '@features/course/services/course-helper';
 import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
@@ -47,7 +46,6 @@ import { CoreUtils } from '@services/utils/utils';
 import { CoreCourseCourseIndexComponent, CoreCourseIndexSectionWithModule } from '../course-index/course-index';
 import { CoreBlockHelper } from '@features/block/services/block-helper';
 import { CoreNavigator } from '@services/navigator';
-import { database } from 'faker';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
 
 /**
@@ -70,7 +68,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     static readonly LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called.
 
     @Input() course!: CoreCourseAnyCourseData; // The course to render.
-    @Input() sections: CoreCourseSectionWithStatus[] = []; // List of course sections.
+    @Input() sections: CoreCourseSectionToDisplay[] = []; // List of course sections.
     @Input() initialSectionId?: number; // The section to load first (by ID).
     @Input() initialSectionNumber?: number; // The section to load first (by number).
     @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section.
@@ -98,6 +96,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     stealthModulesSectionId: number = CoreCourseProvider.STEALTH_MODULES_SECTION_ID;
     loaded = false;
     progress?: number;
+    highlighted?: string;
 
     protected selectTabObserver?: CoreEventObserver;
     protected completionObserver?: CoreEventObserver;
@@ -220,6 +219,10 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         // Format has changed or it's the first time, load all the components.
         this.lastCourseFormat = this.course.format;
 
+        this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course);
+        const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
+        currentSection.highlighted = true;
+
         await Promise.all([
             this.loadCourseFormatComponent(),
             this.loadCourseSummaryComponent(),
@@ -559,3 +562,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     }
 
 }
+
+type CoreCourseSectionToDisplay = CoreCourseSection & {
+    highlighted?: boolean;
+};
diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index 571e9f15a..dbdc18616 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -4,16 +4,19 @@
     <ng-container *ngIf="completion.istrackeduser">
         <ng-container *ngFor="let rule of details">
             <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
                 <ion-label><strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }}
                 </ion-label>
             </ion-chip>
 
             <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
                 <ion-label><strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }}
                 </ion-label>
             </ion-chip>
 
-            <ion-chip *ngIf="rule.statusincomplete" color="medium" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+            <ion-chip *ngIf="rule.statusincomplete" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
                 <ion-label><strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
                 </ion-label>
             </ion-chip>
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index 88060b6ca..864dd98a5 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -19,12 +19,21 @@
     </ion-label>
 </ion-item>
 <ng-content select="[description]"></ng-content>
-<!-- Activity dates. -->
-<ion-item class="ion-text-wrap core-module-dates" lines="none" *ngIf="showCompletion && module.dates?.length">
+
+<ion-item class="ion-text-wrap core-module-dates" lines="none" *ngIf="showCompletion && (module.dates?.length ||
+(module.completiondata && module.completiondata.isautomatic && module.uservisible))">
     <ion-label>
-        <p *ngFor="let date of module.dates">
-            <strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}
-        </p>
+        <!-- Activity dates. -->
+        <div *ngIf="module.dates?.length" class="core-module-dates">
+            <p *ngFor="let date of module.dates">
+                <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp * 1000 |
+                coreFormatDate:'strftimedatetime' }}
+            </p>
+        </div>
+        <!-- Module completion. -->
+        <core-course-module-completion [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
+            [showCompletionConditions]="true">
+        </core-course-module-completion>
     </ion-label>
 </ion-item>
 <ng-content></ng-content>
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index 514315b48..f540001d2 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -16,4 +16,9 @@
     core-mod-icon {
         align-self: flex-start;
     }
+
+    .core-module-dates ion-icon {
+        @include margin-horizontal(null, 8px);
+    }
+
 }
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index d205a5a65..8f8e5d6e3 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -2,22 +2,20 @@
 
     <ng-container *ngIf="completion.istrackeduser">
         <ng-container *ngIf="completion.state">
-            <ion-button color="success" expand="block" fill="outline" [attr.aria-label]="accessibleDescription"
-                (click)="completionClicked($event)">
+            <ion-button color="success" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)">
                 <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                 {{ 'core.course.completion_manual:done' | translate }}
             </ion-button>
         </ng-container>
         <ng-container *ngIf="!completion.state">
-            <ion-button color="dark" expand="block" fill="outline" [attr.aria-label]="accessibleDescription"
-                (click)="completionClicked($event)">
+            <ion-button color="dark" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)">
                 {{ 'core.course.completion_manual:markdone' | translate }}
             </ion-button>
         </ng-container>
     </ng-container>
 
     <ng-container *ngIf="!completion.istrackeduser">
-        <ion-button disabled="true" color="dark" expand="block" fill="outline">
+        <ion-button disabled="true" color="dark" fill="outline">
             {{ 'core.course.completion_manual:markdone' | translate }}
         </ion-button>
     </ng-container>
diff --git a/src/core/features/course/components/module-navigation/core-course-module-navigation.html b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
index 7d0fde92d..497b0e42e 100644
--- a/src/core/features/course/components/module-navigation/core-course-module-navigation.html
+++ b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
@@ -6,12 +6,10 @@
                 <ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
-        <ion-col *ngIf="showCompletion && (currentModule.completiondata &&
-            (currentModule.completiondata.isautomatic || showManualCompletion) && currentModule.uservisible)">
+        <ion-col *ngIf="showCompletion && (currentModule.completiondata && showManualCompletion && currentModule.uservisible)">
             <!-- Module completion. -->
             <core-course-module-completion [completion]="currentModule.completiondata" [moduleName]="currentModule.name"
-                [moduleId]="currentModule.id" [showCompletionConditions]="true" [showManualCompletion]="showManualCompletion"
-                (completionChanged)="completionChanged.emit($event)">
+                [moduleId]="currentModule.id" [showManualCompletion]="true" (completionChanged)="completionChanged.emit($event)">
             </core-course-module-completion>
         </ion-col>
         <ion-col size="auto">
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 1f5af1171..adfa73f2a 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -18,25 +18,26 @@
                         [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
                     </core-format-text>
                 </p>
-                <ion-badge *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
-                    class="ion-text-wrap ion-text-start">
-                    <span [innerHTML]="module.handlerData.extraBadge"></span>
-                </ion-badge>
-                <ion-badge *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
-                    {{ 'core.course.hiddenfromstudents' | translate }}
-                </ion-badge>
-                <ion-badge *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
-                    {{ 'core.course.hiddenoncoursepage' | translate }}
-                </ion-badge>
-                <div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo">
-                    <ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
-                    <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="module.course" class="ion-text-wrap">
-                    </core-format-text>
-                </div>
-                <ion-badge *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap">
-                    {{ 'core.course.manualcompletionnotsynced' | translate }}
-                </ion-badge>
+                <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0">
+                    <ion-label>
+                        <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
+                        {{ 'core.course.todo' | translate }}
+                    </ion-label>
+                </ion-chip>
+                <ion-chip class="completioninfo completion_complete" *ngIf="completionStatus === 1 || completionStatus === 2"
+                    color="success">
+                    <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
+                    <ion-label>{{'core.course.done' | translate }}</ion-label>
+                </ion-chip>
+                <ion-chip class="completioninfo completion_fail" *ngIf="completionStatus === 3" color="danger">
+                    <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
+                    <ion-label>{{'core.course.failed' | translate }}</ion-label>
+                </ion-chip>
+
+                <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
+                    class="ion-text-wrap ion-text-start" [outline]="true">
+                    <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
+                </ion-chip>
             </ion-label>
             <!-- Buttons. -->
             <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@@ -63,10 +64,15 @@
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }" detail="false">
             <ion-label>
+                <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
+                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
+                </core-format-text>
+
                 <!-- Activity dates. -->
                 <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
                     <p *ngFor="let date of module.dates">
-                        <strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}
+                        <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp *
+                        1000 | coreFormatDate:'strftimedatetime' }}
                     </p>
                 </div>
 
@@ -76,9 +82,31 @@
                     [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
                 </core-course-module-completion>
 
-                <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
-                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
-                </core-format-text>
+                <ion-chip *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap block">
+                    <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
+                    <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
+                </ion-chip>
+
+                <!-- Availability -->
+                <ion-chip *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap block">
+                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                    <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
+                </ion-chip>
+
+                <ion-chip *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap block">
+                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                    <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
+                </ion-chip>
+
+                <ion-chip class="core-module-availabilityinfo ion-text-wrap block" *ngIf="module.availabilityinfo">
+                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                    <ion-label>
+                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="module.course" class="ion-text-wrap">
+                        </core-format-text>
+                    </ion-label>
+                </ion-chip>
+
             </ion-label>
         </ion-item>
     </ng-container>
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index 2253562e5..faf96e525 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/src/core/features/course/components/module/module.scss
@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
 
     .item.core-module-main-item {
@@ -59,4 +61,9 @@
         --inner-border-width: 0px;
     }
 
+    .core-module-availabilityinfo  ion-icon,
+    .core-module-dates ion-icon {
+        @include margin-horizontal(null, 8px);
+    }
+
 }
diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts
index 936901f5f..287c2a484 100644
--- a/src/core/features/course/components/module/module.ts
+++ b/src/core/features/course/components/module/module.ts
@@ -20,7 +20,7 @@ import {
     CoreCourseModuleCompletionData,
     CoreCourseSection,
 } from '@features/course/services/course-helper';
-import { CoreCourse } from '@features/course/services/course';
+import { CoreCourse, CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking } from '@features/course/services/course';
 import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate';
 
 /**
@@ -47,6 +47,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     hasInfo = false;
     showLegacyCompletion = false; // Whether to show module completion in the old format.
     showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled.
+    completionStatus?: CoreCourseModuleCompletionStatus;
 
     /**
      * Component being initialized.
@@ -61,13 +62,22 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
         }
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
+        this.completionStatus = this.module.completiondata === undefined ||
+                    this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
+            ? undefined
+            : this.module.completiondata.state;
+
         this.hasInfo = !!(
             this.module.description ||
             (this.showActivityDates && this.module.dates && this.module.dates.length) ||
             (this.module.completiondata &&
                 ((this.showManualCompletion && !this.module.completiondata.isautomatic) ||
                     (this.showCompletionConditions && this.module.completiondata.isautomatic))
-            )
+            ) ||
+            this.module.completiondata?.offline ||
+            (this.module.visible === 0 && (!this.section || this.section.visible)) ||
+            (this.module.visible !== 0 && this.module.isStealth) ||
+            (this.module.availabilityinfo)
         );
     }
 
diff --git a/src/core/features/course/format/singleactivity/components/singleactivity.ts b/src/core/features/course/format/singleactivity/components/singleactivity.ts
index b3d11a9d7..499d7f805 100644
--- a/src/core/features/course/format/singleactivity/components/singleactivity.ts
+++ b/src/core/features/course/format/singleactivity/components/singleactivity.ts
@@ -19,7 +19,7 @@ import { CoreCourseUnsupportedModuleComponent } from '@features/course/component
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
 import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
 import { IonRefresher } from '@ionic/angular';
-import { CoreCourseModuleCompletionData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper';
+import { CoreCourseModuleCompletionData, CoreCourseSection } from '@features/course/services/course-helper';
 import { CoreBlockHelper } from '@features/block/services/block-helper';
 import { CoreCourse } from '@features/course/services/course';
 
@@ -36,7 +36,7 @@ import { CoreCourse } from '@features/course/services/course';
 export class CoreCourseFormatSingleActivityComponent implements OnChanges {
 
     @Input() course?: CoreCourseAnyCourseData; // The course to render.
-    @Input() sections?: CoreCourseSectionWithStatus[]; // List of course sections.
+    @Input() sections?: CoreCourseSection[]; // List of course sections.
     @Input() initialSectionId?: number; // The section to load first (by ID).
     @Input() initialSectionNumber?: number; // The section to load first (by number).
     @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section.
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index 711f8c740..bd5b02506 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -27,33 +27,35 @@
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true">
 
-            <div class="safe-area-padding-horizontal ion-padding" *ngIf="module.handlerData?.extraBadge">
-                <ion-badge class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
-                    <span [innerHTML]="module.handlerData?.extraBadge"></span>
-                </ion-badge>
+            <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
+                <ion-chip class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
+                    <ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
+                </ion-chip>
             </div>
-            <div class="safe-area-padding-horizontal ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
-                <ion-badge class="ion-text-wrap">
-                    {{ 'core.course.hiddenfromstudents' | translate }}
-                </ion-badge>
+            <div class="ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
+                <ion-chip class="ion-text-wrap">
+                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                    <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
+                </ion-chip>
             </div>
-            <div class="safe-area-padding-horizontal ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
-                <ion-badge class="ion-text-wrap">
-                    {{ 'core.course.hiddenoncoursepage' | translate }}
-                </ion-badge>
+            <div class="ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
+                <ion-chip class="ion-text-wrap">
+                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
+                    <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
+                </ion-chip>
             </div>
-            <div class="safe-area-padding-horizontal ion-padding core-module-availabilityinfo" *ngIf="module.availabilityinfo">
-                <ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
-                <div>
+            <div class="ion-padding core-module-availabilityinfo" *ngIf="module.availabilityinfo">
+                <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                <ion-label>
                     <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                         [courseId]="courseId" class="ion-text-wrap">
                     </core-format-text>
-                </div>
+                </ion-label>
             </div>
-            <div class="safe-area-padding-horizontal ion-padding" *ngIf="module.completiondata?.offline">
-                <ion-badge color="warning" class="ion-text-wrap">
-                    {{ 'core.course.manualcompletionnotsynced' | translate }}
-                </ion-badge>
+            <div class="ion-padding" *ngIf="module.completiondata?.offline">
+                <ion-chip color="warning" class="ion-text-wrap">
+                    <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
+                </ion-chip>
             </div>
 
             <core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module>
diff --git a/src/core/features/siteplugins/components/course-format/course-format.ts b/src/core/features/siteplugins/components/course-format/course-format.ts
index 025c1036e..9fd9e6459 100644
--- a/src/core/features/siteplugins/components/course-format/course-format.ts
+++ b/src/core/features/siteplugins/components/course-format/course-format.ts
@@ -16,7 +16,7 @@ import { Component, OnChanges, Input, ViewChild, Output, EventEmitter } from '@a
 import { IonRefresher } from '@ionic/angular';
 
 import { CoreCourseFormatComponent } from '@features/course/components/format/format';
-import { CoreCourseModuleCompletionData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper';
+import { CoreCourseModuleCompletionData, CoreCourseSection } from '@features/course/services/course-helper';
 import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
 import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
 import { CoreSitePlugins, CoreSitePluginsContent } from '@features/siteplugins/services/siteplugins';
@@ -33,7 +33,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 export class CoreSitePluginsCourseFormatComponent implements OnChanges {
 
     @Input() course?: CoreCourseAnyCourseData; // The course to render.
-    @Input() sections?: CoreCourseSectionWithStatus[]; // List of course sections. The status will be calculated in this component.
+    @Input() sections?: CoreCourseSection[]; // List of course sections. The status will be calculated in this component.
     @Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
     @Input() initialSectionId?: number; // The section to load first (by ID).
     @Input() initialSectionNumber?: number; // The section to load first (by number).
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index cd61d7f89..74a6f739d 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -844,6 +844,8 @@ ion-select-popover ion-item.core-select-option-title {
 
 ion-chip {
     line-height: 1.1;
+    border-radius: var(--big-radius);
+    @include padding-horizontal(16px);
 }
 
 ion-searchbar {
@@ -1167,9 +1169,8 @@ ion-item.item-input ion-input.has-focus {
     }
 }
 
-// Ionic set this value to 0 without px that provoked miscalculations.
 ion-item-divider {
-    --inner-padding-end: 0px;
+    --inner-padding-end: 8px;
 }
 
 // Change default outline.