diff --git a/client/src/utils/buildTree.js b/client/src/utils/buildTree.js
index e2dfbf39a0..00fe2b134d 100644
--- a/client/src/utils/buildTree.js
+++ b/client/src/utils/buildTree.js
@@ -1,5 +1,7 @@
-const even = 'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700  dark:hover:bg-[#32343e] dark:hover:text-gray-200';
-const odd = 'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654] hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
+const even =
+  'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700  dark:hover:bg-[#32343e] dark:hover:text-gray-200';
+const odd =
+  'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654] hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
 
 export default function buildTree(messages, groupAll = false) {
   let messageMap = {};
@@ -7,7 +9,7 @@ export default function buildTree(messages, groupAll = false) {
 
   if (!groupAll) {
     // Traverse the messages array and store each element in messageMap.
-    messages.forEach((message) => {
+    messages.forEach(message => {
       messageMap[message.messageId] = { ...message, children: [] };
 
       const parentMessage = messageMap[message.parentMessageId];
@@ -19,15 +21,31 @@ export default function buildTree(messages, groupAll = false) {
   }
 
   // Group all messages into one tree
-  let parentId = null;
-  messages.forEach((message, i) => {
-    messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
-    const currentMessage = messageMap[message.messageId];
-    const parentMessage = messageMap[parentId];
-    if (parentMessage) parentMessage.children.push(currentMessage);
-    else rootMessages.push(currentMessage);
-    parentId = message.messageId;
+  // let parentId = null;
+  // messages.forEach((message, i) => {
+  //   messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
+  //   const currentMessage = messageMap[message.messageId];
+  //   const parentMessage = messageMap[parentId];
+  //   if (parentMessage) parentMessage.children.push(currentMessage);
+  //   else rootMessages.push(currentMessage);
+  //   parentId = message.messageId;
+  // });
+
+  // return rootMessages;
+
+  // Group all messages by conversation
+  // Traverse the messages array and store each element in messageMap.
+  rootMessages = {};
+  let parents = 0;
+  messages.forEach(message => {
+    if (message.conversationId in messageMap) {
+      messageMap[message.conversationId].children.push(message);
+    } else {
+      messageMap[message.conversationId] = { ...message, bg: parents % 2 === 0 ? even : odd, children: [] };
+      rootMessages[message.conversationId] = messageMap[message.conversationId];
+      parents++;
+    }
   });
 
-  return rootMessages;
+  return Object.values(rootMessages);
 }