diff --git a/.eslintrc.js b/.eslintrc.js
index 70c0c824..3fb480d0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,15 @@ module.exports = {
 	rules: {
 		'max-len': [ 'error', 120 ],
 		'no-multiple-empty-lines' : ['error', { 'max': 1 }],
-		'vue/multi-word-component-names' : [ 'off' ]
-		},	
+		'vue/multi-word-component-names' : [ 'off' ],
+		// Migration changes
+		'vue/no-deprecated-v-bind-sync': 'off',
+		'vue/no-deprecated-slot-attribute': 'off',
+		'vue/require-explicit-emits': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/no-deprecated-slot-scope-attribute': 'off',
+		'vue/no-v-for-template-key-on-child': 'off',
+		'vue/no-deprecated-destroyed-lifecycle': 'off',
+		'vue/no-v-model-argument': 'off'
+		},
 };
diff --git a/package-lock.json b/package-lock.json
index 70733461..0d3ac20a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,14 @@
             "dependencies": {
                 "@inertiajs/inertia": "^0.11.0",
                 "@inertiajs/inertia-vue3": "^0.6.0",
-                "@vue/compat": "3.2.0",
+                "@vue/compat": "^3.3.8",
                 "@wmde/wikit-tokens": "^2.1.0-alpha.15",
                 "@wmde/wikit-vue-components": "^2.1.0-alpha.16",
                 "date-fns": "^2.30.0",
                 "lodash": "^4.17.21",
                 "pinia": "2.0.36",
                 "ress": "^5.0.2",
-                "vue": "3.2.0",
+                "vue": "^3.3.8",
                 "vue-banana-i18n": "2.3.0"
             },
             "devDependencies": {
@@ -23,9 +23,9 @@
                 "@types/lodash": "^4.14.199",
                 "@typescript-eslint/eslint-plugin": "^6.7.5",
                 "@typescript-eslint/parser": "^6.7.5",
-                "@vue/compiler-sfc": "3.2.0",
+                "@vue/compiler-sfc": "^3.3.8",
                 "@vue/eslint-config-typescript": "^12.0.0",
-                "@vue/runtime-dom": "3.2.0",
+                "@vue/runtime-dom": "^3.3.8",
                 "@vue/test-utils": "^2.0.0",
                 "@vue/vue3-jest": "^29.2.4",
                 "@wikimedia/codex": "^0.20.0",
@@ -408,6 +408,7 @@
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
             "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+            "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -416,6 +417,7 @@
             "version": "7.22.20",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
             "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+            "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -1795,6 +1797,7 @@
             "version": "7.23.3",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz",
             "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==",
+            "dev": true,
             "dependencies": {
                 "@babel/helper-string-parser": "^7.22.5",
                 "@babel/helper-validator-identifier": "^7.22.20",
@@ -1965,6 +1968,32 @@
                 "vue-demi": ">=0.13.0"
             }
         },
+        "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+            "version": "0.14.6",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+            "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+            "dev": true,
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.13",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -2776,8 +2805,7 @@
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.4.15",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-            "dev": true
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
         },
         "node_modules/@jridgewell/trace-mapping": {
             "version": "0.3.20",
@@ -2948,6 +2976,15 @@
                 "source-map": "^0.6.0"
             }
         },
+        "node_modules/@types/clean-css/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/@types/connect": {
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -2988,9 +3025,9 @@
             }
         },
         "node_modules/@types/estree": {
-            "version": "0.0.48",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
-            "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
             "dev": true
         },
         "node_modules/@types/express": {
@@ -3602,67 +3639,62 @@
             "dev": true
         },
         "node_modules/@vue/compat": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.2.0.tgz",
