diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index a6a1c9216..2d0b64d50 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -4,22 +4,20 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <h1>
-            <div class="addon-messages-discussion-title">
-                <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
-                    alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
-                    [siteId]="siteId || null">
-                <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
-                    [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()">
-                </core-user-avatar>
-                <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"
-                    (click)="showInfo && !isGroup && viewInfo()"></core-format-text>
-                <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
-                    [attr.aria-label]="'core.favourites' | translate">
-                </ion-icon>
-                <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
-                    [attr.aria-label]="'addon.messages.mutedconversation' | translate">
-                </ion-icon>
-            </div>
+            <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
+                alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
+                [siteId]="siteId || null">
+            <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
+                [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()">
+            </core-user-avatar>
+            <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"
+                (click)="showInfo && !isGroup && viewInfo()"></core-format-text>
+            <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
+                [attr.aria-label]="'core.favourites' | translate">
+            </ion-icon>
+            <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
+                [attr.aria-label]="'addon.messages.mutedconversation' | translate">
+            </ion-icon>
         </h1>
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
@@ -101,11 +99,6 @@
                                 *ngIf="message.showUserData"></core-user-avatar>
 
                             <div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
-
-                            <ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
-                            <ion-note *ngIf="message.pending">
-                                <ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
-                            </ion-note>
                         </div>
 
                         <!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
@@ -114,6 +107,10 @@
                                 [contextInstanceId]="0"></core-format-text>
                         </p>
                     </ion-label>
+                    <ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
+                    <ion-note *ngIf="message.pending" slot="end">
+                        <ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
+                    </ion-note>
                     <ion-button fill="clear" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)"
                         class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'"
                         [attr.aria-label]=" 'addon.messages.deletemessage' | translate" slot="end">
diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss
index 5582fd11b..42ff565ed 100644
--- a/src/addons/messages/pages/discussion/discussion.scss
+++ b/src/addons/messages/pages/discussion/discussion.scss
@@ -1,6 +1,8 @@
+@import "~theme/globals.scss";
+
 :host {
     ion-content {
-        --background: var(--background-lighter);
+        --background: var(--background-alternative);
 
         &::part(scroll) {
             padding-bottom: 0 !important;
@@ -11,7 +13,7 @@
         display: flex;
         flex-direction: column;
         padding-bottom: 15px;
-        background: var(--background-lighter);
+        background: var(--background-alternative);
     }
 
     .addon-messages-date {
@@ -35,17 +37,16 @@
     ion-item.addon-message {
         border: 0;
         border-radius: 4px;
-        padding: 8px;
-        margin: 8px 8px 0 8px;
+        padding: 0 8px 0 8px;
+        margin: 10px 8px 0 8px;
         --background: var(--addon-messages-message-bg);
         background: var(--background);
         align-self: flex-start;
         width: 90%;
         max-width: 90%;
-        min-height: 0;
+        --min-height: var(--a11y-min-target-size);
         position: relative;
-        -webkit-transition: width 500ms ease-in-out;
-        transition: width 500ms ease-in-out;
+        @include core-transition(width);
         // This is needed to display bubble tails.
         overflow: visible;
 
@@ -78,22 +79,19 @@
             div {
                 font-weight: 500;
                 flex-grow: 1;
-                padding-right: .5rem;
-                padding-left: .5rem;
+                @include padding-horizontal(.5rem);
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
-
-            ion-note {
-                text-align: end;;
-                color: var(--addon-messages-message-note-text);
-                font-size: var(--addon-messages-message-note-font-size);
-            }
         }
 
-        &.addon-message-no-user .addon-message-user ion-note {
-            width: 100%;
+        ion-note {
+            color: var(--addon-messages-message-note-text);
+            font-size: var(--addon-messages-message-note-font-size);
+            margin: 0;
+            padding: 0 0 8px 0;
+            align-self: flex-end;
         }
 
         &:active {
@@ -102,7 +100,7 @@
 
         ion-label {
             margin: 0;
-            padding: 0;
+            padding: 8px 0;
         }
 
         .addon-message-text {
@@ -115,12 +113,9 @@
         .addon-messages-delete-button {
             min-height: initial;
             line-height: initial;
-            margin: 0 0 0 10px;
-            height: 1.6em !important;
-            -webkit-align-self: flex-end;
+            @include margin(0, null, 0, null);
+            height: var(--a11y-min-target-size) !important;
             align-self: flex-end;
-            vertical-align: middle;
-            float: inline-end;
 
             ion-icon {
                 font-size: 1.4em;
@@ -136,6 +131,7 @@
             border: 0.5rem solid transparent;
             position: absolute;
             touch-action: none;
+            bottom: 0;
         }
 
         // Defines when an item-message is the user's.
@@ -148,19 +144,18 @@
             }
 
             .spinner {
-                float: inline-end;
-                margin: 2px, -3px, -2px, 5px;
+                @include float(end);
+                @include margin(2px, -3px, -2px, 5px);
 
                 svg {
-                  width: 16px;
-                  height: 16px;
+                    width: 16px;
+                    height: 16px;
                 }
             }
 
             .tail {
-                right: -8px;
-                bottom: -8px;
-                margin-right: -0.5rem;
+                @include position(null, -8px, null, null);
+                @include margin-horizontal(null, -0.5rem);
                 border-bottom-color: var(--addon-messages-message-mine-bg);
             }
 
@@ -171,9 +166,8 @@
 
         &.addon-message-not-mine .tail {
             border-bottom-color: var(--addon-messages-message-bg);
-            bottom: -8px;
-            left: -8px;
-            margin-left: -0.5rem;
+            @include position(null, null, null, -8px);
+            @include margin-horizontal(-0.5rem, null);
         }
 
         &.addon-message-not-mine.activated .tail {
@@ -186,10 +180,7 @@
         .item-heading {
             margin-bottom: 0;
         }
-        margin-top: -8px;
         padding-top: 0;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
     }
 
     .has-fab .scroll-content {
@@ -211,19 +202,17 @@
             line-height: 20px;
             height: 20px;
             width: 20px;
-            right: -6px;
-            top: -6px;
-
+            @include position(-6px, -6px, null, null);
         }
     }
 
-    ion-header ion-toolbar .addon-messages-discussion-title {
+    ion-header ion-toolbar h1 {
         display: flex;
         align-items: center;
         padding: 0;
 
         .core-bar-button-image {
-            margin-right: 6px;
+            @include margin-horizontal(null, 6px);
         }
 
         core-format-text {
@@ -234,64 +223,13 @@
         }
 
         ion-icon {
-            margin-left: 6px;
-        }
-    }
-}
-
-:host-context([dir=rtl]) {
-    ion-header ion-toolbar .addon-messages-discussion-title {
-        .core-bar-button-image {
-            margin-left: 6px;
-            margin-right: 0;
-        }
-
-        ion-icon {
-            margin-right: 6px;
-            margin-left: 0;
-        }
-    }
-
-    // Message item.
-    ion-item.addon-message {
-
-        .addon-messages-delete-button {
-            margin-right: 10px;
-            margin-left: 0;
-        }
-
-        &.addon-message-mine {
-            .spinner {
-                margin-right: 5px;
-                margin-left: -3px;
-            }
-
-            .tail {
-                right: unset;
-                left: -8px;
-                margin-right: unset;
-                margin-left: 0;
-            }
-        }
-
-        &.addon-message-not-mine .tail {
-            right: -8px;
-            margin-right: -0.5rem;
-            left: unset;
-            margin-left: 0;
-        }
-    }
-
-    ion-fab button {
-        .core-discussion-messages-badge {
-            left: -6px;
-            right: unset;
+            @include margin-horizontal(6px, null);
         }
     }
 }
 
 :host-context(.ios) {
-    ion-header ion-toolbar .addon-messages-discussion-title {
+    ion-header ion-toolbar h1 {
         justify-content: center;
     }
 
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index f21119486..edfc59a1e 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -7,27 +7,27 @@
 /*
  * App colors
  */
-$shade-0: #000000 !default;
-$shade-100: #ffffff !default;
-$shade-5: mix($shade-100, $shade-0, 5%) !default;   // #0d0d0d
-$shade-10: mix($shade-100, $shade-0, 10%) !default; // #1a1a1a
-$shade-15: mix($shade-100, $shade-0, 15%) !default; // #262626
-$shade-20: mix($shade-100, $shade-0, 20%) !default; // #333333
-$shade-25: mix($shade-100, $shade-0, 25%) !default; // #404040
-$shade-30: mix($shade-100, $shade-0, 30%) !default; // #4d4d4d
-$shade-35: mix($shade-100, $shade-0, 35%) !default; // #595959
-$shade-40: mix($shade-100, $shade-0, 40%) !default; // #666666
-$shade-45: mix($shade-100, $shade-0, 45%) !default; // #737373
+$shade-0: #ffffff !default;
+$shade-100: #000000 !default;
+$shade-5: mix($shade-100, $shade-0, 5%) !default;   // #f2f2f2
+$shade-10: mix($shade-100, $shade-0, 10%) !default; // #e6e6e6
+$shade-15: mix($shade-100, $shade-0, 15%) !default; // #d9d9d9
+$shade-20: mix($shade-100, $shade-0, 20%) !default; // #cccccc
+$shade-25: mix($shade-100, $shade-0, 25%) !default; // #bfbfbf
+$shade-30: mix($shade-100, $shade-0, 30%) !default; // #b3b3b3
+$shade-35: mix($shade-100, $shade-0, 35%) !default; // #a6a6a6
+$shade-40: mix($shade-100, $shade-0, 40%) !default; // #999999
+$shade-45: mix($shade-100, $shade-0, 45%) !default; // #8c8c8c
 $shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080
-$shade-55: mix($shade-100, $shade-0, 55%) !default; // #8c8c8c
-$shade-60: mix($shade-100, $shade-0, 60%) !default; // #999999
-$shade-65: mix($shade-100, $shade-0, 65%) !default; // #a6a6a6
-$shade-70: mix($shade-100, $shade-0, 70%) !default; // #b3b3b3
-$shade-75: mix($shade-100, $shade-0, 75%) !default; // #bfbfbf
-$shade-80: mix($shade-100, $shade-0, 80%) !default; // #cccccc
-$shade-85: mix($shade-100, $shade-0, 85%) !default; // #d9d9d9
-$shade-90: mix($shade-100, $shade-0, 90%) !default; // #e6e6e6
-$shade-95: mix($shade-100, $shade-0, 95%) !default; // #f2f2f2
+$shade-55: mix($shade-100, $shade-0, 55%) !default; // #737373
+$shade-60: mix($shade-100, $shade-0, 60%) !default; // #666666
+$shade-65: mix($shade-100, $shade-0, 65%) !default; // #595959
+$shade-70: mix($shade-100, $shade-0, 70%) !default; // #4d4d4d
+$shade-75: mix($shade-100, $shade-0, 75%) !default; // #404040
+$shade-80: mix($shade-100, $shade-0, 80%) !default; // #333333
+$shade-85: mix($shade-100, $shade-0, 85%) !default; // #262626
+$shade-90: mix($shade-100, $shade-0, 90%) !default; // #1a1a1a
+$shade-95: mix($shade-100, $shade-0, 95%) !default; // #0d0d0d
 
 $black:           #282828 !default; // Headings, standard text.
 $gray-darker:     #686566 !default; // Text (emphasis-detail), placeholder, background.
@@ -35,7 +35,7 @@ $gray-dark:       #9e9e9e !default; // Borders (never text).
 $gray:            #dddddd !default;
 $gray-light:      #e9e9e9 !default; // Background.
 $gray-lighter:    #f5f5f5 !default;
-$white:           $shade-100 !default; // Background, reversed text.
+$white:           $shade-0 !default; // Background, reversed text.
 
 
 $blue:            #0064d2 !default; // Link, background.
@@ -72,15 +72,17 @@ $text-color-dark:          $white !default;
 $link-color:               $blue !default;
 $link-color-dark:          $blue-light !default;
 $background-color:         $gray-light !default;
-$background-color-dark:    #{$shade-10} !default;
+$background-color-dark:    #{$shade-90} !default;
 $subdued-text-color:       $gray-darker !default;
 
 $ion-item-background:      $white !default;
-$ion-item-background-dark: #{$shade-20} !default;
+$ion-item-background-dark: #{$shade-80} !default;
 $ion-item-divider-background: #{$gray-lighter} !default;
 $ion-item-divider-color: #{$text-color} !default;
-$ion-item-divider-background-dark: #{$shade-25} !default;
+$core-spacer-background: #{$ion-item-divider-background} !default;
+$ion-item-divider-background-dark: #{$shade-75} !default;
 $ion-item-divider-color-dark: #{$text-color-dark} !default;
+$core-spacer-background-dark: #{$shade-100} !default;
 
 $core-online-color: #5cb85c !default;
 
@@ -274,7 +276,7 @@ $toolbar-height-ios: 54px !default;
 
 // Bottom tab bar.
 $bottom-tabs-background: $white !default;
-$bottom-tabs-background-dark: $shade-15 !default;
+$bottom-tabs-background-dark: $shade-85 !default;
 $bottom-tabs-color: $gray-darker !default;
 $bottom-tabs-color-dark: $white !default;
 $bottom-tabs-color-selected: $primary !default;
@@ -296,7 +298,7 @@ $core-tab-border-color: $gray !default;
 $core-tab-color-active: $primary !default;
 $core-tab-color-active-dark: $primary-dark !default;
 
-$core-tabs-background-dark: $shade-25 !default;
+$core-tabs-background-dark: $shade-75 !default;
 $core-tab-background-dark: $core-tabs-background-dark !default;
 $core-tab-color-dark: $white !default;
 $core-tab-border-color-dark: $gray-light !default;
@@ -363,11 +365,12 @@ $addon-messages-avatar-size: 30px !default;
 $addon-messages-discussion-badge: $primary !default;
 $addon-messages-discussion-badge-text: $white !default;
 
-$addon-messages-message-bg-dark: $black !default;
-$addon-messages-message-activated-bg-dark: $gray-dark !default;
+$addon-messages-message-bg-dark:  $shade-75 !default;
+
+$addon-messages-message-activated-bg-dark: $shade-65 !default;
 $addon-messages-message-note-text-dark: $gray-light !default;
-$addon-messages-message-mine-bg-dark: $shade-0 !default;
-$addon-messages-message-mine-activated-bg-dark: $gray !default;
+$addon-messages-message-mine-bg-dark: $shade-60 !default;
+$addon-messages-message-mine-activated-bg-dark: $shade-50 !default;
 $addon-messages-discussion-badge-dark: $primary-dark !default;
 $addon-messages-discussion-badge-text-dark: $black !default;
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index fe5513b28..f2e7f1458 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -464,6 +464,12 @@ ion-item img.core-module-icon[slot="start"] {
     margin-right: 32px;
 }
 
+ion-card ion-item img.core-module-icon[slot="start"] {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+}
+
 [dir=rtl] ion-item img.core-module-icon[slot="start"] {
     margin-right: unset;
     margin-left: 32px;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index e6a421bbd..10ef3020a 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -48,14 +48,14 @@
         @include generate-color($color-name, $colors-dark);
     }
 
-    --ion-border-color: #{$shade-15};
+    --ion-border-color: #{$shade-85};
 
     --ion-card-color: #{$text-color-dark};
     --ion-card-background: #{$ion-item-background-dark};
 
     ion-content {
         --background: var(--ion-background-color);
-        --background-lighter: var(--gray-darker);
+        --background-alternative: var(--black);
         --contrast-background: var(--ion-background-color);
     }
 
@@ -88,6 +88,7 @@
     --ion-item-detail-icon-color: var(--white);
     --item-divider-background: #{$ion-item-divider-background-dark};
     --item-divider-color: #{$ion-item-divider-color-dark};
+    --spacer-background: #{$core-spacer-background-dark};
 
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color-dark};
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 0d2680d3c..a8e7df89d 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -80,7 +80,7 @@
 
     ion-content {
         --background: var(--ion-background-color);
-        --background-lighter: var(--gray-lighter);
+        --background-alternative: var(--gray-lighter);
         --contrast-background: var(--white);
     }
 
@@ -193,6 +193,12 @@
         min-height: var(--min-height);
     }
 
+    --spacer-background: #{$core-spacer-background};
+    core-spacer {
+    --item-divider-background: var(--spacer-background);
+    }
+
+
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color};