diff --git a/src/renderer/src/pages/home/Messages/MessageThought.tsx b/src/renderer/src/pages/home/Messages/MessageThought.tsx
index 1f61e95b27..1c5eb913ad 100644
--- a/src/renderer/src/pages/home/Messages/MessageThought.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageThought.tsx
@@ -1,10 +1,11 @@
 import { Message } from '@renderer/types'
 import { Collapse } from 'antd'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import ReactMarkdown from 'react-markdown'
 import BarLoader from 'react-spinners/BarLoader'
 import styled from 'styled-components'
+import Markdown from '../Markdown/Markdown'
+import { useSettings } from '@renderer/hooks/useSettings'
 
 interface Props {
   message: Message
@@ -14,6 +15,12 @@ const MessageThought: FC<Props> = ({ message }) => {
   const [activeKey, setActiveKey] = useState<'thought' | ''>('thought')
   const isThinking = !message.content
   const { t } = useTranslation()
+  const { messageFont, fontSize } = useSettings()
+  const fontFamily = useMemo(() => {
+    return messageFont === 'serif'
+      ? 'serif'
+      : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans","Helvetica Neue", sans-serif'
+  }, [messageFont])
 
   useEffect(() => {
     if (!isThinking) setActiveKey('')
@@ -42,7 +49,11 @@ const MessageThought: FC<Props> = ({ message }) => {
               {isThinking && <BarLoader color="#9254de" />}
             </MessageTitleLabel>
           ),
-          children: <ReactMarkdown className="markdown">{message.reasoning_content}</ReactMarkdown>
+          children: (
+            <div style={{ fontFamily, fontSize }}>
+              <Markdown message={{ ...message, content: message.reasoning_content }} />
+            </div>
+          )
         }
       ]}
     />