diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 56d9ffb91..0bc7f105f 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -2,7 +2,7 @@
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div slot="end">
+    <div slot="end" class="flex-row">
         <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 9b3cbaa37..afabaf9b9 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -2,7 +2,7 @@
     <ion-label>
         <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div slot="end">
+    <div slot="end" class="flex-row">
         <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
diff --git a/src/addons/messages/pages/contacts/contacts.page.ts b/src/addons/messages/pages/contacts/contacts.page.ts
index 473820dd8..80f49d224 100644
--- a/src/addons/messages/pages/contacts/contacts.page.ts
+++ b/src/addons/messages/pages/contacts/contacts.page.ts
@@ -32,7 +32,6 @@ import { IonRefresher } from '@ionic/angular';
     selector: 'page-addon-messages-contacts',
     templateUrl: 'contacts.html',
     styleUrls: [
-        'tabs.scss',
         '../../messages-common.scss',
     ],
 })
diff --git a/src/addons/messages/pages/contacts/tabs.scss b/src/addons/messages/pages/contacts/tabs.scss
deleted file mode 100644
index 8bb0948a5..000000000
--- a/src/addons/messages/pages/contacts/tabs.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-:host {
-    ion-tab-bar.core-tabs-bar {
-        position: relative;
-        width: 100%;
-        background: var(--core-tabs-background);
-        color: var(--core-tab-color);
-        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        border: 0;
-
-        ion-row {
-            width: 100%;
-        }
-
-        .tab-slide {
-            border-bottom: 2px solid transparent;
-            min-width: 100px;
-            min-height: 56px;
-            cursor: pointer;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-            margin-bottom: 1px;
-
-            ion-label {
-                font-size: 16px;
-                font-weight: 400;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                word-wrap: break-word;
-                max-width: 100%;
-                line-height: 1.2em;
-                margin: 16px auto;
-            }
-
-            &[aria-selected=true] {
-                color: var(--core-tab-border-color-active);
-                border-bottom-color: var(--core-tab-color-active);
-                ion-tab-button {
-                    color: var(--core-tab-border-color-active);
-                }
-            }
-        }
-    }
-}
diff --git a/src/core/components/dynamic-component/dynamic-component.ts b/src/core/components/dynamic-component/dynamic-component.ts
index 033ab327a..b49dbafb7 100644
--- a/src/core/components/dynamic-component/dynamic-component.ts
+++ b/src/core/components/dynamic-component/dynamic-component.ts
@@ -62,6 +62,7 @@ import { CoreLogger } from '@singletons/logger';
 @Component({
     selector: 'core-dynamic-component',
     templateUrl: 'core-dynamic-component.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreDynamicComponent implements OnChanges, DoCheck {
 
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index f295487c9..1ed6c3d6e 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -56,5 +56,9 @@
             padding-top: 20px;
             position: relative;
         }
+
+        .core-loading-content {
+            display: block;
+        }
     }
 }
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html
index 292f9c2f2..74fadaad4 100644
--- a/src/core/components/send-message-form/core-send-message-form.html
+++ b/src/core/components/send-message-form/core-send-message-form.html
@@ -17,7 +17,7 @@
     >
     </textarea>
     <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
