diff --git a/src/core/course/pages/list-mod-type/list-mod-type.html b/src/core/course/pages/list-mod-type/list-mod-type.html
index 39678efed..eeb723d8a 100644
--- a/src/core/course/pages/list-mod-type/list-mod-type.html
+++ b/src/core/course/pages/list-mod-type/list-mod-type.html
@@ -8,11 +8,13 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <core-empty-box *ngIf="!modules || !modules.length" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
+        <core-empty-box *ngIf="!sections || !sections.length" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
 
         <ion-list>
-            <ng-container *ngFor="let module of modules">
-                <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [courseId]="courseId" [downloadEnabled]="downloadEnabled"></core-course-module>
+            <ng-container text-wrap *ngFor="let section of sections" >
+                <ng-container *ngFor="let module of section.modules">
+                    <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section" [courseId]="courseId" [downloadEnabled]="downloadEnabled"></core-course-module>
+                </ng-container>
             </ng-container>
         </ion-list>
     </core-loading>
diff --git a/src/core/course/pages/list-mod-type/list-mod-type.ts b/src/core/course/pages/list-mod-type/list-mod-type.ts
index 42700fa85..aa2c218f7 100644
--- a/src/core/course/pages/list-mod-type/list-mod-type.ts
+++ b/src/core/course/pages/list-mod-type/list-mod-type.ts
@@ -31,7 +31,7 @@ import { CoreConstants } from '@core/constants';
 })
 export class CoreCourseListModTypePage {
 
-    modules = [];
+    sections = [];
     title: string;
     loaded = false;
     downloadEnabled = false;
@@ -69,17 +69,15 @@ export class CoreCourseListModTypePage {
         // Get all the modules in the course.
         return this.courseProvider.getSections(this.courseId, false, true).then((sections) => {
 
-            this.modules = [];
-
-            sections.forEach((section) => {
+            this.sections = sections.filter((section) => {
                 if (!section.modules) {
-                    return;
+                    return false;
                 }
 
-                section.modules.forEach((mod) => {
+                section.modules = section.modules.filter((mod) => {
                     if (mod.uservisible === false || !this.courseProvider.moduleHasView(mod)) {
                         // Ignore this module.
-                        return;
+                        return false;
                     }
 
                     if (this.modName === 'resources') {
@@ -90,21 +88,18 @@ export class CoreCourseListModTypePage {
                         }
 
                         if (this.archetypes[mod.modname] == CoreConstants.MOD_ARCHETYPE_RESOURCE) {
-                            this.modules.push(mod);
+                            return true;
                         }
 
                     } else if (mod.modname == this.modName) {
-                        this.modules.push(mod);
+                        return true;
                     }
                 });
+
+                return section.modules.length > 0;
             });
 
-            // Get the handler data for the modules.
-            const fakeSection = {
-                visible: 1,
-                modules: this.modules
-            };
-            this.courseHelper.addHandlerDataForModules([fakeSection], this.courseId);
+            this.courseHelper.addHandlerDataForModules(this.sections, this.courseId);
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'Error getting data');
         });