-            "integrity": "sha512-4GMmtzySODCKFSMRUH22goSx/ltv5EQYUnAAriiBwWdCunXmggoeSnA2tr/uJ0J7VB1co/ow/7Bdus5yfooYQg==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.3.8.tgz",
+            "integrity": "sha512-ywp40WMF1DKZ4X/HbLPd5gHDyxDk/itDHp8JiSodvI9OyiA53HQS2hstLCh652HDue58gTQlo80HJwQCj+hYRw==",
+            "dependencies": {
+                "@babel/parser": "^7.23.0",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.0.2"
+            },
             "peerDependencies": {
-                "vue": "3.2.0"
+                "vue": "3.3.8"
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.0.tgz",
-            "integrity": "sha512-+kfA4pisto26tcEh9Naf/qrizplYWnkBLHu3fX5Yu0c47RVBteVG3dHENFczl3Egwra+5NP5f3YuOgxK1ZMbNQ==",
-            "dependencies": {
-                "@babel/parser": "^7.12.0",
-                "@babel/types": "^7.12.0",
-                "@vue/shared": "3.2.0",
-                "estree-walker": "^2.0.1",
-                "source-map": "^0.6.1"
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.8.tgz",
+            "integrity": "sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==",
+            "dependencies": {
+                "@babel/parser": "^7.23.0",
+                "@vue/shared": "3.3.8",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.0.2"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.0.tgz",
-            "integrity": "sha512-CqfATmX04+58LNBTTUPRBLyYGLP0bxtL+8b7B8pEvXja7fpmxiYcKBQsdaXfyqoRJsaTzA7eVXQt/t0dYhu/SQ==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz",
+            "integrity": "sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==",
             "dependencies": {
-                "@vue/compiler-core": "3.2.0",
-                "@vue/shared": "3.2.0"
+                "@vue/compiler-core": "3.3.8",
+                "@vue/shared": "3.3.8"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.0.tgz",
-            "integrity": "sha512-EWxdXID+a71UPQV/xNZwL60X9AJtumxIBWMBmvT8gT9ng57Ux52nDJVcErLl0AkT53h9sGP2K9Jt51gGSgTWEQ==",
-            "dev": true,
-            "dependencies": {
-                "@babel/parser": "^7.13.9",
-                "@babel/types": "^7.13.0",
-                "@types/estree": "^0.0.48",
-                "@vue/compiler-core": "3.2.0",
-                "@vue/compiler-dom": "3.2.0",
-                "@vue/compiler-ssr": "3.2.0",
-                "@vue/shared": "3.2.0",
-                "consolidate": "^0.16.0",
-                "estree-walker": "^2.0.1",
-                "hash-sum": "^2.0.0",
-                "lru-cache": "^5.1.1",
-                "magic-string": "^0.25.7",
-                "merge-source-map": "^1.1.0",
-                "postcss": "^8.1.10",
-                "postcss-modules": "^4.0.0",
-                "postcss-selector-parser": "^6.0.4",
-                "source-map": "^0.6.1"
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz",
+            "integrity": "sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==",
+            "dependencies": {
+                "@babel/parser": "^7.23.0",
+                "@vue/compiler-core": "3.3.8",
+                "@vue/compiler-dom": "3.3.8",
+                "@vue/compiler-ssr": "3.3.8",
+                "@vue/reactivity-transform": "3.3.8",
+                "@vue/shared": "3.3.8",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.5",
+                "postcss": "^8.4.31",
+                "source-map-js": "^1.0.2"
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.0.tgz",
-            "integrity": "sha512-EAdyPh/N/8V0dyg4beMPoVhgDn1VBKz1Pc5+s1VkCZ4EsVOG4bGtXUQwVXoR43bnzUcZsiwLh2ZAN4nu7c+TEg==",
-            "dev": true,
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz",
+            "integrity": "sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==",
             "dependencies": {
-                "@vue/compiler-dom": "3.2.0",
-                "@vue/shared": "3.2.0"
+                "@vue/compiler-dom": "3.3.8",
+                "@vue/shared": "3.3.8"
             }
         },
         "node_modules/@vue/devtools-api": {
@@ -3695,36 +3727,60 @@
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.0.tgz",
-            "integrity": "sha512-39L3UJe8+jYeCTM/QrDglDM05O11UrmyhazUOHOOj7+a9pPVu95HGInh5CkKQf98mx2gq6t3PPN8bCN5wK8Wwg==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.8.tgz",
+            "integrity": "sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==",
             "dependencies": {
-                "@vue/shared": "3.2.0"
+                "@vue/shared": "3.3.8"
+            }
+        },
+        "node_modules/@vue/reactivity-transform": {
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz",
+            "integrity": "sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==",
+            "dependencies": {
+                "@babel/parser": "^7.23.0",
+                "@vue/compiler-core": "3.3.8",
+                "@vue/shared": "3.3.8",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.5"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.0.tgz",
-            "integrity": "sha512-mZlkYTcw3mVwClwFTpql4hkDfOweHE/w+9r3Yb3UPwRs75bSJXMBRUikw1GVx01bZQ8VQPjBYowCElcWNSlKig==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.8.tgz",
+            "integrity": "sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==",
             "dependencies": {
-                "@vue/reactivity": "3.2.0",
-                "@vue/shared": "3.2.0"
+                "@vue/reactivity": "3.3.8",
+                "@vue/shared": "3.3.8"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.0.tgz",
-            "integrity": "sha512-NCHMfrUwpJelCTINpMRLFhzWKJkl07slabmTbECZFJnkdDfFkptGCWll42q58bbvwGmpAPDzNI3yYch72pcKwg==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz",
+            "integrity": "sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==",
             "dependencies": {
-                "@vue/runtime-core": "3.2.0",
-                "@vue/shared": "3.2.0",
-                "csstype": "^2.6.8"
+                "@vue/runtime-core": "3.3.8",
+                "@vue/shared": "3.3.8",
+                "csstype": "^3.1.2"
+            }
+        },
+        "node_modules/@vue/server-renderer": {
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.8.tgz",
+            "integrity": "sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==",
+            "dependencies": {
+                "@vue/compiler-ssr": "3.3.8",
+                "@vue/shared": "3.3.8"
+            },
+            "peerDependencies": {
+                "vue": "3.3.8"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0.tgz",
-            "integrity": "sha512-MgdilC3YHYSCFuNlxZBgugh8B9/h/h+nQ6lkeaxqFWW+FnV/JzCwW4Bh5bYIYvBleG8QZjFwxdmdqSAWLXzgEA=="
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
+            "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
         },
         "node_modules/@vue/test-utils": {
             "version": "2.4.1",
@@ -3780,15 +3836,6 @@
             "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
             "dev": true
         },
-        "node_modules/@vue/vue3-jest/node_modules/source-map": {
-            "version": "0.5.6",
-            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-            "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.6",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -4670,9 +4717,9 @@
             "dev": true
         },
         "node_modules/banana-i18n": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/banana-i18n/-/banana-i18n-2.2.0.tgz",
-            "integrity": "sha512-PD8mgDtaDpVJiWUNGiXSTUhUzdSHDtkr1urz6d2PZ8lgjHdLvFKk32KDPKndf8ROfBN68UK2Gs7/SsRYRZQnSA=="
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/banana-i18n/-/banana-i18n-2.3.3.tgz",
+            "integrity": "sha512-Z19xWLpqXsropMAFbjQALZi5U908mXEK0vWhr2Apo9JwXFxJws4CSta4Ouas/L7D5DjObL+ZKFeLAKR2peXLbg=="
         },
         "node_modules/base64-js": {
             "version": "1.5.1",
@@ -4718,12 +4765,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/bluebird": {
-            "version": "3.7.2",
-            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-            "dev": true
-        },
         "node_modules/bn.js": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -5216,6 +5257,15 @@
                 "node": ">= 10.0"
             }
         },
+        "node_modules/clean-css/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/cli-table3": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
@@ -5444,19 +5494,6 @@
             "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
             "dev": true
         },
-        "node_modules/consolidate": {
-            "version": "0.16.0",
-            "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.16.0.tgz",
-            "integrity": "sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==",
-            "deprecated": "Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog",
-            "dev": true,
-            "dependencies": {
-                "bluebird": "^3.7.2"
-            },
-            "engines": {
-                "node": ">= 0.10.0"
-            }
-        },
         "node_modules/constants-browserify": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -5995,6 +6032,15 @@
             "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
             "dev": true
         },
+        "node_modules/csso/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/cssom": {
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -6020,9 +6066,9 @@
             "dev": true
         },
         "node_modules/csstype": {
-            "version": "2.6.21",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-            "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+            "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
         "node_modules/data-urls": {
             "version": "3.0.2",
@@ -6646,6 +6692,16 @@
                 "source-map": "~0.6.1"
             }
         },
+        "node_modules/escodegen/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "optional": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/eslint": {
             "version": "8.53.0",
             "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
@@ -7546,20 +7602,6 @@
             "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
             "dev": true
         },
-        "node_modules/fsevents": {
-            "version": "2.3.3",
-            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-            "dev": true,
-            "hasInstallScript": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-            }
-        },
         "node_modules/function-bind": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -7568,24 +7610,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/generic-names": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
-            "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
-            "dev": true,
-            "dependencies": {
-                "loader-utils": "^3.2.0"
-            }
-        },
-        "node_modules/generic-names/node_modules/loader-utils": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
-            "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
-            "dev": true,
-            "engines": {
-                "node": ">= 12.13.0"
-            }
-        },
         "node_modules/gensync": {
             "version": "1.0.0-beta.2",
             "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7998,6 +8022,15 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/html-minifier-terser/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/html-minifier-terser/node_modules/terser": {
             "version": "4.8.1",
             "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
@@ -8153,12 +8186,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/icss-replace-symbols": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-            "integrity": "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==",
-            "dev": true
-        },
         "node_modules/icss-utils": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -8666,6 +8693,15 @@
                 "node": ">=10"
             }
         },
