diff --git a/src/components/empty-box/empty-box.scss b/src/components/empty-box/empty-box.scss
index 4f4e90575..643d81917 100644
--- a/src/components/empty-box/empty-box.scss
+++ b/src/components/empty-box/empty-box.scss
@@ -12,6 +12,7 @@ core-empty-box {
     padding: 0;
     clear: both;
     pointer-events: none;
+    z-index: -5;
 
     .core-empty-box-content {
       color: $black;
diff --git a/src/core/courses/pages/my-overview/my-overview.html b/src/core/courses/pages/my-overview/my-overview.html
index 552d88c91..089ed3076 100644
--- a/src/core/courses/pages/my-overview/my-overview.html
+++ b/src/core/courses/pages/my-overview/my-overview.html
@@ -30,10 +30,6 @@
                     </ion-refresher>
 
                     <core-loading [hideUntil]="courses.loaded" class="core-loading-center">
-                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
-                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
-                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
-
                         <!-- "Time" selector. -->
                         <div no-padding class="clearfix" [hidden]="showFilter">
                             <ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start (ngModelChange)="selectedChanged()" interface="popover">
@@ -50,6 +46,10 @@
                                 <span float-end *ngIf="prefetchCoursesData[courses.selected].badge">{{prefetchCoursesData[courses.selected].badge}}</span>
                             </div>
                         </div>
+                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
+                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
+                        <core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
+
                         <!-- Filter courses. -->
                         <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
                         </ion-searchbar>