diff --git a/app/package.json b/app/package.json
index a4a0fb0e24a64f0b1ee0951443e9f861eed77d54..a7b3b0c61fd5f0d4bb7cccc4f464cd0402e40b02 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,7 @@
     "vue-draggable-resizable": "^2.1.0",
     "vue-emoji-picker": "^1.0.1",
     "vue-router": "^3.1.6",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.3",
@@ -29,7 +29,7 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11"
   }
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index d5682140c2a23d5582893c6b3bccee9828bc7f6b..fb0a1d526ddca66ae2472b8a127728c9debe2423 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -18,19 +18,26 @@
         style="background-color: rgb(205, 234, 255)"
       >
         <form>
-          <div v-for="value in myNodes" v-bind:key="value.node_id">
-            <textarea
-              @focus="editTrue(true)"
-              @blur="editTrue(false)"
-              autofocus
-              v-if="nodeid == value.node_id"
-              @input="editNode"
-              v-model="value.node_text"
-              :id="nodeid"
-              class="drag-cancel"
-              ref="nodetext"
-            ></textarea>
+          <div v-if="readmode == false">
+            <div v-for="value in myNodes" v-bind:key="value.node_id">
+              <!-- <div v-if="readmode == false"> -->
+              <textarea
+                v-if="nodeid == value.node_id"
+                @focus="editTrue(true)"
+                @blur="editTrue(false)"
+                autofocus
+                @input="editNode"
+                v-model="value.node_text"
+                :id="nodeid"
+                class="drag-cancel"
+                ref="nodetext"
+              ></textarea>
+            </div>
           </div>
+          <div v-else>
+            <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+          </div>
+
           <h3>Reactions</h3>
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
@@ -38,6 +45,7 @@
 
           <p>markdown supported</p>
           <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+          <BaseButton class="read" buttonClass="action" @click="readFlag()">{{ mode }}</BaseButton>
         </form>
       </vue-draggable-resizable>
     </div>
@@ -46,6 +54,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import marked from 'marked'
 
 export default {
   name: 'NodesLayer',
@@ -60,9 +69,16 @@ export default {
 
   data() {
     return {
-      pickupz: 99
+      pickupz: 99,
+      readmode: false,
+      mode: 'Read'
     }
   },
+
+  filters: {
+    marked: marked
+  },
+
   // FIXME: how do we know how to focus on the newest node ?
   // FIXME: Tab between them would also be good
   // var delay = 100
@@ -161,6 +177,15 @@ export default {
     deleteFlag(e) {
       e = this.nodeid
       this.$store.dispatch('deleteFlag', { e })
+    },
+    readFlag() {
+      if (this.readmode == true) {
+        this.readmode = false
+        this.mode = 'Read'
+      } else {
+        this.readmode = true
+        this.mode = 'Edit'
+      }
     }
   }
 }
@@ -172,6 +197,11 @@ export default {
   position: relative;
 }
 
+.read {
+  /* FIXME: make this a nice little CSS grid */
+  float: right;
+}
+
 img {
   width: 100%;
 }
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 6279f1a0b1d346d6e8506cea5548d29b27bb4569..3e14ff764b2fe5dfc639b55ef3c3fed5bd9f6f63 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -290,7 +290,7 @@ const store = new Vuex.Store({
           x_pos: 50,
           y_pos: 50,
           width: 200,
-          height: 250,
+          height: 275,
           z_index: 1
         })
         return pouchdb
diff --git a/app/yarn.lock b/app/yarn.lock
index 8ff5c863eda4c0e348db3599c64d8df8f40ccf02..bee1110b10bc24a14d88f73677cbc681c6f11b24 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2797,9 +2797,9 @@ eslint-plugin-prettier@^3.1.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.1.tgz#ca802df5c33146aed1e56bb21d250c1abb6120a3"
+eslint-plugin-vue@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz#27fecd9a3a24789b0f111ecdd540a9e56198e0fe"
   dependencies:
     natural-compare "^1.4.0"
     semver "^5.6.0"
@@ -7263,9 +7263,9 @@ vue@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
 
-vuex@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
+vuex@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.3.tgz#f2ad73e3fb73691698b38c93f66e58e267947180"
 
 vuvuzela@1.0.3:
   version "1.0.3"