+        "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/istanbul-reports": {
             "version": "3.1.6",
             "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
@@ -10786,12 +10822,6 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
-        "node_modules/lodash.camelcase": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-            "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
-            "dev": true
-        },
         "node_modules/lodash.clonedeep": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -10844,12 +10874,14 @@
             }
         },
         "node_modules/magic-string": {
-            "version": "0.25.9",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-            "dev": true,
+            "version": "0.30.5",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+            "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
             "dependencies": {
-                "sourcemap-codec": "^1.4.8"
+                "@jridgewell/sourcemap-codec": "^1.4.15"
+            },
+            "engines": {
+                "node": ">=12"
             }
         },
         "node_modules/make-dir": {
@@ -10976,15 +11008,6 @@
             "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
             "dev": true
         },
-        "node_modules/merge-source-map": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
-            "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
-            "dev": true,
-            "dependencies": {
-                "source-map": "^0.6.1"
-            }
-        },
         "node_modules/merge-stream": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -11178,7 +11201,6 @@
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
             "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -11774,8 +11796,7 @@
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -11814,6 +11835,31 @@
                 }
             }
         },
+        "node_modules/pinia/node_modules/vue-demi": {
+            "version": "0.14.6",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+            "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pirates": {
             "version": "4.0.6",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -11839,7 +11885,6 @@
             "version": "8.4.31",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
             "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -12140,25 +12185,6 @@
                 "postcss": "^8.2.15"
             }
         },
-        "node_modules/postcss-modules": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.3.1.tgz",
-            "integrity": "sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==",
-            "dev": true,
-            "dependencies": {
-                "generic-names": "^4.0.0",
-                "icss-replace-symbols": "^1.1.0",
-                "lodash.camelcase": "^4.3.0",
-                "postcss-modules-extract-imports": "^3.0.0",
-                "postcss-modules-local-by-default": "^4.0.0",
-                "postcss-modules-scope": "^3.0.0",
-                "postcss-modules-values": "^4.0.0",
-                "string-hash": "^1.1.1"
-            },
-            "peerDependencies": {
-                "postcss": "^8.0.0"
-            }
-        },
         "node_modules/postcss-modules-extract-imports": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
@@ -12942,6 +12968,15 @@
             "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
             "dev": true
         },
+        "node_modules/resolve-url-loader/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/resolve.exports": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz",
@@ -13447,9 +13482,10 @@
             "dev": true
         },
         "node_modules/source-map": {
-            "version": "0.6.1",
-            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+            "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -13458,7 +13494,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
             "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -13473,12 +13508,14 @@
                 "source-map": "^0.6.0"
             }
         },
-        "node_modules/sourcemap-codec": {
-            "version": "1.4.8",
-            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-            "deprecated": "Please use @jridgewell/sourcemap-codec instead",
-            "dev": true
+        "node_modules/source-map-support/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
         },
         "node_modules/spdy": {
             "version": "4.0.2",
@@ -13605,12 +13642,6 @@
                 "safe-buffer": "~5.2.0"
             }
         },
-        "node_modules/string-hash": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
-            "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
-            "dev": true
-        },
         "node_modules/string-length": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -13807,6 +13838,15 @@
             "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
             "dev": true
         },
+        "node_modules/svgo/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13936,6 +13976,15 @@
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
             "dev": true
         },
+        "node_modules/terser/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/terser/node_modules/source-map-support": {
             "version": "0.5.21",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -14000,6 +14049,7 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
             "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+            "dev": true,
             "engines": {
                 "node": ">=4"
             }
@@ -14601,13 +14651,23 @@
             "dev": true
         },
         "node_modules/vue": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.0.tgz",
-            "integrity": "sha512-eMo5yCdkWRmBfqp/acBI/Y1Omgk0NyGqPViaU66eOpKarXNtkdImzDA57+E76jnWVr6MEp/rg1n0vnxaVvALMQ==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz",
+            "integrity": "sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==",
             "dependencies": {
-                "@vue/compiler-dom": "3.2.0",
-                "@vue/runtime-dom": "3.2.0",
-                "@vue/shared": "3.2.0"
+                "@vue/compiler-dom": "3.3.8",
+                "@vue/compiler-sfc": "3.3.8",
+                "@vue/runtime-dom": "3.3.8",
+                "@vue/server-renderer": "3.3.8",
+                "@vue/shared": "3.3.8"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
             }
         },
         "node_modules/vue-banana-i18n": {
@@ -14624,31 +14684,6 @@
             "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
             "dev": true
         },
-        "node_modules/vue-demi": {
-            "version": "0.14.6",
-            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-            "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-            "hasInstallScript": true,
-            "bin": {
-                "vue-demi-fix": "bin/vue-demi-fix.js",
-                "vue-demi-switch": "bin/vue-demi-switch.js"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.0-rc.1",
-                "vue": "^3.0.0-0 || ^2.6.0"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/vue-eslint-parser": {
             "version": "9.3.2",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
@@ -15217,11 +15252,14 @@
                 "source-map": "~0.6.1"
             }
         },
-        "node_modules/webpack/node_modules/@types/estree": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-            "dev": true
+        "node_modules/webpack-sources/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
         },
         "node_modules/webpack/node_modules/eslint-scope": {
             "version": "5.1.1",
diff --git a/package.json b/package.json
index f3e5ce25..f69ada9b 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
-        "@vue/compiler-sfc": "3.2.0",
+        "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.0.0",
         "@vue/vue3-jest": "^29.2.4",
-        "@vue/runtime-dom": "3.2.0",
+        "@vue/runtime-dom": "^3.3.8",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -49,25 +49,14 @@
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
-        "@vue/compat": "3.2.0",
+        "@vue/compat": "^3.3.8",
         "@wmde/wikit-tokens": "^2.1.0-alpha.15",
         "@wmde/wikit-vue-components": "^2.1.0-alpha.16",
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
         "pinia": "2.0.36",
         "ress": "^5.0.2",
-        "vue": "3.2.0",
+        "vue": "^3.3.8",
         "vue-banana-i18n": "2.3.0"
-    },
-    "overrides": {
-        "pinia": {
-            "vue": "3.2.0"
-        },
-        "@wikimedia/codex": {
-            "vue": "3.2.0"
-        },
-        "vue-banana-i18n": {
-            "banana-i18n": "2.2.0"
-        }
     }
 }
diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
index 46f7d2c3..f7d30d54 100644
--- a/resources/js/Components/MismatchRow.vue
+++ b/resources/js/Components/MismatchRow.vue
@@ -46,14 +46,14 @@
             </span>
         </td>
         <td :data-header="$i18n('column-review-status')">
-            <dropdown
-                :menuItems="Object.values(statusOptions)"
+            <cdx-select
+                :menu-items="Object.values(statusOptions)"
                 :disabled="disabled"
