diff --git a/src/addon/badges/pages/issued-badge/issued-badge.html b/src/addon/badges/pages/issued-badge/issued-badge.html
index f1e232737..111cc8a8f 100644
--- a/src/addon/badges/pages/issued-badge/issued-badge.html
+++ b/src/addon/badges/pages/issued-badge/issued-badge.html
@@ -19,7 +19,7 @@
         </ion-item-group>
 
         <ion-item-group *ngIf="user.fullname">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap>
@@ -31,7 +31,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.issuername">
@@ -49,7 +49,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.name">
@@ -100,7 +100,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.dateissued">
@@ -121,7 +121,7 @@
 
         <!-- Endorsement -->
         <ion-item-group *ngIf="badge.endorsement">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.endorsement.issuername">
@@ -160,7 +160,7 @@
 
         <!-- Related badges -->
         <ion-item-group *ngIf="badge.relatedbadges">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngFor="let relatedBadge of badge.relatedbadges">
@@ -173,7 +173,7 @@
 
         <!-- Competencies alignment -->
         <ion-item-group *ngIf="badge.competencies">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.alignment' | translate}}</h2>
             </ion-item-divider>
             <a ion-item text-wrap *ngFor="let competency of badge.competencies" [href]="competency.targeturl" core-link auto-login="no">
diff --git a/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index 8d42ff51c..7711b65f6 100644
--- a/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
index bc00beb27..9b3cfa183 100644
--- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     <!-- Download all courses. -->
     <div *ngIf="downloadEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1 && !showFilter" class="core-button-spinner" item-end>
diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index a7b89c595..0d83e5a7e 100644
--- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     <div *ngIf="downloadEnabled && courses && courses.length > 1" class="core-button-spinner" item-end>
         <button *ngIf="prefetchCoursesData.icon && prefetchCoursesData.icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 2f419264f..f3538163d 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index 74ec899a7..e1a3c10a5 100644
--- a/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 6e6c4856a..a900b1f0f 100644
--- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     <div *ngIf="downloadEnabled && courses && courses.length > 1" class="core-button-spinner" item-end>
         <button *ngIf="prefetchCoursesData.icon && prefetchCoursesData.icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
diff --git a/src/addon/block/timeline/components/events/addon-block-timeline-events.html b/src/addon/block/timeline/components/events/addon-block-timeline-events.html
index 0cfddb603..1cebcecc1 100644
--- a/src/addon/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addon/block/timeline/components/events/addon-block-timeline-events.html
@@ -3,13 +3,24 @@
         <h2>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h2>
     </ion-item-divider>
     <ng-container *ngFor="let event of dayEvents.events">
-        <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event)" [title]="event.action.actionable ? event.action.name: event.name">
+        <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event.url)" [title]="event.name">
             <img item-start [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
             <h2><core-format-text [text]="event.name"></core-format-text></h2>
             <p *ngIf="showCourse">
                 <core-format-text [text]="event.course.fullnamedisplay"></core-format-text>
             </p>
+
+            <button ion-button clear class="hidden-tablet" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
+                {{event.action.name}}
+                <ion-badge item-end margin-start *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            </button>
+
             <ion-badge color="light" item-end>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
+
+            <button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
+                {{event.action.name}}
+                <ion-badge item-end margin-start *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            </button>
         </a>
     </ng-container>
 </ion-item-group>
@@ -22,4 +33,4 @@
     <ion-spinner *ngIf="loadingMore"></ion-spinner>
 </div>
 
-<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate" [inline]="!showCourse"></core-empty-box>
+<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate" [inline]="!showCourse"></core-empty-box>
\ No newline at end of file
diff --git a/src/addon/block/timeline/components/events/events.scss b/src/addon/block/timeline/components/events/events.scss
index 36475d624..1c722ae93 100644
--- a/src/addon/block/timeline/components/events/events.scss
+++ b/src/addon/block/timeline/components/events/events.scss
@@ -21,4 +21,8 @@ ion-app.app-root core-courses-course-progress {
     }
 }
 
-
+ion-app.app-root addon-block-timeline-events {
+    a button {
+        pointer-events: auto;
+    }
+}
diff --git a/src/addon/block/timeline/components/events/events.ts b/src/addon/block/timeline/components/events/events.ts
index c4d1f413d..a4f50e96a 100644
--- a/src/addon/block/timeline/components/events/events.ts
+++ b/src/addon/block/timeline/components/events/events.ts
@@ -122,19 +122,14 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
      * Action clicked.
      *
      * @param {Event} e     Click event.
-     * @param {any} event   Calendar event info.
+     * @param {string} url  Url of the action.
      */
