diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 146b13bd58488c0c460b03ca595dfd1837fb09d0..3efed3f63e786bfe2664ec7ea3c77915e13dfa71 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -7,46 +7,67 @@
 <script>
 import { mapState } from 'vuex'
 import * as PIXI from 'pixi.js'
+
 export default {
   name: 'ConnectionsLayer',
   computed: mapState({
     toolmode: (state) => state.ui.mode,
   }),
-  methods: {},
+  // data() {
+  //   // return {
+  //   //   // app: new PIXI.Application({
+  //   //   //   width: window.innerWidth,
+  //   //   //   height: window.innerHeight,
+  //   //   //   antialias: true,
+  //   //   //   transparent: true,
+  //   //   //   view: canvas,
+  //   //   // }),
+  //   // }
+  // },
+  methods: {
+    drawPixi() {
+      var canvas = document.getElementById('pixi')
+
+      const app = new PIXI.Application({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        antialias: true,
+        transparent: true,
+        view: canvas,
+      })
+
+      let graphics = new PIXI.Graphics()
+      ///graphics.x = app.renderer.width / 2
+      //graphics.y = app.renderer.width / 2
+      //document.body.appendChild(app.view)
+
+      // graphics.lineStyle(0)
+      // graphics.beginFill(0xde3249, 1)
+      // graphics.drawCircle(100, 250, 50)
+      // graphics.endFill()
+
+      // graphics.lineStyle(0)
+      // graphics.beginFill(0xde3249, 1)
+      // graphics.drawCircle(300, 250, 50)
+      // graphics.endFill()
+
+      graphics.lineStyle(8, 0x000000)
+      //start
+      graphics.moveTo(300, 250)
+      //end
+      graphics.lineTo(500, 250)
+
+      // graphics.lineStyle(2, 0xffffff, 1)
+      // graphics.moveTo(0, 0)
+      app.stage.addChild(graphics)
+    },
+  },
+
+  mounted() {
+    this.drawPixi()
+  },
 }
 
-var canvas = document.getElementById('pixi')
-
-const app = new PIXI.Application({
-  width: window.innerWidth,
-  height: window.innerHeight,
-  antialias: true,
-  transparent: true,
-  view: canvas,
-})
-
-let graphics = new PIXI.Graphics()
-graphics.x = app.renderer.width / 2
-graphics.y = app.renderer.width / 2
-app.stage.addChild(graphics)
-
-graphics.lineStyle(0)
-graphics.beginFill(0xde3249, 1)
-graphics.drawCircle(100, 250, 50)
-graphics.endFill()
-
-graphics.lineStyle(0)
-graphics.beginFill(0xde3249, 1)
-graphics.drawCircle(300, 250, 50)
-graphics.endFill()
-
-graphics.lineStyle(2, 0xffffff, 1)
-graphics.moveTo(100, 250)
-graphics.lineTo(300, 250)
-
-graphics.lineStyle(2, 0xffffff, 1)
-graphics.moveTo(0, 0)
-
 // Opt-in to interactivity
 // graphics.interactive = true
 
diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue
index 5ff6150b2bef119e13a63e1269bd882c46b21a08..c2b5013e3d0c86aa1aadfdcf005b15f58b49299b 100644
--- a/app/src/components/UploadLayer.vue
+++ b/app/src/components/UploadLayer.vue
@@ -32,7 +32,7 @@ var copytext = ''
 
 //  The below code should create an IPFS node to add files to
 export default {
-  name: 'IpfsInfo',
+  name: 'UploadLayer',
 
   props: {
     uploadready: Boolean,
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 0bf1799c6e3eb090194c59d97ea7a008d1d5858f..647071bcdd3e7a5420a96444ed77c96c036b33d3 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -48,6 +48,7 @@
               v-bind:nodeid="value.node_id"
               v-bind:nodetext="value.node_text"
             />
+            <ConnectionsLayer />
           </div>
 
           <div v-else>
@@ -70,10 +71,6 @@
             />
           </div>
           <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
-          <ConnectionsLayer
-            v-bind:width="width"
-            v-bind:height="height"
-          ></ConnectionsLayer>
         </PanZoomContainer>
 
         <ModeToolbar