diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 5d8c20a600..b81f4e0699 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -22,9 +22,9 @@ const ChatInputFormattingToolbar = ({
   inputRef,
   triggerButton,
   optionConfig = {
-    surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'],
+    surfaceItems: ['emoji', 'formatter', 'link', 'katex', 'audio', 'video', 'file'],
     formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
-    smallScreenSurfaceItems: ['emoji', 'video', 'audio', 'file'],
+    smallScreenSurfaceItems: ['emoji', 'video', 'audio', 'file', 'katex'],
     popOverItems: ['formatter', 'link'],
   },
 }) => {
@@ -56,6 +56,9 @@ const ChatInputFormattingToolbar = ({
   };
   const handleFormatterClick = (item) => {
     formatSelection(messageRef, item.pattern);
+    if (item.onClick) {
+      item.onClick();
+    }
     setPopoverOpen(false);
   };
   const handleEmojiClick = (emojiEvent) => {
@@ -190,6 +193,33 @@ const ChatInputFormattingToolbar = ({
           </ActionButton>
         </Tooltip>
       ),
+    katex: (
+      <Tooltip text="KaTeX" position="top" key="katex">
+        <ActionButton
+          ghost
+          style={{
+            padding: '0 8px',
+            minWidth: 'auto',
+            fontSize: '17px',
+            fontFamily: 'KaTeX_Math-Italic, Times New Roman',
+            color: theme.palette?.mode === 'dark' ? '#fff' : '#2f343d',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: 'scaleX(0.9) rotate(-2deg)',
+            position: 'relative',
+            top: '-1px'
+          }}
+          disabled={isRecordingMessage}
+          onClick={() => {
+            if (isRecordingMessage) return;
+            window.open('https://katex.org/docs/supported.html', '_blank');
+          }}
+        >
+          𝒇
+        </ActionButton>
+      </Tooltip>
+    ),
     formatter: formatters
       .map((name) => formatter.find((item) => item.name === name))
       .map((item) =>
@@ -214,7 +244,7 @@ const ChatInputFormattingToolbar = ({
           </>
         ) : (
           <Tooltip
-            text={item.name}
+            text={item.tooltip}
             position="top"
             key={`formatter-${item.name}`}
           >
@@ -225,6 +255,9 @@ const ChatInputFormattingToolbar = ({
               onClick={() => {
                 if (isRecordingMessage) return;
                 formatSelection(messageRef, item.pattern);
+                if (item.onClick) {
+                  item.onClick();
+                }
               }}
             >
               <Icon
@@ -294,7 +327,7 @@ const ChatInputFormattingToolbar = ({
           if (itemInFormatter) {
             return (
               <Tooltip
-                text={itemInFormatter.name}
+                text={itemInFormatter.tooltip}
                 position="top"
                 key={`formatter-${itemInFormatter.name}`}
               >
diff --git a/packages/ui-elements/src/components/Icon/icons/KaTeX.js b/packages/ui-elements/src/components/Icon/icons/KaTeX.js
new file mode 100644
index 0000000000..c6a10f9229
--- /dev/null
+++ b/packages/ui-elements/src/components/Icon/icons/KaTeX.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const KaTeX = (props) => (
+  <svg
+    width="21"
+    height="21"
+    viewBox="0 0 21 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4 4L8 10.5L4 17H6L9.25 11.5L6 6H4Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17 4H10V6H12.5V15H10V17H17V15H14.5V6H17V4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default KaTeX;
diff --git a/packages/ui-elements/src/components/Icon/icons/index.js b/packages/ui-elements/src/components/Icon/icons/index.js
index 234251edab..b735021bd1 100644
--- a/packages/ui-elements/src/components/Icon/icons/index.js
+++ b/packages/ui-elements/src/components/Icon/icons/index.js
@@ -47,6 +47,7 @@ import Download from './Download';
 import ChevronDown from './ChevronDown';
 import ChevronLeft from './ChevronLeft';
 import Key from './Key';
+import KaTeX from './KaTeX';
 import Attachment from './Attachment';
 import CircleArrowDown from './CircleArrowDown';
 import Online from './Online';
@@ -116,6 +117,7 @@ const icons = {
   'chevron-down': ChevronDown,
   'chevron-left': ChevronLeft,
   key: Key,
+  katex: KaTeX,
   attachment: Attachment,
   'circle-arrow-down': CircleArrowDown,
   online: Online,