diff --git a/web/package.json b/web/package.json
index de42f053c..a654e3a5c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,10 +23,12 @@
     "framer-motion": "^10.16.4",
     "highlight.js": "^11.9.0",
     "jotai": "^2.6.0",
+    "katex": "^0.16.10",
     "lodash": "^4.17.21",
     "lucide-react": "^0.291.0",
     "marked": "^9.1.2",
     "marked-highlight": "^2.0.6",
+    "marked-katex-extension": "^5.0.1",
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",
diff --git a/web/screens/Chat/SimpleTextMessage/index.tsx b/web/screens/Chat/SimpleTextMessage/index.tsx
index 376d011eb..489d28732 100644
--- a/web/screens/Chat/SimpleTextMessage/index.tsx
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@@ -19,8 +19,8 @@ import hljs from 'highlight.js'
 import { useAtomValue } from 'jotai'
 import { FolderOpenIcon } from 'lucide-react'
 import { Marked, Renderer } from 'marked'
-
 import { markedHighlight } from 'marked-highlight'
+import markedKatex from 'marked-katex-extension'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -100,6 +100,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
     }
   )
 
+  marked.use(markedKatex({ throwOnError: false }))
+
   const { onViewFile, onViewFileContainer } = usePath()
   const parsedText = marked.parse(text)
   const [tokenCount, setTokenCount] = useState(0)
@@ -297,7 +299,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
           ) : (
             <div
               className={twMerge(
-                'message flex flex-grow flex-col gap-y-2 text-[15px] font-normal leading-relaxed',
+                'message max-width-[100%] flex flex-grow flex-col gap-y-2 overflow-auto text-[15px] font-normal leading-relaxed',
                 isUser
                   ? 'whitespace-pre-wrap break-words'
                   : 'rounded-xl bg-secondary p-4'