diff --git a/package-lock.json b/package-lock.json
index 218c70a..8488c31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2724,7 +2724,8 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.2.tgz",
       "integrity": "sha512-RwywHlpCRc3/Wh81MiCKun4ydaIFyW5Ea6JbL6sRCVx5q5irDw7pMXBUFYF/jArQ6YrG36q0kpovc9P/Kd3I4g==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "boxen": {
       "version": "4.2.0",
@@ -7768,9 +7769,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz",
-      "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.5.tgz",
+      "integrity": "sha512-wMcb7BpDcm3gxQOQx46NDNT36Kk0Ao6PJLLI2ed5vehbbbxCEuslSQzbQ2sfSKy+gkYxhWcGWSeaK+gwm4KIZg==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.1",
@@ -8015,6 +8016,11 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-codemirror2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
+      "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw=="
+    },
     "react-dom": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
diff --git a/package.json b/package.json
index a95f1e0..b2ca22f 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "ace-builds": "^1.4.12",
+    "codemirror": "^5.59.2",
     "cors": "^2.8.5",
     "electron-builder": "^22.9.1",
     "electron-fetch": "^1.7.3",
@@ -59,6 +60,7 @@
     "mongoose": "^5.11.14",
     "react": "^17.0.1",
     "react-ace": "^9.3.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "wait-on": "^5.2.1"
