diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index d404214..55c9748 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -23,6 +23,7 @@
               <span class="conversation-last-update-date">{{
                 getDateFromFulltimeString(conversation.summary.last_message?.create_time)
               }}</span>
+              <!-- <span v-if="unreadCountMapper()" class="conversation-unreadcount">2</span> -->
             </div>
             <div class="conversation-summary-highlight-container">
               {{ conversation.summary.last_message?.message_body }}
@@ -106,7 +107,11 @@ export default {
       writtenMessage: null
     }
   },
-
+  // computed: {
+  //   unreadCountMapper() {
+  //     return this.$store.getters['basic/unreadCountMapper']
+  //   }
+  // },
   methods: {
     fetchMessageThreads() {
       MessageHubApi.fetchMessageThreads()
@@ -197,6 +202,19 @@ export default {
               white-space: nowrap;
               flex-shrink: 0;
             }
+            .conversation-unreadcount {
+              font-size: 14px;
+              background: red;
+              display: inline-block;
+              width: 20px;
+              height: 20px;
+              text-align: center;
+              border-radius: 10px;
+              color: white;
+              font-weight: bold;
+              line-height: 20px;
+              margin-left: 10px;
+            }
           }
           .conversation-summary-highlight-container {
             font-size: 14px;
diff --git a/frontend/src/plugins/store/basic.js b/frontend/src/plugins/store/basic.js
index 5568a81..5a7bbd5 100644
--- a/frontend/src/plugins/store/basic.js
+++ b/frontend/src/plugins/store/basic.js
@@ -73,6 +73,9 @@ const basicStore = {
             }
           }
           return count
+        },
+        unreadCountMapper(state) {
+          return state.unreadCountMapper
         }
     }
   }