diff --git a/packages/bruno-app/src/components/Documentation/DocumentEditor.js b/packages/bruno-app/src/components/Documentation/DocumentEditor.js
deleted file mode 100644
index 6e795ced..00000000
--- a/packages/bruno-app/src/components/Documentation/DocumentEditor.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Editor = (props) => {
-  return <textarea {...props} />;
-};
-
-export default Editor;
diff --git a/packages/bruno-app/src/components/Documentation/DocumentationEditor.js b/packages/bruno-app/src/components/Documentation/DocumentationEditor.js
new file mode 100644
index 00000000..7890b8f9
--- /dev/null
+++ b/packages/bruno-app/src/components/Documentation/DocumentationEditor.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const StyledEditor = styled.textarea`
+  height: inherit;
+  background: ${(props) => props.theme.bg};
+  color: ${(props) => props.theme.text};
+  border: solid 1px ${(props) => props.theme.modal.input.border};
+  padding: 1em;
+  resize: none;
+
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:focus-visible,
+  &:target {
+    border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+    outline: ${(props) => props.theme.modal.input.focusBorder} !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+`;
+
+const DocumentationEditor = (props) => {
+  return <StyledEditor {...props} />;
+};
+
+export default DocumentationEditor;
diff --git a/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js b/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
index bfa93276..68223dbd 100644
--- a/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
@@ -18,32 +18,6 @@ const StyledContentWrapper = styled.div`
   ::-webkit-scrollbar-button {
     display: none;
   }
-
-  textarea {
-    height: inherit;
-    background: ${(props) => props.theme.bg};
-    color: ${(props) => props.theme.text};
-    border: solid 1px ${(props) => props.theme.modal.input.border};
-    padding: 1em;
-    resize: none;
-
-    &:focus,
-    &:active,
-    &:focus-within,
-    &:focus-visible,
-    &:target {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: ${(props) => props.theme.modal.input.focusBorder} !important;
-    }
-
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
-
-    ::-webkit-scrollbar-button {
-      display: none;
-    }
-  }
 `;
 
 export default StyledContentWrapper;
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
index 464e789e..290534cd 100644
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -7,7 +7,7 @@ import { useTheme } from 'providers/Theme/index';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { findCollectionByUid, findItemInCollection } from 'utils/collections/index';
-import Editor from './DocumentEditor';
+import DocumentationEditor from './DocumentationEditor';
 import MarkdownBody from './MarkdownBody';
 import StyledContentWrapper from './StyledContentWrapper';
 import StyledWrapper from './StyledWrapper';
@@ -90,7 +90,7 @@ const Documentation = () => {
 
       <StyledContentWrapper theme={themeContext.theme}>
         {isEditing ? (
-          <Editor className="w-full h-full" onChange={handleChange} value={docs} />
+          <DocumentationEditor className="w-full h-full" onChange={handleChange} value={docs} />
         ) : (
           <MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
             {htmlFromMarkdown}