-                v-model="decision"
-                @input="$bubble('decision', {
+                v-model:selected="reviewStatus"
+                @update:selected="$bubble('decision', {
                     id: mismatch.id,
                     item_id: mismatch.item_id,
-                    review_status: $event.value
+                    review_status: $event
                 })"
             />
         </td>
@@ -79,15 +79,16 @@
                   </wikit-button>
                 </div>
             </div>
-            <wikit-dialog class="full-description-dialog"
+            <cdx-dialog class="full-description-dialog"
               :title="$i18n('column-upload-info')"
-              ref="fullDescriptionDialog"
-              :actions="[{
+              :open="fullDescriptionDialog"
+              :primary-action="{
                   label: $i18n('confirm-dialog-button'),
-                  namespace: 'next-steps-confirm'
-              }]"
-              @action="(_, dialog) => dialog.hide()"
-              dismiss-button
+                  namespace: 'next-steps-confirm',
+                  actionType: 'progressive'
+              }"
+              @primary="() => fullDescriptionDialog = false"
+              close-button-label="X"
             >
             <wikit-link class="uploader"
                     :href="`https://www.wikidata.org/wiki/User:${mismatch.import_meta.user.username}`"
@@ -99,7 +100,7 @@
             <div class="description">
               {{this.mismatch.import_meta.description}}
             </div>
-          </wikit-dialog>
+          </cdx-dialog>
         </td>
     </tr>
 </template>
@@ -111,10 +112,9 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import {
     Button as WikitButton,
-    Dialog as WikitDialog,
-    Dropdown,
     Link as WikitLink
 } from '@wmde/wikit-vue-components';
+import { CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
 
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
@@ -132,14 +132,16 @@ type ReviewOptionMap = {
 interface MismatchRowState {
   statusOptions: ReviewOptionMap;
   decision: ReviewMenuItem;
+  reviewStatus: string;
+  fullDescriptionDialog: boolean;
 }
 
 export default defineComponent({
     components: {
     WikitButton,
     WikitLink,
-    WikitDialog,
-    Dropdown,
+    CdxDialog,
+    CdxSelect
     },
     props: {
         mismatch: Object as PropType<LabelledMismatch>,
@@ -183,14 +185,14 @@ export default defineComponent({
     return {
       statusOptions,
       decision: statusOptions[this.mismatch.review_status],
+      reviewStatus: String(this.mismatch.review_status),
+      fullDescriptionDialog: false
     };
   },
   methods: {
     showDialog(e: Event) {
       e.preventDefault();
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
-      const descriptionDialog = this.$refs.fullDescriptionDialog! as any;
-      descriptionDialog.show();
+      this.fullDescriptionDialog = true;
     }
   }
 });
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 87c3f760..e50f0966 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -8,7 +8,7 @@
                     id="faq-button"
                     variant="quiet"
                     type="progressive"
-                    @click.native="$refs.faq.show()"
+                    @click.native="faqDialog = true"
                 >
                     <template #prefix>
                         <icon type="info-outlined" size="medium" color="inherit"/>
@@ -16,16 +16,16 @@
                     {{ $i18n('faq-button') }}
                 </wikit-button>
             </header>
-
-            <wikit-dialog id="faq-dialog"
-                :title="$i18n('faq-dialog-title')"
-                ref="faq"
-                :actions="[{
-                    label: $i18n('confirm-dialog-button'),
-                    namespace: 'faq-confirm'
-                }]"
-                @action="(_, dialog) => dialog.hide()"
-                dismiss-button
+            <cdx-dialog id="faq-dialog"
+                        v-model:open="faqDialog"
+                        :title="$i18n('faq-dialog-title')"
+                        :primary-action="{
+                            label: $i18n('confirm-dialog-button'),
+                            namespace: 'faq-confirm',
+                            actionType: 'progressive'
+                        }"
+                        @primary="() => faqDialog = false"
+                        close-button-label="X"
             >
                 <section>
                     <h3 class="h5">{{ $i18n('faq-dialog-question-finding-mismatches' )}}</h3>
@@ -54,7 +54,7 @@
                         'https://www.wikidata.org/wiki/Wikidata_talk:Mismatch_Finder'
                     ]"></p>
                 </section>
-            </wikit-dialog>
+            </cdx-dialog>
             <p id="about-description" >
                 {{ $i18n('about-mismatch-finder-description') }}
             </p>
@@ -112,11 +112,11 @@
     import { useStore } from '../store';
     import {
         Button as WikitButton,
-        Dialog as WikitDialog,
         Icon,
         Message,
         TextArea
     } from '@wmde/wikit-vue-components';
