diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
index 5b7cb962f..7c696a011 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
@@ -121,16 +121,18 @@ export default class ChatEditor extends Component {
 
     return (
       <div
-        className="chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center"
-        style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}
-      >
+        className={
+          'chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center' +
+          (props.inCodeMode ? ' code' : '')
+        }
+        style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}>
         <CodeEditor
           value={props.message}
           options={options}
           onChange={(e, d, v) => this.messageChange(e, d, v)}
           editorDidMount={(editor) => {
             this.editor = editor;
-            if (!(BROWSER_REGEX.test(navigator.userAgent))) {
+            if (!BROWSER_REGEX.test(navigator.userAgent)) {
               editor.focus();
             }
           }}
diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index 37fea024b..f6c9e5ac7 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -256,7 +256,11 @@ blockquote {
     font-family: 'Inter';
 }
 
-.chat .CodeMirror.cm-s-code.chat .cm-s-tlon * {
+.code, .chat.code .react-codemirror2 .CodeMirror * {
+  font-family: 'Source Code Pro';
+}
+
+.chat .CodeMirror.cm-s-code.chat * {
    font-family: 'Source Code Pro';
 }