-    action(e: Event, event: any): void {
+    action(e: Event, url: string): void {
         e.preventDefault();
         e.stopPropagation();
-        let url;
 
-        if (event.action.actionable) {
-            // Fix URL format.
-            url = this.textUtils.decodeHTMLEntities(event.action.url);
-        } else {
-            url = this.textUtils.decodeHTMLEntities(event.url);
-        }
+        // Fix URL format.
+        url = this.textUtils.decodeHTMLEntities(url);
 
         const modal = this.domUtils.showModalLoading();
         this.contentLinksHelper.handleLink(url, undefined, this.navCtrl).then((treated) => {
diff --git a/src/addon/block/timeline/components/timeline/addon-block-timeline.html b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
index cee03f5eb..0e160fdf0 100644
--- a/src/addon/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     <core-context-menu item-end>
         <core-context-menu-item *ngIf="loaded" [priority]="900" [content]="'addon.block_timeline.sortbydates' | translate" (action)="switchSort('sortbydates')" [iconAction]="sort == 'sortbydates' ? 'radio-button-on' : 'radio-button-off'"></core-context-menu-item>
diff --git a/src/addon/messages/components/contacts/addon-messages-contacts.html b/src/addon/messages/components/contacts/addon-messages-contacts.html
index 009412aba..4722b4d74 100644
--- a/src/addon/messages/components/contacts/addon-messages-contacts.html
+++ b/src/addon/messages/components/contacts/addon-messages-contacts.html
@@ -12,7 +12,7 @@
 
         <ion-list *ngFor="let contactType of contactTypes" no-margin>
             <ng-container *ngIf="contacts[contactType] && (contacts[contactType].length > 0 || contactType === searchType)">
-                <ion-item-divider color="light">
+                <ion-item-divider>
                     <h2>{{ 'addon.messages.type_' + contactType | translate }}</h2>
                     <ion-note item-end>{{ contacts[contactType].length }}</ion-note>
                 </ion-item-divider>
diff --git a/src/addon/messages/components/discussions/addon-messages-discussions.html b/src/addon/messages/components/discussions/addon-messages-discussions.html
index 0d4a834aa..23c9c6f34 100644
--- a/src/addon/messages/components/discussions/addon-messages-discussions.html
+++ b/src/addon/messages/components/discussions/addon-messages-discussions.html
@@ -8,7 +8,7 @@
     <core-loading [hideUntil]="loaded" [message]="loadingMessage">
 
         <ion-list *ngIf="search.showResults" no-margin>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'core.searchresults' | translate }}</h2>
                 <ion-note item-end>{{ search.results.length }}</ion-note>
             </ion-item-divider>
diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss
index 7451d99e1..b09449b24 100644
--- a/src/addon/messages/pages/discussion/discussion.scss
+++ b/src/addon/messages/pages/discussion/discussion.scss
@@ -129,7 +129,6 @@ ion-app.app-root page-addon-messages-discussion {
         }
     }
 
-    .addon-messages-discussion-group .addon-message + .addon-message-no-user,
     .addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
     .addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine {
         h2 {
diff --git a/src/addon/messages/pages/group-conversations/group-conversations.html b/src/addon/messages/pages/group-conversations/group-conversations.html
index 5452f9ebb..ddf0ef5c4 100644
--- a/src/addon/messages/pages/group-conversations/group-conversations.html
+++ b/src/addon/messages/pages/group-conversations/group-conversations.html
@@ -20,14 +20,14 @@
         </ion-refresher>
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
-            <a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate" class="addon-message-discussion">
-                <ion-icon name="person" item-start></ion-icon>
-                <h2>{{ 'addon.messages.contacts' | translate }}</h2>
-                <ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge>
-            </a>
             <ion-list>
+                <a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate" class="addon-message-discussion">
+                    <ion-icon name="person" item-start></ion-icon>
+                    <h2>{{ 'addon.messages.contacts' | translate }}</h2>
+                    <ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge>
+                </a>
                 <!-- Favourite conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
                     <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="favourites.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'core.favourites' | translate }} ({{ favourites.count }})
@@ -43,7 +43,7 @@
                 </div>
 
                 <!-- Group conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="group.conversations" (click)="toggle(group)" class="core-expandable">
                     <core-icon *ngIf="!group.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="group.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})
@@ -58,7 +58,7 @@
                     </ion-item>
                 </div>
 
-                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
                     <core-icon *ngIf="!individual.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="individual.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})
diff --git a/src/addon/messages/pages/search/search.html b/src/addon/messages/pages/search/search.html
index 33ccff7eb..43dfbd4c5 100644
--- a/src/addon/messages/pages/search/search.html
+++ b/src/addon/messages/pages/search/search.html
@@ -24,7 +24,7 @@
 
 <!-- Template to render a list of results -->
 <ng-template #resultsTemplate let-item="item">
-    <ion-item-divider color="light" text-wrap>{{ item.titleString | translate }}</ion-item-divider>
+    <ion-item-divider text-wrap>{{ item.titleString | translate }}</ion-item-divider>
     <ion-item text-wrap *ngIf="item.results.length == 0">
         {{ item.emptyString | translate }}
     </ion-item>
diff --git a/src/addon/messages/pages/settings/settings.html b/src/addon/messages/pages/settings/settings.html
index 36d895958..4048bb8f6 100644
--- a/src/addon/messages/pages/settings/settings.html
+++ b/src/addon/messages/pages/settings/settings.html
@@ -16,7 +16,7 @@
             </ion-item>
 
             <ion-list *ngIf="advancedContactable" text-wrap radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
-                <ion-item-divider color="light">{{ 'addon.messages.contactableprivacy' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'addon.messages.contactableprivacy' | translate }}</ion-item-divider>
                 <ion-item>
                     <ion-label>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</ion-label>
                     <ion-radio [value]="onlyContactsValue"></ion-radio>
@@ -35,7 +35,7 @@
         <ng-container *ngIf="preferences">
             <div *ngFor="let component of preferences.components">
                 <ion-card list *ngFor="let notification of component.notifications">
-                    <ion-item-divider color="light" text-wrap>
+                    <ion-item-divider text-wrap>
                         <ion-row no-padding>
                             <ng-container *ngIf="!groupMessagingEnabled">
                                 <ion-col no-padding>{{ notification.displayname }}</ion-col>
diff --git a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
index 779bff313..69d048e0c 100644
--- a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
+++ b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
@@ -14,6 +14,6 @@
 
 <!-- Edit -->
 <div *ngIf="edit">
