diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index 9ea008d859..2316cc9662 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -401,6 +401,10 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: hsla(0, 0%, 0%, 0.2);
     }
 
+    .recent_topic_unread_count {
+        background-color: hsl(0, 0%, 15%) !important;
+        color: hsl(0, 0%, 100%);
+    }
 
     .btn-recent-filters {
         background-color: hsl(0, 0%, 26%);
diff --git a/static/styles/recent_topics.scss b/static/styles/recent_topics.scss
index 9b1d212f95..3507ec7fdc 100644
--- a/static/styles/recent_topics.scss
+++ b/static/styles/recent_topics.scss
@@ -102,11 +102,11 @@
         }
 
         .recent_topic_unread_count {
-            text-align: center;
-            // width is kept less than width of
-            // header text "Unread" so, that final width
-            // is set to header's width.
-            width: 1px;
+            background-color: hsl(0, 0%, 89%);
+            float: right;
+            padding: 0.5px;
+            margin-right: 10px;
+            border-radius: 5px;
         }
 
         .recent_avatars {
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index 0bc13bf0a8..aae5d319e7 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/static/templates/recent_topic_row.hbs
@@ -1,11 +1,4 @@
 <tr id="recent_topic:{{stream_id}}:{{topic}}" {{#if hidden}}style="display:none;"{{/if}}>
-    <td class="recent_topic_unread_count">
-        {{#if unread_count}}
-        {{unread_count}}
-        {{else}}
-        <i class="fa fa-check-circle" title="{{t 'All messages read' }}" aria-hidden="true"></i>
-        {{/if}}
-    </td>
     <td class="recent_topic_stream">
         <span id="stream_sidebar_privacy_swatch_{{stream_id}}" class="stream-privacy filter-icon" style="color: {{stream_color}}">
             {{> stream_privacy }}
@@ -14,6 +7,7 @@
     </td>
     <td class="recent_topic_name">
         <a href="{{topic_url}}">{{topic}}</a>
+        {{#if unread_count}}<span class="recent_topic_unread_count">+{{unread_count}}</span>{{/if}}
     </td>
     <td class="recent_topic_actions">
         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
diff --git a/static/templates/recent_topics_table.hbs b/static/templates/recent_topics_table.hbs
index d516c61779..477f75a068 100644
--- a/static/templates/recent_topics_table.hbs
+++ b/static/templates/recent_topics_table.hbs
@@ -22,7 +22,6 @@
     <table class="table table-responsive table-hover">
         <thead>
             <tr>
-                <th>{{t 'Unread' }}</th>
                 <th>{{t 'Stream' }}</th>
                 <th>{{t 'Topic' }}</th>
                 <th>{{t 'Actions' }}</th>