diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index ddbebcadf..8d88b2378 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -32,12 +32,12 @@
                         </ion-avatar>
                         <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p *ngIf="discussion.userfullname">
-                            <ion-note float-end padding-start><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+                            <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
                             {{discussion.userfullname}}
                         </p>
                     </ion-item>
                     <ion-card-content>
-                        <ion-note text-right *ngIf="discussion.groupname">
+                        <ion-note text-end *ngIf="discussion.groupname">
                             <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
                         </ion-note>
                         <p><core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p>
@@ -50,9 +50,9 @@
                         </ion-avatar>
                         <h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p>
-                            <ion-note float-end padding-start>
+                            <ion-note float-end padding-left text-end>
                                 {{discussion.created | coreDateDayOrTime}}
-                                <div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
+                                <div *ngIf="discussion.numunread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
                             </ion-note>
                             {{discussion.userfullname}}
                         </p>
@@ -93,7 +93,7 @@
             </ion-infinite-scroll>
         </core-loading>
 
-        <ion-fab bottom right *ngIf="forum && forum.cancreatediscussions">
+        <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">
             <button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
                 <ion-icon name="add"></ion-icon>
             </button>
diff --git a/src/addon/mod/forum/components/index/index.ts b/src/addon/mod/forum/components/index/index.ts
index 72993f242..942c456ea 100644
--- a/src/addon/mod/forum/components/index/index.ts
+++ b/src/addon/mod/forum/components/index/index.ts
@@ -88,6 +88,12 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         this.viewDiscObserver = this.eventsProvider.on(AddonModForumProvider.VIEW_DISCUSSION_EVENT, (data) => {
             if (this.forum && this.forum.id == data.forumId) {
                 this.selectedDiscussion = this.splitviewCtrl.isOn() ? data.discussion : 0;
+
+                // Invalidate discussion list if it was not read.
+                const discussion = this.discussions.find((disc) => disc.discussion == data.discussion);
+                if (discussion && discussion.numunread > 0) {
+                    this.forumProvider.invalidateDiscussionsList(this.forum.id);
+                }
             }
         }, this.sitesProvider.getCurrentSiteId());
 
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
index b5d7c22eb..1260a8b5d 100644
--- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html
+++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
@@ -1,18 +1,20 @@
-<ion-item text-wrap>
-    <ion-avatar item-start (click)="openUserProfile(post.userid)">
-        <img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation">
-    </ion-avatar>
-    <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
-    <p>
-        <ion-note float-end padding-start *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
-        <ion-note float-end padding-start *ngIf="post.modified">
-            {{post.modified | coreDateDayOrTime}}
-            <div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
-        </ion-note>
-        {{post.userfullname}}
-    </p>
-</ion-item>
-<ion-card-content>
+<ion-card-header text-wrap no-padding >
+    <ion-item text-wrap>
+        <ion-avatar item-start (click)="openUserProfile(post.userid)">
+            <img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation">
+        </ion-avatar>
+        <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
+        <p>
+            <ion-note float-end padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+            <ion-note float-end padding-left text-end *ngIf="post.modified">
+                {{post.modified | coreDateDayOrTime}}
+                <div *ngIf="unread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
+            </ion-note>
+            {{post.userfullname}}
+        </p>
+    </ion-item>
+</ion-card-header>
+<ion-card-content padding-top>
     <core-format-text [component]="component" [componentId]="componentId" [text]="post.message"></core-format-text>
     <div *ngFor="let attachment of post.attachments">
         <!-- Files already attached to the submission. -->
@@ -21,12 +23,12 @@
         <core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file>
     </div>
 </ion-card-content>
-<ion-item text-right *ngIf="post.id && post.canreply">
+<ion-item no-padding text-end *ngIf="post.id && post.canreply" class="addon-forum-reply-button">
     <button ion-button icon-left clear small (click)="showReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.id">
         <ion-icon name="undo"></ion-icon> {{ 'addon.mod_forum.reply' | translate }}
     </button>
 </ion-item>
-<ion-item text-right *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
+<ion-item text-end *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
     <button ion-button icon-left clear small (click)="editReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.parent">
         <ion-icon name="create"></ion-icon> {{ 'addon.mod_forum.edit' | translate }}
     </button>
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html
index dd59860cf..3d0048019 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.html
+++ b/src/addon/mod/forum/pages/discussion/discussion.html
@@ -30,7 +30,7 @@
             <ion-icon name="warning"></ion-icon> {{ 'addon.mod_forum.discussionlocked' | translate }}
         </ion-card>
 
-        <ion-card *ngIf="discussion" margin-bottom>
+        <ion-card *ngIf="discussion" margin-bottom class="highlight">
             <addon-mod-forum-post [post]="discussion" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
         </ion-card>
 
@@ -51,7 +51,7 @@
             <ion-card>
                 <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>
             </ion-card>
-            <div padding-start *ngIf="post.children.length && post.children[0].subject">
+            <div padding-left *ngIf="post.children.length && post.children[0].subject">
                 <ng-container *ngFor="let child of post.children">
                     <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
                 </ng-container>
diff --git a/src/addon/mod/forum/pages/discussion/discussion.scss b/src/addon/mod/forum/pages/discussion/discussion.scss
new file mode 100644
index 000000000..b4151f311
--- /dev/null
+++ b/src/addon/mod/forum/pages/discussion/discussion.scss
@@ -0,0 +1,9 @@
+ion-app.app-root page-addon-mod-forum-discussion {
+    .card.highlight .card-header .item {
+        background-color: $gray-lighter;
+    }
+
+    .addon-forum-reply-button .label {
+        margin: 0;
+    }
+}
\ No newline at end of file