diff --git a/next-ui/.storybook/preview.ts b/next-ui/.storybook/preview.ts
index 40fa9edb..f49ee966 100644
--- a/next-ui/.storybook/preview.ts
+++ b/next-ui/.storybook/preview.ts
@@ -9,6 +9,7 @@ import { createPinia } from 'pinia'
 import { PiniaColada } from '@pinia/colada'
 import { PiniaColadaAutoRefetch } from '@pinia/colada-plugin-auto-refetch'
 import { vueIntl } from '@/plugins/vue-intl'
+import 'virtual:uno.css'
 
 initialize(
   {
diff --git a/next-ui/dir2json.d.ts b/next-ui/dir2json.d.ts
index 62b99521..b74ff1ef 100644
--- a/next-ui/dir2json.d.ts
+++ b/next-ui/dir2json.d.ts
@@ -4,7 +4,9 @@
 // noinspection JSUnusedGlobalSymbols
 // Auto generated by vite-plugin-dir2json
 declare module "*i18n?dir2json&ext=.json&1" {
-  const json: {};
+  const json: {
+  "en": string;
+};
   export default json;
 }
 
diff --git a/next-ui/eslint.config.ts b/next-ui/eslint.config.ts
index 04f1ca4c..0dc7ba3a 100644
--- a/next-ui/eslint.config.ts
+++ b/next-ui/eslint.config.ts
@@ -1,5 +1,3 @@
-import storybook from 'eslint-plugin-storybook'
-
 /**
  * .eslint.js
  *
@@ -10,6 +8,7 @@ import pluginVue from 'eslint-plugin-vue'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import formatjs from 'eslint-plugin-formatjs'
 import eslintConfigPrettier from 'eslint-config-prettier'
+import storybook from 'eslint-plugin-storybook'
 
 export default defineConfigWithVueTs(
   {
diff --git a/next-ui/package-lock.json b/next-ui/package-lock.json
index b786116d..1cc66f54 100644
--- a/next-ui/package-lock.json
+++ b/next-ui/package-lock.json
@@ -35,6 +35,8 @@
         "@testing-library/vue": "^8.1.0",
         "@tsconfig/node22": "^22.0.2",
         "@types/node": "^24.0.4",
+        "@unocss/eslint-config": "^66.3.1",
+        "@unocss/preset-icons": "^66.3.1",
         "@vitejs/plugin-vue": "^5.2.4",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
@@ -58,9 +60,9 @@
         "sass-embedded": "^1.89.2",
         "storybook": "^9.0.13",
         "typescript": "^5.8.3",
+        "unocss": "^66.3.1",
         "unplugin-auto-import": "^19.3.0",
         "unplugin-fonts": "^1.1.1",
-        "unplugin-icons": "^22.1.0",
         "unplugin-vue-components": "^28.7.0",
         "unplugin-vue-router": "^0.12.0",
         "vite": "^6.3.5",
@@ -2116,6 +2118,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@quansync/fs": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@quansync/fs/-/fs-0.1.3.tgz",
+      "integrity": "sha512-G0OnZbMWEs5LhDyqy2UL17vGhSVHkQIfVojMtEWVenvj0V5S84VBgy86kJIuNsGDp2p7sTKlpSIpBUWdC35OKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.10"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/@redocly/ajv": {
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/@redocly/ajv/-/ajv-8.11.2.tgz",
@@ -3259,6 +3277,563 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@unocss/astro": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/astro/-/astro-66.3.1.tgz",
+      "integrity": "sha512-Jsx7Z4/aeiIn7wpDHYgoORk+Y7G0q6Gpt2NnJreS60Hfxa+0ru0KfQxs3A1f8NzSXqzf5FijtqOh2CdBiYsfFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/reset": "66.3.1",
+        "@unocss/vite": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@unocss/cli": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/cli/-/cli-66.3.1.tgz",
+      "integrity": "sha512-fuiGIDFLuAytj3FsrOZjzM4JKRMvL/e+14HR+6FEYt0NDkUBpeP4vrLKX63sJ0Vd9gUXLfUibYkFPANY0qbj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@unocss/config": "66.3.1",
+        "@unocss/core": "66.3.1",
+        "@unocss/preset-uno": "66.3.1",
+        "cac": "^6.7.14",
+        "chokidar": "^3.6.0",
+        "colorette": "^2.0.20",
+        "consola": "^3.4.2",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "tinyglobby": "^0.2.14",
+        "unplugin-utils": "^0.2.4"
+      },
+      "bin": {
+        "unocss": "bin/unocss.mjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/cli/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@unocss/cli/node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@unocss/cli/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@unocss/cli/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@unocss/cli/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/@unocss/config": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/config/-/config-66.3.1.tgz",
+      "integrity": "sha512-7gUsp7GgxWVOJr5Db8VRAUn5xq9JPhfofeaX/V/frMtXCYpKsNghfDquEu79iptBMC15vQopal09wnN6zYJWxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "unconfig": "^7.3.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/core": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/core/-/core-66.3.1.tgz",
+      "integrity": "sha512-a9Fbe+g4ub+YIGbnX3n6bNG8QKgQ7b/666atEZ1PQOd8PfzExN9v22OWc8SxOtn6ooyfYJcMavIf26qLasMCrg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/eslint-config": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/eslint-config/-/eslint-config-66.3.1.tgz",
+      "integrity": "sha512-gOGojNwITdhTORP+9rZ532bPwPN2kQyi8ZqOqHLq98FlVFdswaLlw1uyNto6aQokXf+WnfAUNECRHbC0ji2UeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/eslint-plugin": "66.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/eslint-plugin": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/eslint-plugin/-/eslint-plugin-66.3.1.tgz",
+      "integrity": "sha512-L2gM5XpLyLvfHaE9gMzB7B2UsRLKdCYqPxOHURzxyi8gXZeu7K1AH4XyMKD9ScC5Y5Df8fMITlS1ID7N1Xik7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "^8.35.0",
+        "@unocss/config": "66.3.1",
+        "@unocss/core": "66.3.1",
+        "@unocss/rule-utils": "66.3.1",
+        "magic-string": "^0.30.17",
+        "synckit": "^0.11.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/extractor-arbitrary-variants": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/extractor-arbitrary-variants/-/extractor-arbitrary-variants-66.3.1.tgz",
+      "integrity": "sha512-fMVJ7ha/2DZ4FycyCJub2sPuCMsHuXT+OMAW/C9pA4KT50InvlzphAtVM67RVQA1iuQA2S042ghYaci8hLVPIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/inspector": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/inspector/-/inspector-66.3.1.tgz",
+      "integrity": "sha512-9D9+GLgw3iLAa1cGMmk/i67xOnwpRxBJZf/CcD7hXwng/Y2qA+BwCk6+kwj7UbkDr9Ojae4AuKn65n5MJmzUaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/rule-utils": "66.3.1",
+        "colorette": "^2.0.20",
+        "gzip-size": "^6.0.0",
+        "sirv": "^3.0.1",
+        "vue-flow-layout": "^0.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/inspector/node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@unocss/postcss": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/postcss/-/postcss-66.3.1.tgz",
+      "integrity": "sha512-Ubl1dcohDFItXuzlfwu2zQo55BL+rTrIw9x0F0EK+9+cG64SmwRJOf8fT8QwIKVgVLFOWud/22loE5P2/WBTmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/config": "66.3.1",
+        "@unocss/core": "66.3.1",
+        "@unocss/rule-utils": "66.3.1",
+        "css-tree": "^3.1.0",
+        "postcss": "^8.5.6",
+        "tinyglobby": "^0.2.14"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/@unocss/preset-attributify": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-attributify/-/preset-attributify-66.3.1.tgz",
+      "integrity": "sha512-MQQ/D2KNblNMMot9CBC9Ire4euPCLG8rl2rEApk/ac2pX+wurNav8D64QrE6ePPuDLLWSM79X3BXY4MRYk7yKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-icons": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-icons/-/preset-icons-66.3.1.tgz",
+      "integrity": "sha512-/YbX/17XIPeJfK3OIyBHnYs9nQgvCt0dNj6i42+ajRcvTFkDS1v5m3kFiExIfkMDvpfsl8t34zNugyM4piDepw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/utils": "^2.3.0",
+        "@unocss/core": "66.3.1",
+        "ofetch": "^1.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-mini": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-mini/-/preset-mini-66.3.1.tgz",
+      "integrity": "sha512-Zq5z57Ibyu3fOvn0bUujJHK7jpoUjXvXTCSqepsk134UVVYosJojgEcmnwVpDcvxY9+ydOe9/8OPQ26ZXzFd3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/extractor-arbitrary-variants": "66.3.1",
+        "@unocss/rule-utils": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-tagify": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-tagify/-/preset-tagify-66.3.1.tgz",
+      "integrity": "sha512-/ojg9r+K+W2x3DX12DgNQWD2RfPU2OJocP96iUjMnaTVvgweUqfaUXfGvhVsYe8hPjucw8nqGGZ6U8NHAnLyUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-typography": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-typography/-/preset-typography-66.3.1.tgz",
+      "integrity": "sha512-0fE3NG3uguJ1UwS5vmKTbUYmIafClrjG517kn0xxwLQMcvLYgitZn7LU6sN/3HgRZLYNy+V/KxEHD28i4A0TMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/preset-mini": "66.3.1",
+        "@unocss/rule-utils": "66.3.1"
+      }
+    },
+    "node_modules/@unocss/preset-uno": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-uno/-/preset-uno-66.3.1.tgz",
+      "integrity": "sha512-yVyjjt8vFYDnRL9UyaCt7dLPhclsgSjeIhe3sv/5fseyW9B3xorddOgnASxHr7QBoxOqVgNFudaIwe9L7/8Vsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/preset-wind3": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-web-fonts": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-web-fonts/-/preset-web-fonts-66.3.1.tgz",
+      "integrity": "sha512-aZQCPo11mOLx+JNdQlslFAtKB2Q3Aef9pAtk1WvqCFboErKFaoppaRThciBRM0GqqiNOHAplplw5lzHF6+lzbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "ofetch": "^1.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-wind": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-wind/-/preset-wind-66.3.1.tgz",
+      "integrity": "sha512-gu74NXejsc/9BA02Y3l9iZUx6J6Fcff9LtsMOzttGxPyJLLqjMoXRzfUbeKbB1nCgEKCrXgr4UciPnstngVjmg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/preset-wind3": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-wind3": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-wind3/-/preset-wind3-66.3.1.tgz",
+      "integrity": "sha512-1WUrhK/4uOmOjNC1/XwTvn/zS3SEnRNeMbp76y8CQiM6K/2L9wVp0XXhecrQ213vZixMG8zmbvIsZa/d4Di5ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/preset-mini": "66.3.1",
+        "@unocss/rule-utils": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/preset-wind4": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-wind4/-/preset-wind4-66.3.1.tgz",
+      "integrity": "sha512-E02mA4wq2d/+bTvDl3AvDfOz9XI3c7lM8XBjScJ2eg50T1Cor4HwNtmw3N2NSvZK7oyU0EzynIX1+PdNVCJtFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/extractor-arbitrary-variants": "66.3.1",
+        "@unocss/rule-utils": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/reset": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/reset/-/reset-66.3.1.tgz",
+      "integrity": "sha512-XZdzIu4as1ZJ/dblWhBY+aGcoRLCXYewZg/lQOFVxq0tEn5+P3GUflY0HpsJrELxtt9oRSM9nT/f/fdqPtr/GQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/rule-utils": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/rule-utils/-/rule-utils-66.3.1.tgz",
+      "integrity": "sha512-URpCuWWRc+KfBZrnISiKaRO4R/XvxuEw/kHnv2JbhkSavdO0t0R+Rf/ACSKujmGnqpYshed15Q/BtU6YhFjZ5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "^66.3.1",
+        "magic-string": "^0.30.17"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/transformer-attributify-jsx": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-attributify-jsx/-/transformer-attributify-jsx-66.3.1.tgz",
+      "integrity": "sha512-bNkT+OxvZnADkPTpHptO7I6CvghlAR9SOcAZ32YHEzHlSnPgrSwmgte2+gMCGSncDmC16nsFERhhbJUV7ETxYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/transformer-compile-class": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-compile-class/-/transformer-compile-class-66.3.1.tgz",
+      "integrity": "sha512-JaybUxOLSDHgdoG3FRGSvDXirY0XvyfwDAgzJ9r/RkMV7cCT6Ak64/MF5mrEcqNoxbIm4DNSiKatjoEKSIfmqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/transformer-directives": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-directives/-/transformer-directives-66.3.1.tgz",
+      "integrity": "sha512-AeozMJXZ1Vl0+W52dXFafK0ZsEiasyQeZXHFd+L7vrMod1CTVunNX3npYytkuPuyS941uj7s1gY4ycx0dY6Isg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1",
+        "@unocss/rule-utils": "66.3.1",
+        "css-tree": "^3.1.0"
+      }
+    },
+    "node_modules/@unocss/transformer-variant-group": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-variant-group/-/transformer-variant-group-66.3.1.tgz",
+      "integrity": "sha512-vn4uxb0YDSRhLgBZ1LrwzlsKEb9eV0PVil7+czcga4JV97O62DeiojWGlIBckPkqmKt9IyATjpBZhYci410hnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/core": "66.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@unocss/vite": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/@unocss/vite/-/vite-66.3.1.tgz",
+      "integrity": "sha512-saf3KPlGGUhS8NP7Dt/nQpplNTHug5uMRM2gOBijtuCwb+ytt4pGKqhpqPnUzm2whKez8VKNxAnTMQgszG2rHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@unocss/config": "66.3.1",
+        "@unocss/core": "66.3.1",
+        "@unocss/inspector": "66.3.1",
+        "chokidar": "^3.6.0",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "tinyglobby": "^0.2.14",
+        "unplugin-utils": "^0.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/@unocss/vite/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@unocss/vite/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@unocss/vite/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@unocss/vite/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -4646,6 +5221,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -4924,6 +5513,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -5879,6 +6475,22 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/happy-dom": {
       "version": "18.0.1",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-18.0.1.tgz",
@@ -7124,6 +7736,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -7586,6 +8205,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ofetch": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz",
+      "integrity": "sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "destr": "^2.0.3",
+        "node-fetch-native": "^1.6.4",
+        "ufo": "^1.5.4"
+      }
+    },
     "node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
@@ -9930,6 +10561,22 @@
       "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
       "license": "MIT"
     },
+    "node_modules/unconfig": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/unconfig/-/unconfig-7.3.2.tgz",
+      "integrity": "sha512-nqG5NNL2wFVGZ0NA/aCFw0oJ2pxSf1lwg4Z5ill8wd7K4KX/rQbHlwbh+bjctXL5Ly1xtzHenHGOK0b+lG6JVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@quansync/fs": "^0.1.1",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "quansync": "^0.2.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/unctx": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.4.1.tgz",
@@ -10006,6 +10653,52 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unocss": {
+      "version": "66.3.1",
+      "resolved": "https://registry.npmjs.org/unocss/-/unocss-66.3.1.tgz",
+      "integrity": "sha512-BlDiaVd6EWGjicbV+c4OX4pIHde87aNFImvD/O//vTc+LhB+gKpyFhaH1sEk/cwuvmO4qJgS9RtZROdduv4+gQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@unocss/astro": "66.3.1",
+        "@unocss/cli": "66.3.1",
+        "@unocss/core": "66.3.1",
+        "@unocss/postcss": "66.3.1",
+        "@unocss/preset-attributify": "66.3.1",
+        "@unocss/preset-icons": "66.3.1",
+        "@unocss/preset-mini": "66.3.1",
+        "@unocss/preset-tagify": "66.3.1",
+        "@unocss/preset-typography": "66.3.1",
+        "@unocss/preset-uno": "66.3.1",
+        "@unocss/preset-web-fonts": "66.3.1",
+        "@unocss/preset-wind": "66.3.1",
+        "@unocss/preset-wind3": "66.3.1",
+        "@unocss/preset-wind4": "66.3.1",
+        "@unocss/transformer-attributify-jsx": "66.3.1",
+        "@unocss/transformer-compile-class": "66.3.1",
+        "@unocss/transformer-directives": "66.3.1",
+        "@unocss/transformer-variant-group": "66.3.1",
+        "@unocss/vite": "66.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@unocss/webpack": "66.3.1",
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@unocss/webpack": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unplugin": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
@@ -10126,51 +10819,6 @@
         "node": ">=18.12.0"
       }
     },
-    "node_modules/unplugin-icons": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-22.1.0.tgz",
-      "integrity": "sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@antfu/install-pkg": "^1.0.0",
-        "@iconify/utils": "^2.3.0",
-        "debug": "^4.4.0",
-        "local-pkg": "^1.0.0",
-        "unplugin": "^2.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@svgr/core": ">=7.0.0",
-        "@svgx/core": "^1.0.1",
-        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
-        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
-        "vue-template-compiler": "^2.6.12",
-        "vue-template-es2015-compiler": "^1.9.0"
-      },
-      "peerDependenciesMeta": {
-        "@svgr/core": {
-          "optional": true
-        },
-        "@svgx/core": {
-          "optional": true
-        },
-        "@vue/compiler-sfc": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue-template-compiler": {
-          "optional": true
-        },
-        "vue-template-es2015-compiler": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/unplugin-utils": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
@@ -10753,6 +11401,16 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-flow-layout": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/vue-flow-layout/-/vue-flow-layout-0.1.1.tgz",
+      "integrity": "sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.4.37"
+      }
+    },
     "node_modules/vue-inbrowser-compiler-independent-utils": {
       "version": "4.71.1",
       "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-independent-utils/-/vue-inbrowser-compiler-independent-utils-4.71.1.tgz",
diff --git a/next-ui/package.json b/next-ui/package.json
index 104ec202..a12cf52f 100644
--- a/next-ui/package.json
+++ b/next-ui/package.json
@@ -52,6 +52,8 @@
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^24.0.4",
+    "@unocss/eslint-config": "^66.3.1",
+    "@unocss/preset-icons": "^66.3.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
@@ -75,9 +77,9 @@
     "sass-embedded": "^1.89.2",
     "storybook": "^9.0.13",
     "typescript": "^5.8.3",
+    "unocss": "^66.3.1",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-fonts": "^1.1.1",
-    "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.7.0",
     "unplugin-vue-router": "^0.12.0",
     "vite": "^6.3.5",
diff --git a/next-ui/src/auto-imports.d.ts b/next-ui/src/auto-imports.d.ts
index 5c7eea85..e4f89c5f 100644
--- a/next-ui/src/auto-imports.d.ts
+++ b/next-ui/src/auto-imports.d.ts
@@ -57,7 +57,6 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
   const useId: typeof import('vue')['useId']
-  const useLink: (typeof import('vue-router'))['useLink']
   const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
diff --git a/next-ui/src/components/BuildCommit.vue b/next-ui/src/components/BuildCommit.vue
index 781e3db7..a28f0564 100644
--- a/next-ui/src/components/BuildCommit.vue
+++ b/next-ui/src/components/BuildCommit.vue
@@ -1,7 +1,7 @@
 <template>
   <v-btn
     :loading="isLoading"
-    :prepend-icon="mdiSourceCommit"
+    prepend-icon="i-mdi:source-commit"
     variant="text"
     color="grey"
     size="small"
@@ -14,7 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiSourceCommit from '~icons/mdi/source-commit'
 import { useActuatorInfo } from '@/colada/queries/actuator-info'
 import { commonMessages } from '@/utils/i18n/common-messages'
 
diff --git a/next-ui/src/components/BuildVersion.vue b/next-ui/src/components/BuildVersion.vue
index 296ab820..30316936 100644
--- a/next-ui/src/components/BuildVersion.vue
+++ b/next-ui/src/components/BuildVersion.vue
@@ -6,7 +6,7 @@
   >
     <v-btn
       :loading="isLoading"
-      :prepend-icon="mdiTagOutline"
+      prepend-icon="i-mdi:tag-outline"
       variant="text"
       color="grey"
       size="small"
@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiTagOutline from '~icons/mdi/tag-outline'
 import { useAppReleases } from '@/colada/queries/app-releases'
 import { commonMessages } from '@/utils/i18n/common-messages'
 
diff --git a/next-ui/src/components/HelloWorld.vue b/next-ui/src/components/HelloWorld.vue
index 684ceafe..85d9f4a9 100644
--- a/next-ui/src/components/HelloWorld.vue
+++ b/next-ui/src/components/HelloWorld.vue
@@ -18,7 +18,7 @@
             class="py-4"
             color="surface-variant"
             image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
+            prepend-icon="i-mdi-rocket-launch-outline"
             rounded="lg"
             variant="outlined"
           >
@@ -57,11 +57,11 @@
 
         <v-col cols="6">
           <v-card
-            append-icon="mdi-open-in-new"
+            append-icon="i-mdi-open-in-new"
             class="py-4"
             color="surface-variant"
             href="https://vuetifyjs.com/"
-            prepend-icon="mdi-text-box-outline"
+            prepend-icon="i-mdi-text-box-outline"
             rel="noopener noreferrer"
             rounded="lg"
             subtitle="Learn about all things Vuetify in our documentation."
@@ -81,11 +81,11 @@
 
         <v-col cols="6">
           <v-card
-            append-icon="mdi-open-in-new"
+            append-icon="i-mdi-open-in-new"
             class="py-4"
             color="surface-variant"
             href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            prepend-icon="mdi-star-circle-outline"
+            prepend-icon="i-mdi-star-circle-outline"
             rel="noopener noreferrer"
             rounded="lg"
             subtitle="Explore available framework Features."
@@ -105,11 +105,11 @@
 
         <v-col cols="6">
           <v-card
-            append-icon="mdi-open-in-new"
+            append-icon="i-mdi-open-in-new"
             class="py-4"
             color="surface-variant"
             href="https://vuetifyjs.com/components/all"
-            prepend-icon="mdi-widgets-outline"
+            prepend-icon="i-mdi-widgets-outline"
             rel="noopener noreferrer"
             rounded="lg"
             subtitle="Discover components in the API Explorer."
@@ -129,11 +129,11 @@
 
         <v-col cols="6">
           <v-card
-            append-icon="mdi-open-in-new"
+            append-icon="i-mdi-open-in-new"
             class="py-4"
             color="surface-variant"
             href="https://discord.vuetifyjs.com"
-            prepend-icon="mdi-account-group-outline"
+            prepend-icon="i-mdi-account-group-outline"
             rel="noopener noreferrer"
             rounded="lg"
             subtitle="Connect with Vuetify developers."
diff --git a/next-ui/src/components/LocaleSelector.vue b/next-ui/src/components/LocaleSelector.vue
index 1e0c0094..ff28be0a 100644
--- a/next-ui/src/components/LocaleSelector.vue
+++ b/next-ui/src/components/LocaleSelector.vue
@@ -3,7 +3,7 @@
     <template #activator="{ props }">
       <v-btn
         v-bind="props"
-        :icon="mdiTranslate"
+        icon="i-mdi:translate"
       />
     </template>
 
@@ -49,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiTranslate from '~icons/mdi/translate'
 import { availableLocales, currentLocale, setLocale } from '@/utils/i18n/locale-helper'
 
 const locales = Object.entries(availableLocales).map(([k, v]) => ({
diff --git a/next-ui/src/components/ThemeSelector.vue b/next-ui/src/components/ThemeSelector.vue
index 70c52da3..82dd81f9 100644
--- a/next-ui/src/components/ThemeSelector.vue
+++ b/next-ui/src/components/ThemeSelector.vue
@@ -6,9 +6,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiWeatherSunny from '~icons/mdi/weather-sunny'
-import mdiWeatherNight from '~icons/mdi/weather-night'
-import mdiThemeLightDark from '~icons/mdi/theme-light-dark'
 import { useAppStore } from '@/stores/app'
 
 const appStore = useAppStore()
@@ -16,20 +13,20 @@ const appStore = useAppStore()
 const themes = [
   {
     value: 'light',
-    icon: mdiWeatherSunny,
+    icon: 'i-mdi:weather-sunny',
   },
   {
     value: 'dark',
-    icon: mdiWeatherNight,
+    icon: 'i-mdi:weather-night',
   },
   {
     value: 'system',
-    icon: mdiThemeLightDark,
+    icon: 'i-mdi:theme-light-dark',
   },
 ]
 
 const themeIcon = computed(
-  () => themes.find((x) => x.value === appStore.theme)?.icon || mdiThemeLightDark,
+  () => themes.find((x) => x.value === appStore.theme)?.icon || 'i-mdi:theme-light-dark',
 )
 
 function cycleTheme() {
diff --git a/next-ui/src/components/app/drawer/Footer.vue b/next-ui/src/components/app/drawer/Footer.vue
index 7eb35623..fe13ba0b 100644
--- a/next-ui/src/components/app/drawer/Footer.vue
+++ b/next-ui/src/components/app/drawer/Footer.vue
@@ -3,7 +3,7 @@
   <div class="d-flex align-center text-caption text-medium-emphasis pa-2">
     <div class="d-flex ms-auto">
       <v-btn
-        :prepend-icon="mdiHelpCircleOutline"
+        prepend-icon="i-mdi:help-circle-outline"
         variant="text"
         color="grey"
         size="small"
@@ -34,7 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiHelpCircleOutline from '~icons/mdi/help-circle-outline'
 import { useCurrentUser } from '@/colada/queries/current-user'
 
 const { isAdmin } = useCurrentUser()
diff --git a/next-ui/src/components/app/drawer/menu/Account.vue b/next-ui/src/components/app/drawer/menu/Account.vue
index 108c1f41..92691b7e 100644
--- a/next-ui/src/components/app/drawer/menu/Account.vue
+++ b/next-ui/src/components/app/drawer/menu/Account.vue
@@ -10,7 +10,7 @@
             id: 'od545m',
           })
         "
-        :prepend-icon="mdiAccount"
+        prepend-icon="i-mdi:account"
       />
     </template>
 
@@ -57,9 +57,7 @@
   </v-list-group>
 </template>
 
-<script setup lang="ts">
-import mdiAccount from '~icons/mdi/account'
-</script>
+<script setup lang="ts"></script>
 
 <script lang="ts"></script>
 
diff --git a/next-ui/src/components/app/drawer/menu/History.vue b/next-ui/src/components/app/drawer/menu/History.vue
index 6fac4b88..b548f980 100644
--- a/next-ui/src/components/app/drawer/menu/History.vue
+++ b/next-ui/src/components/app/drawer/menu/History.vue
@@ -8,10 +8,8 @@
         id: 'l/To3S',
       })
     "
-    :prepend-icon="mdiClockTimeFourOutline"
+    prepend-icon="i-mdi:clock-time-four-outline"
   />
 </template>
 
-<script setup lang="ts">
-import mdiClockTimeFourOutline from '~icons/mdi/clock-time-four-outline'
-</script>
+<script setup lang="ts"></script>
diff --git a/next-ui/src/components/app/drawer/menu/Import.vue b/next-ui/src/components/app/drawer/menu/Import.vue
index 9fe731b9..544d3343 100644
--- a/next-ui/src/components/app/drawer/menu/Import.vue
+++ b/next-ui/src/components/app/drawer/menu/Import.vue
@@ -10,7 +10,7 @@
             id: 'N7+QXi',
           })
         "
-        :prepend-icon="mdiImport"
+        prepend-icon="i-mdi:import"
       />
     </template>
 
@@ -38,6 +38,4 @@
   </v-list-group>
 </template>
 
-<script setup lang="ts">
-import mdiImport from '~icons/mdi/import'
-</script>
+<script setup lang="ts"></script>
diff --git a/next-ui/src/components/app/drawer/menu/Logout.vue b/next-ui/src/components/app/drawer/menu/Logout.vue
index ee18792c..e0251ceb 100644
--- a/next-ui/src/components/app/drawer/menu/Logout.vue
+++ b/next-ui/src/components/app/drawer/menu/Logout.vue
@@ -7,13 +7,12 @@
         id: 'ti4Pzo',
       })
     "
-    :prepend-icon="mdiPower"
+    prepend-icon="i-mdi:power"
     @click="performLogout"
   />
 </template>
 
 <script setup lang="ts">
-import mdiPower from '~icons/mdi/power'
 import { useLogout } from '@/colada/mutations/logout'
 
 const router = useRouter()
diff --git a/next-ui/src/components/app/drawer/menu/Media.vue b/next-ui/src/components/app/drawer/menu/Media.vue
index 39a6193c..199d1083 100644
--- a/next-ui/src/components/app/drawer/menu/Media.vue
+++ b/next-ui/src/components/app/drawer/menu/Media.vue
@@ -10,7 +10,7 @@
             id: 'Hl9H/B',
           })
         "
-        :prepend-icon="mdiBookCog"
+        prepend-icon="i-mdi:book-cog"
       />
     </template>
 
@@ -82,6 +82,4 @@
     </v-list-group>
   </v-list-group>
 </template>
-<script setup lang="ts">
-import mdiBookCog from '~icons/mdi/book-cog'
-</script>
+<script setup lang="ts"></script>
diff --git a/next-ui/src/components/app/drawer/menu/Server.vue b/next-ui/src/components/app/drawer/menu/Server.vue
index e83c7a88..93a24da6 100644
--- a/next-ui/src/components/app/drawer/menu/Server.vue
+++ b/next-ui/src/components/app/drawer/menu/Server.vue
@@ -18,7 +18,7 @@
             floating
             color="info"
           >
-            <v-icon :icon="mdiCog"></v-icon>
+            <v-icon icon="i-mdi:cog"></v-icon>
           </v-badge>
         </template>
       </v-list-item>
@@ -99,7 +99,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiCog from '~icons/mdi/cog'
 import { useAnnouncements } from '@/colada/queries/announcements'
 
 const { unreadCount } = useAnnouncements()
diff --git a/next-ui/src/components/form/user/ChangePassword.vue b/next-ui/src/components/form/user/ChangePassword.vue
index 6e3566c0..da6e85f7 100644
--- a/next-ui/src/components/form/user/ChangePassword.vue
+++ b/next-ui/src/components/form/user/ChangePassword.vue
@@ -12,7 +12,7 @@
     autocomplete="off"
     autofocus
     :type="showPassword ? 'text' : 'password'"
-    :append-inner-icon="showPassword ? mdiEye : mdiEyeOff"
+    :append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
     @click:append-inner="showPassword = !showPassword"
   />
   <v-text-field
@@ -38,15 +38,12 @@
     "
     autocomplete="off"
     :type="showPassword ? 'text' : 'password'"
-    :append-inner-icon="showPassword ? mdiEye : mdiEyeOff"
+    :append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
     @click:append-inner="showPassword = !showPassword"
   />
 </template>
 
 <script setup lang="ts">
-import mdiEye from '~icons/mdi/eye'
-import mdiEyeOff from '~icons/mdi/eye-off'
-
 const newPassword = defineModel<string>({ required: true })
 
 const confirmPassword = ref<string>()
diff --git a/next-ui/src/components/form/user/Edit.vue b/next-ui/src/components/form/user/Edit.vue
index 03fe2d02..dccb71ce 100644
--- a/next-ui/src/components/form/user/Edit.vue
+++ b/next-ui/src/components/form/user/Edit.vue
@@ -11,7 +11,7 @@
           id: 'ToD0+o',
         })
       "
-      :prepend-icon="mdiAccount"
+      prepend-icon="i-mdi:account"
     />
     <v-text-field
       v-model="user.password"
@@ -26,7 +26,7 @@
       "
       autocomplete="off"
       :type="showPassword ? 'text' : 'password'"
-      :append-inner-icon="showPassword ? mdiEye : mdiEyeOff"
+      :append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
       prepend-icon="mdi-none"
       @click:append-inner="showPassword = !showPassword"
     />
@@ -45,7 +45,7 @@
         id: 'CUxhzL',
       })
     "
-    :prepend-icon="mdiKeyChain"
+    prepend-icon="i-mdi:key-chain"
     :items="userRoles"
   />
 
@@ -63,7 +63,7 @@
     :items="libraries"
     item-title="name"
     item-value="id"
-    :prepend-icon="mdiBookMultiple"
+    prepend-icon="i-mdi:book-multiple"
   >
     <!--  Workaround for the lack of a slot to override the whole selection  -->
     <template #prepend-inner>
@@ -134,7 +134,7 @@
           })
         "
         :items="ageRestrictions"
-        :prepend-icon="mdiFolderLock"
+        prepend-icon="i-mdi:folder-lock"
       />
     </v-col>
     <v-col>
@@ -218,12 +218,6 @@
 </template>
 
 <script setup lang="ts">
-import mdiEye from '~icons/mdi/eye'
-import mdiEyeOff from '~icons/mdi/eye-off'
-import mdiAccount from '~icons/mdi/account'
-import mdiKeyChain from '~icons/mdi/key-chain'
-import mdiBookMultiple from '~icons/mdi/book-multiple'
-import mdiFolderLock from '~icons/mdi/folder-lock'
 import { UserRoles } from '@/types/UserRoles'
 import type { components } from '@/generated/openapi/komga'
 import { useLibraries } from '@/colada/queries/libraries'
diff --git a/next-ui/src/main.ts b/next-ui/src/main.ts
index c8fc1722..4c6a5ff7 100644
--- a/next-ui/src/main.ts
+++ b/next-ui/src/main.ts
@@ -6,6 +6,7 @@
 
 // Plugins
 import { registerPlugins } from '@/plugins'
+import 'virtual:uno.css'
 
 // Components
 import App from './App.vue'
diff --git a/next-ui/src/pages/server/announcements.vue b/next-ui/src/pages/server/announcements.vue
index a669069a..6e9504cd 100644
--- a/next-ui/src/pages/server/announcements.vue
+++ b/next-ui/src/pages/server/announcements.vue
@@ -6,7 +6,7 @@
 
   <v-empty-state
     v-else-if="error"
-    icon="mdi-connection"
+    icon="i-mdi:connection"
     :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
     :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
   />
@@ -80,14 +80,13 @@
         "
         color="success"
         size="x-large"
-        :icon="mdiCheckAll"
+        icon="i-mdi:check-all"
       />
     </v-fab>
   </template>
 </template>
 
 <script lang="ts" setup>
-import mdiCheckAll from '~icons/mdi/check-all'
 import { useAnnouncements } from '@/colada/queries/announcements'
 import { useMarkAnnouncementsRead } from '@/colada/mutations/mark-announcements-read'
 import { commonMessages } from '@/utils/i18n/common-messages'
diff --git a/next-ui/src/pages/server/updates.vue b/next-ui/src/pages/server/updates.vue
index 25efa2ce..ab6768fe 100644
--- a/next-ui/src/pages/server/updates.vue
+++ b/next-ui/src/pages/server/updates.vue
@@ -6,7 +6,7 @@
 
   <v-empty-state
     v-else-if="error"
-    icon="mdi-connection"
+    icon="i-mdi:connection"
     :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
     :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
   />
diff --git a/next-ui/src/pages/server/users.vue b/next-ui/src/pages/server/users.vue
index d4f029c9..b668dd67 100644
--- a/next-ui/src/pages/server/users.vue
+++ b/next-ui/src/pages/server/users.vue
@@ -1,7 +1,7 @@
 <template>
   <v-empty-state
     v-if="error"
-    icon="mdi-connection"
+    icon="i-mdi:connection"
     :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
     :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
   />
@@ -19,7 +19,7 @@
           <v-toolbar-title>
             <v-icon
               color="medium-emphasis"
-              :icon="mdiAccountMultiple"
+              icon="i-mdi:account-multiple"
               size="x-small"
               start
             />
@@ -28,7 +28,7 @@
 
           <v-btn
             class="me-2"
-            :prepend-icon="mdiPlus"
+            prepend-icon="i-mdi:plus"
             rounded="lg"
             text="Add a User"
             border
@@ -55,20 +55,20 @@
         <div class="d-flex ga-1 justify-end">
           <v-icon-btn
             v-tooltip:bottom="'Change password'"
-            :icon="mdiLockReset"
+            icon="i-mdi:lock-reset"
             @click="showDialog(ACTION.PASSWORD, user)"
             @mouseenter="dialogConfirmEdit.activator = $event.currentTarget"
           />
           <v-icon-btn
             v-tooltip:bottom="'Edit user'"
-            :icon="mdiPencil"
+            icon="i-mdi:pencil"
             :disabled="me?.id == user.id"
             @click="showDialog(ACTION.EDIT, user)"
             @mouseenter="dialogConfirmEdit.activator = $event.currentTarget"
           />
           <v-icon-btn
             v-tooltip:bottom="'Delete user'"
-            :icon="mdiDelete"
+            icon="i-mdi:delete"
             :disabled="me?.id == user.id"
             @click="showDialog(ACTION.DELETE, user)"
             @mouseenter="dialogConfirm.activator = $event.currentTarget"
@@ -80,11 +80,6 @@
 </template>
 
 <script lang="ts" setup>
-import mdiAccountMultiple from '~icons/mdi/account-multiple'
-import mdiPlus from '~icons/mdi/plus'
-import mdiLockReset from '~icons/mdi/lock-reset'
-import mdiPencil from '~icons/mdi/pencil'
-import mdiDelete from '~icons/mdi/delete'
 import { useUsers } from '@/colada/queries/users'
 import { type ErrorCause, komgaClient } from '@/api/komga-client'
 import type { components } from '@/generated/openapi/komga'
diff --git a/next-ui/src/plugins/vuetify.ts b/next-ui/src/plugins/vuetify.ts
index 11c5c4e8..8542f758 100644
--- a/next-ui/src/plugins/vuetify.ts
+++ b/next-ui/src/plugins/vuetify.ts
@@ -6,7 +6,7 @@
 
 // Styles
 import 'vuetify/styles'
-import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import { aliases } from 'vuetify/iconsets/mdi'
 
 // Composables
 import { createVuetify } from 'vuetify'
@@ -38,11 +38,13 @@ export const vuetify = createVuetify({
     messages,
   },
   icons: {
-    defaultSet: 'mdi',
-    aliases,
-    sets: {
-      mdi,
-    },
+    // 'class' is a built-in set that just applies the icon value as classes on the v-icon
+    defaultSet: 'class',
+    // customize the provided mdi aliases to fit the unocss class names
+    aliases: Object.keys(aliases).reduce((obj: Record<string, string>, key) => {
+      obj[key] = `i-mdi:${aliases[key]!.toString().substring(4)}`
+      return obj
+    }, {}),
   },
   theme: {
     defaultTheme: 'light',
diff --git a/next-ui/tsconfig.app.json b/next-ui/tsconfig.app.json
index 92a70f10..97cce32a 100644
--- a/next-ui/tsconfig.app.json
+++ b/next-ui/tsconfig.app.json
@@ -6,7 +6,8 @@
     "src/**/*.vue",
     "./dir2json.d.ts",
     "./.storybook/**/*",
-    "vitest.shims.d.ts"
+    "vitest.shims.d.ts",
+    "uno.config.ts"
   ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
diff --git a/next-ui/uno.config.ts b/next-ui/uno.config.ts
new file mode 100644
index 00000000..9aaf3094
--- /dev/null
+++ b/next-ui/uno.config.ts
@@ -0,0 +1,18 @@
+import presetIcons from '@unocss/preset-icons'
+import { defineConfig } from 'unocss'
+import { aliases } from 'vuetify/iconsets/mdi'
+
+// build the safelist from the vuetify icon aliases
+const vuetifyIcons = Object.keys(aliases).map(
+  (key) => `i-mdi:${aliases[key].toString().substring(4)}`,
+)
+
+export default defineConfig({
+  presets: [
+    presetIcons({
+      /* options */
+    }),
+    // ...other presets
+  ],
+  safelist: vuetifyIcons,
+})
diff --git a/next-ui/vite.config.mts b/next-ui/vite.config.mts
index a0985823..99076547 100644
--- a/next-ui/vite.config.mts
+++ b/next-ui/vite.config.mts
@@ -7,11 +7,10 @@ import ViteFonts from 'unplugin-fonts/vite'
 import Layouts from 'vite-plugin-vue-layouts-next'
 import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
-import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import dir2json from 'vite-plugin-dir2json'
+import UnoCSS from 'unocss/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -42,7 +41,6 @@ export default defineConfig({
       globsExclude: ['src/components/*.stories.vue'],
       directoryAsNamespace: true,
       collapseSamePrefixes: true,
-      resolvers: [IconsResolver()],
     }),
     Vue({
       template: { transformAssetUrls },
@@ -68,9 +66,7 @@ export default defineConfig({
     dir2json({
       dts: true,
     }),
-    Icons({
-      autoInstall: true,
-    }),
+    UnoCSS(),
   ],
   define: { 'process.env': {} },
   resolve: {