diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 458694e0d716ca884c0e58dd484a68a2a767491e..d5472ebc019ba946ef977126eb4966f7d220f892 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -1,54 +1,50 @@
 <template>
   <div>
-    <div v-for="(value, index) in nodes_filtered" v-bind:key="index">
+    <div v-for="(nodes, index) in nodes_filtered" v-bind:key="index">
       <form class="nodes">
-        <textarea
-          @focus="editTrue(true)"
-          @blur="editTrue(false)"
-          autofocus
-          v-model="value.node_text"
-          @input="editNode"
-          :id="value.node_id"
-          placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
-        ></textarea>
-        <p class="info">*markdown supported &amp; autosaves</p>
+        <template v-if="nodes.read_mode == false">
+          <textarea
+            @focus="editTrue(true)"
+            @blur="editTrue(false)"
+            autofocus
+            v-model="nodes.node_text"
+            @input="editNode"
+            :id="nodes.node_id"
+            placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
+          ></textarea>
+          <p class="info">*markdown supported &amp; autosaves</p>
+        </template>
+        <template v-else>
+          <p
+            :id="nodes.node_id"
+            :inner-html.prop="nodes.node_text | marked"
+          ></p>
+        </template>
 
         <div class="btn-row">
           <SvgButton
             buttonClass="nodes"
-            @click.prevent="deleteFlag(value.node_id)"
+            @click.prevent="deleteFlag(nodes.node_id)"
+          />
+          <SvgButton2
+            buttonClass="nodes"
+            @click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
           />
-          <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
         </div>
 
         <div class="allemoji">
           <div
             class="eachemoji"
-            v-for="(emojis, index) in emojis_filtered"
+            v-for="(emojis, index) in configEmoji"
             :key="index"
           >
-            <!-- shorthand is v-if here... but we want to filter -->
-            <!-- {{ emojis.emoji_id }} -->
-            {{ emojis.emoji_text }}
+            <template v-if="emojis.node_id == nodes.node_id">{{
+              emojis.emoji_text
+            }}</template>
           </div>
         </div>
       </form>
     </div>
-    <!-- <div v-for="(value, index) in nodes_filtered" v-bind:key="index">
-      {{ value.node_text }}
-    </div> -->
-
-    <!-- <div v-for="(value, index) in readnodes_filtered" v-bind:key="index">
-      {{ value.node_text }}
-    </div> -->
-
-    <!-- <div v-for="(value, index) in readnodes" v-bind:key="index">
-      {{ value.node_text }}
-    </div>
-
-    <div v-for="(value, index) in emojis" v-bind:key="index">
-      {{ value.emoji_text }}
-    </div> -->
   </div>
 </template>
 
@@ -68,12 +64,6 @@ export default {
     }
   },
 
-  props: {
-    // nodeid: String,
-    // nodetext: String,
-    // deleted: Boolean,
-  },
-
   filters: {
     marked: marked,
   },
@@ -91,102 +81,41 @@ export default {
       })
     },
 
