diff --git a/app/components/Canvas.js b/app/components/Canvas.js
new file mode 100644
index 0000000..eba904b
--- /dev/null
+++ b/app/components/Canvas.js
@@ -0,0 +1,15 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class Canvas extends Component {
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'blue', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
+        <div></div>
+      </div>);
+  }
+}
diff --git a/app/components/Diagram.js b/app/components/Diagram.js
new file mode 100644
index 0000000..1bc30a5
--- /dev/null
+++ b/app/components/Diagram.js
@@ -0,0 +1,24 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class App extends Component {
+  props: {
+    children: HTMLElement;
+  };
+  
+  constructor(props) {
+    super(props);
+  };
+
+
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}
diff --git a/app/components/DotGrid.js b/app/components/DotGrid.js
new file mode 100644
index 0000000..1bc30a5
--- /dev/null
+++ b/app/components/DotGrid.js
@@ -0,0 +1,24 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class App extends Component {
+  props: {
+    children: HTMLElement;
+  };
+  
+  constructor(props) {
+    super(props);
+  };
+
+
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}
diff --git a/app/components/ShapeBar.js b/app/components/ShapeBar.js
new file mode 100644
index 0000000..e3a9847
--- /dev/null
+++ b/app/components/ShapeBar.js
@@ -0,0 +1,15 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class Canvas extends Component {
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '10%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}
diff --git a/app/containers/App.js b/app/containers/App.js
index 168b4f4..2a9a321 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 var ReactDOM = require('react-dom');
 var electron = require('electron');
 
+import Canvas from '../components/Canvas'; 
+import ShapeBar from '../components/ShapeBar';
 
 // const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
@@ -19,7 +21,8 @@ export default class App extends Component {
   render() {
     return (
       <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
-        <div></div>
+        <ShapeBar />
+        <Canvas />
       </div>);
   }
 }