diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
index b1890772d..6e19b027d 100644
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -14,7 +14,6 @@ export function ChatConversationListComponent({
   conversationList,
   openConversation
 }) {
-  console.log("conversationList", conversationList);
 
   return (
     <div className='chat-overlay-open'>
diff --git a/client/src/components/chat-conversation/chat-conversation.component.jsx b/client/src/components/chat-conversation/chat-conversation.component.jsx
index a04b6b0d7..eb257a56d 100644
--- a/client/src/components/chat-conversation/chat-conversation.component.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.component.jsx
@@ -7,10 +7,11 @@ import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
 export default function ChatConversationComponent({
   conversation,
   messages,
-  subState
+  subState,
+  unreadCount
 }) {
   return (
-    <Badge count={messages.length}>
+    <Badge count={unreadCount}>
       <Card className='chat-overlay' size='small'>
         {conversation.open ? (
           <ChatConversationOpenComponent
diff --git a/client/src/components/chat-conversation/chat-conversation.container.jsx b/client/src/components/chat-conversation/chat-conversation.container.jsx
index c69e4e102..90d0ae032 100644
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -1,19 +1,34 @@
 import { useSubscription } from "@apollo/react-hooks";
 import React from "react";
-import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries";
+import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
 import ChatConversationComponent from "./chat-conversation.component";
 
 export default function ChatConversationContainer({ conversation }) {
-  const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
-    variables: { conversationId: conversation.id }
-  });
+  const { loading, error, data } = useSubscription(
+    CONVERSATION_SUBSCRIPTION_BY_PK,
+    {
+      variables: { conversationId: conversation.id }
+    }
+  );
 
   return (
     <ChatConversationComponent
       subState={[loading, error]}
       conversation={conversation}
-      messages={(data && data.messages) || []}
+      unreadCount={
+        (data &&
+          data.conversations_by_pk &&
+          data.conversations_by_pk.messages_aggregate &&
+          data.conversations_by_pk.messages_aggregate.aggregate &&
+          data.conversations_by_pk.messages_aggregate.aggregate.count) ||
+        0
+      }
+      messages={
+        (data &&
+          data.conversations_by_pk &&
+          data.conversations_by_pk.messages) ||
+        []
+      }
     />
   );
 }
-
diff --git a/client/src/components/chat-conversation/chat-conversation.styles.scss b/client/src/components/chat-conversation/chat-conversation.styles.scss
index 59fee6569..319582f5d 100644
--- a/client/src/components/chat-conversation/chat-conversation.styles.scss
+++ b/client/src/components/chat-conversation/chat-conversation.styles.scss
@@ -1,28 +1,28 @@
-.chat-overlay-wrapper {
-  width: 95vw;
-}
-.chat-overlay-scroller {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  vertical-align: bottom;
-}
-.chat-overlay {
-  margin: 0px 12px;
-  display: inline-block;
-}
-.chat-overlay-open {
-  width: 400px;
-  height: 33vh;
-  display: flex;
-  flex-flow: column;
-}
-.chat-overlay-closed {
-  display: flex;
-  justify-content: space-between;
-  vertical-align: middle;
-  width: 150px;
-  cursor: pointer;
-}
+// .chat-overlay-wrapper {
+//   width: 95vw;
+// }
+// .chat-overlay-scroller {
+//   overflow-x: scroll;
+//   overflow-y: hidden;
+//   vertical-align: bottom;
+// }
+// .chat-overlay {
+//   margin: 0px 12px;
+//   display: inline-block;
+// }
+// .chat-overlay-open {
+//   width: 400px;
+//   height: 33vh;
+//   display: flex;
+//   flex-flow: column;
+// }
+// .chat-overlay-closed {
+//   display: flex;
+//   justify-content: space-between;
+//   vertical-align: middle;
+//   width: 150px;
+//   cursor: pointer;
+// }
 
 // .chat-messages {
 //   height: 80%;
diff --git a/client/src/components/chat-dock/chat-dock.container.jsx b/client/src/components/chat-dock/chat-dock.container.jsx
index e83c60425..a7d4970d3 100644
--- a/client/src/components/chat-dock/chat-dock.container.jsx
+++ b/client/src/components/chat-dock/chat-dock.container.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectConversations } from "../../redux/messaging/messaging.selectors";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
-import ChatMessagesButton from "../chat-messages-button/chat-messages-button.component";
+import ChatMessagesButtoContainer from "../chat-messages-button/chat-messages-button.container";
 
 const mapStateToProps = createStructuredSelector({
   activeConversations: selectConversations
@@ -13,16 +13,18 @@ const mapStateToProps = createStructuredSelector({
 export function ChatOverlayContainer({ activeConversations }) {
   return (
     <Affix offsetBottom={0}>
-      <ChatMessagesButton />
+      <div className='chat-dock'>
+        <ChatMessagesButtoContainer />
 
-      {activeConversations
-        ? activeConversations.map(conversation => (
-            <ChatConversationContainer
-              conversation={conversation}
-              key={conversation.id}
-            />
-          ))
-        : null}
+        {activeConversations
+          ? activeConversations.map(conversation => (
+              <ChatConversationContainer
+                conversation={conversation}
+                key={conversation.id}
+              />
+            ))
+          : null}
+      </div>
     </Affix>
   );
 }
diff --git a/client/src/components/chat-messages-button/chat-messages-button.component.jsx b/client/src/components/chat-messages-button/chat-messages-button.component.jsx
index 2e6b07e6d..9184cce74 100644
--- a/client/src/components/chat-messages-button/chat-messages-button.component.jsx
+++ b/client/src/components/chat-messages-button/chat-messages-button.component.jsx
@@ -1,13 +1,12 @@
 import { MessageFilled } from "@ant-design/icons";
-import { Card } from "antd";
+import { Badge, Card } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import ChatConversationListContainer from "../chat-conversation-list/chat-conversation-list.container";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
 
 const mapStateToProps = createStructuredSelector({
   chatVisible: selectChatVisible
@@ -16,19 +15,26 @@ const mapDispatchToProps = dispatch => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
-export function ChatWindowComponent({ chatVisible, toggleChatVisible }) {
+export function ChatWindowComponent({
+  chatVisible,
+  toggleChatVisible,
+  conversationList,
+  unreadCount
+}) {
   const { t } = useTranslation();
   return (
-    <Card size='small'>
-      {chatVisible ? (
-        <ChatConversationListContainer />
-      ) : (
-        <div onClick={() => toggleChatVisible()}>
-          <MessageFilled />
-          <strong>{t("messaging.labels.messaging")}</strong>
-        </div>
-      )}
-    </Card>
+    <Badge count={unreadCount}>
+      <Card size='small'>
+        {chatVisible ? (
+          <ChatConversationListComponent conversationList={conversationList} />
+        ) : (
+          <div onClick={() => toggleChatVisible()}>
+            <MessageFilled />
+            <strong>{t("messaging.labels.messaging")}</strong>
+          </div>
+        )}
+      </Card>
+    </Badge>
   );
 }
 export default connect(
diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx b/client/src/components/chat-messages-button/chat-messages-button.container.jsx
similarity index 53%
rename from client/src/components/chat-conversation-list/chat-conversation-list.container.jsx
rename to client/src/components/chat-messages-button/chat-messages-button.container.jsx
index c82c2bbbf..a8f3ffe88 100644
--- a/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx
+++ b/client/src/components/chat-messages-button/chat-messages-button.container.jsx
@@ -1,16 +1,27 @@
-import React from "react";
-import ChatConversationListComponent from "./chat-conversation-list.component";
 import { useSubscription } from "@apollo/react-hooks";
+import React from "react";
 import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import ChatMessagesButtonComponent from "./chat-messages-button.component";
 
-export default function ChatConversationListContainer() {
+export default function ChatMessagesButtonContainer() {
   const { loading, error, data } = useSubscription(
     CONVERSATION_LIST_SUBSCRIPTION
   );
-
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-  return <ChatConversationListComponent conversationList={data.conversations || []} />;
+
+  return (
+    <ChatMessagesButtonComponent
+      conversationList={(data && data.conversations) || []}
+      unreadCount={
+        (data &&
+          data.conversations.reduce((acc, val) => {
+            return (acc = acc + val.messages_aggregate.aggregate.count);
+          }, 0)) ||
+        0
+      }
+    />
+  );
 }
diff --git a/client/src/graphql/conversations.queries.js b/client/src/graphql/conversations.queries.js
index 018bd475d..af7d0d138 100644
--- a/client/src/graphql/conversations.queries.js
+++ b/client/src/graphql/conversations.queries.js
@@ -5,7 +5,29 @@ export const CONVERSATION_LIST_SUBSCRIPTION = gql`
     conversations {
       phone_num
       id
-      messages_aggregate(where: { read: { _eq: false } }) {
+      messages_aggregate(
+        where: { read: { _eq: false }, isoutbound: { _eq: false } }
+      ) {
+        aggregate {
+          count
+        }
+      }
+    }
+  }
+`;
+
+export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
+  subscription CONVERSATION_SUBSCRIPTION_BY_PK($conversationId: uuid!) {
+    conversations_by_pk(id: $conversationId) {
+      messages {
+        id
+        status
+        text
+        isoutbound
+      }
+      messages_aggregate(
+        where: { read: { _eq: false }, isoutbound: { _eq: false } }
+      ) {
         aggregate {
           count
         }
diff --git a/client/src/graphql/messages.queries.js b/client/src/graphql/messages.queries.js
deleted file mode 100644
index f44ebbd4b..000000000
--- a/client/src/graphql/messages.queries.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { gql } from "apollo-boost";
-
-export const MESSAGES_SUBSCRIPTION = gql`
-  subscription MESSAGES_SUBSCRIPTION($conversationId: uuid!) {
-    messages(
-      where: { conversationid: { _eq: $conversationId } }
-      order_by: { created_at: asc }
-    ) {
-      text
-      created_at
-      id
-      status
-      isoutbound
-    }
-  }
-`;