-    <ion-item-divider text-wrap color="light">{{plugin.name}}</ion-item-divider>
+    <ion-item-divider text-wrap>{{plugin.name}}</ion-item-divider>
     <core-attachments [files]="files" [maxSize]="configs.maxsubmissionsizebytes" [maxSubmissions]="configs.maxfilesubmissions" [component]="component" [componentId]="assign.cmid" [acceptedTypes]="configs.filetypeslist" [allowOffline]="allowOffline"></core-attachments>
 </div>
diff --git a/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index fde89ebe0..a231c0cfa 100644
--- a/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -9,7 +9,7 @@
 
 <!-- Edit -->
 <div *ngIf="edit && loaded">
-    <ion-item-divider text-wrap color="light">{{ plugin.name }}</ion-item-divider>
+    <ion-item-divider text-wrap>{{ plugin.name }}</ion-item-divider>
     <ion-item text-wrap *ngIf="configs.wordlimitenabled && words >= 0">
         <h2>{{ 'addon.mod_assign.wordlimit' | translate }}</h2>
         <p>{{ 'core.numwords' | translate: {'$a': words + ' / ' + configs.wordlimit} }}</p>
diff --git a/src/addon/mod/choice/components/index/addon-mod-choice-index.html b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
index 82d44f856..58eeaefe7 100644
--- a/src/addon/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
@@ -62,7 +62,7 @@
 
     <!-- Choice results -->
     <div *ngIf="canSeeResults">
-        <ion-item-divider color="light" text-center>
+        <ion-item-divider text-center>
             {{ 'addon.mod_choice.responses' | translate }}
         </ion-item-divider>
         <ion-grid no-padding>
@@ -77,7 +77,7 @@
                 </ion-col>
                 <ion-col *ngIf="choice.publish && results" col-12 col-lg-7>
                     <ion-item-group *ngFor="let result of results">
-                        <ion-item-divider text-wrap color="light">
+                        <ion-item-divider text-wrap>
                             <h2><core-format-text [text]="result.text"></core-format-text></h2>
                             <p>{{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }} ({{ 'core.percentagenumber' | translate: {$a: result.percentageamount} }})</p>
                         </ion-item-divider>
diff --git a/src/addon/mod/feedback/pages/attempt/attempt.html b/src/addon/mod/feedback/pages/attempt/attempt.html
index e071278a0..f897a0d48 100644
--- a/src/addon/mod/feedback/pages/attempt/attempt.html
+++ b/src/addon/mod/feedback/pages/attempt/attempt.html
@@ -18,7 +18,7 @@
             </ion-item >
             <ng-container *ngIf="items && items.length">
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'" color="light"></ion-item-divider>
+                    <ion-item-divider *ngIf="item.typ == 'pagebreak'"></ion-item-divider>
                     <ion-item text-wrap *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
                         <h2 *ngIf="item.name" [core-mark-required]="item.required">
                             <span *ngIf="feedback.autonumbering && item.itemnumber">{{item.itemnumber}}. </span><core-format-text  [component]="component" [componentId]="componentId" [text]="item.name"></core-format-text>
diff --git a/src/addon/mod/feedback/pages/form/form.html b/src/addon/mod/feedback/pages/form/form.html
index 4a65c41c2..29405ccb4 100644
--- a/src/addon/mod/feedback/pages/form/form.html
+++ b/src/addon/mod/feedback/pages/form/form.html
@@ -13,7 +13,7 @@
                     <p *ngIf="!access.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                 </ion-item>
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'" color="light"></ion-item-divider>
+                    <ion-item-divider *ngIf="item.typ == 'pagebreak'"></ion-item-divider>
                     <ion-item text-wrap *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''" [class.core-danger-item]="item.isEmpty || item.hasError">
                         <ion-label *ngIf="item.name" [core-mark-required]="item.required" stacked>
                             <span *ngIf="feedback.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