+    import { CdxDialog } from "@wikimedia/codex";
     import { defineComponent } from 'vue';
 
     interface HomeState {
@@ -126,7 +126,8 @@
         validationError: null|{
             type: string,
             message: string
-        }
+        },
+      faqDialog: boolean
     }
 
     interface ErrorMessages {
@@ -141,12 +142,12 @@
 
     export default defineComponent({
         components: {
-            InertiaHead,
-            Icon,
-            Message,
-            TextArea,
-            WikitButton,
-            WikitDialog
+          CdxDialog,
+          InertiaHead,
+          Icon,
+          Message,
+          TextArea,
+          WikitButton
         },
         methods: {
             splitInput: function(): Array<string> {
@@ -222,7 +223,8 @@
                 form: {
                     itemsInput: store.lastSearchedIds
                 },
-                validationError: null
+                validationError: null,
+                faqDialog: false
             }
         }
     });
diff --git a/resources/js/Pages/Playground.vue b/resources/js/Pages/Playground.vue
index 183319b4..31569be6 100644
--- a/resources/js/Pages/Playground.vue
+++ b/resources/js/Pages/Playground.vue
@@ -3,262 +3,6 @@
     <inertia-head title="Mismatch Finder - Component Playground" />
     <h2>Mismatch Finder - Playground!</h2>
     <p>Feel free to throw any component you want to try, in here</p>
-    <wikit-button @click.native="controlled = true">Controlled Dialog!</wikit-button>
-    <wikit-button @click.native="$refs.standalone.show()">Standalone Dialog!</wikit-button>
-    <wikit-button @click.native="$refs.indismissible.show()">Indissmissable Dialog!</wikit-button>
-    <wikit-button @click.native="$refs.long.show()">Very Long Dialog!</wikit-button>
-    <wikit-button @click.native="$refs.closes.show()">Button Closed Dialog!</wikit-button>
-    <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore in nostrum ad autem enim cupiditate, facilis
-        recusandae vel adipisci, est nisi, consequatur explicabo sit quisquam eos cumque unde! Quaerat aliquam quis
-        nostrum numquam? Minima, quos quas, minus quo impedit ducimus ullam eveniet eaque porro aut tempore deleniti
-        nobis consequatur assumenda a incidunt nam sed, saepe sit laborum qui quam rerum laboriosam magnam! Illo numquam
-        atque harum in iusto accusantium delectus recusandae eveniet unde ut inventore cum distinctio ducimus, error
-        laboriosam sint? Modi qui dolores fugit ex debitis aliquam eligendi fugiat quos dolorem voluptatem, soluta
-        recusandae alias. Exercitationem labore debitis delectus commodi animi quod, nulla expedita, accusamus ea
-        doloremque obcaecati mollitia! Incidunt natus consequatur repudiandae at unde id exercitationem autem. Tenetur
-        commodi perspiciatis, eligendi adipisci molestiae nesciunt unde dicta ullam saepe velit, fugit aspernatur beatae
-        quos amet illo accusamus repellendus? Aliquam tenetur esse voluptate quisquam eligendi vitae, ducimus
-        voluptatibus, odit tempora quas dolores natus rerum nesciunt mollitia impedit distinctio nihil qui. Perferendis
-        recusandae autem possimus, aperiam molestiae dolores dignissimos, in atque pariatur eius, magnam illo debitis
-        animi veniam quo neque perspiciatis temporibus numquam minus facere mollitia! Quasi reiciendis provident dolores
-        animi eum quidem minima rerum, facilis aliquid, voluptates, ad quibusdam porro magni. Fugit inventore quis
-        cumque dolore beatae corporis deleniti unde? Beatae, recusandae aliquid ipsum unde consequatur aut harum
-        voluptatibus doloribus expedita omnis rerum praesentium quaerat quisquam optio sed dolor enim autem et! Magnam
-        asperiores nam delectus nihil iusto voluptatibus ad et, esse sed sint sapiente cumque eos fugit vero! Repellat
-        doloremque quibusdam ullam dicta possimus temporibus aperiam deserunt enim est expedita. Deleniti in impedit
-        architecto itaque dolores vero reprehenderit ea reiciendis. Impedit esse, molestias explicabo possimus
-        temporibus consectetur vitae delectus similique sint facere. Magni magnam obcaecati error ducimus saepe maxime
-        velit at, soluta nihil tempora praesentium sit molestiae nemo consectetur, et earum voluptas? Reiciendis
-        provident corporis dicta. Ad, facilis officia omnis unde, corrupti itaque, quaerat similique nisi ab libero
-        fugiat facere. Nostrum sed eos, adipisci, eaque quibusdam molestiae rem id expedita, eveniet veritatis magni
-        maxime dolorem ipsa qui minus incidunt ipsum. Aliquam sequi, magni voluptates blanditiis aspernatur tempora id
-        iste explicabo repudiandae corporis voluptatibus! Ea voluptate eaque deleniti molestiae ullam, accusamus atque
-        quaerat facilis provident autem dolores ab rerum aliquid necessitatibus porro est quam sequi. Optio omnis quos
-        provident dolor, perferendis reiciendis consectetur in nulla eos autem ducimus iusto saepe asperiores amet
-        vitae, placeat eum, perspiciatis delectus harum. Itaque nesciunt libero, sunt provident corrupti animi eos
-        laudantium modi minus deleniti atque quibusdam natus, qui tenetur odio eum cum quam. Necessitatibus natus
-        aliquid totam, odio qui dolore quibusdam error quaerat odit illum ex veniam consectetur quasi laboriosam
-        voluptatibus deserunt dolores id, corrupti tempora veritatis! Autem a dicta aspernatur aliquam, quo similique
-        natus tempora officia fugiat facilis ducimus dolorum dolore mollitia accusantium magnam voluptatem inventore ex
-        odit voluptas numquam ab laboriosam unde? Nam eos ullam praesentium provident, veniam tempora libero aspernatur
-        qui, ducimus officiis sequi tempore? Reprehenderit ea aut consequatur animi asperiores quidem inventore neque
-        accusantium suscipit laboriosam accusamus magni molestias, unde quia nam quisquam blanditiis recusandae nisi
-        perferendis beatae explicabo in reiciendis atque. Consectetur provident animi atque nulla commodi assumenda,
-        illo odit id est, voluptas totam repellendus ut minus voluptates, et facere deleniti nemo delectus labore at
-        facilis eaque repudiandae sequi. Voluptatum consequatur deserunt delectus eaque tempore. Aperiam soluta quidem
-        pariatur ad numquam ea deserunt dignissimos, sunt fugit similique quo quos est itaque nihil! Dolore
-        exercitationem praesentium numquam distinctio veniam unde, ipsum expedita, nesciunt fuga corporis dolorum est
-        architecto. Architecto necessitatibus nisi velit facilis a ipsa, voluptatibus in quis illo, vel non rem?
-        Excepturi pariatur accusamus, animi odit ducimus ab ratione dicta? Dolore atque placeat, eius quisquam ea
-        officia suscipit labore qui in voluptatum cupiditate harum accusantium ullam illum magni minima commodi
-        dignissimos! Reiciendis, accusantium dolores, illo officiis molestias sapiente asperiores corporis impedit
-        delectus harum at quod, deserunt molestiae. Assumenda iste at corporis earum, autem fugiat obcaecati sapiente,
-        nihil ipsa veniam accusantium? Officiis delectus cum placeat corporis minus dicta perferendis, amet obcaecati
-        voluptates fugit vel excepturi rem, sunt tempora quod, quis natus nulla maxime voluptatum voluptatem vitae
-        exercitationem. Explicabo repellat animi odio incidunt itaque qui quaerat, fuga at dolorem reiciendis fugit quod
-        adipisci cumque est ut id ad distinctio blanditiis sint esse quidem doloribus maiores in? Voluptatibus
-        laboriosam ducimus non magni incidunt voluptates omnis illo quasi labore dolores veritatis pariatur vero,
-        eveniet dolorem praesentium deserunt a accusantium unde modi exercitationem natus fugiat placeat! Accusamus quae
-        illum voluptate et ipsam sit ullam voluptates. Saepe quo nesciunt distinctio debitis neque deleniti! Delectus,
-        sint? Dolorem pariatur quo at cum quaerat obcaecati adipisci reprehenderit facere vero? Culpa minima sapiente in
-        aut quasi, ipsum architecto tempora sequi, quis quaerat laudantium quae aliquid alias cupiditate officiis,
-        reprehenderit doloribus nemo ut labore? Doloremque animi ad itaque autem similique perspiciatis eos explicabo,
-        tempore esse expedita facere labore doloribus, beatae temporibus est necessitatibus quas? Minima nulla expedita
-        ab ratione harum eaque illum, voluptatum exercitationem magnam delectus est quod dicta voluptas impedit omnis
-        perferendis possimus blanditiis quibusdam, corporis fuga? Repudiandae, architecto mollitia id fugiat iusto sint
-        ullam voluptas nesciunt maxime hic vel illum maiores laborum quod ducimus ipsa a ad. Eligendi est expedita sunt.
-        Fugiat unde temporibus quam at deleniti sit excepturi molestias repellendus sed iste, officiis atque, delectus
-        est repudiandae tenetur illum sint perspiciatis doloribus corrupti possimus, enim culpa. Quas veritatis nulla
-        laudantium excepturi maiores tenetur temporibus beatae nisi culpa cupiditate rem provident, sit natus ea vitae
-        at amet in. Error eaque dolores optio, adipisci perspiciatis at dicta aperiam, a praesentium aut quaerat veniam
-        animi alias quam voluptate iusto, id enim necessitatibus minus recusandae soluta? Aliquid saepe fugit error
-        explicabo dolore voluptates minus fugiat voluptas eligendi excepturi. Nostrum sunt aliquam neque tempora
-        mollitia. Alias facere impedit natus maxime eligendi, voluptatem aut quidem magni dignissimos quaerat vel
-        voluptatum at sequi tempora soluta libero iste nulla, eaque odit rem debitis cumque. Nam laudantium delectus
-        officiis! Fugiat exercitationem, sed esse, quisquam aperiam perspiciatis vel accusantium veniam cupiditate,
-        eaque obcaecati doloremque reprehenderit cum dignissimos nihil! Fuga perferendis debitis aperiam exercitationem
-        facere est dolore distinctio?
-    </p>
-
-    <wikit-dialog class="fancy-dialog"
-        title="Controlled Dialog"
-        :actions="[
-            {
-                label: 'Test Primary',
-                namespace: 'primary'
-            },
-            {
-                label: 'Test Secondary',
-                namespace: 'secondary'
-            }
-        ]"
-        ref="controlledDialog"
-        :visible.sync="controlled"
-        dismiss-button>
-        <h2>I am a dialog!</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis provident impedit iste iure perferendis,
-        necessitatibus enim, laboriosam tempora odio sed voluptatum modi doloribus error soluta dignissimos obcaecati.
-        Ad laborum vero ipsa accusamus a? Doloribus, aliquid impedit, rem modi perspiciatis id omnis, quis nemo fuga
-        repellendus adipisci? Soluta molestiae ullam doloremque aspernatur delectus rerum aliquid. Culpa dolores dicta
-        qui, tenetur odio placeat facilis enim fugiat sunt doloribus cupiditate officia facere corporis unde? Recusandae
-        eaque, id molestias porro velit mollitia similique exercitationem totam rem. Nisi quisquam commodi velit tempore
-        pariatur, esse voluptate architecto dolor mollitia? Eligendi minus ipsum aliquam voluptate vitae eveniet.</p>
-        <wikit-checkbox label="With a fancy checkbox!" :checked="false" />
-    </wikit-dialog>
-
-    <wikit-dialog class="fancy-dialog"
-        title="Standalone Dialog"
-        :actions="[
-            {
-                label: 'Test Primary',
-                namespace: 'primary'
-            },
-            {
-                label: 'Test Secondary',
-                namespace: 'secondary'
-            }
-        ]"
-        ref="standalone"
-        :visible="standalone"
-        dismiss-button>
-        <h2>I am a dialog!</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis provident impedit iste iure perferendis,
-        necessitatibus enim, laboriosam tempora odio sed voluptatum modi doloribus error soluta dignissimos obcaecati.
-        Ad laborum vero ipsa accusamus a? Doloribus, aliquid impedit, rem modi perspiciatis id omnis, quis nemo fuga
-        repellendus adipisci? Soluta molestiae ullam doloremque aspernatur delectus rerum aliquid. Culpa dolores dicta
-        qui, tenetur odio placeat facilis enim fugiat sunt doloribus cupiditate officia facere corporis unde? Recusandae
-        eaque, id molestias porro velit mollitia similique exercitationem totam rem. Nisi quisquam commodi velit tempore
-        pariatur, esse voluptate architecto dolor mollitia? Eligendi minus ipsum aliquam voluptate vitae eveniet.</p>
-        <wikit-checkbox label="With a fancy checkbox!" :checked="false" />
-    </wikit-dialog>
-
-    <wikit-dialog class="fancy-dialog"
-        title="Indismissible Dialog"
-        :actions="[
-            {
-                label: 'Test Primary',
-                namespace: 'primary'
-            },
-            {
-                label: 'Test Secondary',
-                namespace: 'secondary'
-            }
-        ]"
-        ref="indismissible">
-        <h2>I am a dialog!</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis provident impedit iste iure perferendis,
-        necessitatibus enim, laboriosam tempora odio sed voluptatum modi doloribus error soluta dignissimos obcaecati.
-        Ad laborum vero ipsa accusamus a? Doloribus, aliquid impedit, rem modi perspiciatis id omnis, quis nemo fuga
-        repellendus adipisci? Soluta molestiae ullam doloremque aspernatur delectus rerum aliquid. Culpa dolores dicta
-        qui, tenetur odio placeat facilis enim fugiat sunt doloribus cupiditate officia facere corporis unde? Recusandae
-        eaque, id molestias porro velit mollitia similique exercitationem totam rem. Nisi quisquam commodi velit tempore
-        pariatur, esse voluptate architecto dolor mollitia? Eligendi minus ipsum aliquam voluptate vitae eveniet.</p>
-        <wikit-checkbox label="With a fancy checkbox!" :checked="false" />
-    </wikit-dialog>
-
-    <wikit-dialog class="fancy-dialog"
-        title="Very Long Dialog"
-        :actions="[
-            {
-                label: 'Test Primary',
-                namespace: 'primary'
-            }
-        ]"
-        ref="long">
-        <h2>I am a dialog!</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis provident impedit iste iure perferendis,
-        necessitatibus enim, laboriosam tempora odio sed voluptatum modi doloribus error soluta dignissimos obcaecati.
-        Ad laborum vero ipsa accusamus a? Doloribus, aliquid impedit, rem modi perspiciatis id omnis, quis nemo fuga
-        repellendus adipisci? Soluta molestiae ullam doloremque aspernatur delectus rerum aliquid. Culpa dolores dicta
-        qui, tenetur odio placeat facilis enim fugiat sunt doloribus cupiditate officia facere corporis unde? Recusandae
-        eaque, id molestias porro velit mollitia similique exercitationem totam rem. Nisi quisquam commodi velit tempore
-        pariatur, esse voluptate architecto dolor mollitia? Eligendi minus ipsum aliquam voluptate vitae eveniet.</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt excepturi iure eius deleniti quisquam
-        soluta ipsam beatae, incidunt consectetur expedita tenetur neque fuga ab necessitatibus id facilis nulla ut
-        dolore debitis dolor sequi corrupti quae! Enim repellat totam impedit quia iste assumenda minima tempora soluta,
-        laudantium molestias harum voluptas. Delectus nobis voluptatibus optio porro rem similique unde veniam
-        aspernatur ratione fugiat neque ab ipsum distinctio, corporis provident aperiam dolore accusantium consequatur,
-        cumque sed illum deserunt.</p>
-        <p>Dolor, atque, natus beatae, quam voluptate nesciunt laboriosam labore impedit accusantium explicabo minima
-        modi. Sequi eum accusantium nesciunt rem cum quis, totam quidem dolorum facere sunt aliquid perspiciatis eius
-        nemo doloribus quas ab quod libero repudiandae inventore minima fugit quaerat vero. Eaque nesciunt dolore
-        tempore nam exercitationem, necessitatibus amet magni maiores consequatur assumenda tenetur hic sunt at
-        doloremque. Amet incidunt veritatis distinctio officiis magni reprehenderit nostrum minima quod voluptatibus
-        consequuntur, voluptatem, soluta ipsam impedit quam?</p>
-        <p>Architecto, voluptates necessitatibus voluptate, nobis dicta culpa nesciunt porro temporibus tenetur sequi
-        deserunt sint quis nostrum laudantium optio, laboriosam possimus. Maiores tempora magni similique! Corrupti
-        cumque porro ipsum earum cum mollitia enim natus non, rem possimus saepe necessitatibus quo neque consectetur
-        quae alias maiores impedit, eos fugit officiis commodi ab tempore tempora consequatur! Laudantium magni
-        consequatur error quidem eveniet explicabo dolorem, sequi ut quis tempore earum quaerat vero asperiores omnis.
-        Impedit facere corporis architecto placeat!</p>
-        <p>Provident, impedit maiores enim quod exercitationem veritatis praesentium? Iure aperiam molestiae non
-        voluptas temporibus voluptatem soluta neque animi laboriosam itaque voluptatum eum possimus est similique quia
-        dolor adipisci perspiciatis et, quibusdam explicabo veritatis libero optio a doloribus! Aperiam laudantium ullam
-        ipsum fugiat iste culpa architecto, quaerat possimus id labore aut accusantium doloremque porro, harum commodi,
-        nemo natus sapiente quae dignissimos itaque sed error? Id ipsa ipsam natus sint sit consequuntur explicabo
-        impedit asperiores autem recusandae!</p>
-        <p>Doloribus, eaque? Odio harum hic libero vel, nisi nulla est deserunt laboriosam repudiandae cupiditate saepe
-        mollitia impedit, eveniet tempora consequatur repellendus asperiores, molestiae voluptatibus? Iure aspernatur
-        asperiores quibusdam. Quae totam aliquam eos exercitationem. Totam quo eaque at molestias dolorem voluptate ab
-        pariatur! Explicabo porro maiores sequi sapiente commodi nam placeat velit eaque quidem, exercitationem eum quas
-        doloremque obcaecati autem sint modi saepe cumque harum soluta possimus? Animi temporibus consectetur ex eaque
-        similique. Rem, minima quos.</p>
-        <p>Aliquam nobis temporibus magnam id culpa? Aspernatur beatae ullam quidem repellendus ab blanditiis modi quasi
-        fugiat soluta tempora a iusto quod illum dicta vitae debitis doloremque, qui eos repudiandae placeat sit.
-        Consequuntur, qui cum cumque neque sapiente quasi expedita esse amet commodi minus aliquid mollitia tempora
-        dolore rerum numquam, modi iure sunt aut. Sint accusamus delectus, animi saepe voluptatibus nostrum. Eveniet
-        voluptatum, consectetur dolore est, atque voluptate, doloribus ratione aperiam eligendi ad expedita voluptatibus
-        corporis?</p>
-        <p>Sequi illum inventore enim deleniti eius magnam, totam ratione. Sint architecto facilis quas ducimus ea
-        obcaecati molestias iure, inventore pariatur, molestiae at amet vero provident asperiores facere maiores
-        repellendus. Repellendus consequuntur sed magnam mollitia, labore voluptate odio vel ducimus cum necessitatibus
-        saepe, dolores commodi temporibus sunt provident in praesentium veniam maxime? Deserunt voluptatem asperiores
-        dolores tenetur porro illo perferendis soluta doloremque beatae ea! Ipsam iure corrupti ad, excepturi voluptas
-        animi modi alias minima? Pariatur, quaerat!</p>
-        <p>Amet error facere vel eveniet officiis necessitatibus omnis ipsum minima, quia voluptatum asperiores vero
-        nesciunt libero distinctio rerum excepturi incidunt alias quae, similique possimus, cupiditate dicta. Numquam at
-        libero non dicta asperiores corporis in, eaque similique unde, ducimus animi nesciunt! Laborum id voluptate
-        porro atque nobis perspiciatis, mollitia, quia labore repudiandae, eligendi delectus eos debitis amet expedita
-        dolore vitae accusamus asperiores. Aperiam ipsam animi optio ratione nostrum non incidunt assumenda voluptates?
-        Laboriosam vel atque nisi?</p>
-        <p>Molestiae asperiores autem consectetur distinctio eum nulla mollitia cum, tempore quae velit rerum ut. Nam,
-        illum quas. Unde necessitatibus repellendus magni voluptates, natus id praesentium ad labore eveniet, ducimus,
-        iste quisquam assumenda porro est aliquam. Sit reprehenderit aspernatur explicabo est totam. Autem, soluta.
-        Molestias, vero quam unde voluptatum inventore quibusdam libero consectetur officia illum excepturi, facilis,
-        quas facere minus cum deleniti commodi accusantium quae iste maxime. Repellendus, reiciendis! Architecto velit
-        rem labore. Repellendus, distinctio labore.</p>
-        <p>Architecto animi nisi natus minima ullam, eligendi, in ex, dolore eveniet dolorum quisquam soluta. Rerum
-        cupiditate debitis autem, laboriosam maiores facilis illum voluptatem quasi excepturi repudiandae sequi.
-        Perferendis quasi quae, unde dolores similique molestiae expedita enim. Saepe possimus excepturi at libero
-        facilis iure eaque deserunt recusandae, quam reprehenderit repudiandae voluptatibus id non, autem accusantium
-        sint expedita. Incidunt tempore vel vitae debitis, nostrum quas accusamus. Consequatur aspernatur praesentium
-        neque aliquam recusandae velit repellat perferendis unde explicabo.</p>
-    </wikit-dialog>
-
-    <wikit-dialog class="fancy-dialog"
-        title="Button Closed Dialog"
-        :actions="[
-            {
-                label: 'Boopy',
-                namespace: 'primary-boop'
-            },
-            {
-                label: 'Schmoopy',
-                namespace: 'secondary-schmoop'
-            }
-        ]"
-        @action="(namespace, dialog) => namespace === 'primary-boop' ? dialog.hide() : ''"
-        ref="closes">
-        <h2>I am a dialog!</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis provident impedit iste iure perferendis,
-        necessitatibus enim, laboriosam tempora odio sed voluptatum modi doloribus error soluta dignissimos obcaecati.
-        Ad laborum vero ipsa accusamus a? Doloribus, aliquid impedit, rem modi perspiciatis id omnis, quis nemo fuga
-        repellendus adipisci? Soluta molestiae ullam doloremque aspernatur delectus rerum aliquid. Culpa dolores dicta
-        qui, tenetur odio placeat facilis enim fugiat sunt doloribus cupiditate officia facere corporis unde? Recusandae
-        eaque, id molestias porro velit mollitia similique exercitationem totam rem. Nisi quisquam commodi velit tempore
-        pariatur, esse voluptate architecto dolor mollitia? Eligendi minus ipsum aliquam voluptate vitae eveniet.</p>
-    </wikit-dialog>
   </div>
 </template>
 
