diff --git a/src/App.tsx b/src/App.tsx
index a5f8c0f..06f4d6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import FilesContext from "./FilesContext";
 import FileTab from "./components/TopBar";
 import OpenedFile from "./types/OpenedFile";
+import Editor from "./components/Editor";
 
 function App() {
   const [files, setFiles] = useState<OpenedFile[]>([
@@ -51,6 +52,7 @@ function App() {
     <FilesContext.Provider value={{ files, setFiles }}>
       <div className="w-screen h-screen bg-slate-600">
         <FileTab />
+        <Editor />
       </div>
     </FilesContext.Provider>
   );
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
new file mode 100644
index 0000000..03bb0cb
--- /dev/null
+++ b/src/components/Editor.tsx
@@ -0,0 +1,22 @@
+import { ChangeEvent, useState } from "react";
+
+function Editor() {
+  const [code, setCode] = useState<string>("// Start coding here...");
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setCode(event.target.value);
+  };
+
+  return (
+    <div className="code-editor">
+      <textarea
+        value={code}
+        onChange={handleChange}
+        className="code-editor-textarea"
+        placeholder="// Start coding here..."
+      />
+    </div>
+  );
+}
+
+export default Editor;
diff --git a/src/index.css b/src/index.css
index cb189dd..11497f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,4 +27,14 @@
     .scrollbar-thin *::-moz-scrollbar-thumb {
         background: #888;
     }
+
+    /* CodeEditor.css */
+
+    .code-editor {
+        @apply flex h-screen items-center justify-center;
+    }
+
+    .code-editor-textarea {
+        @apply w-full h-full bg-gray-100 p-4 text-base font-mono border border-gray-300 resize-none;
+    }
 }
\ No newline at end of file