diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less
index ab661a47abd7084c09ed12ab3335675d78328edb..a921710ebad775029a71443d16e9b33d7fb102c5 100644
--- a/packages/rocketchat-theme/assets/stylesheets/base.less
+++ b/packages/rocketchat-theme/assets/stylesheets/base.less
@@ -174,6 +174,12 @@ blockquote {
 }
 
 .first-unread {
+	&.message {
+		padding-top: 20px;
+	}
+	&.sequential.message {
+		padding-top: 20px;
+	}
 	.body {
 		&::before {
 			content: "";
@@ -181,21 +187,24 @@ blockquote {
 			height: 1px;
 			position: absolute;
 			right: 0px;
-			left: 20px;
+			left: 0px;
 			top: 0px;
 			.transition(background-color, .5s, linear);
+			height: 16px;
 		}
 		&::after {
 			content: "unread messages";
 			display: block;
 			position: absolute;
 			right: 0px;
-			top: -4px;
+			top: 0px;
 			text-transform: uppercase;
-			font-size: 8px;
-			line-height: 10px;
+			font-size: 12px;
+			line-height: 16px;
 			padding: 0 5px;
 			.transition(color, .5s, linear);
+			left: 0;
+			text-align: center;
 		}
 	}
 }
diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
index c06d30225d6d5bf4d97761de08c9874fa69bc369..14a0c6901d3cc36bbd8e0855e18a3f6f5e029c4f 100755
--- a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
@@ -329,6 +329,28 @@ blockquote:before {
  * Message content
  */
 
+.first-unread {
+	.body {
+		&::before {
+			background: @primary-background-color;
+		}
+		&::after {
+			color: @content-background-color;
+		}
+	}
+}
+
+.first-unread-opaque {
+	.body {
+		&::before {
+			background: @component-color;
+		}
+		&::after {
+			color: @primary-font-color;
+		}
+	}
+}
+
 .message {
 	.body {
 		color: @primary-font-color;