diff --git a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
index 12a3189ac..f614ebf67 100644
--- a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -16,7 +16,7 @@
                     <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                 </ion-select>
             </ion-item>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 {{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
diff --git a/src/addon/mod/feedback/pages/respondents/respondents.html b/src/addon/mod/feedback/pages/respondents/respondents.html
index ca7b4a7a7..21cf03aa0 100644
--- a/src/addon/mod/feedback/pages/respondents/respondents.html
+++ b/src/addon/mod/feedback/pages/respondents/respondents.html
@@ -18,7 +18,7 @@
                     </ion-select>
                 </ion-item>
                 <ng-container *ngIf="responses.total > 0">
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         {{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of responses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
@@ -33,7 +33,7 @@
                     </ion-item>
                 </ng-container>
                 <ng-container *ngIf="anonResponses.total > 0">
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         {{ 'addon.mod_feedback.anonymous_entries' |translate : {$a: anonResponses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of anonResponses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html
index 3d0048019..65b449476 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.html
+++ b/src/addon/mod/forum/pages/discussion/discussion.html
@@ -36,7 +36,7 @@
 
         <ion-card *ngIf="sort != 'nested'">
             <ng-container *ngFor="let post of posts; first as first">
-                <ion-item-divider color="light" *ngIf="!first"></ion-item-divider>
+                <ion-item-divider *ngIf="!first"></ion-item-divider>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
             </ng-container>
         </ion-card>
diff --git a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
index 5eb594112..d3fcd19f0 100644
--- a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -33,7 +33,7 @@
         <core-loading [hideUntil]="loaded" class="core-loading-center">
 
             <ion-list *ngIf="viewMode != 'search' && offlineEntries.length > 0">
-                <ion-item-divider color="light">
+                <ion-item-divider>
                     {{ 'addon.mod_glossary.entriestobesynced' | translate }}
                 </ion-item-divider>
                 <a ion-item *ngFor="let entry of offlineEntries" (click)="openNewEntry(entry)" detail-none>
@@ -44,7 +44,7 @@
             <ion-list *ngIf="entries.length > 0">
                 <ng-container *ngFor="let entry of entries; let index = index">
 
-                    <ion-item-divider color="light" *ngIf="showDivider(entry, entries[index - 1])">
+                    <ion-item-divider *ngIf="showDivider(entry, entries[index - 1])">
                         {{getDivider(entry)}}
                     </ion-item-divider>
 
diff --git a/src/addon/mod/glossary/pages/edit/edit.html b/src/addon/mod/glossary/pages/edit/edit.html
index d76e0793b..f5c2381a0 100644
--- a/src/addon/mod/glossary/pages/edit/edit.html
+++ b/src/addon/mod/glossary/pages/edit/edit.html
@@ -27,10 +27,10 @@
                 <ion-label stacked id="addon-mod-glossary-aliases-label">{{ 'addon.mod_glossary.aliases' | translate }}</ion-label>
                 <ion-textarea [(ngModel)]="options.aliases" rows="1" core-auto-rows aria-labelledby="addon-mod-glossary-aliases-label"></ion-textarea>
             </ion-item>
-            <ion-item-divider color="light">{{ 'addon.mod_glossary.attachment' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'addon.mod_glossary.attachment' | translate }}</ion-item-divider>
             <core-attachments [files]="attachments" [component]="component" [componentId]="glossary.cmid" [allowOffline]="true"></core-attachments>
             <ng-container *ngIf="glossary.usedynalink">
-                <ion-item-divider color="light">{{ 'addon.mod_glossary.linking' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'addon.mod_glossary.linking' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>
                     <ion-toggle [(ngModel)]="options.usedynalink"></ion-toggle>
diff --git a/src/addon/mod/label/label.scss b/src/addon/mod/label/label.scss
index aa867a8f1..9f6514ba6 100644
--- a/src/addon/mod/label/label.scss
+++ b/src/addon/mod/label/label.scss
@@ -1,3 +1,19 @@
 a.core-course-module-handler.addon-mod-label-handler {
     align-items: center;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.md a.core-course-module-handler.addon-mod-label-handler .item-inner {
+    padding-bottom: $item-md-padding-bottom;
+}
+
+.ios a.core-course-module-handler.addon-mod-label-handler .item-inner {
+    padding-bottom: $item-ios-padding-bottom;
+}
+
+.wp a.core-course-module-handler.addon-mod-label-handler .item-inner {
+    padding-bottom: $item-wp-padding-bottom;
 }
diff --git a/src/addon/mod/label/providers/module-handler.ts b/src/addon/mod/label/providers/module-handler.ts
index 0e72fac14..8c8ecfeb8 100644
--- a/src/addon/mod/label/providers/module-handler.ts
+++ b/src/addon/mod/label/providers/module-handler.ts
@@ -66,6 +66,7 @@ export class AddonModLabelModuleHandler implements CoreCourseModuleHandler {
         return {
             icon: '',
             title: title,
+            a11yTitle: '',
             class: 'addon-mod-label-handler'
         };
     }
diff --git a/src/addon/mod/lesson/pages/menu-modal/menu-modal.html b/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
index 068490b8d..5744f07bd 100644
--- a/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
+++ b/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
@@ -13,13 +13,13 @@
         <ion-list>
             <!-- Media file. -->
             <ng-container *ngIf="pageInstance.mediaFile">
-                <ion-item-divider color="light"><h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2></ion-item-divider>
+                <ion-item-divider><h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2></ion-item-divider>
                 <core-file [file]="pageInstance.mediaFile" [component]="pageInstance.component" [componentId]="pageInstance.lesson.coursemodule"></core-file>
             </ng-container>
 
             <!-- Lesson menu. -->
             <ng-container *ngIf="pageInstance.displayMenu">
-                <ion-item-divider color="light"><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-item-divider>
+                <ion-item-divider><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-item-divider>
                 <ion-item text-center *ngIf="pageInstance.loadingMenu">
                     <ion-spinner></ion-spinner>
                 </ion-item>
diff --git a/src/addon/mod/lesson/pages/player/player.html b/src/addon/mod/lesson/pages/player/player.html
index 86c088030..428adceef 100644
--- a/src/addon/mod/lesson/pages/player/player.html
+++ b/src/addon/mod/lesson/pages/player/player.html
@@ -39,7 +39,7 @@
                 <!-- Question page. -->
                 <!-- We need to set ngIf loaded to make formGroup directive restart every time a page changes, see MOBILE-2540. -->
                 <form *ngIf="question && loaded" ion-list [formGroup]="questionForm">
-                    <ion-item-divider text-wrap color="light">
+                    <ion-item-divider text-wrap>
                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"></core-format-text>
                     </ion-item-divider>
 
diff --git a/src/addon/mod/quiz/pages/player/player.html b/src/addon/mod/quiz/pages/player/player.html
index 430d23fd5..77795828b 100644
--- a/src/addon/mod/quiz/pages/player/player.html
+++ b/src/addon/mod/quiz/pages/player/player.html
@@ -49,7 +49,7 @@
             <div *ngFor="let question of questions">
                 <ion-card id="addon-mod_quiz-question-{{question.slot}}">
                     <!-- "Header" of the question. -->
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         <h2 *ngIf="question.number" class="inline">{{ 'core.question.questionno' | translate:{$a: question.number} }}</h2>
                         <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | translate }}</h2>
                         <ion-note text-wrap item-end *ngIf="question.status || question.readableMark">
diff --git a/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html b/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
index b925e9039..c00c08277 100644
--- a/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
+++ b/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
@@ -16,7 +16,7 @@
                 <core-dynamic-component [component]="data.component" [data]="data.data">
                     <p padding>Couldn't find the directive to render this access rule.</p>
                 </core-dynamic-component>
-                <ion-item-divider color="light" *ngIf="!last"></ion-item-divider>
+                <ion-item-divider *ngIf="!last"></ion-item-divider>
             </ng-container>
 
             <button ion-button block type="submit">
diff --git a/src/addon/mod/quiz/pages/review/review.html b/src/addon/mod/quiz/pages/review/review.html
index f2e4cab77..be085af08 100644
--- a/src/addon/mod/quiz/pages/review/review.html
+++ b/src/addon/mod/quiz/pages/review/review.html
@@ -66,7 +66,7 @@
             <div *ngFor="let question of questions">
                 <ion-card id="addon-mod_quiz-question-{{question.slot}}">
                     <!-- "Header" of the question. -->
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         <h2 *ngIf="question.number" class="inline">{{ 'core.question.questionno' | translate:{$a: question.number} }}</h2>
                         <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | translate }}</h2>
                         <ion-note text-wrap item-end *ngIf="question.status || question.readableMark">
diff --git a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
index 09df48a6e..bc2e6294a 100644
--- a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -58,7 +58,7 @@
             <ng-template>
                 <ion-list>
                     <ng-container *ngFor="let letter of map">
-                        <ion-item-divider color="light" *ngIf="letter.label">
+                        <ion-item-divider *ngIf="letter.label">
                             {{ letter.label }}
                         </ion-item-divider>
                         <a ion-item text-wrap *ngFor="let page of letter.pages" (click)="goToPage(page)">
diff --git a/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index 1cb1c3c43..0e9f93a3f 100644
--- a/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -1,6 +1,6 @@
 <ion-list>
     <ng-container *ngFor="let group of subwikis">
-        <ion-item-divider *ngIf="group.label" color="light">
+        <ion-item-divider *ngIf="group.label">
             {{ group.label }}
         </ion-item-divider>
         <a ion-item text-wrap *ngFor="let subwiki of group.subwikis;" (click)="openSubwiki(subwiki)" [attr.disabled]="!subwiki.canedit && subwiki.id <= 0 ? true : null" [ngClass]="{'addon-mod_wiki-subwiki-selected': isSubwikiSelected(subwiki)}" detail-none>
diff --git a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
index bce2d0cbc..bd3b2b12f 100644
--- a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -49,7 +49,7 @@
             </ion-card>
 
             <ion-card class="with-borders" *ngIf="userGrades">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2>
                 </ion-item-divider>
                 <ion-item text-wrap *ngIf="userGrades.submissionlongstrgrade">
@@ -78,7 +78,7 @@
             </ion-item>
 
             <ng-container *ngIf="submission">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.yoursubmission' | translate }}</h2>
                 </ion-item-divider>
                 <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module" [workshop]="workshop" [access]="access"></addon-mod-workshop-submission>
@@ -101,7 +101,7 @@
 
         <ng-container *ngIf="workshop.phase >= workshopPhases.PHASE_CLOSED">
             <ion-card class="with-borders" *ngIf="publishedSubmissions && publishedSubmissions.length">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2>
                 </ion-item-divider>
                 <ng-container *ngFor="let submission of publishedSubmissions">
@@ -120,7 +120,7 @@
             </ion-card>
 
             <ion-card class="with-borders" *ngIf="canAssess">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
                 </ion-item-divider>
                 <ion-item text-wrap *ngIf="!assessments || !assessments.length">
@@ -134,10 +134,10 @@
 
         <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
         <ion-card class="with-borders" *ngIf="access.canviewallsubmissions && workshop.phase >= workshopPhases.PHASE_SUBMISSION && ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))">
-            <ion-item-divider color="light" text-wrap *ngIf="workshop.phase == workshopPhases.PHASE_SUBMISSION">
+            <ion-item-divider text-wrap *ngIf="workshop.phase == workshopPhases.PHASE_SUBMISSION">
                 <h2>{{ 'addon.mod_workshop.submissionsreport' | translate }}</h2>
             </ion-item-divider>
-           <ion-item-divider color="light" text-wrap *ngIf="workshop.phase > workshopPhases.PHASE_SUBMISSION">
+           <ion-item-divider text-wrap *ngIf="workshop.phase > workshopPhases.PHASE_SUBMISSION">
                 <h2>{{ 'addon.mod_workshop.gradesreport' | translate }}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
diff --git a/src/addon/mod/workshop/pages/phase/phase.html b/src/addon/mod/workshop/pages/phase/phase.html
index 1d23c2015..e9dbece27 100644
--- a/src/addon/mod/workshop/pages/phase/phase.html
+++ b/src/addon/mod/workshop/pages/phase/phase.html
@@ -11,7 +11,7 @@
 <ion-content>
     <ion-list>
         <ng-container *ngFor="let phase of phases">
-            <ion-item-divider color="light" [class.core-workshop-phase-selected]="workshopPhase == phase.code">
+            <ion-item-divider [class.core-workshop-phase-selected]="workshopPhase == phase.code">
                 <h2>{{ phase.title }}</h2>
                 <p text-wrap *ngIf="workshopPhase == phase.code">{{ 'addon.mod_workshop.userplancurrentphase' | translate }}</p>
             </ion-item-divider>
diff --git a/src/addon/notifications/pages/settings/settings.html b/src/addon/notifications/pages/settings/settings.html
index f6fea7a20..b9f76c243 100644
--- a/src/addon/notifications/pages/settings/settings.html
+++ b/src/addon/notifications/pages/settings/settings.html
@@ -41,7 +41,7 @@
             </div>
 
             <ion-card list *ngFor="let component of components">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <ion-row no-padding>
                         <ion-col no-padding>{{ component.displayname }}</ion-col>
                         <ion-col col-2 text-center no-padding class="hidden-phone">{{ 'core.settings.loggedin' | translate }}</ion-col>
diff --git a/src/app/app.scss b/src/app/app.scss
index 169ad18e3..a38bb07a0 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -50,6 +50,7 @@ ion-app.app-root {
       align-items: center !important;
       > * {
         margin: 0 auto;
+        width: 100%;
         max-width: 600px;
       }
     }
@@ -881,6 +882,12 @@ ion-app.app-root {
   .text-#{$color-name} {
     color: $color-contrast;
   }
+
+  .item-divider-md-#{$color-name} h2,
+  .item-divider-wp-#{$color-name} h2,
+  .item-divider-ios-#{$color-name} h2 {
+    color: $color-contrast;
+  }
 }
 
 [dir="ltr"] body, [dir="rtl"] body {
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 89f7b3e8f..a33a2bfae 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -17,7 +17,8 @@ ion-app.app-root .core-tabs-bar {
         color: $core-top-tabs-color !important;
         font-size: 1.6rem;
         border: 0;
-        padding: 0 !important;
+        padding: 0 5px 0 5px !important;
+        margin: 0 auto !important;
         display: flex;
         flex-direction: row;
 
@@ -45,6 +46,7 @@ ion-app.app-root .core-tabs-bar {
             color: $core-top-tabs-color-active !important;
             border: 0 !important;
             border-bottom: 2px solid $core-top-tabs-border-active !important;
+            padding: 0 !important;
         }
     }
 
diff --git a/src/core/course/components/module/core-course-module.html b/src/core/course/components/module/core-course-module.html
index 3e1a12234..559a76c0b 100644
--- a/src/core/course/components/module/core-course-module.html
+++ b/src/core/course/components/module/core-course-module.html
@@ -1,4 +1,4 @@
-<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>
+<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.a11yTitle" 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">
diff --git a/src/core/course/components/module/module.ts b/src/core/course/components/module/module.ts
index c534cd380..50aff0b44 100644
--- a/src/core/course/components/module/module.ts
+++ b/src/core/course/components/module/module.ts
@@ -94,6 +94,9 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
                 }
             }, this.sitesProvider.getCurrentSiteId());
         }
+
+        this.module.handlerData.a11yTitle = typeof this.module.handlerData.a11yTitle != 'undefined' ?
+            this.module.handlerData.a11yTitle : this.module.handlerData.title;
     }
 
     /**
diff --git a/src/core/course/providers/module-delegate.ts b/src/core/course/providers/module-delegate.ts
index f8d4aac72..3dbf06c42 100644
--- a/src/core/course/providers/module-delegate.ts
+++ b/src/core/course/providers/module-delegate.ts
@@ -98,6 +98,12 @@ export interface CoreCourseModuleHandlerData {
      */
     title: string;
 