@@ -266,19 +10,8 @@
     import { defineComponent } from 'vue';
     import { Head as InertiaHead } from '@inertiajs/inertia-vue3'
 
-    import {
-        Button as WikitButton,
-        Checkbox as WikitCheckbox,
-        Dialog as WikitDialog
-    } from '@wmde/wikit-vue-components';
-
     export default defineComponent({
-        components: {
-            InertiaHead,
-            WikitButton,
-            WikitCheckbox,
-            WikitDialog
-        },
+        components: { InertiaHead },
         props: {
             user: Object,
         },
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
index 1604f69f..691e1cd0 100644
--- a/resources/js/Pages/Results.vue
+++ b/resources/js/Pages/Results.vue
@@ -15,7 +15,7 @@
                     id="instructions-button"
                     variant="quiet"
                     type="progressive"
-                    @click.native="showInstructionsDialog"
+                    @click.native="instructionsDialog = true"
                 >
                     <template #prefix>
                         <icon type="info-outlined" size="medium" color="inherit"/>
@@ -24,15 +24,16 @@
                 </wikit-button>
             </header>
 
-            <wikit-dialog id="instructions-dialog"
+            <cdx-dialog id="instructions-dialog"
                 :title="$i18n('instructions-dialog-title')"
-                ref="inctructionsDialog"
-                :actions="[{
+                v-model:open="instructionsDialog"
+                :primary-action="{
                     label: $i18n('confirm-dialog-button'),
-                    namespace: 'instructions-confirm'
-                }]"
-                @action="(_, dialog) => dialog.hide()"
-                dismiss-button
+                    namespace: 'instructions-confirm',
+                    actionType: 'progressive'
+                }"
+                @primary="() => instructionsDialog = false"
+                close-button-label="X"
             >
                 <p>{{ $i18n('instructions-dialog-message-upload-info-description') }}</p>
                 <p>{{ $i18n('instructions-dialog-message-intro') }}</p>