diff --git a/server/server.js b/server/server.js
index f740a69..d11aa6a 100644
--- a/server/server.js
+++ b/server/server.js
@@ -19,7 +19,7 @@ app.use(cors());
 // Getting mongodb uri from Frontend
 app.post("/getURI", mongoSchemaController.createMongoSchema, (req, res, next) => {
   // Waiting for locals to be sent, then deleting schema.json file
-  setTimeout(() => { 
+  setTimeout(() => {
     console.log('this got deleted')
       fs.unlinkSync(path.join(__dirname, '../schema.json'))
   }, 2000)
@@ -32,7 +32,7 @@ const schema = require('./schema')
 app.use('/graphql', graphqlHTTP({ schema, graphiql: true }))
 
 
-// app.use('/dist', express.static(path.join(__dirname, '../dist')));
+// app.use('/static', express.static(path.join(__dirname, '../src/public')));
 
 // app.get('/', (req, res) => {
 //     res.status(200).sendFile(path.resolve(__dirname, '../public/index.html'));
diff --git a/src/App.js b/src/App.js
index 9403f81..2066457 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,13 +2,15 @@
 import React from 'react'
 import MongoDBURI from './Components/MongoDBURI';
 import DropDownMenu from './Components/DropDownMenu';
+import Container from './containers/Container';
+import './public/index.css'
+
 
 // Create main App component
 const App = () => (
   <div>
-    <h1>Hello, Electron!</h1>
-    <p>Our Electron App is working!!!</p>
-    <MongoDBURI />
+    <img id="logo" src="https://i.ibb.co/KFmZK7N/qlens-logo.png" alt="qlens-logo" border="0" />
+    <Container />
   </div>
 )
 
diff --git a/src/Components/CheckBox.js b/src/Components/CheckBox.js
index 4916f3c..8ca3f52 100644
--- a/src/Components/CheckBox.js
+++ b/src/Components/CheckBox.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+// import MongoSchemaIDE from 'MongoSchemaIDE';
 
 const CheckBox = (props) => {
   return (
diff --git a/src/Components/ConvertToProgrammaticButton.js b/src/Components/ConvertToProgrammaticButton.js
index d5b6593..e69de29 100644
--- a/src/Components/ConvertToProgrammaticButton.js
+++ b/src/Components/ConvertToProgrammaticButton.js
@@ -1,10 +0,0 @@
-// import React from 'react'
-
-// const ConvertToProgrammaticButton = () => {
-//   return (
-//     <div>
-//     </div>
-//   )
-// }
-
-// export default ConvertToProgrammaticButton;
\ No newline at end of file
diff --git a/src/Components/DownloadSchemaButton.js b/src/Components/DownloadSchemaButton.js
deleted file mode 100644
index 6959768..0000000
--- a/src/Components/DownloadSchemaButton.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// import React from 'react'
-
-// const DownloadSchemaButton = () => {
-//   return (
-//     <div>
-//     </div>
-//   )
-// }
-
-// export default DownloadSchemaButton;
\ No newline at end of file
diff --git a/src/Components/DropDownMenu.js b/src/Components/DropDownMenu.js
index a24a5f4..d3dc2e3 100644
--- a/src/Components/DropDownMenu.js
+++ b/src/Components/DropDownMenu.js
@@ -40,11 +40,11 @@ const DropDownMenu = ({schemaData, uriData}) => {
     //sending obj data to backend
     let selectedSchemas = {};
     for(let i = 0; i < clicked.length; i+=1) {
-      selectedSchemas[clicked[i]] = schemaData[clicked[i]]; 
+      selectedSchemas[clicked[i]] = schemaData[clicked[i]];
     }
     console.log('selectedSchemas is ', selectedSchemas)
 
-    // fetch to the backend 
+    // fetch to the backend
 
       fetch('http://localhost:3000/selectedSchemas', {
         method: 'POST',
@@ -129,7 +129,7 @@ export default DropDownMenu;
     // assign the value to be the current schema
 
   //   for (let i = 0; i < schemaNames.length; i+=1) {
-      
+
   //    if (schemaNames[i].includes(clickedSchema) && e.target.checked === false) {
   //     console.log('hiiii')
   //     setClicked(clicked.filter((item) => {
diff --git a/src/Components/MongoDBURI.js b/src/Components/MongoDBURI.js
index ef4e822..f7ed0c7 100644
--- a/src/Components/MongoDBURI.js
+++ b/src/Components/MongoDBURI.js
@@ -2,44 +2,16 @@ import React, { useState, useEffect } from "react"; // userEffect to fetch inste
 import DropDownMenu from "./DropDownMenu";
 
 // input field for the mongoDB uri
-const MongoDBURI = () =>  {
-    const [schemaData, setSchemaData] = useState({});
-    const [uriId, setUriId] = useState('');
-
-    const submit = (e) => {I
-      e.preventDefault()
-      console.log('submit worked')
-      fetch('http://localhost:3000/getURI', {
-        method: "POST",
-        headers: {
-          "Content-Type" : "application/json"
-        },
-        body: JSON.stringify({val: 'mongodb+srv://judy:hush@hush.u9hai.mongodb.net/chat?retryWrites=true&w=majority'})
-      })
-      .then(res => res.json())
-      .then((data) => {
-        console.log('data string from fetch', data)
-        setSchemaData(JSON.parse(data));
-      })
-      .catch(err => console.log(err))
-    }
-
-    //uriId = document.getElementById('uriInput').value;
-    const getUri = (e) => {
-      setUriId(e.target.value);
-    };
-
-    console.log("state is being set", schemaData);
-
+const MongoDBURI = ({schemaData, uriData, submitbtn, geturi}) =>  {
     return (
         <div className="formContainer">
             <div>
               <form>
-                  <input type="text" placeholder="enter MongoDBURI ..." onChange= {getUri}/>
-                  <input className="URISubmitButton" type="submit" value="Submit" onClick={submit}/>
+                  <input type="text" placeholder="enter MongoDBURI ..." onChange= {geturi}/>
+                  <input className="URISubmitButton" type="submit" value="Submit" onClick={submitbtn}/>
               </form>
             </div>
-            <DropDownMenu schemaData={schemaData} uriData={uriId} />
+            <DropDownMenu schemaData={schemaData} uriData={uriData} />
         </div>
     )
 }
diff --git a/src/Components/MongoSchemaIDE.js b/src/Components/MongoSchemaIDE.js
index e69de29..a0b2695 100644
--- a/src/Components/MongoSchemaIDE.js
+++ b/src/Components/MongoSchemaIDE.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import Codemirror from 'codemirror';
+import {UnControlled as CodeMirror} from 'react-codemirror2';
+require('codemirror/mode/javascript/javascript');
+import '../public/codemirror.css';
+// import '../public/material.css';
+// require('../../node_modules/codemirror/lib/codemirror.css');
+import '../../node_modules/codemirror/lib/codemirror.css';
+import '../../node_modules/codemirror/theme/dracula.css';
+// import '../../node_modules/codemirror/lib/codemirror.css';
+// import '../../node_modules/codemirror/theme/dracula.css';
+
+const MongoSchemaIDE = ({schemaData}) => {
+  console.log('from mongoIDE schemaData', schemaData)
+  return(
+
+    <div>
+      <div className="codebox">
+        <CodeMirror
+        value='<h1>hi</h1>'
+        options={{
+          mode: 'javascript',
+          theme: 'dracula',
+          lineNumbers: true
+        }}
+        />
+        </div>
+        <div className="codebox2">
+          <CodeMirror
+          value='<h1>Judy with the BIGGGGGG booty! yasss queen! </h1>'
+          options={{
+            mode: 'javascript',
+            theme: 'dracula',
+            lineNumbers: true
+          }}
+          />
+      </div>
+    </div>
+  )
+}
+
+export default MongoSchemaIDE;
\ No newline at end of file
diff --git a/src/containers/Container.js b/src/containers/Container.js
index e69de29..ac52dfe 100644
--- a/src/containers/Container.js
+++ b/src/containers/Container.js
@@ -0,0 +1,43 @@
+// import React from 'react'
+import React, { useState, useEffect } from "react";
+import MongoDBURI from '../Components/MongoDBURI';
+import MongoSchemaIDE from '../Components/MongoSchemaIDE';
+
+const Container = () => {
+  const [schemaData, setSchemaData] = useState({});
+  const [uriId, setUriId] = useState('');
+
+    const submit = (e) => {
+      e.preventDefault()
+      console.log('submit worked')
+      fetch('http://localhost:3000/getURI', {
+        method: "POST",
+        headers: {
+          "Content-Type" : "application/json"
+        },
+        body: JSON.stringify({val: 'mongodb+srv://judy:hush@hush.u9hai.mongodb.net/chat?retryWrites=true&w=majority'})
+      })
+      .then(res => res.json())
+      .then((data) => {
+        console.log('data string from fetch', data)
+        setSchemaData(JSON.parse(data));
+      })
+      .catch(err => console.log(err))
+    }
+
+    //uriId = document.getElementById('uriInput').value;
+    const getUri = (e) => {
+      setUriId(e.target.value);
+    };
+
+    console.log("state is being set", schemaData);
+
+  return(
+    <div>
+      <MongoDBURI schemaData={schemaData} uriData={uriId} geturi={getUri} submitbtn={submit}  />
+      <MongoSchemaIDE schemaData={schemaData} />
+    </div>
+  )
+}
+
+export default Container;
\ No newline at end of file
diff --git a/src/public/codemirror.css b/src/public/codemirror.css
new file mode 100644
index 0000000..5acef2e
--- /dev/null
+++ b/src/public/codemirror.css
@@ -0,0 +1,11 @@
+.codebox {
+  border: 1px solid black;
+  width: 40%;
+  display: inline-block;
+}
+
+.codebox2 {
+  border: 1px solid black;
+  width: 40%;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/src/public/index.css b/src/public/index.css
new file mode 100644
index 0000000..244c396
--- /dev/null
+++ b/src/public/index.css
@@ -0,0 +1,3 @@
+#logo {
+  width: 15%;
+}
\ No newline at end of file
diff --git a/src/public/material.css b/src/public/material.css
new file mode 100644
index 0000000..e69de29
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 7ec5221..ff4ea42 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -7,13 +7,15 @@ const { spawn } = require('child_process')
 const defaultInclude = path.resolve(__dirname, 'src')
 
 module.exports = {
- 
+
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-        include: defaultInclude
+        //use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+        use: ["style-loader", "css-loader"],
+        include: [defaultInclude,
+          path.resolve(__dirname, 'node_modules/codemirror/lib/codemirror.css'), path.resolve(__dirname, 'node_modules/codemirror/theme/dracula.css')]
       },
       {
         test: /\.jsx?$/,
diff --git a/webpack2.js b/webpack2.js
index 2aa2a8c..1b3e2f4 100644
--- a/webpack2.js
+++ b/webpack2.js
@@ -64,4 +64,6 @@
 // "build:react": "NODE_ENV=production webpack --config webpack.react.config.js --mode production",
 // "build": "npm run build:electron && npm run build:react",
 // "pack": "electron-builder --dir",
-// "dist": "electron-builder"
\ No newline at end of file
+// "dist": "electron-builder"
+
+// use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
\ No newline at end of file