diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 27e2d8e..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import './App.css';
-
-function App() {
-  return (
-    <div>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..dd77081
--- /dev/null
+++ b/src/App.scss
@@ -0,0 +1,10 @@
+.edit-mode-container {
+    display: flex;
+    flex-direction: column;
+    
+    & .button-module {
+        display: flex;
+        flex-direction: row;
+        align-self: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 7f644a7..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test.skip('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/DisplayView.jsx b/src/DisplayView.jsx
new file mode 100644
index 0000000..9a44709
--- /dev/null
+++ b/src/DisplayView.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function DisplayView() {
+  /************************************
+   * Render
+   ************************************/ 
+  
+  return (
+    <>
+    </>
+  );
+}
diff --git a/src/EditMode.jsx b/src/EditMode.jsx
new file mode 100644
index 0000000..75b1a26
--- /dev/null
+++ b/src/EditMode.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import './App.scss';
+
+import EditView from './EditView';
+import DisplayView from './DisplayView';
+
+  /************************************
+   * Constants
+   ************************************/
+
+const EDIT_VIEW = 'EDIT';
+const DISPLAY_VIEW = 'DISPLAY';
+
+export default function EditMode({width = '100%', height = '500px'}) {
+  /************************************
+   * State
+   ************************************/
+
+  const [view, setView] = useState(EDIT_VIEW);
+
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+    <div className='edit-mode-container' style={{width: width, height: height}}>
+        <div className='button-module'>
+            <button onClick={() => {setView(EDIT_VIEW)}}>Edit</button>
+            <button onClick={() => {setView(DISPLAY_VIEW)}}>Preview</button>
+        </div>
+        { view === EDIT_VIEW ? <EditView /> : <DisplayView /> }
+    </div>
+  );
+}
diff --git a/src/EditView.jsx b/src/EditView.jsx
new file mode 100644
index 0000000..7f12ffb
--- /dev/null
+++ b/src/EditView.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function EditView({onValueChange, ...rest}) {
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+     <textarea style={{height: 'inherit'}} {...rest} onChange={onValueChange}></textarea>
+  );
+}
diff --git a/src/LeifdownApp.jsx b/src/LeifdownApp.jsx
new file mode 100644
index 0000000..51104d5
--- /dev/null
+++ b/src/LeifdownApp.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import EditMode from './EditMode';
+
+export default function LeifdownApp() {
+  /************************************
+   * Render
+   ************************************/ 
+
+  return (
+    <EditMode />
+  );
+}
diff --git a/src/index.js b/src/index.js
index f5185c1..d6aebc4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import LeifdownApp from './LeifdownApp';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <LeifdownApp />
   </React.StrictMode>,
   document.getElementById('root')
 );