diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
index 5f2a6f8..fea4ae4 100644
--- a/src/components/CodeInput.tsx
+++ b/src/components/CodeInput.tsx
@@ -1,4 +1,5 @@
 import { createStyles, MantineSize, Textarea } from '@mantine/core';
+import { useEffect } from 'react';
 
 const useStyles = createStyles((theme, { size }: { size: MantineSize }) => ({
   input: {
@@ -11,5 +12,26 @@ const useStyles = createStyles((theme, { size }: { size: MantineSize }) => ({
 export default function CodeInput({ ...props }) {
   const { classes } = useStyles({ size: 'md' }, { name: 'CodeInput' });
 
-  return <Textarea classNames={{ input: classes.input }} autoComplete='nope' {...props} />;
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') {
+        if (document.activeElement?.tagName !== 'TEXTAREA') return;
+
+        e.preventDefault();
+        const target = e.target as HTMLTextAreaElement;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        target.value = `${target.value.substring(0, start)}  ${target.value.substring(end)}`;
+        target.selectionStart = target.selectionEnd = start + 2;
+        target.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return <Textarea classNames={{ input: classes.input }} {...props} />;
 }