diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
index f0a23e416..a112d7614 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -19,7 +19,7 @@ import { useClipboard } from '@/hooks/useClipboard'
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
 
 export const MarkdownTextMessage = memo(
-  ({ text, isUser }: { id: string; text: string; isUser: boolean }) => {
+  ({ text, isUser }: { id?: string; text: string; isUser?: boolean }) => {
     const clipboard = useClipboard({ timeout: 1000 })
 
     // Escapes headings
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
index 59ff720c8..bda541b68 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { atom, useAtom } from 'jotai'
 import { ChevronDown, ChevronUp, Loader } from 'lucide-react'
 
+import { MarkdownTextMessage } from './MarkdownTextMessage'
+
 interface Props {
   text: string
   status: string
@@ -48,7 +50,9 @@ const ThinkingBlock = ({ id, text, status }: Props) => {
 
         {isExpanded && (
           <div className="mt-2 pl-6 text-[hsla(var(--text-secondary))]">
-            {text.replace(/<\/?think>/g, '').trim()}
+            <MarkdownTextMessage
+              text={text.replace(/<\/?think>/g, '').trim()}
+            />
           </div>
         )}
       </div>