diff --git a/CHANGELOG.md b/CHANGELOG.md
index 035e63a34162a4ce561c9795ef9163f931c5636a..b0863748fffd95e66b4922cf2d38815bd099ad8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# 0.2.2
+
+_1st September 2021_
+
+## Added
+
+- you can now discard nodes
+- you can now toggle read and edit view of each node
+
 # 0.2.1
 
 _31st August 2021_
diff --git a/package.json b/package.json
index db7669919fc79cd948f16b700eaa299566e69e60..adaae21acdd59e042f4ea028e3b9a47be7f960f8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "pouchdb": "^7.2.2",
     "vue": "^3.2.6",
     "vue-router": "^4.0.0",
+    "vue3-swatches": "^1.0.2",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index 3a40b0b23da4acec7b91650663191f2e4078047e..2187e7f0003742a3f56f7227e11f5bdc1ba530a5 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -11,8 +11,27 @@
           rows="5"
         ></textarea>
         <p class="info">*markdown supported &amp; autosaves</p>
-        <button>Colour</button>
-        <button>Shape</button>
+
+        <VSwatches
+          v-model="nodes.node_color"
+          @input="chooseColor(nodes.node_id, nodes.node_color)"
+          :swatches="swatches"
+          :shapes="shapes"
+          show-border
+          show-fallback
+          fallback-input-type="color"
+        >
+          <template v-slot:trigger>
+            <button @click.prevent>{{ nodes.node_color }}</button>
+          </template>
+        </VSwatches>
+        <select v-model="nodes.node_shape">
+          <option value="">Square</option>
+          <option value="">Circle</option>
+          <option value="">Triangle</option>
+          <option value="">Hexegon</option>
+        </select>
+
         <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
         <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
       </template>
@@ -27,12 +46,14 @@
 <script>
 // @ is an alias to /src
 import { mapState } from 'vuex'
-
+import VSwatches from 'vue3-swatches'
 // import marked from 'marked'
 
 export default {
   name: 'MyNodes',
 
+  components: { VSwatches },
+
   props: {
     added: Boolean,
   },
@@ -40,6 +61,14 @@ export default {
   data() {
     return {
       myArray: [],
+      shapes: 'circles',
+      // swatches: [{ color: '#F493A7', showBorder: true }],
+      swatches: [
+        ['#EB5757', '#F2994A', '#F2C94C'],
+        ['#219653', '#27AE60', '#6FCF97'],
+        ['#2F80ED', '#2D9CDB', '#56CCF2'],
+        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
+      ],
     }
   },
 
@@ -95,6 +124,17 @@ export default {
       this.$store.dispatch('toggleMode', { e })
       setTimeout(this.loadData, 500)
     },
+
+    chooseColor(nodeid, color) {
+      if (confirm('Confirm change?')) {
+        this.$store.dispatch('colorNode', { nodeid, color })
+        setTimeout(this.loadData, 500)
+      } else {
+        // nothing happens
+      }
+      // this.$store.dispatch('colorNode', { nodeid, color })
+      // setTimeout(this.loadData, 500)
+    },
   },
 }
 </script>
diff --git a/src/store/modules/mynodes.js b/src/store/modules/mynodes.js
index e35ac46e7d3ea3cfd2c5ac5fc58df884573e873d..d27b0d1cba48e34786c0d32085e620b4f047cb93 100644
--- a/src/store/modules/mynodes.js
+++ b/src/store/modules/mynodes.js
@@ -233,6 +233,32 @@ export const mutations = {
       })
       .catch(function () {})
   },
+
+  COLOR_NODE(state, e) {
+    var i
+    for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+      if (e.nodeid == state.myNodes[i].node_id) {
+        state.myNodes[i].node_color = e.color
+      }
+    }
+    pouchdb
+      .get(deviceName)
+      .then(function (doc) {
+        return pouchdb.bulkDocs([
+          {
+            _id: state.myclient,
+            _rev: doc._rev,
+            nodes: state.myNodes,
+          },
+        ])
+      })
+      .then(function () {
+        return pouchdb.get(deviceName).then(function (doc) {
+          state.myNodes = doc.nodes
+        })
+      })
+      .catch(function () {})
+  },
 }
 
 export const actions = {
@@ -260,6 +286,10 @@ export const actions = {
     commit('TOGGLE_MODE', e)
   },
 
+  colorNode: ({ commit }, { nodeid, color }) => {
+    commit('COLOR_NODE', { nodeid, color })
+  },
+
   getMicrocosm(vuexContext) {
     deviceName = vuexContext.rootState.setup.deviceName
     // microcosmName = vuexContext.rootState.setup.microcosmName
diff --git a/yarn.lock b/yarn.lock
index ff0c18862c891ba9f55bd5440eb43d744883d4a8..6045fef10556ace34315556555d7e50b40eb5865 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7668,6 +7668,11 @@ vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
 
+vue3-swatches@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vue3-swatches/-/vue3-swatches-1.0.2.tgz#118b06c6c47d51ce1d2b18c588f13b90fea897fd"
+  integrity sha512-XxopqMhNSfxorsIqTwW+2A544DvBOC3w6f6vDdPQNbuaJ3Sm9iqchzGAI9o37M6eRxByOplBWQ/i6ZPBGTIabw==
+
 vue@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.6.tgz#c71445078751f458648fd8fb3a2da975507d03d2"