+    /**
+     * The accessibility title to use in the module. If not provided, title will be used.
+     * @type {string}
+     */
+    a11yTitle?: string;
+
     /**
      * The image to use as icon (path to the image).
      * @type {string}
diff --git a/src/core/courses/pages/categories/categories.html b/src/core/courses/pages/categories/categories.html
index e33f6e9ca..e24c372bb 100644
--- a/src/core/courses/pages/categories/categories.html
+++ b/src/core/courses/pages/categories/categories.html
@@ -17,7 +17,7 @@
         </ion-item>
 
         <div *ngIf="categories.length > 0">
-            <ion-item-divider color="light">{{ 'core.courses.categories' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'core.courses.categories' | translate }}</ion-item-divider>
             <section *ngFor="let category of categories">
                 <a ion-item text-wrap (click)="openCategory(category.id)" [title]="category.name">
                     <ion-icon name="folder" item-start></ion-icon>
@@ -28,7 +28,7 @@
         </div>
 
         <div *ngIf="courses.length > 0">
-            <ion-item-divider color="light">{{ 'core.courses.courses' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'core.courses.courses' | translate }}</ion-item-divider>
             <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
         </div>
         <core-empty-box *ngIf="!categories.length && !courses.length" icon="ionic" [message]="'core.courses.nocoursesyet' | translate">
diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index cdcce002e..3dc0e4701 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/src/core/courses/pages/course-preview/course-preview.html
@@ -25,12 +25,12 @@
             </ion-item>
 
             <ng-container text-wrap *ngIf="course.contacts && course.contacts.length">
-                <ion-item-divider color="light">{{ 'core.teachers' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'core.teachers' | translate }}</ion-item-divider>
                 <a ion-item text-wrap *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id" [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate">
                     <ion-avatar core-user-avatar [user]="contact" item-start [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"></ion-avatar>
                     <h2>{{contact.fullname}}</h2>
                 </a>
-                <ion-item-divider color="light"></ion-item-divider>
+                <ion-item-divider></ion-item-divider>
             </ng-container>
             <core-file *ngFor="let file of course.overviewfiles" [file]="file" [component]="component" [componentId]="course.id"></core-file>
             <div *ngIf="!isEnrolled" detail-none>
diff --git a/src/core/courses/pages/search/search.html b/src/core/courses/pages/search/search.html
index 098a55bdf..20e55c6c4 100644
--- a/src/core/courses/pages/search/search.html
+++ b/src/core/courses/pages/search/search.html
@@ -7,7 +7,7 @@
     <core-search-box (onSubmit)="search($event)" [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" autoFocus="true" showClear="false"></core-search-box>
 
     <div *ngIf="courses">
-        <ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
+        <ion-item-divider>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
         <core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
         <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)" [error]="loadMoreError"></core-infinite-loading>
diff --git a/src/core/login/pages/email-signup/email-signup.html b/src/core/login/pages/email-signup/email-signup.html
index ef1df579e..c8909aafe 100644
--- a/src/core/login/pages/email-signup/email-signup.html
+++ b/src/core/login/pages/email-signup/email-signup.html
@@ -18,7 +18,7 @@
 
         <!-- Age verification. -->
         <form ion-list *ngIf="settingsLoaded && settings && ageDigitalConsentVerification" [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)">
-            <ion-item-divider color="light" text-wrap>
+            <ion-item-divider text-wrap>
                 <p class="item-heading">{{ 'core.agelocationverification' | translate }}</p>
             </ion-item-divider>
 
@@ -29,7 +29,7 @@
 
             <ion-item text-wrap>
                 <ion-label stacked core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</ion-label>
-                <ion-select name="country" formControlName="country">
+                <ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
                     <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
                     <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
                 </ion-select>
@@ -57,7 +57,7 @@
             </ion-item>
 
             <!-- Username and password. -->
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.createuserandpass' | translate }}
             </ion-item-divider>
             <ion-item text-wrap>
@@ -77,7 +77,7 @@
             </ion-item>
 
             <!-- More details. -->
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.supplyinfo' | translate }}
             </ion-item-divider>
             <ion-item text-wrap>
@@ -101,7 +101,7 @@
             </ion-item>
             <ion-item text-wrap>
                 <ion-label stacked id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
-                <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country">
+                <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country" [placeholder]="'core.login.selectacountry' | translate">
                     <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
                     <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
                 </ion-select>
@@ -109,13 +109,13 @@
 
             <!-- Other categories. -->
             <ng-container *ngFor="let category of categories">
-                <ion-item-divider text-wrap color="light">{{ category.name }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ category.name }}</ion-item-divider>
                 <core-user-profile-field *ngFor="let field of category.fields" [field]="field" edit="true" signup="true" registerAuth="email" [form]="signupForm"></core-user-profile-field>
             </ng-container>
 
             <!-- ReCAPTCHA -->
             <ng-container *ngIf="settings.recaptchapublickey">
-                <ion-item-divider text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ 'core.login.security_question' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
                 </ion-item>
@@ -123,7 +123,7 @@
 
             <!-- Site policy (if any). -->
             <ng-container *ngIf="settings.sitepolicy">
-                <ion-item-divider text-wrap color="light">{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <p><a [href]="settings.sitepolicy" core-link capture="false">{{ 'core.login.policyagreementclick' | translate }}</a></p>
                 </ion-item>
@@ -144,7 +144,7 @@
     </core-loading>
 
     <ion-list *ngIf="isMinor">
-        <ion-item-divider color="light" text-wrap>
+        <ion-item-divider text-wrap>
             <p *ngIf="siteName" class="item-heading padding"><core-format-text [text]="siteName"></core-format-text></p>
         </ion-item-divider>
         <ion-item text-wrap>
diff --git a/src/core/login/pages/forgotten-password/forgotten-password.html b/src/core/login/pages/forgotten-password/forgotten-password.html
index 2768b0a48..182ef2312 100644
--- a/src/core/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/login/pages/forgotten-password/forgotten-password.html
@@ -11,7 +11,7 @@
     </ion-list>
     <ion-card>
         <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword($event)">
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.searchby' | translate }}
             </ion-item-divider>
             <div radio-group formControlName="field">
diff --git a/src/core/login/pages/reconnect/reconnect.html b/src/core/login/pages/reconnect/reconnect.html
index 7c9bda81d..a99821964 100644
--- a/src/core/login/pages/reconnect/reconnect.html
+++ b/src/core/login/pages/reconnect/reconnect.html
@@ -53,7 +53,7 @@
         <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
             <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
             <button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
-                <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
+                <img [src]="provider.iconurl" alt="" width="32" height="32" item-start>
                 {{provider.name}}
             </button>
         </ion-list>
diff --git a/src/core/mainmenu/pages/more/more.html b/src/core/mainmenu/pages/more/more.html
index 7f5b97a70..5db8aa669 100644
--- a/src/core/mainmenu/pages/more/more.html
+++ b/src/core/mainmenu/pages/more/more.html
@@ -9,7 +9,7 @@
             <ion-avatar core-user-avatar [user]="siteInfo" item-start></ion-avatar>
             <p>{{siteInfo.fullname}}</p>
         </a>
-        <ion-item-divider color="light"></ion-item-divider>
+        <ion-item-divider></ion-item-divider>
         <ion-item text-center *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
             <ion-spinner></ion-spinner>
         </ion-item>
diff --git a/src/core/settings/pages/about/about.html b/src/core/settings/pages/about/about.html
index 423e86876..8efcfaa14 100644
--- a/src/core/settings/pages/about/about.html
+++ b/src/core/settings/pages/about/about.html
@@ -8,7 +8,7 @@
         <h2>{{ appName }} {{ versionName }}</h2>
     </ion-item>
     <ion-item-group>
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.license' | translate }}
         </ion-item-divider>
         <ion-item text-wrap>
@@ -17,7 +17,7 @@
         </ion-item>
     </ion-item-group>
     <ion-item-group *ngIf="privacyPolicy">
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.privacypolicy' | translate }}
         </ion-item-divider>
         <ion-item text-wrap>
@@ -25,7 +25,7 @@
         </ion-item>
     </ion-item-group>
     <ion-item-group>
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.deviceinfo' | translate }}
         </ion-item-divider>
         <ion-item text-wrap *ngIf="versionName">
diff --git a/src/core/settings/pages/space-usage/space-usage.html b/src/core/settings/pages/space-usage/space-usage.html
index 491da352e..00d578ba9 100644
--- a/src/core/settings/pages/space-usage/space-usage.html
+++ b/src/core/settings/pages/space-usage/space-usage.html
@@ -16,7 +16,7 @@
                 <ion-icon name="trash"></ion-icon>
             </button>
         </ion-item>
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.total' | translate }}</p>
             <p item-end>{{ totalUsage | coreBytesToSize }}</p>
         </ion-item-divider>
diff --git a/src/core/settings/pages/synchronization/synchronization.html b/src/core/settings/pages/synchronization/synchronization.html
index 12e7a753b..a81c59e13 100644
--- a/src/core/settings/pages/synchronization/synchronization.html
+++ b/src/core/settings/pages/synchronization/synchronization.html
@@ -5,7 +5,7 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="sitesLoaded">
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.syncsettings' | translate }}</p>
         </ion-item-divider>
         <ion-item text-wrap>
@@ -13,7 +13,7 @@
             <ion-toggle item-end [(ngModel)]="syncOnlyOnWifi" (ngModelChange)="syncOnlyOnWifiChanged()">
             </ion-toggle>
         </ion-item>
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.sites' | translate }}</p>
         </ion-item-divider>
         <ion-item *ngFor="let site of sites" [class.core-primary-selected-item]="site.id == currentSiteId" text-wrap>
diff --git a/src/core/sitehome/components/index/core-sitehome-index.html b/src/core/sitehome/components/index/core-sitehome-index.html
index 600834cd1..6472f3418 100644
--- a/src/core/sitehome/components/index/core-sitehome-index.html
+++ b/src/core/sitehome/components/index/core-sitehome-index.html
@@ -12,7 +12,7 @@
 
         <!-- Site home items: news, categories, courses, etc. -->
         <ng-container *ngIf="items.length > 0">
-            <ion-item-divider color="light" *ngIf="section && section.hasContent"></ion-item-divider>
+            <ion-item-divider *ngIf="section && section.hasContent"></ion-item-divider>
             <ng-container *ngFor="let item of items">
                 <core-sitehome-all-course-list class="item" *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
                 <core-sitehome-categories  *ngIf="item == 'categories'"></core-sitehome-categories>
diff --git a/src/core/user/pages/about/about.html b/src/core/user/pages/about/about.html
index 3e6932169..cfc7db797 100644
--- a/src/core/user/pages/about/about.html
+++ b/src/core/user/pages/about/about.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="userLoaded">
         <div *ngIf="user">
             <ion-item-group *ngIf="hasContact">
-                <ion-item-divider color="light">{{ 'core.user.contact' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.user.contact' | translate}}</ion-item-divider>
                 <ion-item text-wrap *ngIf="user.email">
                     <h2>{{ 'core.user.email' | translate }}</h2>
                     <p><a href="mailto:{{user.email}}" core-link auto-login="no">
@@ -46,7 +46,7 @@
                 </ion-item>
             </ion-item-group>
             <ion-item-group *ngIf="hasDetails">
-                <ion-item-divider color="light">{{ 'core.userdetails' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.userdetails' | translate}}</ion-item-divider>
                 <ion-item text-wrap *ngIf="user.url">
                     <h2>{{ 'core.user.webpage' | translate}}</h2>
                     <p><a href="{{user.url}}" core-link>
@@ -60,7 +60,7 @@
                 <core-user-profile-field *ngFor="let field of user.customfields" [field]="field"></core-user-profile-field>
             </ion-item-group>
             <ion-item-group *ngIf="user.description">
-                <ion-item-divider color="light">{{ 'core.user.description' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.user.description' | translate}}</ion-item-divider>
                 <ion-item text-wrap>
                     <p><core-format-text [text]="user.description"></core-format-text></p>
                 </ion-item>
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 29b5087ce..3e0d624a2 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -123,6 +123,8 @@ $item-avatar-size: 54px !default;
 $input-select-opacity: .5 !default;
 $note-color: $gray-dark !default;
 $popover-width: 280px !default;
+$item-divider-background: $gray-lighter !default;
+$item-divider-color: $black !default;
 
 
 // Moodle Mobile variables
@@ -169,6 +171,8 @@ $checkbox-ios-disabled-opacity: $input-select-opacity !default;
 $toggle-ios-disabled-opacity: $input-select-opacity !default;
 $note-ios-color: $note-color;
 $popover-ios-width: $popover-width;
+$item-ios-divider-background: $item-divider-background;
+$item-ios-divider-color: $item-divider-color;
 
 // App Material Design Variables
 // --------------------------------------------------
@@ -190,6 +194,8 @@ $toggle-md-disabled-opacity: $input-select-opacity !default;
 $note-md-color: $note-color;
 $popover-md-width: $popover-width;
 $action-sheet-md-title-color: $core-color;
+$item-md-divider-background: $item-divider-background;
+$item-md-divider-color: $item-divider-color;
 
 // App Windows Variables
 // --------------------------------------------------
@@ -209,6 +215,8 @@ $checkbox-wp-disabled-opacity: $input-select-opacity !default;
 $toggle-wp-disabled-opacity: $input-select-opacity !default;
 $note-wp-color: $note-color;
 $popover-wp-width: $popover-width;
+$item-wp-divider-background: $item-divider-background;
+$item-wp-divider-color: $item-divider-color;
 
 // App Theme
 // --------------------------------------------------