-    emojis_filtered() {
-      return this.configEmoji.filter((emojis) => {
-        console.log(emojis.nodeid)
-        // if emojis.nodeid == myNodes.node_id
-        return emojis
-      })
-    },
-
-    // emojis_filtered() {
-    //   return this.configEmoji.filter((emojis) => {
-    //     return (
-    //       (emojis == this.myNodes.node_id) == this.configPositions.node_id &&
-    //       this.myNodes.deleted == false
-    //     )
-    //   })
-    // },
-
-    /// THIS IS UNFINSHED
-
-    readnodes_filtered: function () {
-      // this read mode = true
-      // but readmode is on config positions
-      return this.myNodes.filter((u) => u.readmode)
-    },
-
-    nodes() {
-      return this.myNodes.filter((node) => {
-        return node
-        // (node == this.myNodes.node_id) == this.configPositions.node_id &&
-        // this.myNodes.deleted == false &&
-        // this.configPositions.read_mode == false
-      })
-    },
-
-    readnodes() {
-      return this.myNodes.filter((readnode) => {
-        return (
-          (readnode == this.myNodes.node_id) == this.configPositions.node_id &&
-          this.myNodes.deleted == false &&
-          this.configPositions.read_mode == true
-        )
-      })
-    },
-  },
-
-  myArray: null,
-  created() {
-    //FIXME : now needs to use filter See Above
-    this.$options.myArray = this.myNodes
-    this.readFlag
-  },
-
-  methods: {
-    editNode(e) {
-      var nodeid = e.target.id
-      var nodetext = e.target.value
-      this.$store.dispatch('editNode', { nodeid, nodetext })
-    },
-
-    editTrue(e) {
-      this.$emit('edit-true', e)
-    },
-
-    deleteFlag(e) {
-      //e = this.nodeid
-      if (confirm('Confirm discard?')) {
-        this.$store.dispatch('deleteFlag', { e })
-      } else {
-        // nothing happens
-      }
-    },
-
-    readFlag(e) {
-      e = this.nodeid
-
-      var i
-      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-        if (this.configPositions[i].node_id == this.nodeid) {
-          this.localreadmode = this.configPositions[i].read_mode
+    methods: {
+      editNode(e) {
+        var nodeid = e.target.id
+        var nodetext = e.target.value
+        this.$store.dispatch('editNode', { nodeid, nodetext })
+      },
+
+      editTrue(e) {
+        this.$emit('edit-true', e)
+      },
+
+      deleteFlag(e) {
+        //e = this.nodeid
+        if (confirm('Confirm discard?')) {
+          this.$store.dispatch('deleteFlag', { e })
+        } else {
+          // nothing happens
         }
-      }
-
-      if (this.localreadmode == true) {
-        readmode = false
-        this.$store.dispatch('readFlag', { e, readmode })
-        this.mode = 'Read'
-      } else {
-        readmode = true
+      },
+      readFlag(e, f) {
+        readmode = f
+        readmode = !readmode
         this.$store.dispatch('readFlag', { e, readmode })
-        this.mode = 'Edit'
-      }
+
+        if (readmode == true) {
+          this.mode = 'Read'
+        } else {
+          this.mode = 'Edit'
+        }
+      },
+    },
+    components: {
+      SvgButton,
+      SvgButton2,
     },
-  },
-  components: {
-    SvgButton,
-    SvgButton2,
   },
 }
 </script>
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 02c929f399dc1edff82f3a0eedce9ca31579db28..b4fb170725d382bde704fe439f15d24a1f1cd2da 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -183,7 +183,7 @@ const store = new Vuex.Store({
               nodes: [
                 {
                   // FIXME: these values are here as GET_ALL_NODES cant hunt a blank
-                  // this shouldnt need to be here though
+                  // this shouldn't need to be here though
                   node_id: startup,
                   node_text:
                     '## Welcome \n This node was automatically by the system as a workaround for an iOS and URL routing bug, just ignore for now please \n ## 🤦🏻‍♂️',
@@ -390,23 +390,21 @@ const store = new Vuex.Store({
     //   state.connectionstate = e
     // },
 
-    ADD_NODE(state, e) {
+    ADD_NODE(state) {
       var uniqueid =
         Math.random().toString(36).substring(2, 15) +
         Math.random().toString(36).substring(2, 15)
       state.localnodeid = uniqueid
 
       pouchdb.get(state.myclient).then(function (doc) {
-        if (e == undefined) {
-          doc.nodes.push({
-            node_id: uniqueid,
-            node_text: '',
-            node_owner: state.myclient,
-            content_type: 'sheet',
-            deleted: false,
-            attachment_name: e,
-          })
-        }
+        doc.nodes.push({
+          node_id: uniqueid,
+          node_text: '',
+          node_owner: state.myclient,
+          content_type: 'sheet',
+          deleted: false,
+          read_mode: false,
+        })
 
         return pouchdb
           .put({
@@ -578,6 +576,38 @@ const store = new Vuex.Store({
     },
 
     READ_FLAG(state, e) {
+      var i
+      for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+        if (e.e == state.myNodes[i].node_id) {
+          state.myNodes[i].read_mode = e.readmode
+        }
+      }
+      pouchdb
+        .get(state.myclient)
+        .then(function (doc) {
+          // put the store into pouchdb
+          return pouchdb.bulkDocs([
+            {
+              _id: state.myclient,
+              _rev: doc._rev,
+              _attachments: doc._attachments,
+              nodes: state.myNodes,
+            },
+          ])
+        })
+        .then(function () {
+          return pouchdb.get(state.myclient).then(function (doc) {
+            state.myNodes = doc.nodes
+          })
+        })
+        .catch(function (err) {
+          if (err.status == 404) {
+            // pouchdb.put({  })
+          }
+        })
+    },
+
+    LEGACY_READ_FLAG(state, e) {
       var i
       // console.log(e.e)
       for (i = 0; i < Object.keys(state.configPositions).length; i++) {