diff --git a/src/views/messages/container.jsx b/src/views/messages/container.jsx
index fbcf4e590..91ea7574c 100644
--- a/src/views/messages/container.jsx
+++ b/src/views/messages/container.jsx
@@ -116,10 +116,20 @@ var Messages = React.createClass({
             )
         );
     },
-    filterMessages: function (messages, typesAllowed) {
+    filterMessages: function (messages, typesAllowed, unreadCount) {
         var filteredMessages = [];
         for (var i in messages) {
-            if (typesAllowed.indexOf(messages[i].type) > -1) {
+            // check to see if the position of the message in the list is earlier
+            // than the unread count. If it is, then the message is totally unread.
+            messages[i].unread = false;
+            if (i < unreadCount) messages[i].unread = true;
+
+            if (typesAllowed.length > 0) {
+                if (typesAllowed.indexOf(messages[i].type) > -1) {
+                    filteredMessages.push(messages[i]);
+                }
+            } else {
+                // if empty, then we're looking at all messages, so just like add the message
                 filteredMessages.push(messages[i]);
             }
         }
@@ -131,10 +141,11 @@ var Messages = React.createClass({
             loadMore = false;
         }
 
-        var messages = this.props.messages;
-        if (this.state.filterValues.length > 0) {
-            messages = this.filterMessages(messages, this.state.filterValues);
-        }
+        var messages = this.filterMessages(
+            this.props.messages,
+            this.state.filterValues,
+            this.props.numNewMessages
+        );
 
         return(
             <MessagesPresentation
diff --git a/src/views/messages/presentation.jsx b/src/views/messages/presentation.jsx
index e1c2a2093..08c4c19ad 100644
--- a/src/views/messages/presentation.jsx
+++ b/src/views/messages/presentation.jsx
@@ -42,8 +42,8 @@ var SocialMessagesList = React.createClass({
             numNewMessages: 0
         };
     },
-    getComponentForMessage: function (message, unread) {
-        var className = (unread) ? 'mod-unread' : '';
+    getComponentForMessage: function (message) {
+        var className = (message.unread) ? 'mod-unread' : '';
         var key = message.type + '_' + message.id;
 
         switch (message.type) {
@@ -140,14 +140,10 @@ var SocialMessagesList = React.createClass({
             />;
         }
     },
-    renderSocialMessages: function (messages, unreadCount) {
+    renderSocialMessages: function (messages) {
         var messageList = [];
         for (var i in messages) {
-            if (i <= unreadCount) {
-                messageList.push(this.getComponentForMessage(messages[i], true));
-            } else {
-                messageList.push(this.getComponentForMessage(messages[i], false));
-            }
+            messageList.push(this.getComponentForMessage(messages[i]));
         }
         return messageList;
     },
@@ -195,7 +191,7 @@ var SocialMessagesList = React.createClass({
                         </h4>
                     </div>,
                     <ul className="messages-social-list" key="messages-social-list">
-                        {this.renderSocialMessages(this.props.messages, (this.props.numNewMessages - 1))}
+                        {this.renderSocialMessages(this.props.messages)}
                     </ul>,
                     this.renderLoadMore(this.props.loadMore)
                 ] : []}