diff --git a/canvas-10-feb/src/App.vue b/canvas-10-feb/src/App.vue
index 2ccc72fbe7543960adaf1329d68be628bc412206..9c19e5cfdf25d742613c29bd5f61d869b8598749 100644
--- a/canvas-10-feb/src/App.vue
+++ b/canvas-10-feb/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link to="/">Home</router-link>|
       <router-link to="/about">About</router-link>
     </div>
     <router-view />
@@ -13,8 +13,7 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+
 }
 
 #nav {
diff --git a/canvas-10-feb/src/components/CanvasLayer.vue b/canvas-10-feb/src/components/CanvasLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89fa957ca0c867f069e428f64520bbaec2540363
--- /dev/null
+++ b/canvas-10-feb/src/components/CanvasLayer.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="canvas">
+    <!-- canvas element draws the connection and nodes -->
+    <canvas ref="canvas"></canvas>
+    <!-- textarea is the cards/nodes -->
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { draw } from './mixins/draw.js'
+
+var canvas = null
+
+export default {
+  name: 'CanvasLayer',
+  mixins: [draw],
+
+  computed: mapState({
+    configRect: state => state.configRect,
+    configHandle: state => state.configHandle
+  }),
+
+  mounted() {
+    canvas = this.$refs.canvas
+    this.ctx = canvas.getContext('2d')
+    this.draw()
+  },
+  methods: {
+    clear(ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+canvas {
+  border: 1px solid black;
+}
+</style>
diff --git a/canvas-10-feb/src/components/ControlsLayer.vue b/canvas-10-feb/src/components/ControlsLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..426cbb13e4112502f5688cc1c0908cda4b27cf87
--- /dev/null
+++ b/canvas-10-feb/src/components/ControlsLayer.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="controls">
+    <div class="btn-row">
+      <button on:click="popups.showPane = !popups.showPane">Button</button>
+    </div>
+    <!--
+      <div class="popup" v-if="popups.showPane">
+        <div class="popup-title">Pane Title</div>
+        <label>
+          <input type="radio" name="color" />
+        </label>
+    </div>-->
+  </div>
+</template>
+
+<script></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.controls {
+  position: fixed;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  background-color: rgb(10, 10, 10);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.btn-row {
+  position: relative;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 0 15px;
+  border-radius: 4px;
+}
+</style>
diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
deleted file mode 100644
index d4a40e1435918c61154771c3dc761e83a7825ceb..0000000000000000000000000000000000000000
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>Welcome to Vue &amp; Canvas testing ground</h1>
-
-    <canvas ref="canvas"></canvas>
-
-    <div class="controls">
-      <div class="btn-row">
-        <button on:click="popups.showPane = !popups.showPane">Button</button>
-      </div>
-      <!--
-      <div class="popup" v-if="popups.showPane">
-        <div class="popup-title">Pane Title</div>
-        <label>
-          <input type="radio" name="color" />
-        </label>
-      </div>-->
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { draw } from './mixins/draw.js'
-var canvas = null
-var textarea = null
-
-export default {
-  name: 'HelloWorld',
-  mixins: [draw],
-
-  computed: mapState({
-    configRect: state => state.configRect,
-    configHandle: state => state.configHandle
-  }),
-
-  mounted() {
-    canvas = this.$refs.canvas
-    this.ctx = canvas.getContext('2d')
-    this.draw()
-  },
-  methods: {
-    clear(ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-canvas {
-  border: 1px solid black;
-}
-
-.controls {
-  position: fixed;
-  z-index: 5;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 60px;
-  background-color: rgb(10, 10, 10);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-}
-
-.btn-row {
-  position: relative;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  padding: 0 15px;
-  border-radius: 4px;
-}
-</style>
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..def2422109cc99cfa7a3d8bd4d02fda068e257c5
--- /dev/null
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="editor">
+    <form id="editForm" class="myScroll">
+      <textarea></textarea>
+      <p>markdown supported</p>
+      <button>delete</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { drag } from './mixins/drag.js'
+
+export default {
+  name: 'NodesLayer',
+  mixins: [drag],
+
+  mounted() {},
+  methods: {
+    setFocus() {
+      this.$refs.notetext.focus()
+    },
+    editNodeText() {},
+    deleteFlag() {}
+  },
+  computed: mapState({})
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.editor {
+  background-color: aquamarine;
+  position: absolute;
+}
+</style>
diff --git a/canvas-10-feb/src/components/mixins/drag.js b/canvas-10-feb/src/components/mixins/drag.js
new file mode 100644
index 0000000000000000000000000000000000000000..412563ca0b56143f91318d012f01fc3109435ce5
--- /dev/null
+++ b/canvas-10-feb/src/components/mixins/drag.js
@@ -0,0 +1,3 @@
+export const drag = {
+  methods: {}
+}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 540323e6284460c96767bc6f8efac7ea1b18f0d7..1f2953aa8ae6c81c291bf6c23f9ade6ba2e2a776 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,17 +1,25 @@
 <template>
   <div class="home">
-    <HelloWorld />
+    <NodesLayer />
+    <CanvasLayer />
+    <ControlsLayer />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import CanvasLayer from '@/components/CanvasLayer.vue'
+import NodesLayer from '@/components/NodesLayer.vue'
+import ControlsLayer from '@/components/ControlsLayer.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    CanvasLayer,
+    NodesLayer,
+    ControlsLayer
   }
 }
 </script>
+
+<style scoped></style>