diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7a1afa8..0a85c44 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -60,5 +60,7 @@ module.exports = {
 
     // allow debugger during development only
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+
+    "vue/multi-word-component-names": "off"
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 5523453..cb4ffd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
       "dependencies": {
         "@libertai/libertai-js": "0.0.4",
         "@quasar/extras": "^1.16.11",
-        "@solana/web3.js": "^1.90.0",
         "aleph-sdk-ts": "^3.9.2",
         "axios": "^1.2.1",
         "buffer": "^6.0.3",
@@ -27,12 +26,11 @@
         "stream": "^0.0.2",
         "uuid": "^9.0.1",
         "vue": "^3.0.0",
-        "vue-i18n": "^9.0.0",
         "vue-router": "^4.0.0"
       },
       "devDependencies": {
-        "@intlify/vite-plugin-vue-i18n": "^7.0.0",
         "@quasar/app-vite": "^1.9.3",
+        "@types/dompurify": "^3.0.5",
         "autoprefixer": "^10.4.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
@@ -1184,105 +1182,6 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
-    "node_modules/@intlify/bundle-utils": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-3.4.0.tgz",
-      "integrity": "sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/message-compiler": "next",
-        "@intlify/shared": "next",
-        "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "0.6.1",
-        "yaml-eslint-parser": "^0.3.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependenciesMeta": {
-        "petite-vue-i18n": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@intlify/core-base": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.11.1.tgz",
-      "integrity": "sha512-qWXBBlEA+DC0CsHkfJiQK9ELm11c9I6lDpodY4FoOf99eMas1R6JR4woPhrfAcrtxFHp1UmXWdrQNKDegSW9IA==",
-      "dependencies": {
-        "@intlify/message-compiler": "9.11.1",
-        "@intlify/shared": "9.11.1"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.11.1.tgz",
-      "integrity": "sha512-y/aWx7DkaTKK2qWUw0hVbJpon8+urWXngeqh15DuIXZh6n/V/oPQiO/Ho1hUKbwap6MVMuz0OcnAJvqh3p9YPg==",
-      "dependencies": {
-        "@intlify/shared": "9.11.1",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.11.1.tgz",
-      "integrity": "sha512-yuDG82vjgId2oasNRgZ0PKJrF65zlL33MNyITP5itbLcP4AYOR/NcIuD+/DiI+GHXdxASMKJU0ZiITLc6RC+qw==",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/vite-plugin-vue-i18n": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-7.0.0.tgz",
-      "integrity": "sha512-2TbDOQ8XD+vkc0s5OFmr+IY/k4mYMC7pzvx0xGQn+cU/ev314+yi7Z7N7rWcBgiYk1WOUalbGSo3d4nJDxOOyw==",
-      "deprecated": "This plugin support until Vite 3. If you would like to use on Vite 4, please use @intlify/unplugin-vue-i18n",
-      "dev": true,
-      "dependencies": {
-        "@intlify/bundle-utils": "^3.1.2",
-        "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.2.0",
-        "debug": "^4.3.1",
-        "fast-glob": "^3.2.5",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "peerDependencies": {
-        "petite-vue-i18n": "*",
-        "vite": "^2.9.0 || ^3.0.0",
-        "vue-i18n": "*"
-      },
-      "peerDependenciesMeta": {
-        "petite-vue-i18n": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -6909,6 +6808,15 @@
       "integrity": "sha512-rkiiTuf/z2wTd4RxFOb+clE7PF4AEJU0hsczbUdkHHBtkUmpWQpEddynNfJYKYtZFJKbq4F+brfekt1kx85IZA==",
       "dev": true
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/express": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
@@ -7055,6 +6963,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -10519,30 +10433,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -11309,22 +11199,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -12949,66 +12823,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
-    "node_modules/jsonc-eslint-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
-      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.4.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^1.3.0",
-        "espree": "^6.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -17926,25 +17740,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vue-i18n": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.11.1.tgz",
-      "integrity": "sha512-S7Xi8DkLQG4xnnbxkxzipJK6CdfLdZkmApn95st89HFGp8LTmTH0Tv+Zw6puhOCZJCFrH73PHo3Ylwd2+Bmdxg==",
-      "dependencies": {
-        "@intlify/core-base": "9.11.1",
-        "@intlify/shared": "9.11.1",
-        "@vue/devtools-api": "^6.5.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
@@ -19214,35 +19009,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/yaml-eslint-parser": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
-      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.3.0",
-        "lodash": "^4.17.20",
-        "yaml": "^1.10.0"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index c195919..c68c02b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
   "dependencies": {
     "@libertai/libertai-js": "0.0.4",
     "@quasar/extras": "^1.16.11",
-    "@solana/web3.js": "^1.90.0",
     "aleph-sdk-ts": "^3.9.2",
     "axios": "^1.2.1",
     "buffer": "^6.0.3",
@@ -39,12 +38,11 @@
     "stream": "^0.0.2",
     "uuid": "^9.0.1",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@quasar/app-vite": "^1.9.3",
+    "@types/dompurify": "^3.0.5",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
diff --git a/quasar.config.js b/quasar.config.js
index 104a3ec..6206cc1 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -9,7 +9,6 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
-const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -28,7 +27,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['utils', 'i18n', 'axios'],
+    boot: ['utils', 'axios'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
@@ -81,22 +80,7 @@ module.exports = configure(function (/* ctx */) {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      vitePlugins: [
-        [
-          '@intlify/vite-plugin-vue-i18n',
-          {
-            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
-            // compositionOnly: false,
-
-            // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
-            // you need to set `runtimeOnly: false`
-            // runtimeOnly: false,
-
-            // you need to set i18n resource including paths !
-            include: path.resolve(__dirname, './src/i18n/**'),
-          },
-        ],
-      ],
+      vitePlugins: [],
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
diff --git a/src/App.vue b/src/App.vue
index aa9a007..19eb5a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,22 +2,16 @@
   <router-view />
 </template>
 
-<script>
-import { defineComponent, onMounted } from 'vue';
+<script setup>
+import { onMounted } from 'vue';
 import { useChatsStore } from 'stores/chats-store';
 import { useKnowledgeStore } from './stores/knowledge-store';
 
-export default defineComponent({
-  name: 'App',
-  setup() {
-    const chatsStore = useChatsStore();
-    const knowledgeStore = useKnowledgeStore();
-    onMounted(() => {
-      // Set the knowledge store and chats store to load when the app is mounted
-      knowledgeStore.load();
-      chatsStore.load();
-    });
-    return {};
-  },
+const chatsStore = useChatsStore();
+const knowledgeStore = useKnowledgeStore();
+onMounted(() => {
+  // Set the knowledge store and chats store to load when the app is mounted
+  knowledgeStore.load();
+  chatsStore.load();
 });
 </script>
diff --git a/src/boot/.gitkeep b/src/boot/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/boot/i18n.js b/src/boot/i18n.js
deleted file mode 100644
index 3d047d7..0000000
--- a/src/boot/i18n.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
-
-export default boot(({ app }) => {
-  const i18n = createI18n({
-    locale: 'en-US',
-    globalInjection: true,
-    messages,
-  });
-
-  // Set i18n instance on app
-  app.use(i18n);
-});
diff --git a/src/components/AccountButton.vue b/src/components/AccountButton.vue
index 16a2812..219906f 100644
--- a/src/components/AccountButton.vue
+++ b/src/components/AccountButton.vue
@@ -9,7 +9,7 @@
       unelevated
       @click="eth_web3_login"
     >
-      <q-icon class="text-dark" size="xs" left>
+      <q-icon class="text-dark" left size="xs">
         <img src="~assets/wallet.svg" />
       </q-icon>
       Connect Wallet
@@ -18,11 +18,11 @@
       v-else
       :label="`${account.address.slice(0, 4)}...${account.address.slice(-2)}`"
       class="border-primary-highlight gt-sm"
-      text-color="primary"
+      icon="img:icons/svg/avatar.svg"
       no-caps
       rounded
+      text-color="primary"
       unelevated
-      icon="img:icons/svg/avatar.svg"
     >
       <div class="row no-wrap q-pa-md q-pt-none">
         <div class="column items-center">
@@ -47,34 +47,28 @@
 
 <script setup>
 import { ethers } from 'ethers';
-import { useAccount } from '../stores/account';
+import { useAccount } from 'stores/account';
 import { usePoints } from 'stores/points';
 
-console.log(ethers);
-
 const account = useAccount();
 
 async function eth_web3_login() {
   const points = usePoints();
-  console.log(window.ethereum);
   if (window.ethereum) {
     try {
       // Request account access if needed
       await window.ethereum.enable();
       let provider = new ethers.providers.Web3Provider(window['ethereum'] || window.web3.currentProvider);
       await account.setProvider(provider);
+      await points.update();
     } catch (error) {
-      console.log(error);
       // User denied account access...
     }
   } else {
     alert('No ethereum provider detected. Please install metamask or similar.');
   }
-  console.log(account);
   if (!account.active) {
     alert('Error getting web3 account');
-    return;
   }
-  await points.update();
 }
 </script>
diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
index ca55db6..cdf0bee 100644
--- a/src/components/EssentialLink.vue
+++ b/src/components/EssentialLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-item clickable tag="a" target="_blank" :href="link">
+  <q-item :href="link" clickable tag="a" target="_blank">
     <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
@@ -11,31 +11,26 @@
   </q-item>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
+<script setup>
+const { title, caption, link, icon } = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
 
-    caption: {
-      type: String,
-      default: '',
-    },
+  caption: {
+    type: String,
+    default: '',
+  },
 
-    link: {
-      type: String,
-      default: '#',
-    },
+  link: {
+    type: String,
+    default: '#',
+  },
 
-    icon: {
-      type: String,
-      default: '',
-    },
+  icon: {
+    type: String,
+    default: '',
   },
 });
 </script>
diff --git a/src/components/KnowledgeStoreUploader.js b/src/components/KnowledgeStoreUploader.js
index 8a519f9..0cd6bc8 100644
--- a/src/components/KnowledgeStoreUploader.js
+++ b/src/components/KnowledgeStoreUploader.js
@@ -32,7 +32,6 @@ export default createUploaderComponent({
       // Set the loading state
       loading.value = true;
       const files = helpers.queuedFiles.value;
-      console.log(`components::KnowledgeStoreUploader::upload - files: ${files}`);
       fileStatus.value = {};
       fileStatus.value = files.reduce((acc, file) => {
         acc[file.name] = 'queued';
@@ -56,7 +55,7 @@ export default createUploaderComponent({
             if (text.length < 4 * 1024) {
               fileStatus.value[file.name] = 'uploaded';
               helpers.updateFileStatus(file, 'uploaded');
-              // If you don't embed the doucment, make sure to set the content
+              // If you don't embed the document, make sure to set the content
               emit('attachment-added', { title, type, content: text });
               return;
             }
diff --git a/src/components/MessageInput.vue b/src/components/MessageInput.vue
index 653488a..ed87afb 100644
--- a/src/components/MessageInput.vue
+++ b/src/components/MessageInput.vue
@@ -1,27 +1,27 @@
 <template>
   <q-input
-    outlined
+    ref="input"
     v-model="model"
-    placeholder="Write your message here"
+    :bottom-slots="props.hint !== ''"
+    :class="` ${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
+    :loading="isLoading"
     autofocus
+    autogrow
     bg-color="secondary"
-    label-color="grey"
     input-class="text-light"
-    :class="` ${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
-    ref="input"
-    type="textarea"
-    autogrow
     input-style="max-height: 10em;"
+    label-color="grey"
+    outlined
+    placeholder="Write your message here"
+    type="textarea"
     @keydown.enter="sendMessage"
-    :loading="isLoading"
-    :bottom-slots="props.hint !== ''"
   >
     <template v-slot:prepend>
       <!--<q-btn round dense flat icon="img:icons/svg/attachment.svg" @click="sendMessage" color="white" />-->
     </template>
     <template v-slot:append>
       <!--<q-btn round dense flat icon="img:icons/mic.svg" @click="sendMessage" color="" class="" />-->
-      <q-btn round dense flat icon="img:icons/send.svg" @click="sendMessage" color="" class="" />
+      <q-btn class="" color="" dense flat icon="img:icons/send.svg" round @click="sendMessage" />
     </template>
 
     <template v-slot:hint>
@@ -49,7 +49,6 @@ const sendMessage = (event) => {
     return;
   }
   event.preventDefault();
-  console.log(model.value);
 
   if (!model.value.trim()) return;
   let content = model.value;
diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
index c3ecca0..1ccb4fa 100644
--- a/src/components/PersonaDialog.vue
+++ b/src/components/PersonaDialog.vue
@@ -1,10 +1,10 @@
 <template>
-  <q-dialog label="Customize" style="flex-grow: 1" class="q-pa-lg">
+  <q-dialog class="q-pa-lg" label="Customize" style="flex-grow: 1">
     <q-card class="q-pa-md">
       <q-card-actions class="flex flex-left text-purple700 text-semibold">
         Customize persona
         <q-space />
-        <q-btn icon="img:icons/svg/close.svg" size="sm" flat unelevated v-close-popup />
+        <q-btn v-close-popup flat icon="img:icons/svg/close.svg" size="sm" unelevated />
       </q-card-actions>
 
       <q-card-section horizontal>
@@ -15,34 +15,34 @@
         </q-card-section>
         <q-card-section>
           <label class="text-light">Persona name</label>
-          <q-input outlined v-model="persona.name" input-class="text-light q-px-sm" bg-color="secondary"> </q-input>
+          <q-input v-model="persona.name" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
         </q-card-section>
       </q-card-section>
 
       <q-card-section>
         <label class="text-light">Your name</label>
-        <q-input outlined v-model="usernameInputRef" input-class="text-light q-px-sm" bg-color="secondary"> </q-input>
+        <q-input v-model="usernameInputRef" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
       </q-card-section>
       <q-card-section>
         <label class="text-light">Persona Description</label>
         <q-input
-          autogrow
           v-model="persona.description"
-          type="textarea"
-          outlined
-          input-class="text-light"
+          autogrow
           bg-color="secondary"
+          input-class="text-light"
+          outlined
+          type="textarea"
         />
       </q-card-section>
       <q-card-section align="right" class="text-primary" horizontal>
-        <q-btn rounded label="Close" v-close-popup class="q-px-xl q-py-xs" />
+        <q-btn v-close-popup class="q-px-xl q-py-xs" label="Close" rounded />
         <q-space />
         <q-btn
-          rounded
-          label="Confirm"
+          v-close-popup
           class="bg-primary q-px-xl q-py-xs"
+          label="Confirm"
+          rounded
           text-color="white"
-          v-close-popup
           @click="updatePersona()"
         />
       </q-card-section>
@@ -50,27 +50,15 @@
   </q-dialog>
 </template>
 
-<script>
+<script setup>
 import { usePersonasStore } from 'src/stores/personas-store';
-import { defineComponent, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-
-export default defineComponent({
-  name: 'PersonaDialog',
-  setup() {
-    const personasStore = usePersonasStore();
-    const persona = personasStore.persona;
-    const usernameInputRef = ref('user');
+import { ref } from 'vue';
 
-    function updatePersona() {
-      personasStore.setPersona(persona);
-    }
+const personasStore = usePersonasStore();
+const persona = personasStore.persona;
+const usernameInputRef = ref('user');
 
-    return {
-      usernameInputRef,
-      persona,
-      updatePersona,
-    };
-  },
-});
+function updatePersona() {
+  personasStore.persona = persona;
+}
 </script>
diff --git a/src/components/PersonaDropDown.vue b/src/components/PersonaDropDown.vue
index a52c695..d7a3dab 100644
--- a/src/components/PersonaDropDown.vue
+++ b/src/components/PersonaDropDown.vue
@@ -1,24 +1,24 @@
 <template>
   <q-btn-dropdown
-    no-caps
-    unelevated
-    rounded
     :icon="'img:' + personasStore.persona.avatarUrl"
-    dropdown-icon="img:icons/svg/chevron-down.svg"
+    :label="personasStore.persona.name"
     class="no-shadow rounded-img personas-dropdown q-py-sm"
+    dropdown-icon="img:icons/svg/chevron-down.svg"
+    no-caps
+    rounded
     text-color="primary"
-    :label="personasStore.persona.name"
+    unelevated
   >
     <q-list>
       <q-item
-        clickable
-        v-close-popup
         v-for="persona of personasStore.personas"
         :key="persona.id"
+        v-close-popup
         :name="persona.id"
+        clickable
         @click="setPersona(persona.id)"
       >
-        <q-avatar size="32px" class="q-mr-md">
+        <q-avatar class="q-mr-md" size="32px">
           <img :src="persona.avatarUrl" />
         </q-avatar>
         <q-item-section>
@@ -31,23 +31,12 @@
   </q-btn-dropdown>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-import { usePersonasStore } from 'src/stores/personas-store';
-
-export default defineComponent({
-  name: 'PersonaDropDown',
-  setup() {
-    const personasStore = usePersonasStore();
+<script setup>
+import { usePersonasStore } from 'stores/personas-store';
 
-    function setPersona(id) {
-      personasStore.setPersona(personasStore.personas.find((persona) => persona.id === id));
-    }
+const personasStore = usePersonasStore();
 
-    return {
-      personasStore,
-      setPersona,
-    };
-  },
-});
+function setPersona(id) {
+  personasStore.persona = personasStore.personas.find((persona) => persona.id === id);
+}
 </script>
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
deleted file mode 100644
index 250dbd4..0000000
--- a/src/i18n/en-US/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// This is just an example,
-// so you can safely delete all default props below
-
-export default {
-  failed: 'Action failed',
-  success: 'Action was successful',
-};
diff --git a/src/i18n/index.js b/src/i18n/index.js
deleted file mode 100644
index 028b8ef..0000000
--- a/src/i18n/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import enUS from './en-US';
-
-export default {
-  'en-US': enUS,
-};
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 22c5fff..25ca373 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,8 +2,7 @@
   <q-layout view="lHh Lpr lFf">
     <q-header class="bg-transparent q-mt-sm">
       <q-toolbar>
-        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" color="primary" />
-        <!--<persona-drop-down />-->
+        <q-btn aria-label="Menu" color="primary" dense flat icon="menu" round @click="toggleLeftDrawer" />
         <q-btn flat @click="editPersona = true">
           <q-icon size="xs">
             <img src="icons/svg/settings.svg" />
@@ -15,21 +14,21 @@
         <div class="row q-gutter-x-sm">
           <!-- model selector -->
           <q-btn-dropdown
+            :icon="$q.screen.gt.sm ? 'img:icons/svg/engine.svg' : ''"
             :label="modelsStore.selectedModel.name.substring(0, 12) + '..'"
-            color="primary"
-            text-color="white"
             class="border-primary-highlight"
+            color="primary"
+            no-caps
             rounded
+            text-color="white"
             unelevated
-            no-caps
-            :icon="$q.screen.gt.sm ? 'img:icons/svg/engine.svg' : ''"
           >
             <q-list>
               <q-item
-                clickable
-                v-close-popup
                 v-for="model in modelsStore.models"
                 :key="model.id"
+                v-close-popup
+                clickable
                 @click="modelsStore.setModel(model)"
               >
                 <q-item-section>
@@ -41,28 +40,28 @@
             </q-list>
           </q-btn-dropdown>
           <q-btn
-            unelevated
-            rounded
-            text-color="white"
-            no-caps
+            v-if="!account.active"
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
+            :icon="$q.screen.gt.sm ? undefined : 'img:icons/svg/star.svg'"
             :label="$q.screen.gt.sm ? 'Earn Points' : ''"
-            :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
+            no-caps
+            rounded
+            text-color="white"
             to="/points"
-            v-if="!account.active"
+            unelevated
           />
           <q-btn
-            unelevated
-            rounded
-            :text-color="$q.screen.gt.sm ? 'white' : 'black'"
+            v-else
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
-            :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
-            no-caps
+            :icon="$q.screen.gt.sm ? undefined : 'img:icons/svg/star.svg'"
+            :text-color="$q.screen.gt.sm ? 'white' : 'black'"
             :to="{
               name: 'points-detail',
               params: { address: account.address },
             }"
-            v-else
+            no-caps
+            rounded
+            unelevated
           >
             <span :key="account.address"
               >{{ addressPoints.toFixed(0) }} <span v-if="$q.screen.gt.sm">Points</span></span
@@ -75,39 +74,39 @@
 
     <q-drawer
       v-model="leftDrawerOpen"
-      show-if-above
       class="bg-white flex-grow fit"
+      show-if-above
       style="display: flex; flex-direction: column"
     >
       <!-- image link with the logo -->
-      <q-item clickable to="/" class="q-mb-md text-left">
-        <img src="~assets/libertai.svg" alt="Libertai" />
+      <q-item class="q-mb-md text-left" clickable to="/">
+        <img alt="Libertai" src="~assets/libertai.svg" />
       </q-item>
       <q-btn
-        color="primary"
-        class="q-mx-md q-my-lg q-py-lg rounded-borders vertical-middle"
         align="left"
-        unelevated
+        class="q-mx-md q-my-lg q-py-lg rounded-borders vertical-middle"
+        color="primary"
         no-caps
         to="/new"
-        >+ New Chat</q-btn
-      >
+        unelevated
+        >+ New Chat
+      </q-btn>
 
       <!-- list of chats by reference to the chats-store -->
       <q-list style="flex-grow: 1">
-        <q-scroll-area visible style="height: 100%; min-height: 100px">
+        <q-scroll-area style="height: 100%; min-height: 100px" visible>
           <q-item
             v-for="chat of chats.slice().reverse()"
             :key="chat.id"
             :to="`/chat/${chat.id}`"
+            class="q-mx-md rounded-borders q-py-md q-my-md item-history"
             exact
             exact-active-class="bg-secondary item-active"
-            class="q-mx-md rounded-borders q-py-md q-my-md item-history"
           >
             <q-item-section side>
-              <q-btn v-if="route.params?.id == chat.id" flat icon="img:icons/msg_active.svg" size="sm" class="q-pa-xs">
+              <q-btn v-if="route.params?.id == chat.id" class="q-pa-xs" flat icon="img:icons/msg_active.svg" size="sm">
               </q-btn>
-              <q-btn v-if="route.params?.id != chat.id" flat icon="img:icons/msg.svg" size="sm" class="q-pa-xs">
+              <q-btn v-if="route.params?.id != chat.id" class="q-pa-xs" flat icon="img:icons/msg.svg" size="sm">
               </q-btn>
             </q-item-section>
 
@@ -117,14 +116,14 @@
               </q-item-label>
             </q-item-section>
 
-            <q-item-section side v-if="route.params?.id == chat.id">
-              <q-btn-group flat dense>
+            <q-item-section v-if="route.params?.id == chat.id" side>
+              <q-btn-group dense flat>
                 <q-btn
+                  class="q-pa-xs"
                   icon="img:icons/delete.svg"
                   size="sm"
-                  class="q-pa-xs"
-                  @click="deleteChatConfirm(chat.id)"
                   @_click="deleteChat(chat.id)"
+                  @click="deleteChatConfirm(chat.id)"
                 >
                   <q-tooltip>Delete chat</q-tooltip>
                 </q-btn>
@@ -135,49 +134,49 @@
         <q-dialog v-model="deleteChatConfirmAction">
           <q-card>
             <q-card-section class="row items-center">
-              <q-avatar icon="delete" color="primary" text-color="white" />
+              <q-avatar color="primary" icon="delete" text-color="white" />
               <span class="q-ml-xl">Are you sure you want to delete the current chat conversation?</span>
             </q-card-section>
 
             <q-card-actions align="right">
-              <q-btn flat label="Cancel" color="primary" v-close-popup />
-              <q-btn flat label="Confirm" color="primary" v-close-popup @click="deleteChat(deleteChatId)" />
+              <q-btn v-close-popup color="primary" flat label="Cancel" />
+              <q-btn v-close-popup color="primary" flat label="Confirm" @click="deleteChat(deleteChatId)" />
             </q-card-actions>
           </q-card>
         </q-dialog>
       </q-list>
       <!-- socials and support links (follow us, support, disclaimer) -->
       <q-list class="q-pt-md">
-        <q-item href="https://twitter.com/libertai_dai" target="_blank">
+        <q-item href="https://x.com/libertai_dai" target="_blank">
           <q-item-section avatar>
-            <img src="icons/twitter-x.svg" alt="Twitter - X" width="32px" />
+            <img alt="Twitter - X" src="icons/twitter-x.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Follow us </q-item-label>
+            <q-item-label> Follow us</q-item-label>
           </q-item-section>
         </q-item>
         <q-item href="https://t.me/libertai" target="_blank">
           <q-item-section avatar>
-            <img src="icons/telegram.svg" alt="Telegram" width="32px" />
+            <img alt="Telegram" src="icons/telegram.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Chat with us </q-item-label>
+            <q-item-label> Chat with us</q-item-label>
           </q-item-section>
         </q-item>
         <q-item href="https://aleph.im" target="_blank">
           <q-item-section avatar>
-            <img src="icons/aleph.svg" alt="Aleph" width="32px" />
+            <img alt="Aleph" src="icons/aleph.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Build with us </q-item-label>
+            <q-item-label> Build with us</q-item-label>
           </q-item-section>
         </q-item>
         <!-- powered by aleph.im -->
         <q-item clickable href="https://aleph.im" target="_blank">
-          <img src="~assets/powered-by.svg" alt="aleph.im" />
+          <img alt="aleph.im" src="~assets/powered-by.svg" />
         </q-item>
       </q-list>
     </q-drawer>
@@ -188,98 +187,62 @@
   </q-layout>
 </template>
 
-<script>
-import { defineComponent, ref, watch, computed, nextTick } from 'vue';
+<script setup>
+import { computed, nextTick, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 // Import State
 import { useChatsStore } from '../stores/chats-store';
 import { useModelsStore } from '../stores/models-store';
-import { usePersonasStore } from 'src/stores/personas-store';
 import { useAccount } from '../stores/account';
 import { usePoints } from 'src/stores/points';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
-// IMport Components
+// Import Components
 import AccountButton from 'src/components/AccountButton.vue';
 import PersonaDialog from 'src/components/PersonaDialog.vue';
 
-export default defineComponent({
-  name: 'MainLayout',
-  components: {
-    AccountButton,
-    PersonaDialog,
-  },
+const leftDrawerOpen = ref(false);
+// Control whether the advanced persona customization is shown
+const editPersona = ref(false);
 
-  setup() {
-    const leftDrawerOpen = ref(false);
-    // Control whether the advanced persona customization is shown
-    const editPersona = ref(false);
+const deleteChatConfirmAction = ref(false);
+const deleteChatId = ref(null);
 
-    const deleteChatConfirmAction = ref(false);
-    const deleteChatId = ref(null);
+// Setup Stores
+const modelsStore = useModelsStore();
+const chatsStore = useChatsStore();
+const account = useAccount();
+const points = usePoints();
 
-    // Setup Stores
-    const modelsStore = useModelsStore();
-    const chatsStore = useChatsStore();
-    const personasStore = usePersonasStore();
-    const account = useAccount();
-    const points = usePoints();
+const router = useRouter();
+const route = useRoute();
 
-    const router = useRouter();
-    const route = useRoute();
+// Reference to the chat-store state
+const { chats } = storeToRefs(chatsStore);
 
-    // Reference to the chat-store state
-    const { chats } = storeToRefs(chatsStore);
-
-    const addressPoints = computed(() => {
-      if (account.active) {
-        return points.getAddressRealtimePoints(account.address);
-      } else {
-        return 0;
-      }
-    });
-
-    // TODO: this is an invalid use of watch, as we are watching a computed value
-    // watch for account changes, and update points if not already done
-    watch(account.address, () => {
-      if (account.active && Object.keys(points.points).length === 0) {
-        points.update();
-      }
-    });
-
-    // Delete a chat
-    async function deleteChat(chat_id) {
-      await chatsStore.deleteChat(chat_id);
-      if (route.params?.id == chat_id) {
-        nextTick(() => router.push('/new'));
-      }
-    }
-
-    async function deleteChatConfirm(chat_id) {
-      deleteChatConfirmAction.value = true;
-      deleteChatId.value = chat_id;
-    }
-
-    return {
-      chats,
-      modelsStore,
-      personasStore,
-      account,
-      points,
-      router,
-      route,
-      leftDrawerOpen,
-      addressPoints,
-      deleteChat,
-      deleteChatConfirm,
-      deleteChatConfirmAction,
-      deleteChatId,
-      editPersona,
-      toggleLeftDrawer() {
-        leftDrawerOpen.value = !leftDrawerOpen.value;
-      },
-    };
-  },
+const addressPoints = computed(() => {
+  if (account.active) {
+    return points.getAddressRealtimePoints(account.address);
+  } else {
+    return 0;
+  }
 });
+
+// Delete a chat
+async function deleteChat(chat_id) {
+  await chatsStore.deleteChat(chat_id);
+  if (route.params?.id == chat_id) {
+    nextTick(() => router.push('/new'));
+  }
+}
+
+async function deleteChatConfirm(chat_id) {
+  deleteChatConfirmAction.value = true;
+  deleteChatId.value = chat_id;
+}
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
 </script>
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index ad7c64a..01eae99 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page class="column align-items-center q-mx-xl">
-    <div class="col-grow overflow-auto" style="max-height: calc(100vh - 190px)" ref="scrollAreaRef">
+    <div ref="scrollAreaRef" class="col-grow overflow-auto" style="max-height: calc(100vh - 190px)">
       <!-- Display message history -->
       <q-list class="col-grow">
         <!-- Determine styling based on the role of the message (if it's the user or the AI) -->
@@ -19,16 +19,16 @@
             </q-avatar>
           </q-item-section>
           <!-- Edit message popup -- triggered on click if the edit mode is enabled -->
-          <q-item-section :style="`max-width: calc(960px - 56px);`" :ref="'message-' + message_index">
+          <q-item-section :ref="'message-' + message_index" :style="`max-width: calc(960px - 56px);`">
             <q-popup-edit
+              v-if="enableEditRef"
+              v-slot="scope"
               v-model="message.content"
               auto-save
-              v-slot="scope"
-              v-if="enableEditRef"
               @save="(v, iV) => updateChatMessageContent(message_index, v, iV)"
             >
               <strong>{{ message.role }}</strong>
-              <q-input v-model="scope.value" dense autofocus counter autogrow />
+              <q-input v-model="scope.value" autofocus autogrow counter dense />
             </q-popup-edit>
             <!-- Display the role of the user or the AI -->
             <q-item-label class="text-semibold">
@@ -48,9 +48,9 @@
             <q-item-label style="display: block">
               <MarkdownRenderer :content="message.content" breaks />
               <!-- Display the loading spinner if the message is still loading -->
-              <q-spinner-bars color="white" size="2em" v-if="!message.stopped && isLoadingRef" />
+              <q-spinner-bars v-if="!message.stopped && isLoadingRef" color="white" size="2em" />
               <!-- Display the error message if the message errored  on generate -->
-              <span class="text-warning" v-if="!!message.error">
+              <span v-if="!!message.error" class="text-warning">
                 <q-tooltip>Error: {{ message.error.message }}</q-tooltip>
                 <q-icon name="warning" /> There has been an error, please <a @click="regenerateMessage()">retry</a>.
               </span>
@@ -60,20 +60,20 @@
           <div class="absolute dyn-container chat-toolbar">
             <!-- Allow regenerating the last message from the AI if fully completed -->
             <q-btn
-              @click="regenerateMessage()"
-              icon="refresh"
+              v-if="!isLoadingRef && message_index == messagesRef.length - 1"
               dense
               flat
+              icon="refresh"
               size="sm"
-              v-if="!isLoadingRef && message_index == messagesRef.length - 1"
+              @click="regenerateMessage()"
             >
               <q-tooltip>Regenerate</q-tooltip>
             </q-btn>
             <!-- Allow copying the message to the clipboard -->
-            <q-btn @click="copyMessage(message)" icon="img:icons/svg/copy2.svg" dense flat size="sm">
+            <q-btn dense flat icon="img:icons/svg/copy2.svg" size="sm" @click="copyMessage(message)">
               <q-tooltip>Copy</q-tooltip>
             </q-btn>
-            <q-btn @click="editMessage('message-' + message_index)" icon="img:icons/svg/edit.svg" dense flat size="sm">
+            <q-btn dense flat icon="img:icons/svg/edit.svg" size="sm" @click="editMessage('message-' + message_index)">
               <q-tooltip>Edit</q-tooltip>
             </q-btn>
           </div>
@@ -85,12 +85,12 @@
       <!-- "+" icon for uploading files, shown only when knowledge search is enabled -->
       <q-btn
         v-if="enableKnowledgeRef"
+        class="cursor-pointer q-mr-sm"
         flat
-        round
         icon="add"
-        class="cursor-pointer q-mr-sm"
-        @click="openKnowledgeUploader"
+        round
         style="margin-left: 16px"
+        @click="openKnowledgeUploader"
       />
 
       <q-chip
@@ -102,11 +102,11 @@
         {{ attachment.title }}
       </q-chip>
       <message-input
-        :isLoading="isLoadingRef"
-        @sendMessage="sendMessage"
-        v-model="inputTextRef"
         ref="inputRef"
+        v-model="inputTextRef"
+        :isLoading="isLoadingRef"
         class="col"
+        @sendMessage="sendMessage"
       />
     </div>
 
@@ -124,24 +124,24 @@
     <!-- This should really not pass the ref, but it's a quick fix for now -->
     <q-dialog v-model="showKnowledgeUploaderRef" position="bottom">
       <KnowledgeStoreUploader
-        @attachment-added="addAttachment"
         :chatRef="chatRef"
-        label="Auto KnowledgeStoreUploader"
         auto-upload
-        url="http://localhost:4444/upload"
+        label="Auto KnowledgeStoreUploader"
         multiple
+        url="http://localhost:4444/upload"
+        @attachment-added="addAttachment"
       />
     </q-dialog>
   </q-page>
 </template>
 
-<script>
+<script setup>
 import 'highlight.js/styles/devibeans.css';
-import { useQuasar, copyToClipboard } from 'quasar';
-import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
+import { copyToClipboard, useQuasar } from 'quasar';
+import { nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { inferChatTopic, defaultChatTopic } from 'src/utils/chat';
+import { defaultChatTopic, inferChatTopic } from 'src/utils/chat';
 
 // LlamaCppApiEngine
 import { LlamaCppApiEngine } from '@libertai/libertai-js';
@@ -158,414 +158,376 @@ import MarkdownRenderer from 'src/components/MarkdownRenderer.vue';
 import MessageInput from 'src/components/MessageInput.vue';
 import axios from 'axios';
 
-console.log(nextTick);
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+// App state
+const account = useAccount();
+const chatsStore = useChatsStore();
+const modelsStore = useModelsStore();
+const knowledgeStore = useKnowledgeStore();
+const personasStore = usePersonasStore();
+
+// Local page state
+const inputTextRef = ref('');
+const isLoadingRef = ref(false);
+const hasResetRef = ref(false);
+const inputRef = ref(null);
+const scrollAreaRef = ref(null);
+const enableEditRef = ref(false);
+const enableKnowledgeRef = ref(true);
+const showKnowledgeUploaderRef = ref(false);
+const attachmentsRef = ref([]);
+
+// Chat specific state
+const chatRef = ref();
+const personaRef = ref();
+const usernameRef = ref();
+const messagesRef = ref([]);
+
+// Instance of an inference engine
+const inferenceEngine = new LlamaCppApiEngine();
+
+// Clear the chat as soon as we mount
+onMounted(() => {
+  nextTick(clearCookies);
+});
 
-export default defineComponent({
-  name: 'ChatPage',
-  components: {
-    MarkdownRenderer,
-    MessageInput,
-  },
-  setup() {
-    const $q = useQuasar();
-    const route = useRoute();
-    const router = useRouter();
-
-    // App state
-    const account = useAccount();
-    const chatsStore = useChatsStore();
-    const modelsStore = useModelsStore();
-    const knowledgeStore = useKnowledgeStore();
-    const personasStore = usePersonasStore();
-
-    // Local page state
-    const inputTextRef = ref('');
-    const isLoadingRef = ref(false);
-    const hasResetRef = ref(false);
-    const inputRef = ref(null);
-    const scrollAreaRef = ref(null);
-    const enableEditRef = ref(false);
-    const enableKnowledgeRef = ref(true);
-    const showKnowledgeUploaderRef = ref(false);
-    const attachmentsRef = ref([]);
-
-    // Chat specific state
-    const chatRef = ref();
-    const personaRef = ref();
-    const usernameRef = ref();
-    const messagesRef = ref([]);
-
-    // Instance of an inference engine
-    const inferenceEngine = new LlamaCppApiEngine();
-
-    // Clear the chat as soon as we mount
-    onMounted(() => {
-      nextTick(clearCookies);
-    });
+/* Set chat on initial load */
 
-    /* Set chat on initial load */
-
-    setChat(route.params.id);
-
-    /* Watchers */
-
-    // Update the chat when the route changes
-    watch(
-      () => route.params.id,
-      async (newId) => {
-        await setChat(newId);
-      },
-    );
-
-    // Update whether we should show the knowledge uploader based on whether the user is connected
-    watch(
-      () => account.active,
-      (active) => {
-        console.log('pages::Chat.vue::watch - account.active', active);
-        enableKnowledgeRef.value = active;
-      },
-    );
-
-    // Update the chat model when the selected model changes
-    watch(
-      () => modelsStore.selectedModel,
-      async (newModel) => {
-        // Ser / DeSer to ensure we have a fresh copy
-        newModel = JSON.parse(JSON.stringify(newModel));
-
-        let chatModelApiUrl = chatRef.value.model.apiUrl;
-        if (chatModelApiUrl !== newModel.apiUrl) {
-          // We have a new model, so update local and stored state
-          chatRef.value.model = newModel;
-          await chatsStore.updateChatModel(chatRef.value.id, newModel);
-
-          // Send a notification
-          $q.notify(`Changing current chat model to ${newModel.name}`);
-        }
-      },
-    );
+setChat(route.params.id);
 
-    /* Helper functions */
+/* Watchers */
 
-    function addAttachment(attachmentEvent) {
-      let attachment = JSON.parse(JSON.stringify(attachmentEvent));
-      attachmentsRef.value.push(attachment);
-    }
+// Update the chat when the route changes
+watch(
+  () => route.params.id,
+  async (newId) => {
+    await setChat(newId);
+  },
+);
 
-    async function removeAttachment(attachment) {
-      // Remove the attachment from the knowledge store
-      await knowledgeStore.removeDocument(attachment.documentId);
-      let index = attachmentsRef.value.indexOf(attachment);
-      attachmentsRef.value.splice(index, 1);
+// Update whether we should show the knowledge uploader based on whether the user is connected
+watch(
+  () => account.active,
+  (active) => {
+    enableKnowledgeRef.value = active;
+  },
+);
+
+// Update the chat model when the selected model changes
+watch(
+  () => modelsStore.selectedModel,
+  async (newModel) => {
+    // Ser / DeSer to ensure we have a fresh copy
+    newModel = JSON.parse(JSON.stringify(newModel));
+
+    let chatModelApiUrl = chatRef.value.model.apiUrl;
+    if (chatModelApiUrl !== newModel.apiUrl) {
+      // We have a new model, so update local and stored state
+      chatRef.value.model = newModel;
+      await chatsStore.updateChatModel(chatRef.value.id, newModel);
+
+      // Send a notification
+      $q.notify(`Changing current chat model to ${newModel.name}`);
     }
+  },
+);
 
-    // Set the name of the chat based on the first sentence
-    async function setChatName(first_sentence) {
-      // Get our chat id
-      let chatId = chatRef.value.id;
-      try {
-        const title = await inferChatTopic(first_sentence);
-        await chatsStore.updateChatTitle(chatId, title);
-        // Update the chat title state
-        chatRef.value.title = title;
-      } catch (error) {
-        console.error('pages::Chat.vue::setChatName - error', error);
-      }
-    }
+/* Helper functions */
+
+function addAttachment(attachmentEvent) {
+  let attachment = JSON.parse(JSON.stringify(attachmentEvent));
+  attachmentsRef.value.push(attachment);
+}
+
+async function removeAttachment(attachment) {
+  // Remove the attachment from the knowledge store
+  await knowledgeStore.removeDocument(attachment.documentId);
+  let index = attachmentsRef.value.indexOf(attachment);
+  attachmentsRef.value.splice(index, 1);
+}
+
+// Set the name of the chat based on the first sentence
+async function setChatName(first_sentence) {
+  // Get our chat id
+  let chatId = chatRef.value.id;
+  try {
+    const title = await inferChatTopic(first_sentence);
+    await chatsStore.updateChatTitle(chatId, title);
+    // Update the chat title state
+    chatRef.value.title = title;
+  } catch (error) {
+    console.error('pages::Chat.vue::setChatName - error', error);
+  }
+}
+
+// Scroll to the bottom of the chat when new messages are added
+async function scrollBottom() {
+  scrollAreaRef.value.lastElementChild.scrollIntoView({
+    behavior: 'smooth',
+    block: 'end',
+  });
+}
 
-    // Scroll to the bottom of the chat when new messages are added
-    async function scrollBottom() {
-      scrollAreaRef.value.lastElementChild.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
+// Generate a new response from the AI
+async function generatePersonaMessage() {
+  let chatId = chatRef.value.id;
+  let chatTags = chatRef.value.tags;
+  let messages = JSON.parse(JSON.stringify(messagesRef.value));
+  let persona = personaRef.value;
+  let username = usernameRef.value;
+  let model = chatRef.value.model;
+
+  // Create a new message to encapsulate our response
+  let response = {
+    role: persona.name,
+    content: '',
+    stopped: false,
+    error: null,
+  };
+
+  // And push it to the local state so that it renders
+  messagesRef.value = [...messagesRef.value, response];
+  chatRef.value.messages = messagesRef.value;
+
+  try {
+    // Set loading state
+    isLoadingRef.value = true;
+    hasResetRef.value = false;
+
+    // NOTE: assuming last message is guaranteed to be non-empty and the user's last message
+    // Get the last message from the user
+    let lastMessage = messages[messages.length - 1];
+    let searchResultMessages = [];
+    let searchResults = await knowledgeStore.searchDocuments(lastMessage.content, chatTags);
+    searchResults.forEach((result) => {
+      searchResultMessages.push({
+        role: 'search-result',
+        content: result.content,
       });
-    }
+    });
 
-    // Generate a new response from the AI
-    async function generatePersonaMessage() {
-      let chatId = chatRef.value.id;
-      let chatTags = chatRef.value.tags;
-      let messages = JSON.parse(JSON.stringify(messagesRef.value));
-      let persona = personaRef.value;
-      let username = usernameRef.value;
-      let model = chatRef.value.model;
-
-      // Create a new message to encapsulate our response
-      let response = {
-        role: persona.name,
-        content: '',
-        stopped: false,
-        error: null,
-      };
-
-      // And push it to the local state so that it renders
-      messagesRef.value = [...messagesRef.value, response];
-      chatRef.value.messages = messagesRef.value;
-
-      try {
-        // Set loading state
-        isLoadingRef.value = true;
-        hasResetRef.value = false;
-
-        // NOTE: assuming last message is gauranteed to be non-empty and the user's last message
-        // Get the last message from the user
-        let lastMessage = messages[messages.length - 1];
-        let searchResultMessages = [];
-        let searchResults = await knowledgeStore.searchDocuments(lastMessage.content, chatTags);
-        searchResults.forEach((result) => {
-          searchResultMessages.push({
-            role: 'search-result',
-            content: result.content,
-          });
-        });
-
-        // Expand all the messages to inline any compatible attachments
-        const exapndedMessages = messages
-          .map((message) => {
-            let ret = [];
-            // Push any attachments ahead of the message
-            if (message.attachments) {
-              message.attachments.forEach((attachment) => {
-                if (attachment.content) {
-                  ret.push({
-                    role: 'attachment',
-                    content: `[${attachment.title}](${attachment.content})`,
-                  });
-                } else if (attachment.documentId) {
-                  ret.push({
-                    role: 'attachment',
-                    content: `[${attachment.title}](document-id-${attachment.documentId})`,
-                  });
-                }
+    // Expand all the messages to inline any compatible attachments
+    const expandedMessages = messages
+      .map((message) => {
+        let ret = [];
+        // Push any attachments ahead of the message
+        if (message.attachments) {
+          message.attachments.forEach((attachment) => {
+            if (attachment.content) {
+              ret.push({
+                role: 'attachment',
+                content: `[${attachment.title}](${attachment.content})`,
               });
-            }
-
-            // Push what search results we found based on the message
-            // TODO: this should prabably be a more generic tool-call or llm-chain-link
-            // TODO: this should probably link back to the document id
-            // TODO: I should probably write these below messages in the log
-            //  Really these search results should get attached to the message that
-            //   lead to them being queried
-            if (message.searchResults) {
-              message.searchResults.forEach((result) => {
-                ret.push({
-                  role: 'search-result',
-                  content: result.content,
-                });
+            } else if (attachment.documentId) {
+              ret.push({
+                role: 'attachment',
+                content: `[${attachment.title}](document-id-${attachment.documentId})`,
               });
             }
-            // Push the message itself
-            ret.push(message);
-            return ret;
-          })
-          .flat();
-
-        // Append the search results to the messages
-        const allMessages = [...exapndedMessages, ...searchResultMessages];
-
-        // Generate a stream of responses from the AI
-        for await (const output of inferenceEngine.generateAnswer(
-          allMessages,
-          model,
-          persona,
-          // Set the target to the user
-          username,
-          // set to false to disable logging
-          false,
-        )) {
-          let stopped = output.stopped;
-          let content = output.content;
-          if (!stopped) {
-            content += ' *[writing ...]*';
-          }
-          // Update the local state include updates
-          response.content = content;
-          response.stopped = stopped;
-
-          messagesRef.value = [...messagesRef.value];
-          // Scroll to the bottom of the chat
-          nextTick(scrollBottom);
+          });
         }
-        // A successful response! Append the chat to long term storage.
-        await chatsStore.appendModelResponse(chatId, response.content, searchResults);
-      } catch (error) {
-        console.error('pages::Chat.vue::generatePersonaMessage - error', error);
-        response.error = error;
-      } finally {
-        // Done! update the local state to reflect the end of the process
-        isLoadingRef.value = false;
-        hasResetRef.value = false;
-        messagesRef.value = [...messagesRef.value];
-      }
-    }
 
-    // TODO: arbitrary message regeneration
-    // Regenerate the last message from the AI
-    async function regenerateMessage() {
-      // we discard the last message if it's from the AI, and regenerate
-      const lastMessage = messagesRef.value[messagesRef.value.length - 1];
-      if (lastMessage.role !== usernameRef.value) {
-        let chatId = chatRef.value.id;
-        // Update the local state
-        messagesRef.value.pop();
-        messagesRef.value = [...messagesRef.value];
-        chatRef.value.messages = messagesRef.value;
-        // Update the chat state
-        await chatsStore.popChatMessages(chatId);
+        // Push what search results we found based on the message
+        // TODO: this should probably be a more generic tool-call or llm-chain-link
+        // TODO: this should probably link back to the document id
+        // TODO: I should probably write these below messages in the log
+        //  Really these search results should get attached to the message that
+        //   lead to them being queried
+        if (message.searchResults) {
+          message.searchResults.forEach((result) => {
+            ret.push({
+              role: 'search-result',
+              content: result.content,
+            });
+          });
+        }
+        // Push the message itself
+        ret.push(message);
+        return ret;
+      })
+      .flat();
+
+    // Append the search results to the messages
+    const allMessages = [...expandedMessages, ...searchResultMessages];
+
+    // Generate a stream of responses from the AI
+    for await (const output of inferenceEngine.generateAnswer(
+      allMessages,
+      model,
+      persona,
+      // Set the target to the user
+      username,
+      // set to false to disable logging
+      false,
+    )) {
+      let stopped = output.stopped;
+      let content = output.content;
+      if (!stopped) {
+        content += ' *[writing ...]*';
       }
-      await generatePersonaMessage();
-    }
-
-    async function sendMessage(content) {
-      console.log('pages::Chat.vue::sendMessage');
-      let chatId = chatRef.value.id;
-      let inputText = inputTextRef.value;
-      const attachments = JSON.parse(JSON.stringify(attachmentsRef.value));
-
-      // Wipe the input text
-      inputTextRef.value = '';
-      // Wipe the attachments
-      attachmentsRef.value = [];
+      // Update the local state include updates
+      response.content = content;
+      response.stopped = stopped;
 
+      messagesRef.value = [...messagesRef.value];
+      // Scroll to the bottom of the chat
       nextTick(scrollBottom);
+    }
+    // A successful response! Append the chat to long term storage.
+    await chatsStore.appendModelResponse(chatId, response.content, searchResults);
+  } catch (error) {
+    console.error('pages::Chat.vue::generatePersonaMessage - error', error);
+    response.error = error;
+  } finally {
+    // Done! update the local state to reflect the end of the process
+    isLoadingRef.value = false;
+    hasResetRef.value = false;
+    messagesRef.value = [...messagesRef.value];
+  }
+}
 
-      if (!content.trim()) return;
-
-      if (content.trim() === '') return;
-
-      // Append the new message to the chat history and push to local state
-      let newMessage = await chatsStore.appendUserMessage(chatId, inputText, attachments);
-      messagesRef.value.push({ ...newMessage, stopped: true, error: null });
-      chatRef.value.messages = messagesRef.value;
+// TODO: arbitrary message regeneration
+// Regenerate the last message from the AI
+async function regenerateMessage() {
+  // we discard the last message if it's from the AI, and regenerate
+  const lastMessage = messagesRef.value[messagesRef.value.length - 1];
+  if (lastMessage.role !== usernameRef.value) {
+    let chatId = chatRef.value.id;
+    // Update the local state
+    messagesRef.value.pop();
+    messagesRef.value = [...messagesRef.value];
+    chatRef.value.messages = messagesRef.value;
+    // Update the chat state
+    await chatsStore.popChatMessages(chatId);
+  }
+  await generatePersonaMessage();
+}
 
-      // Scroll to the bottom of the chat
-      nextTick(scrollBottom);
+async function sendMessage(content) {
+  let chatId = chatRef.value.id;
+  let inputText = inputTextRef.value;
+  const attachments = JSON.parse(JSON.stringify(attachmentsRef.value));
 
-      // Generate a response from the AI
-      await generatePersonaMessage();
-    }
+  // Wipe the input text
+  inputTextRef.value = '';
+  // Wipe the attachments
+  attachmentsRef.value = [];
 
-    // Set a chat by its ID
-    async function setChat(chatId) {
-      // This is annoying but we need to set whether the user is connected
-      enableKnowledgeRef.value = account.active;
-
-      // Load the chat from the store and set it
-      chatRef.value = await chatsStore.readChat(chatId);
-      if (!chatRef.value) {
-        console.error('pages::Chat.vue::setChat - chat not found');
-        await router.push({ name: 'new-chat' });
-        return;
-      }
+  nextTick(scrollBottom);
 
-      console.log('set persona from chat');
-      personasStore.setPersona(chatRef.value.persona);
-      // Extract the chat properties
-      let title = chatRef.value.title;
-      let username = chatRef.value.username;
-      // Load messages, mapping over with additional properties we need in the UI
-      let messages = chatRef.value.messages.map((message) => {
-        // Set stopped to true
-        message.stopped = true;
-        // Set error to null
-        message.error = null;
-        return message;
-      });
-      let persona = chatRef.value.persona;
+  if (!content.trim()) return;
 
-      // Set the selected model for the chat by its URL
-      let modelApiUrl = chatRef.value.model.apiUrl;
-      modelsStore.setModelByURL(modelApiUrl);
+  if (content.trim() === '') return;
 
-      // Set the local messages state
-      messagesRef.value = messages;
+  // Append the new message to the chat history and push to local state
+  let newMessage = await chatsStore.appendUserMessage(chatId, inputText, attachments);
+  messagesRef.value.push({ ...newMessage, stopped: true, error: null });
+  chatRef.value.messages = messagesRef.value;
 
-      // Set the local persona state
-      personaRef.value = persona;
+  // Scroll to the bottom of the chat
+  nextTick(scrollBottom);
 
-      // Set the local username state
-      usernameRef.value = username;
+  // Generate a response from the AI
+  await generatePersonaMessage();
+}
 
-      // Set the chat title if it's not set
-      if (title === defaultChatTopic || title === '') {
-        // Set the chat name based on the first message
-        setChatName(messages[0].content);
-      }
+// Set a chat by its ID
+async function setChat(chatId) {
+  // This is annoying but we need to set whether the user is connected
+  enableKnowledgeRef.value = account.active;
+
+  // Load the chat from the store and set it
+  chatRef.value = await chatsStore.readChat(chatId);
+  if (!chatRef.value) {
+    console.error('pages::Chat.vue::setChat - chat not found');
+    await router.push({ name: 'new-chat' });
+    return;
+  }
 
-      // Determine if there are messages we need to repsond to
-      // NOTE: this is assuming all chats should be initiated by the user
-      if (messages.length % 2 === 1) {
-        await generatePersonaMessage();
-      }
-      nextTick(scrollBottom);
-    }
+  personasStore.persona = chatRef.value.persona;
+  // Extract the chat properties
+  let title = chatRef.value.title;
+  let username = chatRef.value.username;
+  // Load messages, mapping over with additional properties we need in the UI
+  let messages = chatRef.value.messages.map((message) => {
+    // Set stopped to true
+    message.stopped = true;
+    // Set error to null
+    message.error = null;
+    return message;
+  });
+  let persona = chatRef.value.persona;
+
+  // Set the selected model for the chat by its URL
+  let modelApiUrl = chatRef.value.model.apiUrl;
+  modelsStore.setModelByURL(modelApiUrl);
+
+  // Set the local messages state
+  messagesRef.value = messages;
+
+  // Set the local persona state
+  personaRef.value = persona;
+
+  // Set the local username state
+  usernameRef.value = username;
+
+  // Set the chat title if it's not set
+  if (title === defaultChatTopic || title === '') {
+    // Set the chat name based on the first message
+    setChatName(messages[0].content);
+  }
 
-    async function updateChatMessageContent(messageIndex, content, initialContent) {
-      let chatId = chatRef.value.id;
-      try {
-        await chatsStore.updateChatMessageContent(chatId, messageIndex, content);
-      } catch (error) {
-        console.error('pages::Chat.vue::updateChatMessageContent - error', error);
-        // Reset the content to the initial content
-        messagesRef.value[messageIndex].content = initialContent;
-        // Alert the user
-        $q.notify('Failed to update message content');
-      }
-    }
+  // Determine if there are messages we need to respond to
+  // NOTE: this is assuming all chats should be initiated by the user
+  if (messages.length % 2 === 1) {
+    await generatePersonaMessage();
+  }
+  nextTick(scrollBottom);
+}
 
-    async function copyMessage(message) {
-      await copyToClipboard(message.content);
-      $q.notify('Message copied to clipboard');
-    }
+async function updateChatMessageContent(messageIndex, content, initialContent) {
+  let chatId = chatRef.value.id;
+  try {
+    await chatsStore.updateChatMessageContent(chatId, messageIndex, content);
+  } catch (error) {
+    console.error('pages::Chat.vue::updateChatMessageContent - error', error);
+    // Reset the content to the initial content
+    messagesRef.value[messageIndex].content = initialContent;
+    // Alert the user
+    $q.notify('Failed to update message content');
+  }
+}
 
-    async function editMessage(message_id) {
-      this.enableEditRef = true;
+async function copyMessage(message) {
+  await copyToClipboard(message.content);
+  $q.notify('Message copied to clipboard');
+}
 
-      setTimeout(() => {
-        this.$refs[message_id][0].$el.click();
-      }, 50);
-    }
+async function editMessage(message_id) {
+  this.enableEditRef = true;
 
-    async function clearCookies() {
-      // Clear the slots
-      inferenceEngine.clearSlots();
-      // Clear the cookies from aleph
-      await axios.get('https://curated.aleph.cloud/change-pool', {
-        withCredentials: true,
-      });
-      // Set the reset flag
-      hasResetRef.value = true;
-    }
+  setTimeout(() => {
+    this.$refs[message_id][0].$el.click();
+  }, 50);
+}
 
-    function openKnowledgeUploader() {
-      showKnowledgeUploaderRef.value = true;
-    }
+async function clearCookies() {
+  // Clear the slots
+  inferenceEngine.clearSlots();
+  // Clear the cookies from aleph
+  await axios.get('https://curated.aleph.cloud/change-pool', {
+    withCredentials: true,
+  });
+  // Set the reset flag
+  hasResetRef.value = true;
+}
 
-    return {
-      scrollAreaRef,
-      chatRef,
-      messagesRef,
-      usernameRef,
-      personaRef,
-      isLoadingRef,
-      inputRef,
-      inputTextRef,
-      attachmentsRef,
-      addAttachment,
-      removeAttachment,
-      sendMessage,
-      showKnowledgeUploaderRef,
-      openKnowledgeUploader,
-      enableEditRef,
-      enableKnowledgeRef,
-      regenerateMessage,
-      updateChatMessageContent,
-      copyMessage,
-      editMessage,
-      chatId: route.params.id,
-    };
-  },
-});
+function openKnowledgeUploader() {
+  showKnowledgeUploaderRef.value = true;
+}
 </script>
 <style>
 /* Ensure message input expands to fill available space */
diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
index 31db5b8..ba785b5 100644
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -5,15 +5,9 @@
 
       <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
 
-      <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
+      <q-btn class="q-mt-xl" color="white" label="Go Home" no-caps text-color="blue" to="/" unelevated />
     </div>
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ErrorNotFound',
-});
-</script>
+<script></script>
diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index f7baa1d..5fac36b 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-layout view="hHh lpR fff" container style="height: 100vh">
-    <q-header elevated class="bg-primary text-white">
+  <q-layout container style="height: 100vh" view="hHh lpR fff">
+    <q-header class="bg-primary text-white" elevated>
       <q-toolbar class="row justify-between items-center q-px-lg">
-        <q-btn flat round dense @click="$router.push('/')" icon="home" />
+        <q-btn dense flat icon="home" round @click="$router.push('/')" />
         <q-toolbar-title>Knowledge Database</q-toolbar-title>
       </q-toolbar>
     </q-header>
@@ -11,13 +11,13 @@
       <div class="row justify-center q-pa-md">
         <div class="col-lg-8 col-sm-12">
           <q-list>
-            <q-item v-for="document in documents" :key="document.id" clickable @click="onRowClick($event, document)">
+            <q-item v-for="document in documents" :key="document.id" clickable @click="onRowClick(document)">
               <q-item-section>
                 <q-item-label>{{ document.title }}</q-item-label>
               </q-item-section>
-              <!-- If the doucment is selected, show the deletion icon -->
-              <q-item-section side v-if="selectedDocumentId === document.id">
-                <q-btn-group flat dense>
+              <!-- If the document is selected, show the deletion icon -->
+              <q-item-section v-if="selectedDocumentId === document.id" side>
+                <q-btn-group dense flat>
                   <q-btn icon="delete" @click="removeSelectedDocument(document.id)" />
                   <q-tooltip>Remove Document</q-tooltip>
                 </q-btn-group>
@@ -30,58 +30,42 @@
   </q-layout>
 </template>
 
-<script>
-import { ref, computed, defineComponent } from 'vue';
+<script setup>
+import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { useKnowledgeStore } from 'src/stores/knowledge-store';
 
-export default defineComponent({
-  name: 'KnowledgeBasePage',
-  setup() {
-    const knowledgeStore = useKnowledgeStore();
+const knowledgeStore = useKnowledgeStore();
 
-    // Columns for the table displaying documents
-    const columns = [
-      { name: 'id', label: 'ID', field: 'id' },
-      { name: 'title', label: 'Title', field: 'title' },
-    ];
+// Columns for the table displaying documents
+// const columns = [
+//   { name: 'id', label: 'ID', field: 'id' },
+//   { name: 'title', label: 'Title', field: 'title' },
+// ];
 
-    // Documents data source
-    const { documents } = storeToRefs(knowledgeStore);
+// Documents data source
+const { documents } = storeToRefs(knowledgeStore);
 
-    // Selected document
-    const selectedDocument = ref(null);
-    const selectedDocumentId = ref(null);
+// Selected document
+// const selectedDocument = ref(null);
+const selectedDocumentId = ref(null);
 
-    // Edited document object
-    const editedDocument = ref({ title: '', description: '' });
+// Edited document object
+// const editedDocument = ref({ title: '', description: '' });
 
-    // Form title based on whether we're adding or editing a document
-    const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
+// Form title based on whether we're adding or editing a document
+// const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
 
-    // On row click event handler for the table
-    function onRowClick(evt, row) {
-      console.log('Row clicked', row);
-      selectedDocumentId.value = row.id;
-    }
+// On row click event handler for the table
+function onRowClick(row) {
+  selectedDocumentId.value = row.id;
+}
 
-    async function removeSelectedDocument() {
-      if (selectedDocumentId.value) {
-        await knowledgeStore.removeDocument(selectedDocumentId.value);
-        selectedDocumentId.value = null;
-      }
-    }
-
-    return {
-      columns,
-      documents,
-      selectedDocumentId,
-      editedDocument,
-      formTitle,
-      onRowClick,
-      removeSelectedDocument,
-    };
-  },
-});
+async function removeSelectedDocument() {
+  if (selectedDocumentId.value) {
+    await knowledgeStore.removeDocument(selectedDocumentId.value);
+    selectedDocumentId.value = null;
+  }
+}
 </script>
diff --git a/src/pages/NewChat.vue b/src/pages/NewChat.vue
index b5e9bda..daae009 100644
--- a/src/pages/NewChat.vue
+++ b/src/pages/NewChat.vue
@@ -23,109 +23,74 @@
       </div>
       <div class="fixed-bottom absolute q-mb-xl q-pb-xs">
         <message-input
-          @sendMessage="sendMessage"
-          v-model="messageInputRef"
           ref="input"
+          v-model="messageInputRef"
           hint="Disclaimer: This chat bot uses personas for entertainment and informational purposes only. The
               chat bot's responses are not a reflection of any real person or organization's views or opinions, and should not
               be used as a substitute for professional advice. The accuracy and reliability of the chat bot's responses cannot
               be guaranteed. Users should exercise their own judgment and discretion when interacting with the chat bot and
               its personas. By using this chat bot, you acknowledge and agree to these terms."
+          @sendMessage="sendMessage"
         />
       </div>
       <q-space />
     </div>
   </q-page>
 </template>
-<script>
+<script setup>
 import { defaultChatTopic } from 'src/utils/chat';
 
 // Import State
 import { useModelsStore } from 'src/stores/models-store';
 import { useChatsStore } from 'src/stores/chats-store';
 import { usePersonasStore } from 'src/stores/personas-store';
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 // Import components
 import MessageInput from 'src/components/MessageInput.vue';
 import PersonaDropDown from 'src/components/PersonaDropDown.vue';
 
-export default defineComponent({
-  name: 'NewChat',
-  components: {
-    MessageInput,
-    PersonaDropDown,
-  },
-  setup() {
-    const router = useRouter();
-
-    // Stored State
+const router = useRouter();
 
-    const modelsStore = useModelsStore();
-    const chatsStore = useChatsStore();
-    // TODO: We probably don't need to use a store for this
-    const personasStore = usePersonasStore();
+// Stored State
 
-    // Our local page state
+const modelsStore = useModelsStore();
+const chatsStore = useChatsStore();
+// TODO: We probably don't need to use a store for this
+const personasStore = usePersonasStore();
 
-    const usernameInputRef = ref('user');
-    // Message input state
-    const messageInputRef = ref('');
+// Our local page state
 
-    async function sendMessage() {
-      let message = messageInputRef.value;
-      if (message.length === 0) {
-        console.warn('page::NewChat::sendMessage: message is empty');
-        return;
-      }
+const usernameInputRef = ref('user');
+// Message input state
+const messageInputRef = ref('');
 
-      // Extract the values out of our relevant refs
-      let title = defaultChatTopic;
-      let username = usernameInputRef.value;
-      // NOTE: these are refs to the store, so we need to deep clone them
-      let model = JSON.parse(JSON.stringify(modelsStore.selectedModel));
-      let persona = JSON.parse(JSON.stringify(personasStore.persona));
+async function sendMessage() {
+  let message = messageInputRef.value;
+  if (message.length === 0) {
+    console.warn('page::NewChat::sendMessage: message is empty');
+    return;
+  }
 
-      // Reset the personas now that we have a deep clone of the selected persona
-      //personasStore.personas = personasClone;
-      // Creates the new chat
-      let chat = await chatsStore.createChat(title, username, model, persona);
-      // Append the first user message to the chat history
-      await chatsStore.appendUserMessage(chat.id, message);
+  // Extract the values out of our relevant refs
+  let title = defaultChatTopic;
+  let username = usernameInputRef.value;
+  // NOTE: these are refs to the store, so we need to deep clone them
+  let model = JSON.parse(JSON.stringify(modelsStore.selectedModel));
+  let persona = JSON.parse(JSON.stringify(personasStore.persona));
 
-      // Set the message to empty
-      messageInputRef.value = '';
-      // Navigate to the chat page
-      router.push({ name: 'chat', params: { id: chat.id } });
-    }
+  // Reset the personas now that we have a deep clone of the selected persona
+  //personasStore.personas = personasClone;
+  // Creates the new chat
+  let chat = await chatsStore.createChat(title, username, model, persona);
+  // Append the first user message to the chat history
+  await chatsStore.appendUserMessage(chat.id, message);
 
-    return {
-      usernameInputRef,
-      messageInputRef,
-      sendMessage,
-      modelsStore,
-      personasStore,
-      localSettings: {
-        temperature: 0.72,
-        maxLength: 100,
-      },
-    };
-  },
-});
-</script>
-<style scoped>
-/* scale in animation */
-.scale-in-enter,
-.scale-in-leave-to {
-  transform: scale(0.88);
-  opacity: 0;
-}
-
-.scale-in-enter-active,
-.scale-in-leave-active {
-  transition:
-    transform 0.3s,
-    opacity 0.5s;
+  // Set the message to empty
+  messageInputRef.value = '';
+  // Navigate to the chat page
+  router.push({ name: 'chat', params: { id: chat.id } });
 }
-</style>
+</script>
+<style scoped></style>
diff --git a/src/pages/PointsDetail.vue b/src/pages/PointsDetail.vue
index 71a3920..3e6cc0a 100644
--- a/src/pages/PointsDetail.vue
+++ b/src/pages/PointsDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="flex flex-center q-pa-xl font-mulish text-purple-700">
     <div class="row q-pa-xl q-col-gutter-md q-py-xl">
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section>
           <p class="q-py-md">
             <span class="bg-purple-50 q-py-sm q-px-xl rounded text-bold">{{ address }}</span>
@@ -13,7 +13,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="bg-purple-50 col-12 q-pa-none">
+      <q-card class="bg-purple-50 col-12 q-pa-none" flat>
         <q-card-section class="q-pt-none q-pa-xl row">
           <div class="text-h6 text-bold col-8 text-left">
             <q-avatar class="q-mr-sm">
@@ -27,7 +27,7 @@
           </div>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column q-pl-none">
+      <q-card class="col-6 text-center column q-pl-none" flat>
         <q-card-section class="bg-purple-50 q-pa-xl">
           <p class="text-h6 text-bold text-left">Pending Points</p>
           <p class="q-py-md text-right">
@@ -35,7 +35,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50 q-pa-xl">
           <p class="text-h6 text-bold text-left">36 Month estimated Points*</p>
           <p class="q-py-md text-right">
@@ -54,119 +54,102 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref, watch, onMounted, computed, onBeforeUnmount } from 'vue';
-import { useRoute } from 'vue-router';
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { usePoints } from '../stores/points';
 import { useAccount } from '../stores/account';
 import { ethers } from 'ethers';
-import { useRouter } from 'vue-router';
 
-export default defineComponent({
-  name: 'PointsDetail',
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const points = usePoints();
-    const account = useAccount();
-    // got address as an address part from vue router
-    const address = ref(ethers.utils.getAddress(route.params.address));
-    let interval = null;
+const route = useRoute();
+const router = useRouter();
+const points = usePoints();
+const account = useAccount();
+// got address as an address part from vue router
+const address = ref(ethers.utils.getAddress(route.params.address));
+let interval = null;
 
-    onMounted(async () => {
-      if (Object.keys(points.points).length === 0) {
-        await points.update();
-        await updatePoints();
-      }
-      interval = setInterval(() => {
-        updatePoints();
-      }, 1000);
-    });
-
-    onBeforeUnmount(() => {
-      clearInterval(interval);
-    });
+onMounted(async () => {
+  if (Object.keys(points.points).length === 0) {
+    await points.update();
+    await updatePoints();
+  }
+  interval = setInterval(() => {
+    updatePoints();
+  }, 1000);
+});
 
-    watch(
-      () => route.params.address,
-      async (newAddress) => {
-        address.value = ethers.utils.getAddress(newAddress);
-      },
-    );
-    watch(
-      () => account.address,
-      async (newAddress, oldAddress) => {
-        console.log(address.value, oldAddress, newAddress);
-        if (oldAddress == address.value) {
-          router.push({
-            name: 'points-detail',
-            params: { address: newAddress },
-          });
-        }
-      },
-    );
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 
-    const currentPendingPoints = ref(0);
-    const hourlyRate = ref(0);
-    async function updatePoints() {
-      const pendingInfo = await points.getAddressRealtimePendingPointsInfo(address.value);
-      hourlyRate.value = pendingInfo.hourlyRate;
-      currentPendingPoints.value = pendingInfo.pending;
+watch(
+  () => route.params.address,
+  async (newAddress) => {
+    address.value = ethers.utils.getAddress(newAddress);
+  },
+);
+watch(
+  () => account.address,
+  async (newAddress, oldAddress) => {
+    if (oldAddress == address.value) {
+      router.push({
+        name: 'points-detail',
+        params: { address: newAddress },
+      });
     }
+  },
+);
 
-    const ThreeYearsPoints = computed(() => {
-      const currentTime = Math.floor(Date.now() / 1000); // Get current timestamp in seconds
-      const pendingPoints = points.getAddressPendingPoints(address.value);
-      const currentPoints = points.getAddressPoints(address.value);
-      const firstTime = points.info.first_time;
-      const lastTime = points.info.last_time;
-      const pendingTime = points.info.pending_time;
-      const reward_start = points.info.reward_start;
-      const totalDuration = pendingTime - lastTime;
-      const currentTimeSinceStart = currentTime - reward_start;
-      const daily_decay = points.info.daily_decay;
-      const initial_ratio = points.info.ratio;
+const currentPendingPoints = ref(0);
+const hourlyRate = ref(0);
 
-      const current_decay = daily_decay ** (currentTimeSinceStart / 86400);
-      const current_ratio = initial_ratio * current_decay;
-      console.log(current_ratio);
-      // we extrapolate on what would a 10 days distribution be
-      let current_base = ((pendingPoints / totalDuration) * 3600 * 24 * 10) / current_ratio;
-      if (current_base < 0) {
-        // something is fishy
-        current_base = ((currentPoints / (lastTime - firstTime)) * 3600 * 24 * 10) / current_ratio;
-      }
-      console.log(current_base);
+async function updatePoints() {
+  const pendingInfo = await points.getAddressRealtimePendingPointsInfo(address.value);
+  hourlyRate.value = pendingInfo.hourlyRate;
+  currentPendingPoints.value = pendingInfo.pending;
+}
 
-      const distributions = (365 * 3) / 10;
-      let total = currentPoints;
-      for (let i = 0; i < distributions; i++) {
-        const time = reward_start + i * 10 * 24 * 3600;
-        // if time is less than last time, we pass
-        if (time < lastTime) {
-          continue;
-        }
-        // code in python:
-        // days_since_start = (reward_time - settings['reward_start_ts']) / 86400
-        // print(f"Processing rewards for {reward_time} ({days_since_start} days since start)")
-        // decay = settings['daily_decay'] ** int((reward_time - settings['reward_start_ts']) / 86400)
+const ThreeYearsPoints = computed(() => {
+  const currentTime = Math.floor(Date.now() / 1000); // Get current timestamp in seconds
+  const pendingPoints = points.getAddressPendingPoints(address.value);
+  const currentPoints = points.getAddressPoints(address.value);
+  const firstTime = points.info.first_time;
+  const lastTime = points.info.last_time;
+  const pendingTime = points.info.pending_time;
+  const reward_start = points.info.reward_start;
+  const totalDuration = pendingTime - lastTime;
+  const currentTimeSinceStart = currentTime - reward_start;
+  const daily_decay = points.info.daily_decay;
+  const initial_ratio = points.info.ratio;
 
-        const days_since_start = (time - reward_start) / 86400;
-        const decay = daily_decay ** days_since_start;
-        const ratio = initial_ratio * decay;
-        total += current_base * ratio;
-      }
-      return total;
-    });
+  const current_decay = daily_decay ** (currentTimeSinceStart / 86400);
+  const current_ratio = initial_ratio * current_decay;
+  // we extrapolate on what would a 10 days distribution be
+  let current_base = ((pendingPoints / totalDuration) * 3600 * 24 * 10) / current_ratio;
+  if (current_base < 0) {
+    // something is fishy
+    current_base = ((currentPoints / (lastTime - firstTime)) * 3600 * 24 * 10) / current_ratio;
+  }
 
-    // const count = ref(0)
-    return {
-      points,
-      address,
-      currentPendingPoints,
-      hourlyRate,
-      ThreeYearsPoints,
-    };
-  },
+  const distributions = (365 * 3) / 10;
+  let total = currentPoints;
+  for (let i = 0; i < distributions; i++) {
+    const time = reward_start + i * 10 * 24 * 3600;
+    // if time is less than last time, we pass
+    if (time < lastTime) {
+      continue;
+    }
+    // code in python:
+    // days_since_start = (reward_time - settings['reward_start_ts']) / 86400
+    // print(f"Processing rewards for {reward_time} ({days_since_start} days since start)")
+    // decay = settings['daily_decay'] ** int((reward_time - settings['reward_start_ts']) / 86400)
+
+    const days_since_start = (time - reward_start) / 86400;
+    const decay = daily_decay ** days_since_start;
+    const ratio = initial_ratio * decay;
+    total += current_base * ratio;
+  }
+  return total;
 });
 </script>
diff --git a/src/pages/PointsInfo.vue b/src/pages/PointsInfo.vue
index de22420..f2969ba 100644
--- a/src/pages/PointsInfo.vue
+++ b/src/pages/PointsInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="flex flex-center bg-dark_deleted font-mulish text-purple-700">
     <div class="row q-pa-xl q-col-gutter-md">
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section class="bg-dark-page_deleted">
           <div class="text-h4 text-bold">Earn Libertai Points</div>
         </q-card-section>
@@ -15,7 +15,7 @@
           <p>How to participate:</p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">Stake ALEPH</div>
         </q-card-section>
@@ -26,7 +26,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">aleph.im Core Channel Node Operator</div>
         </q-card-section>
@@ -37,7 +37,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">aleph.im Resource Node Operator</div>
         </q-card-section>
@@ -48,7 +48,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">Connect your wallet and Start earning points today!</div>
         </q-card-section>
@@ -59,31 +59,31 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6">Check your points</div>
         </q-card-section>
         <q-card-section class="q-pt-none bg-purple-50">
           <q-input
             v-model="address"
-            bottom-slots
-            counter
+            :rules="addressRules"
             autofocus
-            rounded
-            standout
             bg-color="secondary"
+            bottom-slots
             class="q-pa-lg"
+            counter
             input-class="text-light"
             label="Address"
             label-color="grey"
             maxlength="42"
-            :rules="addressRules"
+            rounded
+            standout
           >
             <template v-slot:prepend>
               <q-icon name="wallet" />
             </template>
 
-            <template v-slot:hint> Enter an address to check if there are points associated with it. </template>
+            <template v-slot:hint> Enter an address to check if there are points associated with it.</template>
           </q-input>
           <div v-if="addressVerifier(address) === true" class="text-h6 text-bold q-pa-lg">
             <div v-if="points.getAddressPoints(address) === 0">
@@ -93,11 +93,11 @@
               You have points!<br /><br />
               <q-btn
                 :to="{ name: 'points-detail', params: { address: address } }"
-                label="View details"
                 color="white"
-                text-color="primary"
+                label="View details"
                 no-caps
                 rounded
+                text-color="primary"
               />
             </div>
           </div>
@@ -107,55 +107,38 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, nextTick } from 'vue';
-import { useCounterStore } from '../stores/counter-store';
+<script setup>
+import { nextTick, onMounted, ref } from 'vue';
 import { usePoints } from '../stores/points';
 import { ethers } from 'ethers';
 
-export default defineComponent({
-  name: 'PointsInfo',
-  setup() {
-    const counter = useCounterStore();
-    const expanded = ref(false);
-    const points = usePoints();
-    const address = ref('');
-    onMounted(async () => {
-      if (Object.keys(points.points).length === 0) {
-        points.update();
-      }
-    });
+const points = usePoints();
+const address = ref('');
+onMounted(async () => {
+  if (Object.keys(points.points).length === 0) {
+    points.update();
+  }
+});
 
-    function addressVerifier(val) {
-      // Throws if a checksummed address is provided, but a
-      // letter is the wrong case
-      try {
-        const addr = ethers.utils.getAddress(val);
-        if (addr !== val) {
-          nextTick(() => {
-            address.value = addr;
-          });
-        }
-        return true;
-      } catch (e) {
-        return 'Invalid address';
-      }
+function addressVerifier(val) {
+  // Throws if a checksummed address is provided, but a
+  // letter is the wrong case
+  try {
+    const addr = ethers.utils.getAddress(val);
+    if (addr !== val) {
+      nextTick(() => {
+        address.value = addr;
+      });
     }
-    // points.points is an object, let's check if it's empty
+    return true;
+  } catch (e) {
+    return 'Invalid address';
+  }
+}
 
-    // const count = ref(0)
-    return {
-      points,
-      counter,
-      expanded,
-      address,
-      addressVerifier,
-      addressRules: [
-        addressVerifier,
-        (val) => (val && val.length > 0) || 'Please type something',
-        (val) => (val && val.length > 0) || 'Please type something',
-      ],
-    };
-  },
-});
+const addressRules = [
+  addressVerifier,
+  (val) => (val && val.length > 0) || 'Please type something',
+  (val) => (val && val.length > 0) || 'Please type something',
+];
 </script>
diff --git a/src/pages/VocalChat.vue b/src/pages/VocalChat.vue
index 16102dd..30ddfea 100644
--- a/src/pages/VocalChat.vue
+++ b/src/pages/VocalChat.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- It's a page with chat entries, by the user or by the AI assistant.
-    We are using Quasard q-chat-message compoents -->
+    We are using Quasard q-chat-message components -->
   <q-page class="flex flex-center">
     <div>
       hey there
@@ -8,10 +8,10 @@
         <q-chat-message
           v-for="entry in entries"
           :key="entry.id"
-          :sent="entry.sent"
+          :avatar="entry.avatar"
           :name="entry.name"
+          :sent="entry.sent"
           :text="[entry.text]"
-          :avatar="entry.avatar"
           :text-color="entry.isFinal ? 'black' : 'grey-8'"
         />
       </div>
@@ -19,8 +19,9 @@
   </q-page>
 </template>
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import OpenAI from 'openai';
+
 const openai = new OpenAI({
   apiKey: 'libertai',
   dangerouslyAllowBrowser: true,
@@ -55,7 +56,6 @@ async function ask(question) {
     model: 'openhermes-2.5',
     max_tokens: 128,
   });
-  console.log(chatCompletion);
   // We add the answer to the entries array
   const answer = chatCompletion.choices[0].message.content;
   entries.value.push({
@@ -77,12 +77,10 @@ onMounted(() => {
   recognition.lang = 'fr-FR';
   var last_entry = null;
   recognition.addEventListener('result', (e) => {
-    console.log(e.results);
     const transcript = Array.from(e.results)
       .map((result) => result[0])
       .map((result) => result.transcript)
       .join('');
-    console.log(transcript);
 
     // We add the transcript to the entries array, only if we weren't working on it yet (final arg)
     if (last_entry == null) {
@@ -106,7 +104,6 @@ onMounted(() => {
       ask(transcript);
     }
   });
-  console.log(speech);
   if (speech == true) {
     recognition.start();
     recognition.addEventListener('end', recognition.start);
diff --git a/src/stores/account.js b/src/stores/account.js
index 0175e54..dd9b847 100644
--- a/src/stores/account.js
+++ b/src/stores/account.js
@@ -8,32 +8,15 @@ export const useAccount = defineStore('account', {
     signer: null,
     address: '',
   }),
-  getters: {
-    alephAccount() {
-      return {
-        private_key: null,
-        mnemonics: null,
-        address: this.address,
-        name: this.address,
-        type: 'ETH',
-        source: 'provider',
-        provider: this.provider,
-        signer: this.signer,
-      };
-    },
-  },
   actions: {
     // any amount of arguments, return a promise or not
     async setProvider(provider) {
       // you can directly mutate the state
       this.provider = provider;
-      console.log(provider.provider);
       provider.provider.on('accountsChanged', async (accounts) => {
-        console.log('accountsChanged', accounts);
         this.address = ethers.utils.getAddress(accounts[0]);
         this.signer = await this.provider.getSigner();
       });
-      console.log('provider', provider);
       this.signer = await this.provider.getSigner();
       this.address = await this.signer.getAddress();
       this.active = true;
diff --git a/src/stores/chats-store.js b/src/stores/chats-store.js
index 8a25b0f..56bc7bb 100644
--- a/src/stores/chats-store.js
+++ b/src/stores/chats-store.js
@@ -21,7 +21,7 @@ const CHATS_STORE_PINIA_KEY = 'chats-store-pinia-key';
  *  model: Model;
  *  persona: Persona;
  *  // Note: we will populate these with additional data,
- *  // by inlinging attachments, search-results, etc.
+ *  // by inlining attachments, search-results, etc.
  *  messages: Message[];
  *  createdAt: Date;
  * }
@@ -47,7 +47,7 @@ const CHATS_STORE_PINIA_KEY = 'chats-store-pinia-key';
  * interface SearchResult {
  *  // embedding document id
  *  documentId: string;
- *  // embdedding conent
+ *  // embedding content
  *  content: string;
  * }
  */
@@ -72,7 +72,6 @@ export const useChatsStore = defineStore(CHATS_STORE_PINIA_KEY, {
       // Get the partial chats of the form { id, title }
       let chats = await this.chatsStore.readChats();
       this.chats = chats;
-      return;
     },
 
     /**
@@ -259,7 +258,6 @@ class ChatsStore {
     await Promise.all(updatedChats);
 
     // Done!
-    return;
   }
 
   /**
diff --git a/src/stores/counter-store.js b/src/stores/counter-store.js
deleted file mode 100644
index 83e8390..0000000
--- a/src/stores/counter-store.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0,
-  }),
-  getters: {
-    doubleCount: (state) => state.counter * 2,
-  },
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});
diff --git a/src/stores/knowledge-store.js b/src/stores/knowledge-store.js
index 68c80699..ecba8a1 100644
--- a/src/stores/knowledge-store.js
+++ b/src/stores/knowledge-store.js
@@ -30,7 +30,6 @@ export const useKnowledgeStore = defineStore(KNOWLEDGE_STORE_PINIA_KEY, {
       }
       await Promise.all(addedDocuments);
       this.documents = docs;
-      return;
     },
     async addDocument(title, content, tags = []) {
       let doc = await this.knowledgeStore.addDocument(title, content, tags);
@@ -49,7 +48,7 @@ export const useKnowledgeStore = defineStore(KNOWLEDGE_STORE_PINIA_KEY, {
         tags.push(DEFAULT_KNOWLEDGE_TAG);
       }
 
-      // TODO: this should prolly be none
+      // TODO: this should probably be none
       return await this.knowledgeStore.searchDocuments(query, 3, 20, tags);
     },
   },
diff --git a/src/stores/models-store.js b/src/stores/models-store.js
index 734b351..18c8954 100644
--- a/src/stores/models-store.js
+++ b/src/stores/models-store.js
@@ -15,10 +15,8 @@ export const useModelsStore = defineStore('models', {
       this.selectedModel = model;
     },
     setModelByURL(modelUrl) {
-      console.log('searching for', modelUrl);
       for (let model of defaultModels)
         if (model.apiUrl == modelUrl) {
-          console.log('found', model.name, model.apiUrl);
           this.selectedModel = model;
         }
     },
diff --git a/src/stores/personas-store.js b/src/stores/personas-store.js
index 9099cb8..4d732b1 100644
--- a/src/stores/personas-store.js
+++ b/src/stores/personas-store.js
@@ -8,10 +8,4 @@ export const usePersonasStore = defineStore('personas', {
     persona: defaultPersonas[0],
   }),
   getters: {},
-  actions: {
-    setPersona(persona) {
-      // you can directly mutate the state
-      this.persona = persona;
-    },
-  },
 });
diff --git a/src/stores/points.js b/src/stores/points.js
index 63498d1..84a0e9a 100644
--- a/src/stores/points.js
+++ b/src/stores/points.js
@@ -32,9 +32,6 @@ export const usePoints = defineStore('points', {
       this.points = pointsData.points;
       this.info = pointsData.info;
       this.pending_points = pointsData.pending_points;
-      console.log('points', this.points);
-      console.log('info', this.info);
-      console.log('pending_points', this.pending_points);
     },
 
     getAddressPoints(address) {
diff --git a/src/utils/knowledge.js b/src/utils/knowledge.js
index b022fe1..4411717 100644
--- a/src/utils/knowledge.js
+++ b/src/utils/knowledge.js
@@ -25,9 +25,9 @@ export const defaultKnowledge = [
       "Libertai.io is a decentralized AI platform that is built on top of Aleph.im's cloud computing platform. " +
       'Unlike traditional centralized AI platforms like OpenAI, Libertai.io is designed to operate in a decentralized manner, ' +
       "leveraging the security and scalability of Aleph.im's infrastructure to provide both privacy and performance. " +
-      "Slince the AI models that power the assistant are deployed and run on Aleph.im's network, rather than on a centralized server, " +
-      'ulsers can be confident that their data and interactions are not being monitored or exploited by a single entity. This is particularly ' +
-      'ilmportant for individuals and organizations that are concerned about the privacy implications of using traditional AI assistants. ',
+      "Since the AI models that power the assistant are deployed and run on Aleph.im's network, rather than on a centralized server, " +
+      'users can be confident that their data and interactions are not being monitored or exploited by a single entity. This is particularly ' +
+      'important for individuals and organizations that are concerned about the privacy implications of using traditional AI assistants. ',
     tags: ['Libertai', 'AI', 'Decentralized AI', 'Aleph.Im', 'Privacy', 'Security', 'depin'],
   },
 ];
diff --git a/src/utils/personas.js b/src/utils/personas.js
index 1ddd8f1..69ea39a 100644
--- a/src/utils/personas.js
+++ b/src/utils/personas.js
@@ -1,4 +1,4 @@
-// Configuration for base pomprts for different types of chatbots
+// Configuration for base prompts for different types of chatbots
 export const defaultPersonas = [
   {
     id: 0,