-        [attr.aria-label]="'core.send' | translate" [core-suppress-events] (click)="submitForm($event)">
+        [attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
         <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 </form>
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 3c4a05405..8bc9d4b3e 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -1,6 +1,6 @@
 :host {
     --tabs-background: var(--core-tabs-background);
-    --tabs-color: var(--color);
+    --tabs-color: var(--core-tab-color);
     --height: 56px;
     height: 100%;
     display: block;
diff --git a/src/core/directives/supress-events.ts b/src/core/directives/supress-events.ts
index e651b1eca..0ec7aab2e 100644
--- a/src/core/directives/supress-events.ts
+++ b/src/core/directives/supress-events.ts
@@ -15,6 +15,7 @@
 // Based on http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/
 
 import { Directive, ElementRef, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { CoreLogger } from '@singletons/logger';
 
 /**
  * Directive to suppress all events on an element. This is useful to prevent keyboard closing when clicking this element.
@@ -29,6 +30,8 @@ import { Directive, ElementRef, OnInit, Input, Output, EventEmitter } from '@ang
  * If you only want to suppress a single event just pass the name of the event. If you want to suppress a set of events,
  * pass an array with the names of the events to suppress.
  *
+ * Usage of onClick instead of click is mandatory to make this directive work.
+ *
  * Example usage:
  *
  * <ion-button [core-suppress-events] (onClick)="toggle($event)">
@@ -51,6 +54,13 @@ export class CoreSupressEventsDirective implements OnInit {
      * Initialize event listeners.
      */
     ngOnInit(): void {
+        if (this.onClick.observers.length == 0) {
+            CoreLogger.getInstance('CoreSupressEventsDirective')
+                .error('No onClick output was defined causing this directive to fail', this.element);
+
+            return;
+        }
+
         let events: string[];
 
         if (this.suppressEvents == 'all' || typeof this.suppressEvents == 'undefined' || this.suppressEvents === null) {
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html
index 6248c094e..ada1872c0 100644
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@@ -119,7 +119,7 @@
 
     </core-loading>
 </ion-content>
-<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded">
+<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
     <ion-toolbar color="light">
         <core-send-message-form [sendDisabled]="sending" [message]="newComment"
             (onSubmit)="addComment($event)" [placeholder]="'core.comments.addcomment' | translate">
diff --git a/src/core/features/compile/components/compile-html/compile-html.ts b/src/core/features/compile/components/compile-html/compile-html.ts
index a2e5ba06c..e3c72975e 100644
--- a/src/core/features/compile/components/compile-html/compile-html.ts
+++ b/src/core/features/compile/components/compile-html/compile-html.ts
@@ -56,6 +56,7 @@ import { CoreUtils } from '@services/utils/utils';
 @Component({
     selector: 'core-compile-html',
     template: '<core-loading [hideUntil]="loaded"><ng-container #dynamicComponent></ng-container></core-loading>',
+    styles: [':host { display: contents; }'],
 })
 // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
 export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
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 223fe9458..6aa6ce2f8 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -93,18 +93,19 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
-                    [attr.aria-label]="'core.previous' | translate">
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline"
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
+                    <core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
                 </ion-button>
-                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" [attr.aria-label]="'core.next' | translate">
-                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="nextSection.name" contextLevel="course"
+                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid"
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    <core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
+                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-buttons>
         </core-loading>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index 0c0b7aca9..3e556b5d2 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -58,4 +58,16 @@
         }
     }
 
+    .core-course-section-nav-buttons {
+        display: flex;
+        justify-content: flex-end;
+
+        core-format-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-transform: none;
+        }
+    }
+
 }
diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index 1f4c1782a..f3f652d1c 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -36,6 +36,7 @@
 
     form .core-username.item p {
         font-size: 16px;
+        @include padding-horizontal(8px, null);
     }
 
     .core-login-site-logo img {
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 26230ae7d..6ca872e41 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -91,7 +91,7 @@
             <ion-item class="ion-text-wrap" lines="none" *ngIf="authInstructions">
                 <ion-label><p><core-format-text [text]="authInstructions" [filter]="false"></core-format-text></p></ion-label>
             </ion-item>
-            <ion-button expand="block" class="ion-margin" color="light" (click)="openEmailSignup()">
+            <ion-button expand="block" class="ion-margin ion-text-wrap" color="light" (click)="openEmailSignup()">
                 {{ 'core.login.startsignup' | translate }}
             </ion-button>
         </ion-list>
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index ba8099d71..a22ffd18d 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@@ -1,6 +1,6 @@
 <ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement" [class.tabshidden]="hidden"
     (ionTabsDidChange)="tabChanged($event)">
-    <ion-tab-bar slot="bottom" [hidden]="hidden">
+    <ion-tab-bar slot="bottom" [hidden]="hidden" class="mainmenu-tabs">
         <ion-spinner *ngIf="!loaded"></ion-spinner>
 
         <ion-tab-button
diff --git a/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts b/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts
index 643470967..a03d8e083 100644
--- a/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts
+++ b/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts
@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-assign-feedback',
     templateUrl: 'core-siteplugins-assign-feedback.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsAssignFeedbackComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/assign-submission/assign-submission.ts b/src/core/features/siteplugins/components/assign-submission/assign-submission.ts
index 367d8090a..ba2bdeab9 100644
--- a/src/core/features/siteplugins/components/assign-submission/assign-submission.ts
+++ b/src/core/features/siteplugins/components/assign-submission/assign-submission.ts
@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-assign-submission',
     templateUrl: 'core-siteplugins-assign-submission.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsAssignSubmissionComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/block/block.ts b/src/core/features/siteplugins/components/block/block.ts
index 297a5d89b..8f710e2d6 100644
--- a/src/core/features/siteplugins/components/block/block.ts
+++ b/src/core/features/siteplugins/components/block/block.ts
@@ -25,6 +25,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-block',
     templateUrl: 'core-siteplugins-block.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsBlockComponent extends CoreBlockBaseComponent implements OnChanges {
 
diff --git a/src/core/features/siteplugins/components/course-format/course-format.ts b/src/core/features/siteplugins/components/course-format/course-format.ts
index 88cd9d586..025c1036e 100644
--- a/src/core/features/siteplugins/components/course-format/course-format.ts
+++ b/src/core/features/siteplugins/components/course-format/course-format.ts
@@ -28,6 +28,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-course-format',
     templateUrl: 'core-siteplugins-course-format.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsCourseFormatComponent implements OnChanges {
 
diff --git a/src/core/features/siteplugins/components/module-index/module-index.ts b/src/core/features/siteplugins/components/module-index/module-index.ts
index 40061f0ec..5e83cbc9d 100644
--- a/src/core/features/siteplugins/components/module-index/module-index.ts
+++ b/src/core/features/siteplugins/components/module-index/module-index.ts
@@ -40,6 +40,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-module-index',
     templateUrl: 'core-siteplugins-module-index.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
 
diff --git a/src/core/features/siteplugins/components/only-title-block/only-title-block.ts b/src/core/features/siteplugins/components/only-title-block/only-title-block.ts
index 09428e441..058ccca47 100644
--- a/src/core/features/siteplugins/components/only-title-block/only-title-block.ts
+++ b/src/core/features/siteplugins/components/only-title-block/only-title-block.ts
@@ -26,6 +26,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'core-siteplugins-only-title-block',
     templateUrl: 'core-siteplugins-only-title-block.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsOnlyTitleBlockComponent extends CoreBlockBaseComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/plugin-content/plugin-content.ts b/src/core/features/siteplugins/components/plugin-content/plugin-content.ts
index 91b3bb2ce..600f14042 100644
--- a/src/core/features/siteplugins/components/plugin-content/plugin-content.ts
+++ b/src/core/features/siteplugins/components/plugin-content/plugin-content.ts
@@ -28,6 +28,7 @@ import { CoreDomUtils } from '@services/utils/dom';
 @Component({
     selector: 'core-site-plugins-plugin-content',
     templateUrl: 'core-siteplugins-plugin-content.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
 
diff --git a/src/core/features/siteplugins/components/question-behaviour/question-behaviour.ts b/src/core/features/siteplugins/components/question-behaviour/question-behaviour.ts
index 04428e45c..0fd8f641a 100644
--- a/src/core/features/siteplugins/components/question-behaviour/question-behaviour.ts
+++ b/src/core/features/siteplugins/components/question-behaviour/question-behaviour.ts
@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-question-behaviour',
     templateUrl: 'core-siteplugins-question-behaviour.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuestionBehaviourComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/question/question.ts b/src/core/features/siteplugins/components/question/question.ts
index f071a0afc..33132630a 100644
--- a/src/core/features/siteplugins/components/question/question.ts
+++ b/src/core/features/siteplugins/components/question/question.ts
@@ -25,6 +25,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-question',
     templateUrl: 'core-siteplugins-question.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuestionComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/quiz-access-rule/quiz-access-rule.ts b/src/core/features/siteplugins/components/quiz-access-rule/quiz-access-rule.ts
index 874d6fbf6..3ed0e21b9 100644
--- a/src/core/features/siteplugins/components/quiz-access-rule/quiz-access-rule.ts
+++ b/src/core/features/siteplugins/components/quiz-access-rule/quiz-access-rule.ts
@@ -25,6 +25,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-quiz-access-rule',
     templateUrl: 'core-siteplugins-quiz-access-rule.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuizAccessRuleComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/user-profile-field/user-profile-field.ts b/src/core/features/siteplugins/components/user-profile-field/user-profile-field.ts
index e30675854..a181a6001 100644
--- a/src/core/features/siteplugins/components/user-profile-field/user-profile-field.ts
+++ b/src/core/features/siteplugins/components/user-profile-field/user-profile-field.ts
@@ -26,6 +26,7 @@ import { CoreUserProfileFieldDelegate } from '@features/user/services/user-profi
 @Component({
     selector: 'core-site-plugins-user-profile-field',
     templateUrl: 'core-siteplugins-user-profile-field.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsUserProfileFieldComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/core/features/siteplugins/components/workshop-assessment-strategy/workshop-assessment-strategy.ts b/src/core/features/siteplugins/components/workshop-assessment-strategy/workshop-assessment-strategy.ts
index ea9e56c18..2030ab474 100644
--- a/src/core/features/siteplugins/components/workshop-assessment-strategy/workshop-assessment-strategy.ts
+++ b/src/core/features/siteplugins/components/workshop-assessment-strategy/workshop-assessment-strategy.ts
@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-siteplugins-workshop-assessment-strategy',
     templateUrl: 'core-siteplugins-workshop-assessment-strategy.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsWorkshopAssessmentStrategyComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index d89fb5176..20ee9e9c1 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -89,7 +89,7 @@
     --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
     --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color};
     --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color};
-    ion-tab-bar {
+    ion-tab-bar.mainmenu-tabs {
         --background: var(--core-bottom-tabs-background);
         --color: var(--core-bottom-tabs-color);
         --color-selected: var(--core-bottom-tabs-color-selected);