diff --git a/src/addon/mod/label/label.scss b/src/addon/mod/label/label.scss
new file mode 100644
index 000000000..aa867a8f1
--- /dev/null
+++ b/src/addon/mod/label/label.scss
@@ -0,0 +1,3 @@
+a.core-course-module-handler.addon-mod-label-handler {
+    align-items: center;
+}
diff --git a/src/core/course/components/format/format.html b/src/core/course/components/format/format.html
index 80df9237c..4c8d1d43a 100644
--- a/src/core/course/components/format/format.html
+++ b/src/core/course/components/format/format.html
@@ -12,7 +12,7 @@
     <core-loading [hideUntil]="loaded">
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
-            <div *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
+            <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
                 <!-- @todo: How to display availabilityinfo and not visible messages? -->
                 <ion-select [ngModel]="selectedSection" (ngModelChange)="sectionChanged($event)" [compareWith]="compareSections" [selectOptions]="selectOptions" float-start interface="popover">
                     <ion-option *ngFor="let section of sections" [value]="section">{{section.formattedName || section.name}}</ion-option>
@@ -63,7 +63,7 @@
 
 <!-- Template to render a section download button/progress. -->
 <ng-template #sectionDownloadTemplate let-section="section">
-    <div *ngIf="section && downloadEnabled" float-end>
+    <div *ngIf="section && downloadEnabled" class="core-button-spinner" float-end>
         <!-- Download button. -->
         <button *ngIf="section.showDownload && !section.isDownloading && !section.isCalculating" (click)="prefetch($event, section)" ion-button icon-only clear color="dark" [attr.aria-label]="'core.download' | translate">
             <ion-icon name="cloud-download"></ion-icon>
@@ -72,9 +72,9 @@
         <button *ngIf="section.showRefresh && !section.isDownloading && !section.isCalculating" (click)="prefetch($event, section)" ion-button icon-only clear color="dark" [attr.aria-label]="'core.refresh' | translate">
             <ion-icon name="refresh"></ion-icon>
         </button>
-        <!-- Spinner (downloading or calculating status). -->
-        <ion-spinner *ngIf="(section.isDownloading && section.total > 0) || section.isCalculating"></ion-spinner>
         <!-- Download progress. -->
         <ion-badge class="core-course-download-section-progress" *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">{{section.count}} / {{section.total}}</ion-badge>
+        <!-- Spinner (downloading or calculating status). -->
+        <ion-spinner *ngIf="(section.isDownloading && section.total > 0) || section.isCalculating"></ion-spinner>
     </div>
 </ng-template>
diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss
new file mode 100644
index 000000000..11fd5d99a
--- /dev/null
+++ b/src/core/course/components/format/format.scss
@@ -0,0 +1,6 @@
+ion-badge.core-course-download-section-progress {
+    display: block;
+    float: left;
+    margin-top: 12px;
+    margin-right: 12px;
+}
\ No newline at end of file
diff --git a/src/core/course/components/module/module.html b/src/core/course/components/module/module.html
index d4d63e0e7..84cd92959 100644
--- a/src/core/course/components/module/module.html
+++ b/src/core/course/components/module/module.html
@@ -1,36 +1,39 @@
 <a *ngIf="module && module.visibleoncoursepage !== 0" ion-item text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || !module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" title="{{ module.handlerData.title }}" detail-none>
 
     <img item-start *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" alt="" role="presentation" class="core-module-icon">
+    <div class="core-module-title">
+        <core-format-text [text]="module.handlerData.title"></core-format-text>
 
-    <core-format-text [text]="module.handlerData.title"></core-format-text>
+        <!-- Buttons. -->
+        <div item-end *ngIf="module.uservisible !== false" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
+            <!-- Module completion. -->
+            <core-course-module-completion *ngIf="module.completionstatus" [completion]="module.completionstatus" [moduleName]="module.name" (completionChanged)="completionChanged.emit()"></core-course-module-completion>
 
-    <!-- Buttons. -->
-    <div float-end *ngIf="module.uservisible !== false" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
-        <!-- Module completion. -->
-        <core-course-module-completion *ngIf="module.completionstatus" [completion]="module.completionstatus" [moduleName]="module.name" (completionChanged)="completionChanged.emit()"></core-course-module-completion>
+            <div class="core-module-buttons-more">
+                <!-- Download button. -->
+                <button *ngIf="downloadEnabled && showDownload" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, false)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.download' | translate">
+                    <ion-icon name="cloud-download"></ion-icon>
+                </button>
 
-        <!-- Download button. -->
-        <button *ngIf="downloadEnabled && showDownload" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, false)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.download' | translate">
-            <ion-icon name="cloud-download"></ion-icon>
-        </button>
+                <!-- Refresh button. -->
+                <button *ngIf="downloadEnabled && showRefresh" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, true)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.refresh' | translate">
+                    <ion-icon name="refresh"></ion-icon>
+                </button>
 
