diff --git a/static/js/message_list.js b/static/js/message_list.js
index 2e46f49720..0f334b99e6 100644
--- a/static/js/message_list.js
+++ b/static/js/message_list.js
@@ -137,10 +137,6 @@ MessageList.prototype = {
             opts.id = id;
         }
 
-        if (this._is_summarized_message(this.get(id))) {
-            id = opts.id = this.closest_id(id);
-        }
-
         this._selected_id = id;
         if (!opts.from_rendering) {
             this._maybe_rerender();
@@ -160,10 +156,6 @@ MessageList.prototype = {
     closest_id: function MessageList_closest_id(id) {
         var items = this._items;
 
-        if (this.summarize_read) {
-            items = _.reject(items, this._is_summarized_message, this);
-        }
-
         if (items.length === 0) {
             return -1;
         }
@@ -373,7 +365,7 @@ MessageList.prototype = {
             last_message_id = rows.id(last_row);
             prev = this.get(last_message_id);
 
-            if (last_row.nextAll('.summary_row').length) {
+            if (last_row.is('.summary_row')) {
                 // Don't group with a summary, but don't put separators before the new message
                 prev = _.pick(prev, 'timestamp', 'historical');
             }
@@ -428,6 +420,7 @@ MessageList.prototype = {
                     // that will trigger the right part of the handlebars template and won't
                     // show the content, date, etc. from the real message.
                     summary_group[key] = $.extend({}, message, {
+                        first_message_id: message.id,
                         is_summary: true,
                         include_recipient: true,
                         include_sender: false,
diff --git a/static/js/narrow.js b/static/js/narrow.js
index 85238e9be0..da18e1d647 100644
--- a/static/js/narrow.js
+++ b/static/js/narrow.js
@@ -602,6 +602,12 @@ exports.deactivate = function () {
         (current_msg_list.selected_row().length > 0) &&
         (current_msg_list.pre_narrow_offset !== undefined);
 
+    if (feature_flags.summarize_read_while_narrowed) {
+        // TODO: avoid a full re-render
+        // Necessary to replace messages read in the narrow with summary blocks
+        current_msg_list.rerender();
+    }
+
     // We fall back to the closest selected id, if the user has removed a stream from the home
     // view since leaving it the old selected id might no longer be there
     current_msg_list.select_id(current_msg_list.selected_id(), {
@@ -619,12 +625,6 @@ exports.deactivate = function () {
     hashchange.save_narrow();
     compose.update_faded_messages();
 
-    if (feature_flags.summarize_read_while_narrowed) {
-        // needed to replace messages read in the narrow with summary blocks
-        // TODO: avoid a full re-render
-        current_msg_list.rerender();
-    }
-
     $(document).trigger($.Event('narrow_deactivated.zulip', {msg_list: current_msg_list}));
 };
 
diff --git a/static/js/rows.js b/static/js/rows.js
index 702c3c4959..2398af80b2 100644
--- a/static/js/rows.js
+++ b/static/js/rows.js
@@ -9,30 +9,30 @@ var rows = (function () {
         if (message_row === undefined) {
             return $();
         }
-        var row = message_row.next('.message_row');
+        var row = message_row.next('.selectable_row');
         if (row.length !== 0) {
             return row;
         }
-        return message_row.nextUntil('.message_row').next('.message_row');
+        return message_row.nextUntil('.selectable_row').next('.selectable_row');
     };
 
     exports.prev_visible = function (message_row) {
         if (message_row === undefined) {
             return $();
         }
-        var row = message_row.prev('.message_row');
+        var row = message_row.prev('.selectable_row');
         if (row.length !== 0) {
             return row;
         }
-        return message_row.prevUntil('.message_row').prev('.message_row');
+        return message_row.prevUntil('.selectable_row').prev('.selectable_row');
     };
 
     exports.first_visible = function () {
-        return $('.focused_table .message_row:first');
+        return $('.focused_table .selectable_row:first');
     };
 
     exports.last_visible = function () {
-        return $('.focused_table .message_row:last');
+        return $('.focused_table .selectable_row:last');
     };
 
     exports.id = function (message_row) {
@@ -58,7 +58,7 @@ var rows = (function () {
             return $();
         }
 
-        return $('#' + table_name + message_id);
+        return $('#' + table_name + message_id + ', #' + table_name + ' [data-messages~=' + message_id + ']');
     };
 
     exports.get_table = function (table_name) {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 598003a352..473326e0db 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -757,7 +757,7 @@ td.pointer {
     box-shadow: inset 0px 4px 5px -4px #3093c3, inset 2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
 }
 
-.selected_message .messagebox_colorblock {
+.selected_message .messagebox_colorblock, .selected_message .summary_colorblock {
     box-shadow: 0px 0px 5px 0px #3093c3, inset 3px 0px 1px -2px #39afe8, inset 0px -3px 1px -2px #39afe8, inset 0px 3px 1px -2px #39afe8, inset -12px 0px 0px -1px rgba(240,240,240,0.6);
 }
 
@@ -769,7 +769,7 @@ td.pointer {
     display: inline-block;
 }
 
-.selected_message .messagebox {
+.selected_message .messagebox, .selected_message.summary_row .message_header{
     box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
  }
 
diff --git a/static/templates/message.handlebars b/static/templates/message.handlebars
index 54cf8556af..be0ae67e42 100644
--- a/static/templates/message.handlebars
+++ b/static/templates/message.handlebars
@@ -30,9 +30,11 @@
 {{/if}}
 
 {{#if is_summary}}
-  <tr data-messages="{{message_ids}}" class="recipient_row summary_row">
+  <tr zid="{{first_message_id}}" id="{{dom_id}}" data-messages="{{message_ids}}" class="summary_row selectable_row{{#include_footer}} last_message{{/include_footer}}{{^is_stream}} summary_row_private_message{{/is_stream}}">
   {{#if is_stream}}
-    <td class="message_header_colorblock" style="background-color: {{background_color}};"></td>
+    <td class="summary_colorblock" style="background-color: {{background_color}};">
+      <span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
+    </td>
     <td class="message_header message_header_stream right_part">
         <span class="message_label_clickable"><i class="icon-vector-expand-alt"></i> {{display_recipient}} &nbsp;<i class="icon-vector-narrow icon-vector-small"></i><span class="copy-paste-text">&gt;</span> &nbsp;{{subject}} ({{count}} read)</span>
     </td>
@@ -72,7 +74,7 @@
 {{/if}}
 {{/include_recipient}}
 <tr zid="{{id}}" id="{{dom_id}}"
-    class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}}">
+    class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row">
         <td class="messagebox_colorblock{{^is_stream}} message_header_private_message{{/is_stream}}" style="background-color: {{background_color}};"><span class="pointer_icon"><i class="icon-vector-caret-right"></i></span></td>
         <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
         <div class="message_top_line">