diff --git a/app/components/TextEditor/index.tsx b/app/components/TextEditor/index.tsx
new file mode 100644
index 0000000..2acadf6
--- /dev/null
+++ b/app/components/TextEditor/index.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import MonacoEditor, { OnChange } from "@monaco-editor/react";
+
+interface EditorProps {
+  height?: string;
+  width?: string;
+  theme?: string;
+  language?: string;
+  onChange?: OnChange;
+}
+
+const Editor = (props: EditorProps) => {
+  const [code, setCode] = useState<string>('console.log("Hello, Monaco!");');
+
+  const handleEditorChange: OnChange = (value) => {
+    setCode(value || "");
+  };
+
+  const {
+    height = "90vh",
+    width = "100%",
+    theme = "vs-dark",
+    language = "typescript",
+    onChange = handleEditorChange,
+  } = props;
+
+  return (
+    <MonacoEditor
+      height={height}
+      width={width}
+      language={language}
+      theme={theme}
+      defaultValue={code}
+      value={code}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Editor;