diff --git a/package-lock.json b/package-lock.json
index 6d123375..c84dd653 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,7 @@
             "license": "MIT",
             "dependencies": {
                 "hazardous": "^0.3.0",
-                "node-api-dotnet": "^0.9.18",
-                "vue-sonner": "^2.0.9"
+                "node-api-dotnet": "^0.9.18"
             },
             "devDependencies": {
                 "@electron/rebuild": "^4.0.2",
@@ -28,6 +27,7 @@
                 "@tanstack/vue-virtual": "^3.13.18",
                 "@types/jest": "^30.0.0",
                 "@types/node": "^25.0.6",
+                "@vee-validate/zod": "^4.15.1",
                 "@vitejs/plugin-vue": "^6.0.3",
                 "@vitejs/plugin-vue-jsx": "^5.1.3",
                 "@vueuse/core": "^14.1.0",
@@ -61,6 +61,7 @@
                 "tailwind-merge": "^3.4.0",
                 "tailwindcss": "^4.1.18",
                 "tw-animate-css": "^1.4.0",
+                "vee-validate": "^4.15.1",
                 "vite": "^7.3.1",
                 "vue": "^3.5.26",
                 "vue-i18n": "^11.2.8",
@@ -68,8 +69,10 @@
                 "vue-marquee-text-component": "^2.0.1",
                 "vue-router": "^4.6.4",
                 "vue-showdown": "^4.2.0",
+                "vue-sonner": "^2.0.9",
                 "worker-timers": "^8.0.28",
-                "yargs": "^18.0.0"
+                "yargs": "^18.0.0",
+                "zod": "^4.3.5"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -103,6 +106,7 @@
             "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.27.1",
                 "@babel/generator": "^7.28.5",
@@ -1260,7 +1264,6 @@
             "dev": true,
             "license": "BSD-2-Clause",
             "optional": true,
-            "peer": true,
             "dependencies": {
                 "cross-dirname": "^0.1.0",
                 "debug": "^4.3.4",
@@ -1282,7 +1285,6 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
-            "peer": true,
             "dependencies": {
                 "graceful-fs": "^4.2.0",
                 "jsonfile": "^6.0.1",
@@ -1299,7 +1301,6 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
-            "peer": true,
             "dependencies": {
                 "universalify": "^2.0.0"
             },
@@ -1314,7 +1315,6 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
-            "peer": true,
             "engines": {
                 "node": ">= 10.0.0"
             }
@@ -5300,6 +5300,7 @@
             "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@types/lodash": "*"
             }
@@ -5690,6 +5691,33 @@
                 "win32"
             ]
         },
+        "node_modules/@vee-validate/zod": {
+            "version": "4.15.1",
+            "resolved": "https://registry.npmjs.org/@vee-validate/zod/-/zod-4.15.1.tgz",
+            "integrity": "sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "type-fest": "^4.8.3",
+                "vee-validate": "4.15.1"
+            },
+            "peerDependencies": {
+                "zod": "^3.24.0"
+            }
+        },
+        "node_modules/@vee-validate/zod/node_modules/type-fest": {
+            "version": "4.41.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+            "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+            "dev": true,
+            "license": "(MIT OR CC0-1.0)",
+            "engines": {
+                "node": ">=16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
@@ -6017,6 +6045,7 @@
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -6050,6 +6079,7 @@
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -6814,6 +6844,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.9.0",
                 "caniuse-lite": "^1.0.30001759",
@@ -7762,8 +7793,7 @@
             "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
             "dev": true,
             "license": "MIT",
-            "optional": true,
-            "peer": true
+            "optional": true
         },
         "node_modules/cross-env": {
             "version": "10.1.0",
@@ -8064,6 +8094,7 @@
             "integrity": "sha512-ce4Ogns4VMeisIuCSK0C62umG0lFy012jd8LMZ6w/veHUeX4fqfDrGe+HTWALAEwK6JwKP+dhPvizhArSOsFbg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "app-builder-lib": "26.4.0",
                 "builder-util": "26.3.4",
@@ -8468,7 +8499,6 @@
             "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@electron/asar": "^3.2.1",
                 "debug": "^4.1.1",
@@ -8489,7 +8519,6 @@
             "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "graceful-fs": "^4.1.2",
                 "jsonfile": "^4.0.0",
@@ -8647,7 +8676,8 @@
             "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
             "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/embla-carousel-reactive-utils": {
             "version": "8.6.0",
@@ -8693,17 +8723,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/encoding": {
-            "version": "0.1.13",
-            "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-            "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "iconv-lite": "^0.6.2"
-            }
-        },
         "node_modules/end-of-stream": {
             "version": "1.4.5",
             "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -8832,6 +8851,7 @@
             "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "esbuild": "bin/esbuild"
             },
@@ -8911,6 +8931,7 @@
             "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -8971,6 +8992,7 @@
             "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -13440,14 +13462,16 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/lodash-es": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
             "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/lodash-unified": {
             "version": "1.0.3",
@@ -14673,6 +14697,7 @@
             "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@vue/devtools-api": "^7.7.7"
             },
@@ -14843,7 +14868,6 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
-            "peer": true,
             "dependencies": {
                 "commander": "^9.4.0"
             },
@@ -14861,7 +14885,6 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
-            "peer": true,
             "engines": {
                 "node": "^12.20.0 || >=14"
             }
@@ -14882,6 +14905,7 @@
             "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "prettier": "bin/prettier.cjs"
             },
@@ -15325,7 +15349,6 @@
             "deprecated": "Rimraf versions prior to v4 are no longer supported",
             "dev": true,
             "license": "ISC",
-            "peer": true,
             "dependencies": {
                 "glob": "^7.1.3"
             },
@@ -15340,7 +15363,6 @@
             "deprecated": "Glob versions prior to v9 are no longer supported",
             "dev": true,
             "license": "ISC",
-            "peer": true,
             "dependencies": {
                 "fs.realpath": "^1.0.0",
                 "inflight": "^1.0.4",
@@ -15362,7 +15384,6 @@
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
             "license": "ISC",
-            "peer": true,
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -17200,7 +17221,6 @@
             "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "mkdirp": "^0.5.1",
                 "rimraf": "~2.6.2"
@@ -17264,7 +17284,6 @@
             "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "minimist": "^1.2.6"
             },
