diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 5e07e3ae6..892a63767 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -24,7 +24,7 @@
             </ion-item>
             <ng-container *ngIf="allSectionId != section.id">
                 <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
-                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0"
+                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
                     [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
                     <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
                         class="expandable-status-icon" (click)="toggleExpand($event, section)"
@@ -40,9 +40,13 @@
                             </core-format-text>
                         </h2>
                     </ion-label>
-                    <ion-badge *ngIf="section.highlighted && highlighted">{{highlighted}}</ion-badge>
+                    <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
                     <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
                         [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
+                        [attr.aria-label]="'core.notavailable' | translate"></ion-icon>
+                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
+                        [attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
                 </ion-item>
                 <ng-container *ngIf="section.expanded">
                     <ng-container *ngFor="let module of section.modules">
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 e530867f0..2c2503e7b 100644
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@@ -78,8 +78,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         // Clone sections to add information.
         this.sectionsToRender = this.sections
             .filter((section) => !section.hiddenbynumsections &&
-                section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID &&
-                section.uservisible !== false)
+                section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID)
             .map((section) => {
                 const modules = section.modules
                     .filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink)
@@ -103,6 +102,8 @@ export class CoreCourseCourseIndexComponent implements OnInit {
                     id: section.id,
                     name: section.name,
                     availabilityinfo: !!section.availabilityinfo,
+                    visible: !!section.visible,
+                    uservisible: section.uservisible !== false,
                     expanded: section.id === this.selectedId,
                     highlighted: currentSectionData.section.id === section.id,
                     hasVisibleModules: modules.length > 0,
@@ -160,6 +161,8 @@ type CourseIndexSection = {
     expanded: boolean;
     hasVisibleModules: boolean;
     availabilityinfo: boolean;
+    visible: boolean;
+    uservisible: boolean;
     modules: {
         id: number;
         course: number;