-        <!-- Refresh button. -->
-        <button *ngIf="downloadEnabled && showRefresh" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, true)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.refresh' | translate">
-            <ion-icon name="refresh"></ion-icon>
-        </button>
+                <!-- Buttons defined by the module handler. -->
+                <button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden || spinner || module.handlerData.spinner" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
+                    <ion-icon [name]="button.icon" [ios]="button.iosIcon || ''" [md]="button.mdIcon || ''"></ion-icon>
+                </button>
 
-        <!-- Buttons defined by the module handler. -->
-        <button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden || spinner || module.handlerData.spinner" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
-            <ion-icon [name]="button.icon" [ios]="button.iosIcon || ''" [md]="button.mdIcon || ''"></ion-icon>
-        </button>
+                <!-- Spinner. -->
+                <ion-spinner *ngIf="spinner || module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
+            </div>
+        </div>
 
-        <!-- Spinner. -->
-        <ion-spinner *ngIf="spinner || module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
+        <div *ngIf="module.visible === 0 || module.availabilityinfo">
+            <ion-badge item-end *ngIf="module.visible === 0">{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
+            <ion-badge item-end *ngIf="module.availabilityinfo"><core-format-text [text]="module.availabilityinfo"></core-format-text></ion-badge>
+        </div>
     </div>
-
-    <div *ngIf="module.visible === 0 || module.availabilityinfo">
-        <ion-badge item-end *ngIf="module.visible === 0">{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
-        <ion-badge item-end *ngIf="module.availabilityinfo"><core-format-text [text]="module.availabilityinfo"></core-format-text></ion-badge>
-    </div>
-    <core-format-text *ngIf="module.description" maxHeight="80" [text]="module.description"></core-format-text>
+    <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"></core-format-text>
 </a>
\ No newline at end of file
diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss
index 8eeee189e..c76d9e6f1 100644
--- a/src/core/course/components/module/module.scss
+++ b/src/core/course/components/module/module.scss
@@ -2,29 +2,116 @@ core-course-module {
 
     a.core-course-module-handler {
         align-items: flex-start;
-        item-inner {
+        min-height: 52px;
+
+        &.item .item-inner {
             padding-right: 0;
         }
+        .label {
+            margin-top: 0;
+            margin-right: 0;
+            margin-bottom: 0;
+        }
+        .core-module-icon {
+            align-items: flex-start;
+        }
     }
 
-    .core-module-icon {
-        align-items: flex-start;
-    }
-
-    .core-module-buttons {
+    .core-module-title {
         display: flex;
         flex-flow: row;
-        align-items: center;
-        z-index: 1;
-        cursor: pointer;
-        pointer-events: auto;
-        position: absolute;
-        right: 0;
-        top: 4px;
+        align-items: flex-start;
 
-        .spinner {
-            right: 7px;
+        core-format-text {
+            flex-grow: 2;
+        }
+        .core-module-buttons {
+            margin: 0;
+        }
+
+        .core-module-buttons,
+        .core-module-buttons-more {
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            z-index: 1;
+        }
+
+        .core-module-buttons core-course-module-completion,
+        .core-module-buttons-more button {
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .core-module-buttons-more  .spinner {
+            right: 13px;
             position: absolute;
         }
     }
+}
+
+.md core-course-module {
+    .core-module-description,
+    .core-module-description .core-show-more {
+        padding-right: $label-md-margin-end;
+    }
+
+    a.core-course-module-handler .core-module-icon {
+        margin-top: $label-md-margin-top;
+        margin-bottom: $label-md-margin-bottom;
+    }
+
+    .core-module-title core-format-text {
+        padding-top: $label-md-margin-top + 3;
+    }
+    .button-md {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+    .core-module-buttons-more {
+        min-height: 52px;
+        min-width: 53px;
+    }
+}
+
+.ios core-course-module {
+    .core-module-description,
+    .core-module-description .core-show-more {
+        padding-right: $label-ios-margin-end;
+    }
+
+    a.core-course-module-handler .core-module-icon {
+        margin-top: $label-ios-margin-top;
+        margin-bottom: $label-ios-margin-bottom;
+    }
+
+    .core-module-title core-format-text {
+        padding-top: $label-ios-margin-top + 3;
+    }
+
+    .core-module-buttons-more {
+        min-height: 53px;
+        min-width: 58px;
+    }
+}
+
+.wp core-course-module {
+    .core-module-description,
+    .core-module-description .core-show-more {
+        padding-right: ($item-wp-padding-end / 2);
+    }
+
+    a.core-course-module-handler .core-module-icon {
+        margin-top: $item-wp-padding-top;
+        margin-bottom: $item-wp-padding-bottom;
+    }
+
+    .core-module-title core-format-text {
+        padding-top: $item-wp-padding-top + 3;
+    }
+
+    .button-wp {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
 }
\ No newline at end of file