@@ -44,7 +45,7 @@
                     <li>{{ $i18n('instructions-dialog-message-instruction-none') }}</li>
                     <li>{{ $i18n('instructions-dialog-message-instruction-pending') }}</li>
                 </ul>
-            </wikit-dialog>
+            </cdx-dialog>
             <p id="about-description" >
                 {{ $i18n('results-page-description') }}
             </p>
@@ -108,16 +109,17 @@
                 </form>
             </section>
         </section>
-        <wikit-dialog class="confirmation-dialog"
+        <cdx-dialog class="confirmation-dialog"
             :title="$i18n('confirmation-dialog-title')"
-            ref="confirmation"
-            :actions="[{
+            v-model:open="confirmationDialog"
+            :primary-action="{
                 label: $i18n('confirmation-dialog-button'),
-                namespace: 'next-steps-confirm'
-            }]"
-            @action="_handleConfirmation"
-            @dismissed="disableConfirmation = false"
-            dismiss-button
+                namespace: 'next-steps-confirm',
+                actionType: 'progressive'
+
+            }"
+            @primary="_handleConfirmation"
+            close-button-label="X"
         >
             <p>{{ $i18n('confirmation-dialog-message-intro') }}</p>
             <ul>
@@ -129,7 +131,7 @@
                 :label="$i18n('confirmation-dialog-option-label')"
                 :checked.sync="disableConfirmation"
             />
