diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index 5976bb1..1b94289 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -7,7 +7,11 @@ import {
   MessageResponse as AIElementMessageResponse,
   MessageToolbar,
 } from "@/components/ai-elements/message";
-import { extractContentFromMessage, hasToolCalls } from "@/core/messages/utils";
+import {
+  extractContentFromMessage,
+  hasReasoning,
+  hasToolCalls,
+} from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import { cn } from "@/lib/utils";
 
@@ -66,6 +70,9 @@ function MessageContent_({
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
   return (
     <AIElementMessageContent className={className}>
+      {hasReasoning(message) && (
+        <MessageGroup messages={messagesInGroup} isLoading={isLoading} />
+      )}
       <AIElementMessageResponse rehypePlugins={rehypePlugins}>
         {extractContentFromMessage(message)}
       </AIElementMessageResponse>
diff --git a/frontend/src/core/messages/utils.ts b/frontend/src/core/messages/utils.ts
index ec7e759..daca7c7 100644
--- a/frontend/src/core/messages/utils.ts
+++ b/frontend/src/core/messages/utils.ts
@@ -46,9 +46,6 @@ export function groupMessages<T>(
       } else {
         // Assistant messages with content (text or images) are shown as a group if they have content
         // No matter whether it has tool calls or not
-        if (hasReasoning(message)) {
-          currentGroup.push(message);
-        }
         yieldCurrentGroup();
         currentGroup.push(message);
       }