@@ -17383,6 +17402,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -17892,6 +17912,33 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/vee-validate": {
+            "version": "4.15.1",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.15.1.tgz",
+            "integrity": "sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^7.5.2",
+                "type-fest": "^4.8.3"
+            },
+            "peerDependencies": {
+                "vue": "^3.4.26"
+            }
+        },
+        "node_modules/vee-validate/node_modules/type-fest": {
+            "version": "4.41.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+            "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+            "dev": true,
+            "license": "(MIT OR CC0-1.0)",
+            "engines": {
+                "node": ">=16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/verror": {
             "version": "1.10.1",
             "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
@@ -17914,6 +17961,7 @@
             "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "esbuild": "^0.27.0",
                 "fdir": "^6.5.0",
@@ -18007,6 +18055,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -18020,6 +18069,7 @@
             "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.5.26",
                 "@vue/compiler-sfc": "3.5.26",
@@ -18216,6 +18266,7 @@
             "version": "2.0.9",
             "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
             "integrity": "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==",
+            "dev": true,
             "license": "MIT",
             "peerDependencies": {
                 "@nuxt/kit": "^4.0.3",
@@ -18633,6 +18684,17 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/zod": {
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+            "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
         "node_modules/zrender": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
diff --git a/package.json b/package.json
index 7229f20e..8c3b5ce3 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
         "@tanstack/vue-virtual": "^3.13.18",
         "@types/jest": "^30.0.0",
         "@types/node": "^25.0.6",
+        "@vee-validate/zod": "^4.15.1",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vitejs/plugin-vue-jsx": "^5.1.3",
         "@vueuse/core": "^14.1.0",
@@ -81,6 +82,7 @@
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
         "tw-animate-css": "^1.4.0",
+        "vee-validate": "^4.15.1",
         "vite": "^7.3.1",
         "vue": "^3.5.26",
         "vue-i18n": "^11.2.8",
@@ -88,8 +90,10 @@
         "vue-marquee-text-component": "^2.0.1",
         "vue-router": "^4.6.4",
         "vue-showdown": "^4.2.0",
+        "vue-sonner": "^2.0.9",
         "worker-timers": "^8.0.28",
-        "yargs": "^18.0.0"
+        "yargs": "^18.0.0",
+        "zod": "^4.3.5"
     },
     "build": {
         "appId": "app.vrcx",
@@ -176,7 +180,6 @@
     },
     "dependencies": {
         "hazardous": "^0.3.0",
-        "node-api-dotnet": "^0.9.18",
-        "vue-sonner": "^2.0.9"
+        "node-api-dotnet": "^0.9.18"
     }
 }
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index c886caa0..b0673829 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -145,7 +145,7 @@
                                 side="top"
                                 :content="t('dialog.group.actions.unrepresent_tooltip')">
                                 <Button
-                                    class="rounded-full"
+                                    class="rounded-full mr-2"
                                     variant="secondary"
                                     size="icon-lg"
                                     style="margin-left: 5px"
@@ -156,10 +156,9 @@
                             <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
                                 <span>
                                     <Button
-                                        class="rounded-full"
+                                        class="rounded-full mr-2"
                                         variant="outline"
                                         size="icon-lg"
-                                        style="margin-left: 5px"
                                         :disabled="groupDialog.ref.privacy === 'private'"
                                         @click="setGroupRepresentation(groupDialog.id)">
                                         <StarFilled />
@@ -171,10 +170,9 @@
                             <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
                                 <span>
                                     <Button
-                                        class="rounded-full"
+                                        class="rounded-full mr-2"
                                         variant="outline"
                                         size="icon-lg"
-                                        style="margin-left: 5px"
                                         @click="cancelGroupRequest(groupDialog.id)">
                                         <Close />
                                     </Button>
@@ -185,10 +183,9 @@
                             <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
                                 <span>
                                     <Button
-                                        class="rounded-full"
+                                        class="rounded-full mr-2"
                                         variant="outline"
                                         size="icon-lg"
-                                        style="margin-left: 5px"
                                         @click="joinGroup(groupDialog.id)">
                                         <Check />
                                     </Button>
@@ -201,10 +198,9 @@
                                 side="top"
                                 :content="t('dialog.group.actions.request_join_tooltip')">
                                 <Button
-                                    class="rounded-full"
+                                    class="rounded-full mr-2"
                                     variant="outline"
                                     size="icon-lg"
-                                    style="margin-left: 5px"
                                     @click="joinGroup(groupDialog.id)">
                                     <Message />
                                 </Button>
@@ -214,12 +210,7 @@
                                 side="top"
                                 :content="t('dialog.group.actions.invite_required_tooltip')">
                                 <span>
-                                    <Button
-                                        class="rounded-full"
-                                        variant="outline"
-                                        size="icon-lg"
-                                        disabled
-                                        style="margin-left: 5px">
+                                    <Button class="rounded-full mr-2" variant="outline" size="icon-lg" disabled>
                                         <Message />
                                     </Button>
                                 </span>
@@ -229,10 +220,9 @@
                                 side="top"
                                 :content="t('dialog.group.actions.join_group_tooltip')">
                                 <Button
-                                    class="rounded-full"
+                                    class="rounded-full mr-2"
                                     variant="outline"
                                     size="icon-lg"
-                                    style="margin-left: 5px"
                                     @click="joinGroup(groupDialog.id)">
                                     <Check />
                                 </Button>
@@ -245,8 +235,7 @@
                                     :variant="
                                         groupDialog.ref.membershipStatus === 'userblocked' ? 'destructive' : 'outline'
                                     "
-                                    size="icon-lg"
-                                    style="margin-left: 5px">
+                                    size="icon-lg">
                                     <MoreFilled />
                                 </Button>
                             </DropdownMenuTrigger>
diff --git a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
index e05da586..abafa503 100644
--- a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
@@ -5,88 +5,105 @@
         width="650px"
         append-to-body>
         <div v-if="groupPostEditDialog.visible">
-            <h3 v-text="groupPostEditDialog.groupRef.name"></h3>
-            <el-form :model="groupPostEditDialog" label-width="150px">
-                <el-form-item :label="t('dialog.group_post_edit.title')">
-                    <InputGroupField v-model="groupPostEditDialog.title" size="sm" />
-                </el-form-item>
-                <el-form-item :label="t('dialog.group_post_edit.message')">
-                    <InputGroupTextareaField
-                        v-model="groupPostEditDialog.text"
-                        :rows="4"
-                        style="margin-top: 10px"
-                        input-class="resize-none" />
-                </el-form-item>
-                <el-form-item>
-                    <label v-if="!groupPostEditDialog.postId" class="inline-flex items-center gap-2">
-                        <Checkbox v-model="groupPostEditDialog.sendNotification" />
-                        <span>{{ t('dialog.group_post_edit.send_notification') }}</span>
-                    </label>
-                </el-form-item>
-                <el-form-item :label="t('dialog.group_post_edit.post_visibility')">
-                    <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
-                        <div class="flex items-center space-x-2">
-                            <RadioGroupItem id="groupPostVisibility-public" value="public" />
-                            <label for="groupPostVisibility-public">
-                                {{ t('dialog.group_post_edit.visibility_public') }}
-                            </label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroupItem id="groupPostVisibility-group" value="group" />
-                            <label for="groupPostVisibility-group">
-                                {{ t('dialog.group_post_edit.visibility_group') }}
-                            </label>
-                        </div>
-                    </RadioGroup>
-                </el-form-item>
-                <el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')">
-                    <Select
-                        multiple
-                        :model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
-                        @update:modelValue="handleRoleIdsChange">
-                        <SelectTrigger size="sm" class="w-full">
-                            <SelectValue>
-                                <span class="truncate">
-                                    {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
-                                </span>
-                            </SelectValue>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
-                                    :key="role.id"
-                                    :value="role.id">
-                                    {{ role.name }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </el-form-item>
-                <el-form-item :label="t('dialog.group_post_edit.image')">
-                    <template v-if="gallerySelectDialog.selectedFileId">
-                        <div style="display: inline-block; flex: none; margin-right: 5px">
-                            <img
-                                :src="gallerySelectDialog.selectedImageUrl"
-                                style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
-                                @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
-                                loading="lazy" />
-                            <Button
-                                size="sm"
-                                variant="outline"
-                                style="vertical-align: top"
-                                @click="clearImageGallerySelect">
-                                {{ t('dialog.invite_message.clear_selected_image') }}
+            <FieldGroup class="gap-4">
+                <Field>
+                    <FieldLabel>{{ t('dialog.group_post_edit.title') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupField v-model="groupPostEditDialog.title" size="sm" />
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('dialog.group_post_edit.message') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupTextareaField
+                            v-model="groupPostEditDialog.text"
+                            :rows="4"
+                            style="margin-top: 10px"
+                            input-class="resize-none" />
+                    </FieldContent>
+                </Field>
+                <Field v-if="!groupPostEditDialog.postId">
+                    <FieldLabel class="sr-only">{{ t('dialog.group_post_edit.send_notification') }}</FieldLabel>
+                    <FieldContent>
+                        <label class="inline-flex items-center gap-2">
+                            <Checkbox v-model="groupPostEditDialog.sendNotification" />
+                            <span>{{ t('dialog.group_post_edit.send_notification') }}</span>
+                        </label>
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('dialog.group_post_edit.post_visibility') }}</FieldLabel>
+                    <FieldContent>
+                        <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="groupPostVisibility-public" value="public" />
+                                <label for="groupPostVisibility-public">
+                                    {{ t('dialog.group_post_edit.visibility_public') }}
+                                </label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="groupPostVisibility-group" value="group" />
+                                <label for="groupPostVisibility-group">
+                                    {{ t('dialog.group_post_edit.visibility_group') }}
+                                </label>
+                            </div>
+                        </RadioGroup>
+                    </FieldContent>
+                </Field>
+                <Field v-if="groupPostEditDialog.visibility === 'group'">
+                    <FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
+                    <FieldContent>
+                        <Select
+                            multiple
+                            :model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
+                            @update:modelValue="handleRoleIdsChange">
+                            <SelectTrigger size="sm" class="w-full">
+                                <SelectValue>
+                                    <span class="truncate">
+                                        {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
+                                    </span>
+                                </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
+                                        :key="role.id"
+                                        :value="role.id">
+                                        {{ role.name }}
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
+                    <FieldContent>
+                        <template v-if="gallerySelectDialog.selectedFileId">
+                            <div style="display: inline-block; flex: none; margin-right: 5px">
+                                <img
+                                    :src="gallerySelectDialog.selectedImageUrl"
+                                    style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
+                                    @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
+                                    loading="lazy" />
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    style="vertical-align: top"
+                                    @click="clearImageGallerySelect">
+                                    {{ t('dialog.invite_message.clear_selected_image') }}
+                                </Button>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <Button size="sm" variant="outline" @click="showGallerySelectDialog">
+                                {{ t('dialog.invite_message.select_image') }}
                             </Button>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <Button size="sm" variant="outline" @click="showGallerySelectDialog">
-                            {{ t('dialog.invite_message.select_image') }}
-                        </Button>
-                    </template>
-                </el-form-item>
-            </el-form>
+                        </template>
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
         </div>
         <template #footer>
             <div class="flex gap-2">
@@ -109,6 +126,7 @@
 </template>
 
 <script setup>
+    import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
diff --git a/src/components/dialogs/LaunchDialog.vue b/src/components/dialogs/LaunchDialog.vue
index a679e3a4..8e7e10a3 100644
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -1,63 +1,68 @@
 <template>
     <el-dialog :z-index="launchDialogIndex" v-model="isVisible" :title="t('dialog.launch.header')" width="450px">
-        <el-form :model="launchDialog" label-width="100px">
-            <el-form-item :label="t('dialog.launch.url')">
-                <InputGroupField
-                    v-model="launchDialog.url"
-                    size="sm"
-                    style="width: 230px"
-                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <Button
-                        class="rounded-full ml-1"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="copyInstanceMessage(launchDialog.url)"
-                        ><Copy
-                    /></Button>
-                </TooltipWrapper>
-            </el-form-item>
-            <el-form-item v-if="launchDialog.shortUrl">
-                <template #label>
-                    <div class="flex items-center">
+        <FieldGroup class="gap-4">
+            <Field>
+                <FieldLabel>{{ t('dialog.launch.url') }}</FieldLabel>
+                <FieldContent class="flex-row items-center gap-2">
+                    <InputGroupField
+                        v-model="launchDialog.url"
+                        size="sm"
+                        @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                    <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
+                        <Button
+                            class="rounded-full"
+                            size="icon-sm"
+                            variant="ghost"
+                            @click="copyInstanceMessage(launchDialog.url)"
+                            ><Copy
+                        /></Button>
+                    </TooltipWrapper>
+                </FieldContent>
+            </Field>
+            <Field v-if="launchDialog.shortUrl">
+                <FieldLabel>
+                    <span class="flex items-center gap-1">
                         <span>{{ t('dialog.launch.short_url') }}</span>
                         <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
-                            <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
+                            <el-icon><Warning /></el-icon>
                         </TooltipWrapper>
-                    </div>
-                </template>
-                <InputGroupField
-                    v-model="launchDialog.shortUrl"
-                    size="sm"
-                    style="width: 230px"
-                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <Button
-                        class="rounded-full ml-1"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="copyInstanceMessage(launchDialog.shortUrl)"
-                        ><Copy
-                    /></Button>
-                </TooltipWrapper>
-            </el-form-item>
-            <el-form-item :label="t('dialog.launch.location')">
-                <InputGroupField
-                    v-model="launchDialog.location"
-                    size="sm"
-                    style="width: 230px"
-                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <Button
-                        class="rounded-full ml-1"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="copyInstanceMessage(launchDialog.location)"
-                        ><Copy
-                    /></Button>
-                </TooltipWrapper>
-            </el-form-item>
-        </el-form>
+                    </span>
+                </FieldLabel>
+                <FieldContent class="flex-row items-center gap-2">
+                    <InputGroupField
+                        v-model="launchDialog.shortUrl"
+                        size="sm"
+                        @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                    <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
+                        <Button
+                            class="rounded-full"
+                            size="icon-sm"
+                            variant="ghost"
+                            @click="copyInstanceMessage(launchDialog.shortUrl)"
+                            ><Copy
+                        /></Button>
+                    </TooltipWrapper>
+                </FieldContent>
+            </Field>
+            <Field>
+                <FieldLabel>{{ t('dialog.launch.location') }}</FieldLabel>
+                <FieldContent class="flex-row items-center gap-2">
+                    <InputGroupField
+                        v-model="launchDialog.location"
+                        size="sm"
+                        @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                    <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
+                        <Button
+                            class="rounded-full"
+                            size="icon-sm"
+                            variant="ghost"
+                            @click="copyInstanceMessage(launchDialog.location)"
+                            ><Copy
+                        /></Button>
+                    </TooltipWrapper>
+                </FieldContent>
+            </Field>
+        </FieldGroup>
         <template #footer>
             <div class="flex justify-end">
                 <Button
@@ -126,6 +131,7 @@
         DropdownMenuItem,
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
+    import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Copy } from 'lucide-vue-next';
diff --git a/src/components/dialogs/NewInstanceDialog.vue b/src/components/dialogs/NewInstanceDialog.vue
index 13e1d772..7bc236d1 100644
--- a/src/components/dialogs/NewInstanceDialog.vue
+++ b/src/components/dialogs/NewInstanceDialog.vue
@@ -7,361 +7,428 @@
         append-to-body>
         <el-tabs v-model="newInstanceDialog.selectedTab" @tab-click="newInstanceTabClick">
             <el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')">
-                <el-form :model="newInstanceDialog" label-width="150px">
-                    <el-form-item :label="t('dialog.new_instance.access_type')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.accessType"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.accessType = value;
-                                    buildInstance();
-                                }
-                            ">
-                            <ToggleGroupItem value="public">{{
-                                t('dialog.new_instance.access_type_public')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="group">{{
-                                t('dialog.new_instance.access_type_group')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="friends+">{{
-                                t('dialog.new_instance.access_type_friend_plus')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="friends">{{
-                                t('dialog.new_instance.access_type_friend')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="invite+">{{
-                                t('dialog.new_instance.access_type_invite_plus')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="invite">{{
-                                t('dialog.new_instance.access_type_invite')
-                            }}</ToggleGroupItem>
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.group_access_type')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.groupAccessType"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.groupAccessType = value;
-                                    buildInstance();
-                                }
-                            ">
-                            <ToggleGroupItem
-                                value="members"
+                <FieldGroup class="gap-4">
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.access_type') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.accessType"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.accessType = value;
+                                        buildInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem value="public">{{
+                                    t('dialog.new_instance.access_type_public')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="group">{{
+                                    t('dialog.new_instance.access_type_group')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="friends+">{{
+                                    t('dialog.new_instance.access_type_friend_plus')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="friends">{{
+                                    t('dialog.new_instance.access_type_friend')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="invite+">{{
+                                    t('dialog.new_instance.access_type_invite_plus')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="invite">{{
+                                    t('dialog.new_instance.access_type_invite')
+                                }}</ToggleGroupItem>
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.group_access_type') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.groupAccessType"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.groupAccessType = value;
+                                        buildInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem
+                                    value="members"
+                                    :disabled="
+                                        !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
+                                    "
+                                    >{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
+                                >
+                                <ToggleGroupItem
+                                    value="plus"
+                                    :disabled="
+                                        !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
+                                    "
+                                    >{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
+                                >
+                                <ToggleGroupItem
+                                    value="public"
+                                    :disabled="
+                                        !hasGroupPermission(
+                                            newInstanceDialog.groupRef,
+                                            'group-instance-public-create'
+                                        ) || newInstanceDialog.groupRef.privacy === 'private'
+                                    "
+                                    >{{ t('dialog.new_instance.group_access_type_public') }}</ToggleGroupItem
+                                >
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.region') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.region"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.region = value;
+                                        buildInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem value="US West">{{
+                                    t('dialog.new_instance.region_usw')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="US East">{{
+                                    t('dialog.new_instance.region_use')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="Europe">{{
+                                    t('dialog.new_instance.region_eu')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="Japan">{{
+                                    t('dialog.new_instance.region_jp')
+                                }}</ToggleGroupItem>
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.queueEnabled') }}</FieldLabel>
+                        <FieldContent>
+                            <Checkbox v-model="newInstanceDialog.queueEnabled" @update:modelValue="buildInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.ageGate') }}</FieldLabel>
+                        <FieldContent>
+                            <Checkbox
+                                v-model="newInstanceDialog.ageGate"
                                 :disabled="
-                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
+                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-age-gated-create')
                                 "
-                                >{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
-                            >
-                            <ToggleGroupItem
-                                value="plus"
-                                :disabled="
-                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
-                                "
-                                >{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
-                            >
-                            <ToggleGroupItem
-                                value="public"
-                                :disabled="
-                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') ||
-                                    newInstanceDialog.groupRef.privacy === 'private'
-                                "
-                                >{{ t('dialog.new_instance.group_access_type_public') }}</ToggleGroupItem
-                            >
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.region')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.region"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.region = value;
-                                    buildInstance();
-                                }
-                            ">
-                            <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.queueEnabled')">
-                        <Checkbox v-model="newInstanceDialog.queueEnabled" @update:modelValue="buildInstance" />
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.ageGate')">
-                        <Checkbox
-                            v-model="newInstanceDialog.ageGate"
-                            :disabled="
-                                !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-age-gated-create')
-                            "
-                            @update:modelValue="buildInstance" />
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.display_name')">
-                        <InputGroupField
-                            :disabled="!isLocalUserVrcPlusSupporter"
-                            v-model="newInstanceDialog.displayName"
-                            size="sm"
-                            @click="$event.target.tagName === 'INPUT' && $event.target.select()"
-                            @change="buildInstance" />
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.group_id')">
-                        <VirtualCombobox
-                            v-model="newInstanceDialog.groupId"
-                            :groups="normalGroupPickerGroups"
-                            :placeholder="t('dialog.new_instance.group_placeholder')"
-                            :search-placeholder="t('dialog.new_instance.group_placeholder')"
-                            :clearable="true"
-                            :close-on-select="true"
-                            :deselect-on-reselect="true"
-                            @change="buildInstance">
-                            <template #item="{ item, selected }">
-                                <div class="x-friend-item flex w-full items-center">
-                                    <div class="avatar">
-                                        <img :src="item.iconUrl" loading="lazy" />
+                                @update:modelValue="buildInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.display_name') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                :disabled="!isLocalUserVrcPlusSupporter"
+                                v-model="newInstanceDialog.displayName"
+                                size="sm"
+                                @click="$event.target.tagName === 'INPUT' && $event.target.select()"
+                                @change="buildInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.group_id') }}</FieldLabel>
+                        <FieldContent>
+                            <VirtualCombobox
+                                v-model="newInstanceDialog.groupId"
+                                :groups="normalGroupPickerGroups"
+                                :placeholder="t('dialog.new_instance.group_placeholder')"
+                                :search-placeholder="t('dialog.new_instance.group_placeholder')"
+                                :clearable="true"
+                                :close-on-select="true"
+                                :deselect-on-reselect="true"
+                                @change="buildInstance">
+                                <template #item="{ item, selected }">
+                                    <div class="x-friend-item flex w-full items-center">
+                                        <div class="avatar">
+                                            <img :src="item.iconUrl" loading="lazy" />
+                                        </div>
+                                        <div class="detail">
+                                            <span class="name" v-text="item.label"></span>
+                                        </div>
+                                        <CheckIcon
+                                            :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
                                     </div>
-                                    <div class="detail">
-                                        <span class="name" v-text="item.label"></span>
-                                    </div>
-                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                                </div>
-                            </template>
-                        </VirtualCombobox>
-                    </el-form-item>
-                    <el-form-item
+                                </template>
+                            </VirtualCombobox>
+                        </FieldContent>
+                    </Field>
+                    <Field
                         v-if="
                             newInstanceDialog.accessType === 'group' && newInstanceDialog.groupAccessType === 'members'
                         "
-                        :label="t('dialog.new_instance.roles')">
-                        <Select
-                            multiple
-                            :model-value="Array.isArray(newInstanceDialog.roleIds) ? newInstanceDialog.roleIds : []"
-                            @update:modelValue="handleRoleIdsChange">
-                            <SelectTrigger size="sm" class="w-full">
-                                <SelectValue>
-                                    <span class="truncate">
-                                        {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
-                                    </span>
-                                </SelectValue>
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    <SelectItem
-                                        v-for="role in newInstanceDialog.selectedGroupRoles"
-                                        :key="role.id"
-                                        :value="role.id">
-                                        {{ role.name }}
-                                    </SelectItem>
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
-                    </el-form-item>
+                        class="items-start">
+                        <FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
+                        <FieldContent>
+                            <Select
+                                multiple
+                                :model-value="Array.isArray(newInstanceDialog.roleIds) ? newInstanceDialog.roleIds : []"
+                                @update:modelValue="handleRoleIdsChange">
+                                <SelectTrigger size="sm" class="w-full">
+                                    <SelectValue>
+                                        <span class="truncate">
+                                            {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
+                                        </span>
+                                    </SelectValue>
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectGroup>
+                                        <SelectItem
+                                            v-for="role in newInstanceDialog.selectedGroupRoles"
+                                            :key="role.id"
+                                            :value="role.id">
+                                            {{ role.name }}
+                                        </SelectItem>
+                                    </SelectGroup>
+                                </SelectContent>
+                            </Select>
+                        </FieldContent>
+                    </Field>
                     <template v-if="newInstanceDialog.instanceCreated">
-                        <el-form-item :label="t('dialog.new_instance.location')">
-                            <InputGroupField
-                                v-model="newInstanceDialog.location"
-                                size="sm"
-                                readonly
-                                @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                        </el-form-item>
-                        <el-form-item :label="t('dialog.new_instance.url')">
-                            <InputGroupField v-model="newInstanceDialog.url" size="sm" readonly />
-                        </el-form-item>
+                        <Field>
+                            <FieldLabel>{{ t('dialog.new_instance.location') }}</FieldLabel>
+                            <FieldContent>
+                                <InputGroupField
+                                    v-model="newInstanceDialog.location"
+                                    size="sm"
+                                    readonly
+                                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                            </FieldContent>
+                        </Field>
+                        <Field>
+                            <FieldLabel>{{ t('dialog.new_instance.url') }}</FieldLabel>
+                            <FieldContent>
+                                <InputGroupField v-model="newInstanceDialog.url" size="sm" readonly />
+                            </FieldContent>
+                        </Field>
                     </template>
-                </el-form>
+                </FieldGroup>
             </el-tab-pane>
             <el-tab-pane name="Legacy" :label="t('dialog.new_instance.legacy')">
-                <el-form :model="newInstanceDialog" label-width="150px">
-                    <el-form-item :label="t('dialog.new_instance.access_type')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.accessType"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.accessType = value;
-                                    buildLegacyInstance();
-                                }
-                            ">
-                            <ToggleGroupItem value="public">{{
-                                t('dialog.new_instance.access_type_public')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="group">{{
-                                t('dialog.new_instance.access_type_group')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="friends+">{{
-                                t('dialog.new_instance.access_type_friend_plus')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="friends">{{
-                                t('dialog.new_instance.access_type_friend')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="invite+">{{
-                                t('dialog.new_instance.access_type_invite_plus')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="invite">{{
-                                t('dialog.new_instance.access_type_invite')
-                            }}</ToggleGroupItem>
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.group_access_type')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.groupAccessType"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.groupAccessType = value;
-                                    buildLegacyInstance();
-                                }
-                            ">
-                            <ToggleGroupItem value="members">{{
-                                t('dialog.new_instance.group_access_type_members')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="plus">{{
-                                t('dialog.new_instance.group_access_type_plus')
-                            }}</ToggleGroupItem>
-                            <ToggleGroupItem value="public">{{
-                                t('dialog.new_instance.group_access_type_public')
-                            }}</ToggleGroupItem>
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.region')">
-                        <ToggleGroup
-                            type="single"
-                            required
-                            variant="outline"
-                            size="sm"
-                            :model-value="newInstanceDialog.region"
-                            @update:model-value="
-                                (value) => {
-                                    newInstanceDialog.region = value;
-                                    buildLegacyInstance();
-                                }
-                            ">
-                            <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
-                            <ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
-                        </ToggleGroup>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.ageGate')">
-                        <Checkbox v-model="newInstanceDialog.ageGate" @update:modelValue="buildInstance" />
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.world_id')">
-                        <InputGroupField
-                            v-model="newInstanceDialog.worldId"
-                            size="sm"
-                            @click="$event.target.tagName === 'INPUT' && $event.target.select()"
-                            @change="buildLegacyInstance" />
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.instance_id')">
-                        <InputGroupField
-                            v-model="newInstanceDialog.instanceName"
-                            :placeholder="t('dialog.new_instance.instance_id_placeholder')"
-                            size="sm"
-                            @change="buildLegacyInstance" />
-                    </el-form-item>
-                    <el-form-item
+                <FieldGroup class="gap-4">
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.access_type') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.accessType"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.accessType = value;
+                                        buildLegacyInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem value="public">{{
+                                    t('dialog.new_instance.access_type_public')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="group">{{
+                                    t('dialog.new_instance.access_type_group')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="friends+">{{
+                                    t('dialog.new_instance.access_type_friend_plus')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="friends">{{
+                                    t('dialog.new_instance.access_type_friend')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="invite+">{{
+                                    t('dialog.new_instance.access_type_invite_plus')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="invite">{{
+                                    t('dialog.new_instance.access_type_invite')
+                                }}</ToggleGroupItem>
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.group_access_type') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.groupAccessType"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.groupAccessType = value;
+                                        buildLegacyInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem value="members">{{
+                                    t('dialog.new_instance.group_access_type_members')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="plus">{{
+                                    t('dialog.new_instance.group_access_type_plus')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="public">{{
+                                    t('dialog.new_instance.group_access_type_public')
+                                }}</ToggleGroupItem>
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.region') }}</FieldLabel>
+                        <FieldContent>
+                            <ToggleGroup
+                                type="single"
+                                required
+                                variant="outline"
+                                size="sm"
+                                :model-value="newInstanceDialog.region"
+                                @update:model-value="
+                                    (value) => {
+                                        newInstanceDialog.region = value;
+                                        buildLegacyInstance();
+                                    }
+                                ">
+                                <ToggleGroupItem value="US West">{{
+                                    t('dialog.new_instance.region_usw')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="US East">{{
+                                    t('dialog.new_instance.region_use')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="Europe">{{
+                                    t('dialog.new_instance.region_eu')
+                                }}</ToggleGroupItem>
+                                <ToggleGroupItem value="Japan">{{
+                                    t('dialog.new_instance.region_jp')
+                                }}</ToggleGroupItem>
+                            </ToggleGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.ageGate') }}</FieldLabel>
+                        <FieldContent>
+                            <Checkbox v-model="newInstanceDialog.ageGate" @update:modelValue="buildInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.world_id') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="newInstanceDialog.worldId"
+                                size="sm"
+                                @click="$event.target.tagName === 'INPUT' && $event.target.select()"
+                                @change="buildLegacyInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.instance_id') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="newInstanceDialog.instanceName"
+                                :placeholder="t('dialog.new_instance.instance_id_placeholder')"
+                                size="sm"
+                                @change="buildLegacyInstance" />
+                        </FieldContent>
+                    </Field>
+                    <Field
                         v-if="
                             newInstanceDialog.selectedTab === 'Legacy' &&
                             newInstanceDialog.accessType !== 'public' &&
                             newInstanceDialog.accessType !== 'group'
                         "
-                        :label="t('dialog.new_instance.instance_creator')">
-                        <VirtualCombobox
-                            v-model="newInstanceDialog.userId"
-                            :groups="creatorPickerGroups"
-                            :placeholder="t('dialog.new_instance.instance_creator_placeholder')"
-                            :search-placeholder="t('dialog.new_instance.instance_creator_placeholder')"
-                            :clearable="true"
-                            :close-on-select="true"
-                            :deselect-on-reselect="true"
-                            @change="buildLegacyInstance">
-                            <template #item="{ item, selected }">
-                                <div class="x-friend-item flex w-full items-center">
-                                    <template v-if="item.user">
-                                        <div class="avatar" :class="userStatusClass(item.user)">
-                                            <img :src="userImage(item.user)" loading="lazy" />
+                        class="items-start">
+                        <FieldLabel>{{ t('dialog.new_instance.instance_creator') }}</FieldLabel>
+                        <FieldContent>
+                            <VirtualCombobox
+                                v-model="newInstanceDialog.userId"
+                                :groups="creatorPickerGroups"
+                                :placeholder="t('dialog.new_instance.instance_creator_placeholder')"
+                                :search-placeholder="t('dialog.new_instance.instance_creator_placeholder')"
+                                :clearable="true"
+                                :close-on-select="true"
+                                :deselect-on-reselect="true"
+                                @change="buildLegacyInstance">
+                                <template #item="{ item, selected }">
+                                    <div class="x-friend-item flex w-full items-center">
+                                        <template v-if="item.user">
+                                            <div class="avatar" :class="userStatusClass(item.user)">
+                                                <img :src="userImage(item.user)" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span
+                                                    class="name"
+                                                    :style="{ color: item.user.$userColour }"
+                                                    v-text="item.user.displayName"></span>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <span v-text="item.label"></span>
+                                        </template>
+
+                                        <CheckIcon
+                                            :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
+                                    </div>
+                                </template>
+                            </VirtualCombobox>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="newInstanceDialog.accessType === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.group_id') }}</FieldLabel>
+                        <FieldContent>
+                            <VirtualCombobox
+                                v-model="newInstanceDialog.groupId"
+                                :groups="legacyGroupPickerGroups"
+                                :placeholder="t('dialog.new_instance.group_placeholder')"
+                                :search-placeholder="t('dialog.new_instance.group_placeholder')"
+                                :clearable="true"
+                                :close-on-select="true"
+                                :deselect-on-reselect="true"
+                                @change="buildLegacyInstance">
+                                <template #item="{ item, selected }">
+                                    <div class="x-friend-item flex w-full items-center">
+                                        <div class="avatar">
+                                            <img :src="item.iconUrl" loading="lazy" />
                                         </div>
                                         <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: item.user.$userColour }"
-                                                v-text="item.user.displayName"></span>
+                                            <span class="name" v-text="item.label"></span>
                                         </div>
-                                    </template>
-                                    <template v-else>
-                                        <span v-text="item.label"></span>
-                                    </template>
-
-                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                                </div>
-                            </template>
-                        </VirtualCombobox>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="newInstanceDialog.accessType === 'group'"
-                        :label="t('dialog.new_instance.group_id')">
-                        <VirtualCombobox
-                            v-model="newInstanceDialog.groupId"
-                            :groups="legacyGroupPickerGroups"
-                            :placeholder="t('dialog.new_instance.group_placeholder')"
-                            :search-placeholder="t('dialog.new_instance.group_placeholder')"
-                            :clearable="true"
-                            :close-on-select="true"
-                            :deselect-on-reselect="true"
-                            @change="buildLegacyInstance">
-                            <template #item="{ item, selected }">
-                                <div class="x-friend-item flex w-full items-center">
-                                    <div class="avatar">
-                                        <img :src="item.iconUrl" loading="lazy" />
+                                        <CheckIcon
+                                            :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
                                     </div>
-                                    <div class="detail">
-                                        <span class="name" v-text="item.label"></span>
-                                    </div>
-                                    <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                                </div>
-                            </template>
-                        </VirtualCombobox>
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.location')">
-                        <InputGroupField
-                            v-model="newInstanceDialog.location"
-                            size="sm"
-                            readonly
-                            @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                    </el-form-item>
-                    <el-form-item :label="t('dialog.new_instance.url')">
-                        <InputGroupField v-model="newInstanceDialog.url" size="sm" readonly />
-                    </el-form-item>
-                </el-form>
+                                </template>
+                            </VirtualCombobox>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.location') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="newInstanceDialog.location"
+                                size="sm"
+                                readonly
+                                @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.new_instance.url') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField v-model="newInstanceDialog.url" size="sm" readonly />
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
             </el-tab-pane>
         </el-tabs>
         <template v-if="newInstanceDialog.selectedTab === 'Normal'" #footer>
@@ -441,11 +508,12 @@
 </template>
 
 <script setup>
+    import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { computed, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { InputGroupField } from '@/components/ui/input-group';
-    import { Checkbox } from '@/components/ui/checkbox';
     import { Check as CheckIcon } from 'lucide-vue-next';
+    import { Checkbox } from '@/components/ui/checkbox';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index abcda3ac..7d1cdc3b 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -766,8 +766,8 @@
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { Ellipsis, RefreshCcw, Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
-    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { ElMessageBox } from 'element-plus';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/ui/field/Field.vue b/src/components/ui/field/Field.vue
new file mode 100644
index 00000000..7dc4854c
--- /dev/null
+++ b/src/components/ui/field/Field.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { fieldVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="field"
+        :data-orientation="orientation"
+        :class="cn(fieldVariants({ orientation }), props.class)">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/ui/field/FieldContent.vue b/src/components/ui/field/FieldContent.vue
new file mode 100644
index 00000000..29c786a3
--- /dev/null
+++ b/src/components/ui/field/FieldContent.vue
@@ -0,0 +1,15 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-content"
+        :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/ui/field/FieldDescription.vue b/src/components/ui/field/FieldDescription.vue
new file mode 100644
index 00000000..276822f2
--- /dev/null
+++ b/src/components/ui/field/FieldDescription.vue
@@ -0,0 +1,22 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <p
+        data-slot="field-description"
+        :class="
+            cn(
+                'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+                'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+                '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+                props.class
+            )
+        ">
+        <slot />
+    </p>
+</template>
diff --git a/src/components/ui/field/FieldError.vue b/src/components/ui/field/FieldError.vue
new file mode 100644
index 00000000..5967b5c5
--- /dev/null
+++ b/src/components/ui/field/FieldError.vue
@@ -0,0 +1,48 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        errors: { type: Array, required: false }
+    });
+
+    const content = computed(() => {
+        if (!props.errors || props.errors.length === 0) return null;
+
+        const uniqueErrors = [
+            ...new Map(
+                props.errors.filter(Boolean).map((error) => {
+                    const message = typeof error === 'string' ? error : error?.message;
+                    return [message, error];
+                })
+            ).values()
+        ];
+
+        if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+            return typeof uniqueErrors[0] === 'string' ? uniqueErrors[0] : uniqueErrors[0].message;
+        }
+
+        return uniqueErrors.map((error) => (typeof error === 'string' ? error : error?.message));
+    });
+</script>
+
+<template>
+    <div
+        v-if="$slots.default || content"
+        role="alert"
+        data-slot="field-error"
+        :class="cn('text-destructive text-sm font-normal', props.class)">
+        <slot v-if="$slots.default" />
+
+        <template v-else-if="typeof content === 'string'">
+            {{ content }}
+        </template>
+
+        <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+            <li v-for="(error, index) in content" :key="index">
+                {{ error }}
+            </li>
+        </ul>
+    </div>
+</template>
diff --git a/src/components/ui/field/FieldGroup.vue b/src/components/ui/field/FieldGroup.vue
new file mode 100644
index 00000000..90f96281
--- /dev/null
+++ b/src/components/ui/field/FieldGroup.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-group"
+        :class="
+            cn(
+                'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/ui/field/FieldLabel.vue b/src/components/ui/field/FieldLabel.vue
new file mode 100644
index 00000000..dfe78c8b
--- /dev/null
+++ b/src/components/ui/field/FieldLabel.vue
@@ -0,0 +1,23 @@
+<script setup>
+    import { Label } from '@/components/ui/label';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <Label
+        data-slot="field-label"
+        :class="
+            cn(
+                'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+                'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+                'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+                props.class
+            )
+        ">
+        <slot />
+    </Label>
+</template>
diff --git a/src/components/ui/field/FieldLegend.vue b/src/components/ui/field/FieldLegend.vue
new file mode 100644
index 00000000..0153b329
--- /dev/null
+++ b/src/components/ui/field/FieldLegend.vue
@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        variant: { type: String, required: false }
+    });
+</script>
+
+<template>
+    <legend
+        data-slot="field-legend"
+        :data-variant="variant"
+        :class="cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', props.class)">
+        <slot />
+    </legend>
+</template>
diff --git a/src/components/ui/field/FieldSeparator.vue b/src/components/ui/field/FieldSeparator.vue
new file mode 100644
index 00000000..aca99626
--- /dev/null
+++ b/src/components/ui/field/FieldSeparator.vue
@@ -0,0 +1,23 @@
+<script setup>
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-separator"
+        :data-content="!!$slots.default"
+        :class="cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)">
+        <Separator class="absolute inset-0 top-1/2" />
+        <span
+            v-if="$slots.default"
+            class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+            data-slot="field-separator-content">
+            <slot />
+        </span>
+    </div>
+</template>
diff --git a/src/components/ui/field/FieldSet.vue b/src/components/ui/field/FieldSet.vue
new file mode 100644
index 00000000..93e3095d
--- /dev/null
+++ b/src/components/ui/field/FieldSet.vue
@@ -0,0 +1,21 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <fieldset
+        data-slot="field-set"
+        :class="
+            cn(
+                'flex flex-col gap-6',
+                'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+                props.class
+            )
+        ">
+        <slot />
+    </fieldset>
+</template>
diff --git a/src/components/ui/field/FieldTitle.vue b/src/components/ui/field/FieldTitle.vue
new file mode 100644
index 00000000..d66eea21
--- /dev/null
+++ b/src/components/ui/field/FieldTitle.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-label"
+        :class="
+            cn(
+                'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/ui/field/index.js b/src/components/ui/field/index.js
new file mode 100644
index 00000000..f69aab3d
--- /dev/null
+++ b/src/components/ui/field/index.js
@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+export const fieldVariants = cva(
+    'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+    {
+        variants: {
+            orientation: {
+                vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+                horizontal: [
+                    'flex-row items-center',
+                    '[&>[data-slot=field-label]]:flex-auto',
+                    'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ],
+                responsive: [
+                    'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+                    '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                    '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ]
+            }
+        },
+        defaultVariants: {
+            orientation: 'vertical'
+        }
+    }
+);
+
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';
diff --git a/src/components/ui/form/FormControl.vue b/src/components/ui/form/FormControl.vue
new file mode 100644
index 00000000..28dc1b26
--- /dev/null
+++ b/src/components/ui/form/FormControl.vue
@@ -0,0 +1,17 @@
+<script setup>
+    import { Slot } from 'reka-ui';
+
+    import { useFormField } from './useFormField';
+
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+    <Slot
+        :id="formItemId"
+        data-slot="form-control"
+        :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+        :aria-invalid="!!error">
+        <slot />
+    </Slot>
+</template>
diff --git a/src/components/ui/form/FormDescription.vue b/src/components/ui/form/FormDescription.vue
new file mode 100644
index 00000000..d5503ab4
--- /dev/null
+++ b/src/components/ui/form/FormDescription.vue
@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+    <p :id="formDescriptionId" data-slot="form-description" :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </p>
+</template>
diff --git a/src/components/ui/form/FormItem.vue b/src/components/ui/form/FormItem.vue
new file mode 100644
index 00000000..04ff8812
--- /dev/null
+++ b/src/components/ui/form/FormItem.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+    import { provide } from 'vue';
+    import { useId } from 'reka-ui';
+
+    import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const id = useId();
+    provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+    <div data-slot="form-item" :class="cn('grid gap-2', props.class)">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/ui/form/FormLabel.vue b/src/components/ui/form/FormLabel.vue
new file mode 100644
index 00000000..3256d7d7
--- /dev/null
+++ b/src/components/ui/form/FormLabel.vue
@@ -0,0 +1,25 @@
+<script setup>
+    import { Label } from '@/components/ui/label';
+    import { cn } from '@/lib/utils';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        for: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const { error, formItemId } = useFormField();
+</script>
+
+<template>
+    <Label
+        data-slot="form-label"
+        :data-error="!!error"
+        :class="cn('data-[error=true]:text-destructive', props.class)"
+        :for="formItemId">
+        <slot />
+    </Label>
+</template>
diff --git a/src/components/ui/form/FormMessage.vue b/src/components/ui/form/FormMessage.vue
new file mode 100644
index 00000000..49e72a84
--- /dev/null
+++ b/src/components/ui/form/FormMessage.vue
@@ -0,0 +1,22 @@
+<script setup>
+    import { ErrorMessage } from 'vee-validate';
+    import { cn } from '@/lib/utils';
+    import { toValue } from 'vue';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+    <ErrorMessage
+        :id="formMessageId"
+        data-slot="form-message"
+        as="p"
+        :name="toValue(name)"
+        :class="cn('text-destructive text-sm', props.class)" />
+</template>
diff --git a/src/components/ui/form/index.js b/src/components/ui/form/index.js
new file mode 100644
index 00000000..5818a579
--- /dev/null
+++ b/src/components/ui/form/index.js
@@ -0,0 +1,11 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export {
+    Form,
+    Field as FormField,
+    FieldArray as FormFieldArray
+} from 'vee-validate';
diff --git a/src/components/ui/form/injectionKeys.js b/src/components/ui/form/injectionKeys.js
new file mode 100644
index 00000000..533eabd5
--- /dev/null
+++ b/src/components/ui/form/injectionKeys.js
@@ -0,0 +1 @@
+export const FORM_ITEM_INJECTION_KEY = Symbol();
diff --git a/src/components/ui/form/useFormField.js b/src/components/ui/form/useFormField.js
new file mode 100644
index 00000000..670d0197
--- /dev/null
+++ b/src/components/ui/form/useFormField.js
@@ -0,0 +1,31 @@
+import { computed, inject } from 'vue';
+import { FieldContextKey } from 'vee-validate';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+export function useFormField() {
+    const fieldContext = inject(FieldContextKey);
+    const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+    if (!fieldContext)
+        throw new Error('useFormField should be used within <FormField>');
+
+    const { name, errorMessage: error, meta } = fieldContext;
+    const id = fieldItemContext;
+
+    const fieldState = {
+        valid: computed(() => meta.valid),
+        isDirty: computed(() => meta.dirty),
+        isTouched: computed(() => meta.touched),
+        error
+    };
+
+    return {
+        id,
+        name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState
+    };
+}
diff --git a/src/components/ui/input-group/InputGroupButton.vue b/src/components/ui/input-group/InputGroupButton.vue
index e07b1f1d..aca37671 100644
--- a/src/components/ui/input-group/InputGroupButton.vue
+++ b/src/components/ui/input-group/InputGroupButton.vue
@@ -13,6 +13,7 @@
 
 <template>
     <Button
+        type="button"
         :data-size="props.size"
         :variant="props.variant"
         :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)">
diff --git a/src/components/ui/label/Label.vue b/src/components/ui/label/Label.vue
new file mode 100644
index 00000000..4d10970f
--- /dev/null
+++ b/src/components/ui/label/Label.vue
@@ -0,0 +1,28 @@
+<script setup>
+    import { Label } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        for: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Label
+        data-slot="label"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                props.class
+            )
+        ">
+        <slot />
+    </Label>
+</template>
diff --git a/src/components/ui/label/index.js b/src/components/ui/label/index.js
new file mode 100644
index 00000000..c98e59f8
--- /dev/null
+++ b/src/components/ui/label/index.js
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 6a55e5fa..54f3d4e1 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -42,21 +42,7 @@ export const useAuthStore = defineStore('Auth', () => {
         endpoint: '',
         websocket: '',
         saveCredentials: false,
-        lastUserLoggedIn: '',
-        rules: {
-            username: [
-                {
-                    required: true,
-                    trigger: 'blur'
-                }
-            ],
-            password: [
-                {
-                    required: true,
-                    trigger: 'blur'
-                }
-            ]
-        }
+        lastUserLoggedIn: ''
     });
 
     const enablePrimaryPasswordDialog = ref({
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index d951c9be..d58025ba 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -51,65 +51,77 @@
             <p class="mutual-graph__force-description">
                 {{ t('view.charts.mutual_friend.force_dialog.description') }}
             </p>
-            <el-form label-position="top" size="small" class="mutual-graph__force-form">
-                <el-form-item :label="t('view.charts.mutual_friend.force_dialog.repulsion')">
-                    <NumberField
-                        v-model="forceForm.repulsion"
-                        :step="1"
-                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input">
-                        <NumberFieldContent>
-                            <NumberFieldInput />
-                        </NumberFieldContent>
-                    </NumberField>
-                    <div class="mutual-graph__helper">
-                        {{ t('view.charts.mutual_friend.force_dialog.repulsion_help') }}
-                    </div>
-                </el-form-item>
-                <el-form-item :label="t('view.charts.mutual_friend.force_dialog.edge_length_min')">
-                    <NumberField
-                        v-model="forceForm.edgeLengthMin"
-                        :step="1"
-                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input">
-                        <NumberFieldContent>
-                            <NumberFieldInput />
-                        </NumberFieldContent>
-                    </NumberField>
-                    <div class="mutual-graph__helper">
-                        {{ t('view.charts.mutual_friend.force_dialog.edge_length_min_help') }}
-                    </div>
-                </el-form-item>
-                <el-form-item :label="t('view.charts.mutual_friend.force_dialog.edge_length_max')">
-                    <NumberField
-                        v-model="forceForm.edgeLengthMax"
-                        :step="1"
-                        :format-options="{ maximumFractionDigits: 0 }"
-                        class="mutual-graph__number-input">
-                        <NumberFieldContent>
-                            <NumberFieldInput />
-                        </NumberFieldContent>
-                    </NumberField>
-                    <div class="mutual-graph__helper">
-                        {{ t('view.charts.mutual_friend.force_dialog.edge_length_max_help') }}
-                    </div>
-                </el-form-item>
-                <el-form-item :label="t('view.charts.mutual_friend.force_dialog.gravity')">
-                    <NumberField
-                        v-model="forceForm.gravity"
-                        :max="1"
-                        :step="0.1"
-                        :format-options="{ maximumFractionDigits: 1 }"
-                        class="mutual-graph__number-input">
-                        <NumberFieldContent>
-                            <NumberFieldInput />
-                        </NumberFieldContent>
-                    </NumberField>
-                    <div class="mutual-graph__helper">
-                        {{ t('view.charts.mutual_friend.force_dialog.gravity_help') }}
-                    </div>
-                </el-form-item>
-            </el-form>
+            <FieldGroup class="mutual-graph__force-form">
+                <Field>
+                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.repulsion') }}</FieldLabel>
+                    <FieldContent>
+                        <NumberField
+                            v-model="forceForm.repulsion"
+                            :step="1"
+                            :format-options="{ maximumFractionDigits: 0 }"
+                            class="mutual-graph__number-input">
+                            <NumberFieldContent>
+                                <NumberFieldInput />
+                            </NumberFieldContent>
+                        </NumberField>
+                        <FieldDescription class="mutual-graph__helper">
+                            {{ t('view.charts.mutual_friend.force_dialog.repulsion_help') }}
+                        </FieldDescription>
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_min') }}</FieldLabel>
+                    <FieldContent>
+                        <NumberField
+                            v-model="forceForm.edgeLengthMin"
+                            :step="1"
+                            :format-options="{ maximumFractionDigits: 0 }"
+                            class="mutual-graph__number-input">
+                            <NumberFieldContent>
+                                <NumberFieldInput />
+                            </NumberFieldContent>
+                        </NumberField>
+                        <FieldDescription class="mutual-graph__helper">
+                            {{ t('view.charts.mutual_friend.force_dialog.edge_length_min_help') }}
+                        </FieldDescription>
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_max') }}</FieldLabel>
+                    <FieldContent>
+                        <NumberField
+                            v-model="forceForm.edgeLengthMax"
+                            :step="1"
+                            :format-options="{ maximumFractionDigits: 0 }"
+                            class="mutual-graph__number-input">
+                            <NumberFieldContent>
+                                <NumberFieldInput />
+                            </NumberFieldContent>
+                        </NumberField>
+                        <FieldDescription class="mutual-graph__helper">
+                            {{ t('view.charts.mutual_friend.force_dialog.edge_length_max_help') }}
+                        </FieldDescription>
+                    </FieldContent>
+                </Field>
+                <Field>
+                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.gravity') }}</FieldLabel>
+                    <FieldContent>
+                        <NumberField
+                            v-model="forceForm.gravity"
+                            :max="1"
+                            :step="0.1"
+                            :format-options="{ maximumFractionDigits: 1 }"
+                            class="mutual-graph__number-input">
+                            <NumberFieldContent>
+                                <NumberFieldInput />
+                            </NumberFieldContent>
+                        </NumberField>
+                        <FieldDescription class="mutual-graph__helper">
+                            {{ t('view.charts.mutual_friend.force_dialog.gravity_help') }}
+                        </FieldDescription>
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
 
             <template #footer>
                 <div class="mutual-graph__dialog-footer">
@@ -127,6 +139,7 @@
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+    import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { NumberField, NumberFieldContent, NumberFieldInput } from '@/components/ui/number-field';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 04af3b52..0670b649 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -16,71 +16,101 @@
             <div class="x-login-form-container">
                 <div>
                     <h2 style="font-weight: bold; text-align: center; margin: 0">{{ t('view.login.login') }}</h2>
-                    <el-form
-                        ref="loginFormRef"
-                        :model="loginForm"
-                        :rules="loginForm.rules"
-                        @submit.prevent="handleLogin()">
-                        <el-form-item
-                            :label="t('view.login.field.username')"
-                            prop="username"
-                            required
-                            style="display: block">
-                            <InputGroupField
-                                v-model="loginForm.username"
-                                name="username"
-                                :placeholder="t('view.login.field.username')"
-                                clearable />
-                        </el-form-item>
-                        <el-form-item
-                            :label="t('view.login.field.password')"
-                            prop="password"
-                            required
-                            style="display: block; margin-top: 10px">
-                            <InputGroupField
-                                v-model="loginForm.password"
-                                type="password"
-                                name="password"
-                                :placeholder="t('view.login.field.password')"
-                                clearable
-                                show-password />
-                        </el-form-item>
+                    <form id="login-form" @submit.prevent="onSubmit">
+                        <FieldGroup class="gap-3">
+                            <VeeField v-slot="{ field, errors }" name="username">
+                                <Field :data-invalid="!!errors.length">
+                                    <FieldLabel for="login-form-username">
+                                        {{ t('view.login.field.username') }}
+                                    </FieldLabel>
+                                    <FieldContent>
+                                        <InputGroupField
+                                            id="login-form-username"
+                                            :model-value="field.value"
+                                            name="username"
+                                            :placeholder="t('view.login.field.username')"
+                                            :aria-invalid="!!errors.length"
+                                            clearable
+                                            @update:modelValue="field.onChange"
+                                            @blur="field.onBlur" />
+                                        <FieldError v-if="errors.length" :errors="errors" />
+                                    </FieldContent>
+                                </Field>
+                            </VeeField>
+                            <VeeField v-slot="{ field, errors }" name="password">
+                                <Field :data-invalid="!!errors.length">
+                                    <FieldLabel for="login-form-password">
+                                        {{ t('view.login.field.password') }}
+                                    </FieldLabel>
+                                    <FieldContent>
+                                        <InputGroupField
+                                            id="login-form-password"
+                                            :model-value="field.value"
+                                            type="password"
+                                            name="password"
+                                            :placeholder="t('view.login.field.password')"
+                                            :aria-invalid="!!errors.length"
+                                            clearable
+                                            show-password
+                                            @update:modelValue="field.onChange"
+                                            @blur="field.onBlur" />
+                                        <FieldError v-if="errors.length" :errors="errors" />
+                                    </FieldContent>
+                                </Field>
+                            </VeeField>
+                        </FieldGroup>
                         <label class="inline-flex items-center gap-2 mr-2">
                             <Checkbox v-model="loginForm.saveCredentials" />
                             <span>{{ t('view.login.field.saveCredentials') }}</span>
                         </label>
                         <label class="inline-flex items-center gap-2" style="margin-top: 10px">
-                            <Checkbox v-model="enableCustomEndpoint" @update:modelValue="toggleCustomEndpoint" />
+                            <Checkbox v-model="enableCustomEndpoint" @update:modelValue="handleCustomEndpointToggle" />
                             <span>{{ t('view.login.field.devEndpoint') }}</span>
                         </label>
-                        <el-form-item
-                            v-if="enableCustomEndpoint"
-                            :label="t('view.login.field.endpoint')"
-                            prop="endpoint"
-                            style="margin-top: 10px">
-                            <InputGroupField
-                                v-model="loginForm.endpoint"
-                                name="endpoint"
-                                :placeholder="AppDebug.endpointDomainVrchat"
-                                clearable />
-                        </el-form-item>
-                        <el-form-item
-                            v-if="enableCustomEndpoint"
-                            :label="t('view.login.field.websocket')"
-                            prop="websocket"
-                            style="margin-top: 10px">
-                            <InputGroupField
-                                v-model="loginForm.websocket"
-                                name="websocket"
-                                :placeholder="AppDebug.websocketDomainVrchat"
-                                clearable />
-                        </el-form-item>
-                        <el-form-item>
-                            <Button class="mt-2" type="submit" size="lg" style="width: 100%">{{
-                                t('view.login.login')
-                            }}</Button>
-                        </el-form-item>
-                    </el-form>
+                        <FieldGroup v-if="enableCustomEndpoint" class="mt-3 gap-3">
+                            <VeeField v-slot="{ field, errors }" name="endpoint">
+                                <Field :data-invalid="!!errors.length">
+                                    <FieldLabel for="login-form-endpoint">
+                                        {{ t('view.login.field.endpoint') }}
+                                    </FieldLabel>
+                                    <FieldContent>
+                                        <InputGroupField
+                                            id="login-form-endpoint"
+                                            :model-value="field.value"
+                                            name="endpoint"
+                                            :placeholder="AppDebug.endpointDomainVrchat"
+                                            :aria-invalid="!!errors.length"
+                                            clearable
+                                            @update:modelValue="field.onChange"
+                                            @blur="field.onBlur" />
+                                        <FieldError v-if="errors.length" :errors="errors" />
+                                    </FieldContent>
+                                </Field>
+                            </VeeField>
+                            <VeeField v-slot="{ field, errors }" name="websocket">
+                                <Field :data-invalid="!!errors.length">
+                                    <FieldLabel for="login-form-websocket">
+                                        {{ t('view.login.field.websocket') }}
+                                    </FieldLabel>
+                                    <FieldContent>
+                                        <InputGroupField
+                                            id="login-form-websocket"
+                                            :model-value="field.value"
+                                            name="websocket"
+                                            :placeholder="AppDebug.websocketDomainVrchat"
+                                            :aria-invalid="!!errors.length"
+                                            clearable
+                                            @update:modelValue="field.onChange"
+                                            @blur="field.onBlur" />
+                                        <FieldError v-if="errors.length" :errors="errors" />
+                                    </FieldContent>
+                                </Field>
+                            </VeeField>
+                        </FieldGroup>
+                        <Field class="mt-2">
+                            <Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
+                        </Field>
+                    </form>
                     <Button
                         variant="Secondary"
                         size="lg"
@@ -147,14 +177,18 @@
 </template>
 
 <script setup>
+    import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
     import { CircleArrowDown, Route } from 'lucide-vue-next';
+    import { Field as VeeField, useForm } from 'vee-validate';
     import { useRoute, useRouter } from 'vue-router';
     import { Button } from '@/components/ui/button';
-    import { InputGroupField } from '@/components/ui/input-group';
     import { Checkbox } from '@/components/ui/checkbox';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
+    import { toTypedSchema } from '@vee-validate/zod';
     import { useI18n } from 'vue-i18n';
+    import { z } from 'zod';
 
     import { useAuthStore, useGeneralSettingsStore, useVRCXUpdaterStore } from '../../stores';
     import { openExternalLink, userImage } from '../../shared/utils';
@@ -171,8 +205,27 @@
 
     const { t } = useI18n();
 
-    const loginFormRef = ref(null);
     const savedCredentials = ref({});
+    const requiredMessage = 'Required';
+
+    const formSchema = toTypedSchema(
+        z.object({
+            username: z.string().min(1, requiredMessage),
+            password: z.string().min(1, requiredMessage),
+            endpoint: z.string().optional(),
+            websocket: z.string().optional()
+        })
+    );
+
+    const { handleSubmit, resetForm, setValues, values } = useForm({
+        validationSchema: formSchema,
+        initialValues: {
+            username: loginForm.value.username,
+            password: loginForm.value.password,
+            endpoint: loginForm.value.endpoint,
+            websocket: loginForm.value.websocket
+        }
+    });
 
     async function clickDeleteSavedLogin(userId) {
         await deleteSavedLogin(userId);
@@ -184,15 +237,22 @@
         await updateSavedCredentials();
     }
 
-    function handleLogin() {
-        if (loginFormRef.value) {
-            loginFormRef.value.validate(async (valid) => {
-                if (valid) {
-                    await login();
-                    await updateSavedCredentials();
-                }
-            });
-        }
+    const onSubmit = handleSubmit(async (formValues) => {
+        loginForm.value.username = formValues.username ?? '';
+        loginForm.value.password = formValues.password ?? '';
+        loginForm.value.endpoint = formValues.endpoint ?? '';
+        loginForm.value.websocket = formValues.websocket ?? '';
+        await login();
+        await updateSavedCredentials();
+    });
+
+    async function handleCustomEndpointToggle() {
+        await toggleCustomEndpoint();
+        setValues({
+            ...values,
+            endpoint: loginForm.value.endpoint,
+            websocket: loginForm.value.websocket
+        });
     }
 
     async function updateSavedCredentials() {
@@ -224,9 +284,29 @@
     });
 
     onBeforeUnmount(() => {
-        if (loginFormRef.value) {
-            loginFormRef.value.resetFields();
-        }
+        resetForm({
+            values: {
+                username: '',
+                password: '',
+                endpoint: '',
+                websocket: ''
+            }
+        });
+        loginForm.value.username = '';
+        loginForm.value.password = '';
+        loginForm.value.endpoint = '';
+        loginForm.value.websocket = '';
         savedCredentials.value = {};
     });
+
+    watch(
+        values,
+        (formValues) => {
+            loginForm.value.username = formValues.username ?? '';
+            loginForm.value.password = formValues.password ?? '';
+            loginForm.value.endpoint = formValues.endpoint ?? '';
+            loginForm.value.websocket = formValues.websocket ?? '';
+        },
+        { deep: true }
+    );
 </script>
diff --git a/src/views/Settings/dialogs/TranslationApiDialog.vue b/src/views/Settings/dialogs/TranslationApiDialog.vue
index e8d3562d..f489b0f7 100644
--- a/src/views/Settings/dialogs/TranslationApiDialog.vue
+++ b/src/views/Settings/dialogs/TranslationApiDialog.vue
@@ -21,65 +21,83 @@
             </Select>
         </div>
         <br />
-        <el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
-            <el-form-item :label="t('dialog.translation_api.mode')">
-                <Select :model-value="form.translationApiType" @update:modelValue="handleTranslationApiTypeChange">
-                    <SelectTrigger size="sm" style="width: 100%">
-                        <SelectValue :placeholder="t('dialog.translation_api.mode')" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
-                                {{ t('dialog.translation_api.mode_google') }}
-                            </SelectItem>
-                            <SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
-                                {{ t('dialog.translation_api.mode_openai') }}
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </el-form-item>
-        </el-form>
+        <FieldGroup class="mb-3">
+            <Field>
+                <FieldLabel>{{ t('dialog.translation_api.mode') }}</FieldLabel>
+                <FieldContent>
+                    <Select :model-value="form.translationApiType" @update:modelValue="handleTranslationApiTypeChange">
+                        <SelectTrigger size="sm" style="width: 100%">
+                            <SelectValue :placeholder="t('dialog.translation_api.mode')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
+                                    {{ t('dialog.translation_api.mode_google') }}
+                                </SelectItem>
+                                <SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
+                                    {{ t('dialog.translation_api.mode_openai') }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </FieldContent>
+            </Field>
+        </FieldGroup>
 
         <template v-if="form.translationApiType === 'google'">
-            <el-form label-position="top" label-width="120px" size="small">
-                <el-form-item :label="t('dialog.translation_api.description')">
-                    <InputGroupField
-                        v-model="form.translationApiKey"
-                        type="password"
-                        show-password
-                        placeholder="AIzaSy..."
-                        clearable />
-                </el-form-item>
-            </el-form>
+            <FieldGroup>
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.description') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupField
+                            v-model="form.translationApiKey"
+                            type="password"
+                            show-password
+                            placeholder="AIzaSy..."
+                            clearable />
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
         </template>
 
         <template v-if="form.translationApiType === 'openai'">
-            <el-form label-position="top" label-width="120px" size="small">
-                <el-form-item :label="t('dialog.translation_api.openai.endpoint')">
-                    <InputGroupField
-                        v-model="form.translationApiEndpoint"
-                        placeholder="https://api.openai.com/v1/chat/completions"
-                        clearable />
-                </el-form-item>
+            <FieldGroup>
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.openai.endpoint') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupField
+                            v-model="form.translationApiEndpoint"
+                            placeholder="https://api.openai.com/v1/chat/completions"
+                            clearable />
+                    </FieldContent>
+                </Field>
 
-                <el-form-item :label="t('dialog.translation_api.openai.api_key')">
-                    <InputGroupField
-                        v-model="form.translationApiKey"
-                        type="password"
-                        show-password
-                        placeholder="sk-..."
-                        clearable />
-                </el-form-item>
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.openai.api_key') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupField
+                            v-model="form.translationApiKey"
+                            type="password"
+                            show-password
+                            placeholder="sk-..."
+                            clearable />
+                    </FieldContent>
+                </Field>
 
-                <el-form-item :label="t('dialog.translation_api.openai.model')">
-                    <InputGroupField v-model="form.translationApiModel" clearable />
-                </el-form-item>
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.openai.model') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupField v-model="form.translationApiModel" clearable />
+                    </FieldContent>
+                </Field>
 
-                <el-form-item :label="t('dialog.translation_api.openai.prompt_optional')">
-                    <InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
-                </el-form-item>
-            </el-form>
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.openai.prompt_optional') }}</FieldLabel>
+                    <FieldContent>
+                        <InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
         </template>
 
         <template #footer>
@@ -94,14 +112,14 @@
                     ">
                     {{ t('dialog.translation_api.guide') }}
                 </Button>
+                <Button
+                    variant="outline"
+                    class="mr-2"
+                    v-if="form.translationApiType === 'openai'"
+                    @click="testOpenAiTranslation">
+                    {{ t('dialog.translation_api.test') }}
+                </Button>
                 <div>
-                    <Button
-                        variant="secondary"
-                        class="mr-2"
-                        v-if="form.translationApiType === 'openai'"
-                        @click="testOpenAiTranslation">
-                        {{ t('dialog.translation_api.test') }}
-                    </Button>
                     <Button style="margin-left: auto" @click="saveTranslationApiConfig">
                         {{ t('dialog.translation_api.save') }}
                     </Button>
@@ -113,9 +131,10 @@
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
+    import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { reactive, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 2a8f8062..f9d987c5 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -312,9 +312,9 @@
     .x-link:hover {
         text-decoration: none;
     }
-    .x-link:hover span {
+    /* .x-link:hover span {
         text-decoration: underline;
-    }
+    } */
     .is-rotated {
         transform: rotate(90deg);
     }