-        </wikit-dialog>
+        </cdx-dialog>
     </div>
 </template>
 
@@ -142,7 +144,6 @@
         Link as WikitLink,
         Button as WikitButton,
         Checkbox,
-        Dialog as WikitDialog,
         Icon,
         Message } from '@wmde/wikit-vue-components';
 
@@ -185,7 +186,9 @@
         disableConfirmation: boolean,
         pageDirection: string,
         requestError: boolean,
-        lastSubmitted: string
+        lastSubmitted: string,
+        instructionsDialog: boolean,
+        confirmationDialog: boolean
     }
 
     export default defineComponent({
@@ -196,9 +199,9 @@
             MismatchesTable,
             WikitLink,
             WikitButton,
-            WikitDialog,
             Checkbox,
-            Message
+            Message,
+            CdxDialog
         },
         props: {
             user: {
@@ -256,15 +259,12 @@
                 disableConfirmation: false,
                 pageDirection: 'ltr',
                 requestError: false,
-                lastSubmitted: ''
+                lastSubmitted: '',
+                instructionsDialog: false,
+                confirmationDialog: false
             }
         },
         methods: {
-            showInstructionsDialog() {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                const dialog = this.$refs.inctructionsDialog as any;
-                dialog.show();
-            },
             addLabels(mismatches: Mismatch[]): LabelledMismatch[]{
                 // The following callback maps existing mismatches to extended
                 // mismatch objects which include labels, by looking up any
@@ -310,7 +310,6 @@
                 // Defaulting to any, as the alternative presents us with
                 // convoluted and unnecessary syntax.
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const confirmationDialog = this.$refs.confirmation as any;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const overlay = this.$refs.overlay as any;
 
@@ -326,7 +325,7 @@
                     this.showSubmitConfirmation(item);
 
                     if(!this.disableConfirmation){
-                        confirmationDialog.show();
+                      this.confirmationDialog = true;
                     }
                 } catch(e) {
                     this.requestError = true;
@@ -360,7 +359,7 @@
             // understand component instances and complains about usage of the
             // hide method otherwise.
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            _handleConfirmation(_ : string, dialog: any){
+            _handleConfirmation(){
                 const { disableConfirmation, user } = this;
 
                 // Do nothing if there is no user
@@ -373,7 +372,7 @@
                     window.localStorage.setItem(`mismatch-finder_user-settings_${user.id}`, storageData);
                 }
 
-                dialog.hide();
+              this.confirmationDialog = false;
             }
         }
     });