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 e70f1b6fb..5e07e3ae6 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -24,8 +24,8 @@
             </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" detail="false"
-                    sticky="true">
+                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0"
+                    [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)"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
@@ -46,7 +46,7 @@
                 </ion-item>
                 <ng-container *ngIf="section.expanded">
                     <ng-container *ngFor="let module of section.modules">
-                        <ion-item class="module" [class.item-dimmed]="!module.visible"
+                        <ion-item class="module" [class.item-dimmed]="!module.visible" [class.item-hightlighted]="section.highlighted"
                             (click)="selectSectionOrModule($event, section.id, module.id)" button>
                             <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
                                 slot="start" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss
index 130cdf756..db08d3ad2 100644
--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@@ -11,56 +11,68 @@ core-progress-bar {
     }
 }
 
-ion-icon.completioninfo {
-    font-size: 10px;
-    width: 18px;
-}
-
-ion-item.module::part(native) {
-    --padding-start: 0;
-}
-
-ion-item.module ion-icon {
-    margin: 0;
-    @include padding(12px, 16px, 12px, 16px);
-}
-
-ion-item.core-course-index-all::part(native) {
-    --padding-start: 16px;
-}
-
-ion-item.item.item-current {
-    --background: var(--primary-tint);
-    border: 0;
-}
-
-ion-icon.restricted {
-    font-size: 14px;
-}
-
-ion-item.item.divider.section {
-    --padding-start: 0px;
+ion-item.item {
+    &.core-course-index-all::part(native) {
+        --padding-start: 16px;
+    }
 
     &.item-current {
-        ion-badge {
-            border: 1px solid var(--primary-contrast);
+        --background: var(--primary-tint);
+        border: 0;
+    }
+
+    &.item-hightlighted {
+        @include safe-area-border-start(var(--selected-item-border-width), solid,  var(--selected-item-color));
+    }
+
+    &.divider.section {
+        --padding-start: 0px;
+
+        &.item-current {
+            ion-icon.expandable-status-icon {
+                color: var(--primary-contrast);
+
+                &:hover {
+                    background: var(--primary-shade);
+                }
+            }
         }
 
         ion-icon.expandable-status-icon {
-            color: var(--primary-contrast);
-
+            padding: 13px;
+            margin: 3px;
+            border-radius: 50%;
             &:hover {
-                background: var(--primary-shade);
+                background: var(--gray-300);
             }
         }
+
+        &.item-hightlighted ion-icon.expandable-status-icon {
+            @include margin-horizontal(-2px, null);
+        }
     }
 
-    ion-icon.expandable-status-icon {
-        padding: 13px;
-        margin: 3px;
-        border-radius: 50%;
-        &:hover {
-            background: var(--gray-300);
+    &.module {
+        &::part(native) {
+            --padding-start: 0;
+        }
+
+        &.item-hightlighted ion-icon.completioninfo {
+            @include padding-horizontal(11px, null);
+        }
+    }
+
+    ion-icon {
+        margin: 0;
+        padding: 12px 16px;
+
+        &.completioninfo {
+            font-size: 10px;
+            width: 18px;
+        }
+
+        &.restricted {
+            font-size: 14px;
         }
     }
 }