diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index f1e95dca5..e2ccd6631 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -165,7 +165,7 @@ const CodeEditor = forwardRef(
 
 			return [
 				history(),
-				keymap.of([...defaultKeymap, customKeymap, foldKeymap, ...searchKeymap]),
+
 				updateListener,
 				EditorView.lineWrapping,
 				scrollPastEnd(),
@@ -186,6 +186,8 @@ const CodeEditor = forwardRef(
 				themeCompartment.of(themeExtension),
 				...(tab !== 'brewStyles' ? [autocompleteEmoji] : []),
 				search(),
+				keymap.of([...defaultKeymap, foldKeymap, ...searchKeymap]),
+				customKeymap
 			];
 		};
 
diff --git a/client/components/codeEditor/customKeyMap.js b/client/components/codeEditor/customKeyMap.js
index 8fa1d7792..518248633 100644
--- a/client/components/codeEditor/customKeyMap.js
+++ b/client/components/codeEditor/customKeyMap.js
@@ -2,6 +2,17 @@
 import { keymap } from '@codemirror/view';
 import { undo, redo } from '@codemirror/commands';
 
+const insertTabAtCursor = (view) => {
+  const { from } = view.state.selection.main;
+
+  view.dispatch({
+    changes: { from, insert: '	' },
+    selection: { anchor: from + 1 }
+  });
+
+  return true;
+};
+
 const indentMore = (view)=>{
 	const { from, to } = view.state.selection.main;
 	const lines = [];
@@ -199,6 +210,7 @@ const newPage = (view)=>{
 };
 
 export const customKeymap = keymap.of([
+	{ key: 'Tab', run: insertTabAtCursor },
 	{ key: 'Shift-Tab', run: indentMore },
 	{ key: 'Mod-Shift-Tab', run: indentLess },
 	{ key: 'Mod-b', run: makeBold },