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 a994ca87e..0d27a9a42 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -13,7 +13,7 @@
 <ion-content>
     <ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
         <ng-container *ngFor="let section of sectionsToRender">
-            <ion-item *ngIf="allSectionId == section.id" class="ion-text-wrap divider core-course-index-all"
+            <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
                 (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false">
                 <ion-label>
                     <h2>
@@ -23,7 +23,7 @@
                 </ion-label>
             </ion-item>
             <ng-container *ngIf="allSectionId != section.id">
-                <ion-item class="ion-text-wrap divider section" (click)="selectSectionOrModule($event, section.id)" button
+                <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">
                     <ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"
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 f9ee8c8ba..d4862dd4c 100644
--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@@ -22,15 +22,25 @@ ion-item::part(native) {
 
 ion-icon {
     margin: 0;
-    @include padding(12px, 32px, 12px, 16px);
+    @include padding(12px, 16px, 12px, 16px);
 }
 
 ion-item.core-course-index-all::part(native) {
     --padding-start: 16px;
 }
 
-ion-item.item-current ion-icon.expandable-status-icon {
-    @include padding(null, null, null, 11px);
+ion-item.item.item-current {
+    --background: var(--primary);
+    --color: var(--primary-contrast);
+    border: 0;
+
+    ion-badge {
+        border: 1px solid var(--primary-contrast);
+    }
+
+    ::ng-deep ion-icon {
+        color: var(--primary-contrast);
+    }
 }
 
 ion-icon.restricted {
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 bbc2601c1..a36cee588 100644
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@@ -23,7 +23,6 @@ import { CoreCourseFormatDelegate } from '@features/course/services/format-deleg
 import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
 import { IonContent } from '@ionic/angular';
 import { CoreDomUtils } from '@services/utils/dom';
-import { CoreUtils } from '@services/utils/utils';
 import { ModalController } from '@singletons';
 
 /**
@@ -62,12 +61,11 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         }
 
         let completionEnabled = !!this.course.enablecompletion;
-        if (completionEnabled && 'courseformatoptions' in this.course && this.course.courseformatoptions) {
-            const formatOptions = CoreUtils.objectToKeyValueMap(this.course.courseformatoptions, 'name', 'value');
-
-            if (formatOptions) {
-                completionEnabled = !!formatOptions.completionusertracked;
-            }
+        if (completionEnabled && 'completionusertracked' in this.course && this.course.completionusertracked !== undefined) {
+            completionEnabled = this.course.completionusertracked;
+        }
+        if (completionEnabled && 'showcompletionconditions' in this.course && this.course.showcompletionconditions !== undefined) {
+            completionEnabled = this.course.showcompletionconditions;
         }
 
         const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
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 8ea74f89a..256f2c789 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
@@ -20,7 +20,7 @@
 </ion-item>
 <ng-content select="[description]"></ng-content>
 
-<ion-item class="ion-text-wrap core-module-dates" *ngIf="showCompletion && (module.dates?.length ||
+<ion-item class="ion-text-wrap" *ngIf="showCompletion && (module.dates?.length ||
 (module.completiondata && module.completiondata.isautomatic && module.uservisible))">
     <ion-label>
         <!-- Activity dates. -->
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 4ded49790..98f6c87d4 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,8 +16,14 @@
         align-self: flex-start;
     }
 
-    .core-module-dates ion-icon {
-        @include margin-horizontal(null, 8px);
+    .core-module-dates {
+        background: var(--light);
+        border-radius: var(--small-radius);
+        padding: 8px;
+
+        ion-icon {
+            @include margin-horizontal(null, 8px);
+        }
     }
 
 }
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 fff96491f..e20fbae5c 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -3,7 +3,6 @@
         <ion-item id="core-course-module-{{module.id}}" detail="false"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
             (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
-                'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }" [button]="module.handlerData.action && module.uservisible">
@@ -19,24 +18,26 @@
                     </core-format-text>
                 </p>
 
-                <!-- Basic module completion. -->
-                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
-                    [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
-                </core-course-module-completion>
+                <div class="core-module-additional-info">
+                    <!-- Basic module completion. -->
+                    <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                        [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
+                        [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
+                    </core-course-module-completion>
 
-                <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-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>
 
-                <!-- Hidden badges -->
-                <ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
-                    {{ 'core.course.hiddenfromstudents' | translate }}
-                </ion-badge>
-                <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
-                    {{ 'core.course.hiddenoncoursepage' | translate }}
-                </ion-badge>
+                    <!-- Hidden badges -->
+                    <ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-badge>
+                    <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
+                        {{ 'core.course.hiddenoncoursepage' | translate }}
+                    </ion-badge>
+                </div>
             </ion-label>
             <!-- Buttons. -->
             <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@@ -72,24 +73,24 @@
                     [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
                 </core-course-module-completion>
 
-                <!-- Activity dates. -->
-                <div *ngIf="showActivityDates && module.dates && 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>
+                <div class="core-module-dates-availabilityinfo"
+                    *ngIf="(showActivityDates && module.dates && module.dates.length) || module.availabilityinfo">
+                    <!-- Activity dates. -->
+                    <div *ngIf="showActivityDates && module.dates && 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>
 
-                <!-- Availability info -->
-                <div *ngIf="module.availabilityinfo">
-                    <ion-chip class="core-module-availabilityinfo">
+                    <!-- Availability info -->
+                    <div *ngIf="module.availabilityinfo" class="core-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">
-                            </core-format-text>
-                        </ion-label>
-                    </ion-chip>
+                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="module.course">
+                        </core-format-text>
+                    </div>
                 </div>
 
             </ion-label>
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index dc01fae72..f398ee1fa 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/src/core/features/course/components/module/module.scss
@@ -35,13 +35,29 @@
         .core-module-buttons core-course-module-completion {
             text-align: center;
         }
+
+        .core-module-additional-info {
+            display: flex;
+            align-items: center;
+        }
     }
 
     .core-course-module-info {
+        .core-module-dates-availabilityinfo {
+            background: var(--light);
+            border-radius: var(--small-radius);
+            padding: 8px;
+        }
+
+        .core-module-dates + .core-module-availabilityinfo {
+            border-top: 1px solid var(--stroke);
+            padding-top: 8px;
+        }
+
         .core-module-availabilityinfo {
             font-size: 90%;
-            ul {
-                margin-block-start: 0.5em;
+            ::ng-deep  ul {
+                margin-top: 0.5em;
             }
         }
     }
@@ -57,10 +73,6 @@
         margin-top: 0px;
     }
 
-    .core-module-main-item.has-module-info {
-        --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/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index f302e2299..3fceb9d64 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -27,38 +27,39 @@
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true">
 
-            <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
-                <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>
-            </div>
+            <ion-item class="ion-text-wrap" *ngIf="module.handlerData?.extraBadge ||
+                (module.visible === 0 && (!section || section.visible)) ||
+                    (module.visible !== 0 && module.isStealth) ||
+                    module.availabilityinfo">
+                <ion-label>
+                    <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
+                        <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>
+                    </div>
 
-            <!-- Hidden badges -->
-            <div *ngIf="module.visible === 0 && (!section || section.visible)">
-                <ion-chip color="warning">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                </ion-chip>
-            </div>
-            <div *ngIf="module.visible !== 0 && module.isStealth">
-                <ion-chip color="warning">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
-                </ion-chip>
-            </div>
+                    <!-- Hidden badges -->
+                    <div *ngIf="module.visible === 0 && (!section || section.visible)">
+                        <ion-badge color="warning">
+                            {{ 'core.course.hiddenfromstudents' | translate }}
+                        </ion-badge>
+                    </div>
+                    <div *ngIf="module.visible !== 0 && module.isStealth">
+                        <ion-badge color="warning">
+                            {{ 'core.course.hiddenoncoursepage' | translate }}
+                        </ion-badge>
+                    </div>
 
-            <!-- Availability info -->
-            <div *ngIf="module.availabilityinfo">
-                <ion-chip class="core-module-availabilityinfo">
-                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                    <ion-label>
+                    <!-- Availability info -->
+                    <div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
+                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
                         <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                             [courseId]="module.course">
                         </core-format-text>
-                    </ion-label>
-                </ion-chip>
-            </div>
+                    </div>
+                </ion-label>
+            </ion-item>
 
             <core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module>
         </core-course-module-info>
diff --git a/src/core/features/course/pages/module-preview/module-preview.page.ts b/src/core/features/course/pages/module-preview/module-preview.page.ts
index 620b1f981..258a1fe18 100644
--- a/src/core/features/course/pages/module-preview/module-preview.page.ts
+++ b/src/core/features/course/pages/module-preview/module-preview.page.ts
@@ -27,6 +27,7 @@ import { CoreUtils } from '@services/utils/utils';
 @Component({
     selector: 'page-core-course-module-preview',
     templateUrl: 'module-preview.html',
+    styleUrls: ['module-preview.scss'],
 })
 export class CoreCourseModulePreviewPage implements OnInit {
 
diff --git a/src/core/features/course/pages/module-preview/module-preview.scss b/src/core/features/course/pages/module-preview/module-preview.scss
new file mode 100644
index 000000000..21bd09377
--- /dev/null
+++ b/src/core/features/course/pages/module-preview/module-preview.scss
@@ -0,0 +1,15 @@
+@import "~theme/globals";
+
+.core-module-availabilityinfo {
+    background: var(--light);
+    border-radius: var(--small-radius);
+    padding: 8px;
+    font-size: 90%;
+    ::ng-deep  ul {
+        margin-top: 0.5em;
+    }
+
+    ion-icon {
+        @include margin-horizontal(null, 8px);
+    }
+}
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts
index 46a7defb0..73d73d61e 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.ts
+++ b/src/core/features/courses/components/course-list-item/course-list-item.ts
@@ -160,7 +160,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
 
             const tint = CoreColors.lighter(this.course.color, 50);
             this.element.style.setProperty('--course-color-tint', tint);
-        } else {
+        } else if(this.course.colorNumber !== undefined) {
             this.element.classList.add('course-color-' + this.course.colorNumber);
         }
     }
diff --git a/src/core/features/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss
index 5586e1140..1f5841edc 100644
--- a/src/core/features/courses/pages/my/my.scss
+++ b/src/core/features/courses/pages/my/my.scss
@@ -13,6 +13,7 @@
 
 core-block ::ng-deep ion-card.addon-block-myoverview {
     --border-width: 0;
+    --background: transparent;
 }
 
 @if ($core-dashboard-logo) {
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 25fb8be63..f77fee9ef 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -5,6 +5,7 @@ ion-item ion-icon {
     border-radius: var(--module-icon-radius);
     padding: 0.7rem;
     background-color: var(--gray-100);
+    color: var(--gray-900);
     line-height: var(--size);
     --margin-end: 1rem;
     @include margin-horizontal(null, var(--margin-end));
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 6b19a3d73..21fe2d0dd 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -36,7 +36,7 @@ $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-rgb:  color-to-rgb-list($ion-item-background) !default;
-$ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333
+$ion-item-background-dark: $gray-900 !default;
 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
 
 $primary:    $blue !default;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 17af36413..24d609fcf 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -415,8 +415,9 @@ ion-alert {
 }
 
 // Ionic list.
-ion-list.list-md {
+ion-list {
     padding: 0;
+    --ion-item-background: transparent;
 }
 
 // Safe areas
@@ -1249,7 +1250,6 @@ ion-item.item-input ion-input.has-focus {
 ion-item-divider.item,
 ion-item.item.divider {
     --inner-padding-end: 8px;
-    background: var(--background);
     min-height: var(--min-height);
     border-bottom-width: var(--item-divider-border-width);
     --border-width: var(--item-divider-border-width);
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 6e88cfc14..1d55e6631 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -76,12 +76,13 @@
     --core-progressbar-text-color: var(--gray-100);
 
     --ion-item-background: #{$ion-item-background-dark};
-    --ion-item-detail-icon-color: var(--white);
+    --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
-    --spacer-background: var(--gray-100);
+    --spacer-background: var(--gray-700);
 
     --core-combobox-background: var(--ion-item-background);
-    --core-combobox-color: var(--white);
+    --core-combobox-color: var(--gray-100);
+    --core-combobox-border-color: var(--stroke);
 
     --core-login-background: var(--gray-900);
     --core-login-text-color: var(--white);