diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5fb908c4..ddbead7c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Editor from './Editor';
 import Toolbar from './Toolbar';
 import Container from 'react-bootstrap/Container';
 
@@ -6,6 +7,7 @@ function App(): JSX.Element {
     return (
         <Container fluid>
             <Toolbar />
+            <Editor />
         </Container>
     );
 }
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
new file mode 100644
index 00000000..4a970131
--- /dev/null
+++ b/src/components/Editor.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/theme-xcode';
+import 'ace-builds/src-min-noconflict/ext-searchbox';
+import 'ace-builds/src-min-noconflict/ext-language_tools';
+
+class Editor extends React.Component {
+    render(): JSX.Element {
+        return (
+            <Row className="px-2 py-4 bg-primary">
+                <Col>
+                    <AceEditor
+                        mode="python"
+                        theme="xcode"
+                        fontSize="16pt"
+                        width="100"
+                        focus={true}
+                        placeholder="Write your program here..."
+                        defaultValue={localStorage.getItem('program') || undefined}
+                        editorProps={{ $blockScrolling: true }}
+                        setOptions={{
+                            enableBasicAutocompletion: true,
+                            enableLiveAutocompletion: true,
+                        }}
+                        onChange={(v): void => localStorage.setItem('program', v)}
+                    />
+                </Col>
+            </Row>
+        );
+    }
+}
+
+export default Editor;