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 e994ed9ec..a3aab99bf 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -74,16 +74,14 @@
                     </core-format-text>
                 </h2>
                 <div *ngIf="section.visible === 0 && section.uservisible !== false">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                    </ion-chip>
+                    <ion-badge color="warning">
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-badge>
                 </div>
                 <div *ngIf="section.visible === 0 && section.uservisible === false">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.notavailable' | translate }}</ion-label>
-                    </ion-chip>
+                    <ion-badge color="warning">
+                        {{ 'core.notavailable' | translate }}
+                    </ion-badge>
                 </div>
                 <div *ngIf="section.availabilityinfo">
                     <ion-chip>
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 50910193b..7da05d7ee 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
@@ -4,10 +4,14 @@
             class="ion-text-wrap" [class.chip]="mode == 'basic'">
             <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
             {{ 'core.course.completion_manual:done' | translate }}
+            <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
+                slot="end"></ion-icon>
         </ion-button>
         <ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
             (click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
             {{ 'core.course.completion_manual:markdone' | translate }}
+            <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
+                slot="end"></ion-icon>
         </ion-button>
     </ng-container>
 
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 2b137539d..c057e42c0 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -29,6 +29,14 @@
                     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>
             </ion-label>
             <!-- Buttons. -->
             <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@@ -59,6 +67,11 @@
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
                 </core-format-text>
 
+                <!-- Module completion. Only auto conditions-->
+                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                    [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">
@@ -67,33 +80,7 @@
                     </p>
                 </div>
 
-                <!-- Module completion. Only auto conditions-->
-                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
-                </core-course-module-completion>
-
-                <div *ngIf="module.completiondata?.offline">
-                    <ion-chip color="warning">
-                        <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
-                    </ion-chip>
-                </div>
-
-                <!-- Availability -->
-                <div *ngIf="module.visible === 0 && (!section || section.visible)">
-                    <ion-chip>
-                        <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>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
-                    </ion-chip>
-                </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>
diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts
index d3964f732..0761f2ad6 100644
--- a/src/core/features/course/components/module/module.ts
+++ b/src/core/features/course/components/module/module.ts
@@ -66,7 +66,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
             this.module.description ||
             (this.showActivityDates && this.module.dates && this.module.dates.length) ||
             (this.module.completiondata && 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/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index bd5b02506..f302e2299 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -28,33 +28,35 @@
             [componentId]="module.id" [expandDescription]="true">
 
             <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
-                <ion-chip class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
+                <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>
-            <div class="ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
-                <ion-chip class="ion-text-wrap">
+
+            <!-- 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 class="ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
-                <ion-chip class="ion-text-wrap">
+            <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>
-            <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>
-                </ion-label>
-            </div>
-            <div class="ion-padding" *ngIf="module.completiondata?.offline">
-                <ion-chip color="warning" class="ion-text-wrap">
-                    <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
+
+            <!-- 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>
+                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="module.course">
+                        </core-format-text>
+                    </ion-label>
                 </ion-chip>
             </div>