diff --git a/view/package.json b/view/package.json
index 198c4ba..bd60f10 100755
--- a/view/package.json
+++ b/view/package.json
@@ -10,27 +10,27 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-typescript": "^8.2.0",
     "@tsconfig/svelte": "^1.0.10",
-    "esbuild": "^0.9.1",
+    "esbuild": "^0.9.7",
     "esbuild-plugin-glslify": "^1.0.1",
     "esbuild-svelte": "^0.4.3",
     "idb": "^6.0.0",
     "node-fetch": "^2.6.1",
-    "rollup": "^2.3.4",
+    "rollup": "^2.42.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-glslify": "^1.2.0",
     "rollup-plugin-includepaths": "^0.2.4",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0",
-    "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.0.0",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.35.0",
+    "svelte-check": "^1.3.0",
+    "svelte-preprocess": "^4.7.0",
+    "tslib": "^2.1.0",
+    "typescript": "^4.2.3",
     "ws": "^7.4.4"
   },
   "dependencies": {
diff --git a/view/pnpm-lock.yaml b/view/pnpm-lock.yaml
index 7e8e6f7..3231843 100644
--- a/view/pnpm-lock.yaml
+++ b/view/pnpm-lock.yaml
@@ -8,26 +8,26 @@ dependencies:
   lodash: 4.17.21
   ogl: 0.0.65
 devDependencies:
-  '@rollup/plugin-alias': 3.1.2_rollup@2.41.3
-  '@rollup/plugin-commonjs': 17.1.0_rollup@2.41.3
-  '@rollup/plugin-node-resolve': 11.2.0_rollup@2.41.3
-  '@rollup/plugin-typescript': 8.2.0_0ceb14c1f047135811e848fc037005c6
+  '@rollup/plugin-alias': 3.1.2_rollup@2.42.4
+  '@rollup/plugin-commonjs': 17.1.0_rollup@2.42.4
+  '@rollup/plugin-node-resolve': 11.2.0_rollup@2.42.4
+  '@rollup/plugin-typescript': 8.2.0_c75bafaf95020c8442e2df27791d04f3
   '@tsconfig/svelte': 1.0.10
-  esbuild: 0.9.2
-  esbuild-plugin-glslify: 1.0.1_esbuild@0.9.2
-  esbuild-svelte: 0.4.3_esbuild@0.9.2
+  esbuild: 0.9.7
+  esbuild-plugin-glslify: 1.0.1_esbuild@0.9.7
+  esbuild-svelte: 0.4.3_esbuild@0.9.7
   idb: 6.0.0
   node-fetch: 2.6.1
-  rollup: 2.41.3
-  rollup-plugin-css-only: 3.1.0_rollup@2.41.3
+  rollup: 2.42.4
+  rollup-plugin-css-only: 3.1.0_rollup@2.42.4
   rollup-plugin-glslify: 1.2.0
   rollup-plugin-includepaths: 0.2.4
   rollup-plugin-livereload: 2.0.0
-  rollup-plugin-svelte: 7.1.0_rollup@2.41.3+svelte@3.35.0
-  rollup-plugin-terser: 7.0.2_rollup@2.41.3
+  rollup-plugin-svelte: 7.1.0_rollup@2.42.4+svelte@3.35.0
+  rollup-plugin-terser: 7.0.2_rollup@2.42.4
   svelte: 3.35.0
-  svelte-check: 1.2.5_svelte@3.35.0
-  svelte-preprocess: 4.6.9_svelte@3.35.0+typescript@4.2.3
+  svelte-check: 1.3.0_svelte@3.35.0
+  svelte-preprocess: 4.7.0_svelte@3.35.0+typescript@4.2.3
   tslib: 2.1.0
   typescript: 4.2.3
   ws: 7.4.4
@@ -58,9 +58,9 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==
-  /@rollup/plugin-alias/3.1.2_rollup@2.41.3:
+  /@rollup/plugin-alias/3.1.2_rollup@2.42.4:
     dependencies:
-      rollup: 2.41.3
+      rollup: 2.42.4
       slash: 3.0.0
     dev: true
     engines:
@@ -69,16 +69,16 @@ packages:
       rollup: ^1.20.0||^2.0.0
     resolution:
       integrity: sha512-wzDnQ6v7CcoRzS0qVwFPrFdYA4Qlr+ookA217Y2Z3DPZE1R8jrFNM3jvGgOf6o6DMjbnQIn5lCIJgHPe1Bt3uw==
-  /@rollup/plugin-commonjs/17.1.0_rollup@2.41.3:
+  /@rollup/plugin-commonjs/17.1.0_rollup@2.42.4:
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.41.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.42.4
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 7.1.6
       is-reference: 1.2.1
       magic-string: 0.25.7
       resolve: 1.20.0
-      rollup: 2.41.3
+      rollup: 2.42.4
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -86,15 +86,15 @@ packages:
       rollup: ^2.30.0
     resolution:
       integrity: sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew==
-  /@rollup/plugin-node-resolve/11.2.0_rollup@2.41.3:
+  /@rollup/plugin-node-resolve/11.2.0_rollup@2.42.4:
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.41.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.42.4
       '@types/resolve': 1.17.1
       builtin-modules: 3.2.0
       deepmerge: 4.2.2
       is-module: 1.0.0
       resolve: 1.20.0
-      rollup: 2.41.3
+      rollup: 2.42.4
     dev: true
     engines:
       node: '>= 10.0.0'
@@ -102,11 +102,11 @@ packages:
       rollup: ^1.20.0||^2.0.0
     resolution:
       integrity: sha512-qHjNIKYt5pCcn+5RUBQxK8krhRvf1HnyVgUCcFFcweDS7fhkOLZeYh0mhHK6Ery8/bb9tvN/ubPzmfF0qjDCTA==
-  /@rollup/plugin-typescript/8.2.0_0ceb14c1f047135811e848fc037005c6:
+  /@rollup/plugin-typescript/8.2.0_c75bafaf95020c8442e2df27791d04f3:
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.41.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.42.4
       resolve: 1.20.0
-      rollup: 2.41.3
+      rollup: 2.42.4
       tslib: 2.1.0
       typescript: 4.2.3
     dev: true
@@ -118,12 +118,12 @@ packages:
       typescript: '>=3.4.0'
     resolution:
       integrity: sha512-5DyVsb7L+ehLfNPu/nat8Gq3uJGzku4bMFPt90XahtgiSBf7z9YKPLqFUJKMT41W/mJ98SVGDPOhzikGrr/Lhg==
-  /@rollup/pluginutils/3.1.0_rollup@2.41.3:
+  /@rollup/pluginutils/3.1.0_rollup@2.42.4:
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.2.2
-      rollup: 2.41.3
+      rollup: 2.42.4
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -131,11 +131,11 @@ packages:
       rollup: ^1.20.0||^2.0.0
     resolution:
       integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
-  /@rollup/pluginutils/4.1.0_rollup@2.41.3:
+  /@rollup/pluginutils/4.1.0_rollup@2.42.4:
     dependencies:
       estree-walker: 2.0.2
       picomatch: 2.2.2
-      rollup: 2.41.3
+      rollup: 2.42.4
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -209,14 +209,14 @@ packages:
     dev: true
     resolution:
       integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
-  /@types/estree/0.0.46:
+  /@types/estree/0.0.47:
     dev: true
     resolution:
-      integrity: sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
-  /@types/node/14.14.35:
+      integrity: sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
+  /@types/node/14.14.36:
     dev: true
     resolution:
-      integrity: sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==
+      integrity: sha512-kjivUwDJfIjngzbhooRnOLhGYz6oRFi+L+EpMjxroDYXwDw9lHrJJ43E+dJ6KAd3V3WxWAJ/qZE9XKYHhjPOFQ==
   /@types/offscreencanvas/2019.3.0:
     dev: false
     resolution:
@@ -227,13 +227,13 @@ packages:
       integrity: sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
   /@types/resolve/1.17.1:
     dependencies:
-      '@types/node': 14.14.35
+      '@types/node': 14.14.36
     dev: true
     resolution:
       integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
   /@types/sass/1.16.0:
     dependencies:
-      '@types/node': 14.14.35
+      '@types/node': 14.14.36
     dev: true
     resolution:
       integrity: sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
@@ -444,30 +444,30 @@ packages:
     dev: true
     resolution:
       integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  /esbuild-plugin-glslify/1.0.1_esbuild@0.9.2:
+  /esbuild-plugin-glslify/1.0.1_esbuild@0.9.7:
     dependencies:
-      esbuild: 0.9.2
+      esbuild: 0.9.7
       glslify: 7.1.1
     dev: true
     peerDependencies:
       esbuild: ^0.8.0
     resolution:
       integrity: sha512-hHLHnQELeB4tWe/vVx1omwTANN/nFgvZP4lt8DsObqTWrKB6SeV1c1UxPUZGolpVJL4PGqXwSpnhrwevtLFlNQ==
-  /esbuild-svelte/0.4.3_esbuild@0.9.2:
+  /esbuild-svelte/0.4.3_esbuild@0.9.7:
     dependencies:
-      esbuild: 0.9.2
+      esbuild: 0.9.7
       svelte: 3.35.0
     dev: true
     peerDependencies:
       esbuild: '>=0.8.1'
     resolution:
       integrity: sha512-XYSdgKCPLhWFCWxDVsjg9aHydWwCdaWDSEzx8PloB7fqHG3QGhU+qU8Y5P06cEtmz5N6CiK3b1RH6irYFIerUw==
-  /esbuild/0.9.2:
+  /esbuild/0.9.7:
     dev: true
     hasBin: true
     requiresBuild: true
     resolution:
-      integrity: sha512-xE3oOILjnmN8PSjkG3lT9NBbd1DbxNqolJ5qNyrLhDWsFef3yTp/KTQz1C/x7BYFKbtrr9foYtKA6KA1zuNAUQ==
+      integrity: sha512-VtUf6aQ89VTmMLKrWHYG50uByMF4JQlVysb8dmg6cOgW8JnFCipmz7p+HNBl+RR3LLCuBxFGVauAe2wfnF9bLg==
   /escape-string-regexp/1.0.5:
     dev: true
     engines:
@@ -804,7 +804,7 @@ packages:
       integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
   /is-reference/1.2.1:
     dependencies:
-      '@types/estree': 0.0.46
+      '@types/estree': 0.0.47
     dev: true
     resolution:
       integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
@@ -822,7 +822,7 @@ packages:
       integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
   /jest-worker/26.6.2:
     dependencies:
-      '@types/node': 14.14.35
+      '@types/node': 14.14.36
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -847,7 +847,7 @@ packages:
     dev: true
     resolution:
       integrity: sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==
-  /livereload/0.9.2:
+  /livereload/0.9.3:
     dependencies:
       chokidar: 3.5.1
       livereload-js: 3.3.2
@@ -858,7 +858,7 @@ packages:
       node: '>=8.0.0'
     hasBin: true
     resolution:
-      integrity: sha512-pDsYKwFBCm663fyYBgqQP8oHvJyL2YPHeVLnrDoWAL7p9Tz1ep/P5LCKL5EfmGmBsFok3N5ZqvBYgoUdod5slg==
+      integrity: sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==
   /lodash/4.17.21:
     dev: false
     resolution:
@@ -1039,10 +1039,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  /rollup-plugin-css-only/3.1.0_rollup@2.41.3:
+  /rollup-plugin-css-only/3.1.0_rollup@2.42.4:
     dependencies:
-      '@rollup/pluginutils': 4.1.0_rollup@2.41.3
-      rollup: 2.41.3
+      '@rollup/pluginutils': 4.1.0_rollup@2.42.4
+      rollup: 2.42.4
     dev: true
     engines:
       node: '>=10.12.0'
@@ -1063,16 +1063,16 @@ packages:
       integrity: sha512-iZen+XKVExeCzk7jeSZPJKL7B67slZNr8GXSC5ROBXtDGXDBH8wdjMfdNW5hf9kPt+tHyIvWh3wlE9bPrZL24g==
   /rollup-plugin-livereload/2.0.0:
     dependencies:
-      livereload: 0.9.2
+      livereload: 0.9.3
     dev: true
     engines:
       node: '>=8.3'
     resolution:
       integrity: sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
-  /rollup-plugin-svelte/7.1.0_rollup@2.41.3+svelte@3.35.0:
+  /rollup-plugin-svelte/7.1.0_rollup@2.42.4+svelte@3.35.0:
     dependencies:
       require-relative: 0.8.7
-      rollup: 2.41.3
+      rollup: 2.42.4
       rollup-pluginutils: 2.8.2
       svelte: 3.35.0
     dev: true
@@ -1083,13 +1083,13 @@ packages:
       svelte: '>=3.5.0'
     resolution:
       integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
-  /rollup-plugin-terser/7.0.2_rollup@2.41.3:
+  /rollup-plugin-terser/7.0.2_rollup@2.42.4:
     dependencies:
       '@babel/code-frame': 7.12.13
       jest-worker: 26.6.2
-      rollup: 2.41.3
+      rollup: 2.42.4
       serialize-javascript: 4.0.0
-      terser: 5.6.0
+      terser: 5.6.1
     dev: true
     peerDependencies:
       rollup: ^2.0.0
@@ -1101,7 +1101,7 @@ packages:
     dev: true
     resolution:
       integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  /rollup/2.41.3:
+  /rollup/2.42.4:
     dev: true
     engines:
       node: '>=10.0.0'
@@ -1109,7 +1109,7 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
     resolution:
-      integrity: sha512-swrSUfX3UK7LGd5exBJNUC7kykdxemUTRuyO9hUFJsmQUsUovHcki9vl5MAWFbB6oI47HpeZHtbmuzdm1SRUZw==
+      integrity: sha512-Zqv3EvNfcllBHyyEUM754npqsZw82VIjK34cDQMwrQ1d6aqxzeYu5yFb7smGkPU4C1Bj7HupIMeT6WU7uIdnMw==
   /safe-buffer/5.1.2:
     dev: true
     resolution:
@@ -1209,7 +1209,7 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  /svelte-check/1.2.5_svelte@3.35.0:
+  /svelte-check/1.3.0_svelte@3.35.0:
     dependencies:
       chalk: 4.1.0
       chokidar: 3.5.1
@@ -1218,15 +1218,15 @@ packages:
       minimist: 1.2.5
       source-map: 0.7.3
       svelte: 3.35.0
-      svelte-preprocess: 4.6.9_svelte@3.35.0+typescript@4.2.3
+      svelte-preprocess: 4.7.0_svelte@3.35.0+typescript@4.2.3
       typescript: 4.2.3
     dev: true
     hasBin: true
     peerDependencies:
       svelte: ^3.24.0
     resolution:
-      integrity: sha512-1hqlH/J86lpuXk6+SSeZRfCfxXvCpqYGfgPb2sD0YW+tueknbJGR9oaGaLzytU0dgja4ShG+zQzHEsjKb0tFeA==
-  /svelte-preprocess/4.6.9_svelte@3.35.0+typescript@4.2.3:
+      integrity: sha512-FMLZr/wv9S0MzCALo9BlHYyu1wlgXRdHWSjXDiknhraL9Igm0EVb00/tR6CMJ7j4q2kphRIEYcSRQJ7AtXHk+g==
+  /svelte-preprocess/4.7.0_svelte@3.35.0+typescript@4.2.3:
     dependencies:
       '@types/pug': 2.0.4
       '@types/sass': 1.16.0
@@ -1275,14 +1275,14 @@ packages:
         optional: true
     requiresBuild: true
     resolution:
-      integrity: sha512-SROWH0rB0DJ+0Ii264cprmNu/NJyZacs5wFD71ya93Cg/oA2lKHgQm4F6j0EWA4ktFMzeuJJm/eX6fka39hEHA==
+      integrity: sha512-iNrY4YGqi0LD2e6oT9YbdSzOKntxk8gmzfqso1z/lUJOZh4o6fyIqkirmiZ8/dDJFqtIE1spVgDFWgkfhLEYlw==
   /svelte/3.35.0:
     dev: true
     engines:
       node: '>= 8'
     resolution:
       integrity: sha512-gknlZkR2sXheu/X+B7dDImwANVvK1R0QGQLd8CNIfxxGPeXBmePnxfzb6fWwTQRsYQG7lYkZXvpXJvxvpsoB7g==
-  /terser/5.6.0:
+  /terser/5.6.1:
     dependencies:
       commander: 2.20.3
       source-map: 0.7.3
@@ -1292,7 +1292,7 @@ packages:
       node: '>=10'
     hasBin: true
     resolution:
-      integrity: sha512-vyqLMoqadC1uR0vywqOZzriDYzgEkNJFK4q9GeyOBHIbiECHiWLKcWfbQWAUaPfxkjDhapSlZB9f7fkMrvkVjA==
+      integrity: sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
   /through2/0.6.5:
     dependencies:
       readable-stream: 1.0.34
@@ -1379,16 +1379,16 @@ packages:
       integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 specifiers:
   '@rollup/plugin-alias': ^3.1.2
-  '@rollup/plugin-commonjs': ^17.0.0
-  '@rollup/plugin-node-resolve': ^11.0.0
-  '@rollup/plugin-typescript': ^8.0.0
+  '@rollup/plugin-commonjs': ^17.1.0
+  '@rollup/plugin-node-resolve': ^11.2.0
+  '@rollup/plugin-typescript': ^8.2.0
   '@tensorflow-models/deeplab': ^0.2.1
   '@tensorflow/tfjs-backend-cpu': ^3.3.0
   '@tensorflow/tfjs-backend-webgl': ^3.3.0
   '@tensorflow/tfjs-converter': ^3.3.0
   '@tensorflow/tfjs-core': ^3.3.0
   '@tsconfig/svelte': ^1.0.10
-  esbuild: ^0.9.1
+  esbuild: ^0.9.7
   esbuild-plugin-glslify: ^1.0.1
   esbuild-svelte: ^0.4.3
   file-selector: ^0.2.4
@@ -1396,16 +1396,16 @@ specifiers:
   lodash: ^4.17.21
   node-fetch: ^2.6.1
   ogl: ^0.0.65
-  rollup: ^2.3.4
+  rollup: ^2.42.4
   rollup-plugin-css-only: ^3.1.0
   rollup-plugin-glslify: ^1.2.0
   rollup-plugin-includepaths: ^0.2.4
   rollup-plugin-livereload: ^2.0.0
-  rollup-plugin-svelte: ^7.0.0
-  rollup-plugin-terser: ^7.0.0
-  svelte: ^3.0.0
-  svelte-check: ^1.0.0
-  svelte-preprocess: ^4.0.0
-  tslib: ^2.0.0
-  typescript: ^4.0.0
+  rollup-plugin-svelte: ^7.1.0
+  rollup-plugin-terser: ^7.0.2
+  svelte: ^3.35.0
+  svelte-check: ^1.3.0
+  svelte-preprocess: ^4.7.0
+  tslib: ^2.1.0
+  typescript: ^4.2.3
   ws: ^7.4.4
diff --git a/view/public/global.css b/view/public/global.css
index 684e505..df453a5 100755
--- a/view/public/global.css
+++ b/view/public/global.css
@@ -66,3 +66,7 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+body.modal-visible{
+	overflow: hidden !important;
+}
\ No newline at end of file
diff --git a/view/src/App.svelte b/view/src/App.svelte
index 3bd9226..ad4f433 100755
--- a/view/src/App.svelte
+++ b/view/src/App.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
+	import { fade } from "svelte/transition";
 	import Editor from "./routes/editor.svelte";
 	import * as routes from "./routes";
 	import ToastWrapper from "./components/Toast/ToastWrapper.svelte";
-	import { route as currentRoute } from "./stores";
+	import ModalWrapper from "./components/Modals/ModalWrapper.svelte";
+	import { route as currentRoute, images } from "./stores";
+	const imageStore = images.store;
 	import Changelog from "components/Changelog";
+	import { onMount } from "svelte";
+
+	onMount(() => {
+		setTimeout(() => {
+			if ($imageStore.length > 0 && $currentRoute === "main") {
+				$currentRoute = "list";
+			}
+		}, 100);
+	});
 </script>
 
+<ModalWrapper />
+
 {#if $currentRoute.startsWith("editor")}
 	<Editor />
 {:else if $currentRoute in routes}
diff --git a/view/src/components/Analyzer.svelte b/view/src/components/Analyzer.svelte
index 4c92bd6..ccbc4a5 100644
--- a/view/src/components/Analyzer.svelte
+++ b/view/src/components/Analyzer.svelte
@@ -22,8 +22,6 @@
 
   const prom = countPixels(img, correctDistortion);
 
-  console.log($colorStore);
-
   const getName = (color) => {
     const [r, g, b] = color.id.split("-").map((num) => parseInt(num) * 255);
 
diff --git a/view/src/components/Modals/Colors.svelte b/view/src/components/Modals/Colors.svelte
new file mode 100644
index 0000000..0df4b9c
--- /dev/null
+++ b/view/src/components/Modals/Colors.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Toast from "components/Toast";
+
+  import { colorStore, modalStore } from "stores";
+
+  function handleKeyDown(ev) {
+    if (ev.key === "Escape") {
+      $modalStore = "";
+    }
+  }
+
+  Toast.info("Click on the names to rename");
+
+  function handleElKeyDown(ev) {
+    if (ev.key === "Enter" || ev.key === "Escape") this.blur();
+  }
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<div class="wrapper">
+  <div class="color-wrapper">
+    {#each $colorStore as color}
+      <div class="color" style={`background-color: #${color.val}`} />
+      <p
+        contenteditable="true"
+        bind:innerHTML={color.name}
+        on:keydown={handleElKeyDown}
+      />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: grid;
+    place-items: center;
+    height: 100%;
+  }
+
+  .color-wrapper {
+    display: grid;
+    max-width: 500px;
+    grid-template-rows: auto;
+    grid-template-columns: 70px auto;
+    row-gap: 10px;
+  }
+
+  .color {
+    display: inline;
+    box-sizing: border-box;
+    width: 70px;
+    height: 70px;
+  }
+
+  p {
+    height: fit-content;
+    margin: 0;
+    margin-left: 10px;
+    cursor: pointer;
+    font-weight: bold;
+  }
+</style>
diff --git a/view/src/components/Modals/ModalWrapper.svelte b/view/src/components/Modals/ModalWrapper.svelte
new file mode 100644
index 0000000..67c22b2
--- /dev/null
+++ b/view/src/components/Modals/ModalWrapper.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Cross } from "../../icons";
+
+  import { modalStore } from "stores";
+  import { fade } from "svelte/transition";
+  import modals from ".";
+</script>
+
+{#if $modalStore.length && $modalStore in modals}
+  <div class="modal-wrapper" transition:fade>
+    <div id="cross-wrapper" on:click={() => ($modalStore = "")}>
+      <Cross w={50} color="black" weight={2} />
+    </div>
+
+    <svelte:component this={modals[$modalStore]} />
+  </div>
+{/if}
+
+<style>
+  #cross-wrapper {
+    position: absolute;
+    transform: rotate(45deg);
+    display: inline;
+    top: 20px;
+    right: 40px;
+    cursor: pointer;
+  }
+  .modal-wrapper {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+</style>
diff --git a/view/src/components/Modals/index.ts b/view/src/components/Modals/index.ts
new file mode 100644
index 0000000..847f2f5
--- /dev/null
+++ b/view/src/components/Modals/index.ts
@@ -0,0 +1,5 @@
+import Colors from "./Colors.svelte";
+
+export default {
+  colors: Colors
+}
\ No newline at end of file
diff --git a/view/src/routes/list.svelte b/view/src/routes/list.svelte
index 047485e..965247d 100644
--- a/view/src/routes/list.svelte
+++ b/view/src/routes/list.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Cross } from "../icons";
   import { fly, fade, slide } from "svelte/transition";
-  import { images as imageData, route } from "stores";
+  import { images as imageData, modalStore, route } from "stores";
   import { bufToImageUrl, AI, downloadImage } from "../helpers";
   import type { Writable } from "svelte/store";
 
@@ -98,6 +98,11 @@
     <Cross w={20} color="white" weight={2} />
     <p>Add more images</p>
   </div>
+
+  <div id="color-wrapper" on:click={() => ($modalStore = "colors")}>
+    <Cross w={20} color="white" weight={2} />
+    <p>Add more images</p>
+  </div>
 </main>
 
 <style>
diff --git a/view/src/stores/index.ts b/view/src/stores/index.ts
index c6c5464..a0dc2f8 100644
--- a/view/src/stores/index.ts
+++ b/view/src/stores/index.ts
@@ -2,4 +2,5 @@ import * as images from "./images";
 export { images }
 export { default as route } from "./route";
 export { default as commitStore } from "./commits";
-export { default as colorStore } from "./colors";
\ No newline at end of file
+export { default as colorStore } from "./colors";
+export { default as modalStore } from "./modal";
\ No newline at end of file
diff --git a/view/src/stores/modal.ts b/view/src/stores/modal.ts
new file mode 100644
index 0000000..e78b3ab
--- /dev/null
+++ b/view/src/stores/modal.ts
@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+
+const store = writable<string>("");
+
+store.subscribe(v => {
+  document.body.classList[v.length ? "add" : "remove"]("modal-visible")
+})
+
+export default store;
\ No newline at end of file