diff --git a/eslint.config.js b/eslint.config.js
index 59080b26..5a0c9e98 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,9 +1,10 @@
 import js from "@eslint/js";
-import unoConfig from "@unocss/eslint-config/flat";
 import { defineConfig } from "eslint/config";
+import betterTailwindcss from "eslint-plugin-better-tailwindcss";
 import prettierRecommended from "eslint-plugin-prettier/recommended";
 import vue from "eslint-plugin-vue";
 import globals from "globals";
+import vueParser from "vue-eslint-parser";
 
 export default defineConfig([
     {
@@ -25,16 +26,28 @@ export default defineConfig([
         files: ["**/*.{js,mjs,cjs,vue}"],
     },
     ...vue.configs["flat/recommended"],
-    {
-        ...unoConfig,
-        files: ["**/*.{js,mjs,cjs,vue}"],
-    },
+
     {
         files: ["**/*.vue"],
         rules: {
             "no-useless-assignment": "off",
         },
     },
+    {
+        files: ["**/*.vue"],
+        extends: [betterTailwindcss.configs.recommended],
+        settings: {
+            "better-tailwindcss": {
+                entryPoint: "src/app.css",
+            },
+        },
+        languageOptions: {
+            parser: vueParser,
+        },
+        rules: {
+            "better-tailwindcss/enforce-consistent-line-wrapping": "off",
+        },
+    },
     {
         ...prettierRecommended,
         files: ["**/*.{js,mjs,cjs,vue}"],
diff --git a/package.json b/package.json
index 39c5b9f5..37d7c3aa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
         "lint": "eslint --fix --color ."
     },
     "dependencies": {
+        "@vueuse/core": "^14.2.1",
         "dompurify": "3.3.3",
         "fast-xml-parser": "5.5.9",
         "hotkeys-js": "4.0.2",
@@ -18,6 +19,7 @@
         "linkify-html": "4.3.2",
         "linkifyjs": "4.3.2",
         "qrcode": "^1.5.4",
+        "reka-ui": "^2.9.2",
         "shaka-player": "5.0.8",
         "vue": "3.5.31",
         "vue-i18n": "11.3.0",
@@ -28,24 +30,21 @@
         "@iconify-json/fa6-brands": "1.2.6",
         "@iconify-json/fa6-solid": "1.2.4",
         "@intlify/unplugin-vue-i18n": "11.1.1",
-        "@unocss/eslint-config": "66.6.7",
-        "@unocss/preset-icons": "66.6.7",
-        "@unocss/preset-uno": "66.6.7",
-        "@unocss/preset-web-fonts": "66.6.7",
-        "@unocss/reset": "66.6.7",
-        "@unocss/transformer-directives": "66.6.7",
-        "@unocss/transformer-variant-group": "66.6.7",
+        "@tailwindcss/vite": "^4.2.2",
         "@vitejs/plugin-legacy": "8.0.1",
         "@vitejs/plugin-vue": "6.0.5",
         "@vue/compiler-sfc": "3.5.31",
         "eslint": "10.1.0",
         "eslint-config-prettier": "10.1.8",
+        "eslint-plugin-better-tailwindcss": "^4.3.2",
         "eslint-plugin-prettier": "5.5.5",
         "eslint-plugin-vue": "10.8.0",
         "globals": "17.4.0",
         "lightningcss": "1.32.0",
         "prettier": "3.8.1",
-        "unocss": "66.6.7",
+        "tailwindcss": "^4.2.2",
+        "unplugin-icons": "^23.0.1",
+        "unplugin-vue-components": "^32.0.0",
         "vite": "8.0.3",
         "vite-plugin-eslint": "1.8.1",
         "vite-plugin-pwa": "1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1fbde48c..2a0a0006 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vueuse/core':
+        specifier: ^14.2.1
+        version: 14.2.1(vue@3.5.31(typescript@5.9.3))
       dompurify:
         specifier: 3.3.3
         version: 3.3.3
@@ -29,6 +32,9 @@ importers:
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
+      reka-ui:
+        specifier: ^2.9.2
+        version: 2.9.2(vue@3.5.31(typescript@5.9.3))
       shaka-player:
         specifier: 5.0.8
         version: 5.0.8
@@ -54,27 +60,9 @@ importers:
       '@intlify/unplugin-vue-i18n':
         specifier: 11.1.1
         version: 11.1.1(@vue/compiler-dom@3.5.31)(eslint@10.1.0(jiti@2.6.1))(rollup@2.80.0)(typescript@5.9.3)(vue-i18n@11.3.0(vue@3.5.31(typescript@5.9.3)))(vue@3.5.31(typescript@5.9.3))
-      '@unocss/eslint-config':
-        specifier: 66.6.7
-        version: 66.6.7(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)
-      '@unocss/preset-icons':
-        specifier: 66.6.7
-        version: 66.6.7
-      '@unocss/preset-uno':
-        specifier: 66.6.7
-        version: 66.6.7
-      '@unocss/preset-web-fonts':
-        specifier: 66.6.7
-        version: 66.6.7
-      '@unocss/reset':
-        specifier: 66.6.7
-        version: 66.6.7
-      '@unocss/transformer-directives':
-        specifier: 66.6.7
-        version: 66.6.7
-      '@unocss/transformer-variant-group':
-        specifier: 66.6.7
-        version: 66.6.7
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.2(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))
       '@vitejs/plugin-legacy':
         specifier: 8.0.1
         version: 8.0.1(terser@5.46.1)(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))
@@ -90,6 +78,9 @@ importers:
       eslint-config-prettier:
         specifier: 10.1.8
         version: 10.1.8(eslint@10.1.0(jiti@2.6.1))
+      eslint-plugin-better-tailwindcss:
+        specifier: ^4.3.2
+        version: 4.3.2(eslint@10.1.0(jiti@2.6.1))(tailwindcss@4.2.2)(typescript@5.9.3)
       eslint-plugin-prettier:
         specifier: 5.5.5
         version: 5.5.5(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@10.1.0(jiti@2.6.1)))(eslint@10.1.0(jiti@2.6.1))(prettier@3.8.1)
@@ -105,9 +96,15 @@ importers:
       prettier:
         specifier: 3.8.1
         version: 3.8.1
-      unocss:
-        specifier: 66.6.7
-        version: 66.6.7(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
+      unplugin-icons:
+        specifier: ^23.0.1
+        version: 23.0.1(@vue/compiler-sfc@3.5.31)
+      unplugin-vue-components:
+        specifier: ^32.0.0
+        version: 32.0.0(vue@3.5.31(typescript@5.9.3))
       vite:
         specifier: 8.0.3
         version: 8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3)
@@ -973,6 +970,10 @@ packages:
     resolution: {integrity: sha512-QUPblTtE51/7/Zhfv8BDwO0qkkzQL7P/aWWbqcf4xWLEYn1oKjdO0gglQBB4GAsu7u6wjijbCmzsUTy6mnk6oQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/css-tree@3.6.9':
+    resolution: {integrity: sha512-3D5/OHibNEGk+wKwNwMbz63NMf367EoR4mVNNpxddCHKEb2Nez7z62J2U6YjtErSsZDoY0CsccmoUpdEbkogNA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   '@eslint/js@10.0.1':
     resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -990,6 +991,18 @@ packages:
     resolution: {integrity: sha512-iH1B076HoAshH1mLpHMgwdGeTs0CYwL0SPMkGuSebZrwBp16v415e9NZXg2jtrqPVQjf6IANe2Vtlr5KswtcZQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@floating-ui/vue@1.1.11':
+    resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1018,6 +1031,12 @@ packages:
   '@iconify/utils@3.1.0':
     resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
+  '@internationalized/date@3.12.0':
+    resolution: {integrity: sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==}
+
+  '@internationalized/number@3.6.5':
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+
   '@intlify/bundle-utils@11.1.1':
     resolution: {integrity: sha512-dNVVjdkMiOGUT3eLCy8OSwXMtBPzkeHMZ0IMVRnP9zr4dFZPj71B1vWSUkPt9YCQbFo23dvVY5Xe3NMxZCgrsQ==}
     engines: {node: '>= 20'}
@@ -1115,136 +1134,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oxc-parser/binding-android-arm-eabi@0.115.0':
-    resolution: {integrity: sha512-VoB2rhgoqgYf64d6Qs5emONQW8ASiTc0xp+aUE4JUhxjX+0pE3gblTYDO0upcN5vt9UlBNmUhAwfSifkfre7nw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxc-parser/binding-android-arm64@0.115.0':
-    resolution: {integrity: sha512-lWRX75u+gqfB4TF3pWCHuvhaeneAmRl2b2qNBcl4S6yJ0HtnT4VXOMEZrq747i4Zby1ZTxj6mtOe678Bg8gRLw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-parser/binding-darwin-arm64@0.115.0':
-    resolution: {integrity: sha512-ii/oOZjfGY1aszXTy29Z5DRyCEnBOrAXDVCvfdfXFQsOZlbbOa7NMHD7D+06YFe5qdxfmbWAYv4yn6QJi/0d2g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-parser/binding-darwin-x64@0.115.0':
-    resolution: {integrity: sha512-R/sW/p8l77wglbjpMcF+h/3rWbp9zk1mRP3U14mxTYIC2k3m+aLBpXXgk2zksqf9qKk5mcc4GIYsuCn9l8TgDg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-parser/binding-freebsd-x64@0.115.0':
-    resolution: {integrity: sha512-CSJ5ldNm9wIGGkhaIJeGmxRMZbgxThRN+X1ufYQQUNi5jZDV/U3C2QDMywpP93fczNBj961hXtcUPO/oVGq4Pw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.115.0':
-    resolution: {integrity: sha512-uWFwssE5dHfQ8lH+ktrsD9JA49+Qa0gtxZHUs62z1e91NgGz6O7jefHGI6aygNyKNS45pnnBSDSP/zV977MsOQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.115.0':
-    resolution: {integrity: sha512-fZbqt8y/sKQ+v6bBCuv/mYYFoC0+fZI3mGDDEemmDOhT78+aUs2+4ZMdbd2btlXmnLaScl37r8IRbhnok5Ka9w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.115.0':
-    resolution: {integrity: sha512-1ej/MjuTY9tJEunU/hUPIFmgH5PqgMQoRjNOvOkibtJ3Zqlw/+Lc+HGHDNET8sjbgIkWzdhX+p4J96A5CPdbag==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-arm64-musl@0.115.0':
-    resolution: {integrity: sha512-HjsZbJPH9mMd4swJRywVMsDZsJX0hyKb1iNHo5ijRl5yhtbO3lj7ImSrrL1oZ1VEg0te4iKmDGGz/6YPLd1G8w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-parser/binding-linux-ppc64-gnu@0.115.0':
-    resolution: {integrity: sha512-zhhePoBrd7kQx3oClX/W6NldsuCbuMqaN9rRsY+6/WoorAb4j490PG/FjqgAXscWp2uSW2WV9L+ksn0wHrvsrg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.115.0':
-    resolution: {integrity: sha512-t/IRojvUE9XrKu+/H1b8YINug+7Q6FLls5rsm2lxB5mnS8GN/eYAYrPgHkcg9/1SueRDSzGpDYu3lGWTObk1zw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-riscv64-musl@0.115.0':
-    resolution: {integrity: sha512-79jBHSSh/YpQRAmvYoaCfpyToRbJ/HBrdB7hxK2ku2JMehjopTVo+xMJss/RV7/ZYqeezgjvKDQzapJbgcjVZA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.115.0':
-    resolution: {integrity: sha512-nA1TpxkhNTIOMMyiSSsa7XIVJVoOU/SsVrHIz3gHvWweB5PHCQfO7w+Lb2EP0lBWokv7HtA/KbF7aLDoXzmuMw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-x64-gnu@0.115.0':
-    resolution: {integrity: sha512-9iVX789DoC3SaOOG+X6NcF/tVChgLp2vcHffzOC2/Z1JTPlz6bMG2ogvcW6/9s0BG2qvhNQImd+gbWYeQbOwVw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-x64-musl@0.115.0':
-    resolution: {integrity: sha512-RmQmk+mjCB0nMNfEYhaCxwofLo1Z95ebHw1AGvRiWGCd4zhCNOyskgCbMogIcQzSB3SuEKWgkssyaiQYVAA4hQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-parser/binding-openharmony-arm64@0.115.0':
-    resolution: {integrity: sha512-viigraWWQhhDvX5aGq+wrQq58k00Xq3MHz/0R4AFMxGlZ8ogNonpEfNc73Q5Ly87Z6sU9BvxEdG0dnYTfVnmew==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@oxc-parser/binding-wasm32-wasi@0.115.0':
-    resolution: {integrity: sha512-IzGCrMwXhpb4kTXy/8lnqqqwjI7eOvy+r9AhVw+hsr8t1ecBBEHprcNy0aKatFHN6hsX7UMHHQmBAQjVvL/p1A==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.115.0':
-    resolution: {integrity: sha512-/ym+Absk/TLFvbhh3se9XYuI1D7BrUVHw4RaG/2dmWKgBenrZHaJsgnRb7NJtaOyjEOLIPtULx1wDdVL0SX2eg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-ia32-msvc@0.115.0':
-    resolution: {integrity: sha512-AQSZjIR+b+Te7uaO/hGTMjT8/oxlYrvKrOTi4KTHF/O6osjHEatUQ3y6ZW2+8+lJxy20zIcGz6iQFmFq/qDKkg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.115.0':
-    resolution: {integrity: sha512-oxUl82N+fIO9jIaXPph8SPPHQXrA08BHokBBJW8ct9F/x6o6bZE6eUAhUtWajbtvFhL8UYcCWRMba+kww6MBlA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxc-project/types@0.115.0':
-    resolution: {integrity: sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw==}
-
   '@oxc-project/types@0.122.0':
     resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
 
@@ -1252,12 +1141,6 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@polka/url@1.0.0-next.29':
-    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
-
-  '@quansync/fs@1.0.0':
-    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
-
   '@rolldown/binding-android-arm64@1.0.0-rc.12':
     resolution: {integrity: sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1415,6 +1298,111 @@ packages:
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
+  '@swc/helpers@0.5.20':
+    resolution: {integrity: sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==}
+
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.2':
+    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@tanstack/virtual-core@3.13.23':
+    resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
+
+  '@tanstack/vue-virtual@3.13.23':
+    resolution: {integrity: sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -1439,6 +1427,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/project-service@8.57.2':
     resolution: {integrity: sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1465,96 +1456,14 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.57.2':
-    resolution: {integrity: sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/visitor-keys@8.57.2':
     resolution: {integrity: sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@unocss/cli@66.6.7':
-    resolution: {integrity: sha512-m/yW5HMVyxfAOeyO4OyA4JB9dY+/gTsk25ucI8xVCFVDEENPEGr+vEqTDOA+vfe6pdURtyDYS7OrhikIRU1WNA==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  '@unocss/config@66.6.7':
-    resolution: {integrity: sha512-1uleyRLyJc6PNNc2L3hEaKL89zXwvQAtP36oFySgL47RAxZHPZ4vfqFpbwR0eEN4iSqTS24ZFr7CTRWCaEGjzQ==}
-    engines: {node: '>=14'}
-
-  '@unocss/core@66.6.7':
-    resolution: {integrity: sha512-Q8456iWFtdwrUNYKVOQY8ygRggjZOVtLc6Jc8KIkxig7OiNlUWOgXJTfCh4I8g6jBYzC5eHaHFDLgJOmOrxBsg==}
-
-  '@unocss/eslint-config@66.6.7':
-    resolution: {integrity: sha512-l33NbugpKr5twWmRbFwQcvAuD/lWAqT9Nrnguga75geeUBENOVNQialeyEFcZAmR7/eYOeILIrhM8XtFUmtf2g==}
-    engines: {node: '>=14'}
-
-  '@unocss/eslint-plugin@66.6.7':
-    resolution: {integrity: sha512-0pNFT918CUOiWSlr3ZmePL5Bb06/g/mmP8zP+/dpl2+Vc/GuW6wHVsP+qn5hT2c5FwCPRZ3CUm0HprTru2/sGA==}
-    engines: {node: '>=14'}
-
-  '@unocss/extractor-arbitrary-variants@66.6.7':
-    resolution: {integrity: sha512-PQiBHK0yUJ0BR+3GYnTPU6va6HVSRPV+O+s1zZmt23TWbyIeucoKCNR47TDtv+Z1xuksY8krIjtDYtufdrVWKw==}
-
-  '@unocss/inspector@66.6.7':
-    resolution: {integrity: sha512-4lA70A/wy9dfSDm7rJ5Uq5fKz+/Szm2rUcHjdbLCVNEc6vv2YXeI7aFvP5qDjTp4ClBSF2AMPnF1mtoMQOfDvA==}
-
-  '@unocss/preset-attributify@66.6.7':
-    resolution: {integrity: sha512-thtoLQb53+Acy2QJYT6n+YhgNJ5ilhS8k9bqi+UzflbsuK4TJqOuQQjC9fRkULP5QjtNxgqN3d5Up7ms8tBPDA==}
-
-  '@unocss/preset-icons@66.6.7':
-    resolution: {integrity: sha512-mGAOyI/qz1pZUV1BcOtWAMm5czdFCjhFCYcDk0KY+Jw37pKRVSQRFeh4gpHuYKmehGv36caLyVrWXpTAwRBdFQ==}
-
-  '@unocss/preset-mini@66.6.7':
-    resolution: {integrity: sha512-tf0mqiSEhPQ49WZOqjNhxlbZbNakiBLzCoxfLSzqfIGglOPYShP8mxsdp9Jv0n+Ntn0rHcBiX5KTLfax1/Bd9g==}
-
-  '@unocss/preset-tagify@66.6.7':
-    resolution: {integrity: sha512-0WeQf+Dx9Ztv3aewkBKEnAfOauSjvWBlfkpsgLpXcCkyGMnCqq87UrAq3+b76TDJvQc8i2ADlvVGK7V1z0JZQg==}
-
-  '@unocss/preset-typography@66.6.7':
-    resolution: {integrity: sha512-RA7MwPDD5N9xGrbWnguVm5tP+F4/n/9X1rJsq2nBjvvK2dbtIRJZjRFM1vBDsR0GIhtvbHMoTchZaSZed5I+Hw==}
-
-  '@unocss/preset-uno@66.6.7':
-    resolution: {integrity: sha512-imGCe6Yv2XgrJxP77gV8WZCz0xL99MsGov5rYn64lh2/tcsHF2rUIhTj/Urgxt0kwk8rLFtGbR1JuwPMNL5EDw==}
-
-  '@unocss/preset-web-fonts@66.6.7':
-    resolution: {integrity: sha512-GLjUoSL/kYt1Yw2zpzixKnxvpHgLHAg0JXiPglct4PZ9YmUzCPbvJ/vVn+0AnB8Fxr29Z8NAFSNoX625ZaRonQ==}
-
-  '@unocss/preset-wind3@66.6.7':
-    resolution: {integrity: sha512-PKyqeRzlIMd3Irdt6fCKMm73zgwweiXESk5edUK8dVWndvPIcZCOqrEq7yg6Pr/Q8tHdq26viYSkVY3a3t8RSg==}
-
-  '@unocss/preset-wind4@66.6.7':
-    resolution: {integrity: sha512-9grhWeBsFzpv8iER9AFATRaxLyXMCwGQ5HzeI4XZh2ZZ9O6vC7nYfGhns4/I+F/RpFglzU1bjqMWRS/DS8OpGQ==}
-
-  '@unocss/preset-wind@66.6.7':
-    resolution: {integrity: sha512-jxtAN96jljd+KglbhPv6Y/ujceI5rVdrLQimj4KUTPoYBPEiWadzsGKN3o8Q07hlPRg+hBlO0r4tGSUWl+/EZQ==}
-
-  '@unocss/reset@66.6.7':
-    resolution: {integrity: sha512-+OjpLDEaPmhTQ3Gj7EaKApNM92TM9f9gLgHNa79+66wIll9IfhKfEmJXnF9y1SE725n4PmPIQgC9k313HztMLA==}
-
-  '@unocss/rule-utils@66.6.7':
-    resolution: {integrity: sha512-4PT/s8yKIShSqP9XPSw4EjbZopcu3wlIB9i3kbGbzQwF91H+0Yy10guK3kHDGtkmWVN6Np6VvaGIj2UcbmaivA==}
-    engines: {node: '>=14'}
-
-  '@unocss/transformer-attributify-jsx@66.6.7':
-    resolution: {integrity: sha512-r5bsnaPVe4iySLK5G5rA/QPSKmpPjYT9lixEv+KElvZcqZ+cPpkGoo+E+rnTcapu9KDMOVJItH/4Zy9m4AQ1ZQ==}
-
-  '@unocss/transformer-compile-class@66.6.7':
-    resolution: {integrity: sha512-4uz4jCyq8VUaSPveXhelUWUNaTnetPFvEmXzmbYJ5BygAlUlipNynffUlUusDQmBBRrfZhJNB5J1Zif2Q6oUiA==}
-
-  '@unocss/transformer-directives@66.6.7':
-    resolution: {integrity: sha512-z3gi8/cD2P0I+c6jOPZUtsPXknHwVNlMIitSh7LhyM6W3EqbqvDcYH2gFeGhdhoYcN2r5OpTBujq34iz4IdUxA==}
-
-  '@unocss/transformer-variant-group@66.6.7':
-    resolution: {integrity: sha512-XouJuQCjYJpvR3sY4QDXnGXxtyJ4qgWFG+S9bAB01TTslhQLvNPE9o2+4gZlltnJLqxiPQWuLeJA1KdPD6ciww==}
-
-  '@unocss/vite@66.6.7':
-    resolution: {integrity: sha512-8AHrVzAecnQaPLJv3/mpyFt5j2iL3gEwkZcZ8HzjH5ttK2XON1YE9vgujN5NS/yvZwlJxCMNPxn0S410/Ek61A==}
+  '@valibot/to-json-schema@1.6.0':
+    resolution: {integrity: sha512-d6rYyK5KVa2XdqamWgZ4/Nr+cXhxjy7lmpe6Iajw15J/jmU+gyxl2IEd1Otg1d7Rl3gOQL5reulnSypzBtYy1A==}
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0
+      valibot: ^1.3.0
 
   '@vitejs/plugin-legacy@8.0.1':
     resolution: {integrity: sha512-8zeDeuNPqXd49rIVgFgluQYB8vQICHR7l+W2I3CxYK4gTjTorajVr0wLvSjALIwEwLRxBn68EgNVyGP4j6hP7w==}
@@ -1620,6 +1529,19 @@ packages:
   '@vue/shared@3.5.31':
     resolution: {integrity: sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw==}
 
+  '@vueuse/core@14.2.1':
+    resolution: {integrity: sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@14.2.1':
+    resolution: {integrity: sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==}
+
+  '@vueuse/shared@14.2.1':
+    resolution: {integrity: sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1644,6 +1566,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
@@ -1734,10 +1660,6 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -1757,6 +1679,10 @@ packages:
   caniuse-lite@1.0.30001781:
     resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==}
 
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -1771,9 +1697,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -1787,10 +1710,6 @@ packages:
   confbox@0.2.4:
     resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
 
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1808,10 +1727,6 @@ packages:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
 
-  css-tree@3.2.1:
-    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1863,9 +1778,6 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -1880,9 +1792,6 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  duplexer@0.1.2:
-    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
-
   ejs@3.1.10:
     resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
     engines: {node: '>=0.10.0'}
@@ -1894,6 +1803,10 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
   entities@7.0.1:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
@@ -1951,6 +1864,19 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-plugin-better-tailwindcss@4.3.2:
+    resolution: {integrity: sha512-1DLX2QmHmOj3u667f8vEI0zKoRc0Y1qJt33tfIeIkpTyzWaz9b2GzWBLD4bR+WJ/kxzC0Skcbx7cMerRWQ6OYg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
   eslint-plugin-prettier@5.5.5:
     resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2032,9 +1958,6 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2189,14 +2112,14 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  gzip-size@6.0.0:
-    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
-    engines: {node: '>=10'}
-
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
 
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
@@ -2538,9 +2461,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  magic-regexp@0.10.0:
-    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
-
   magic-string-ast@1.0.3:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
@@ -2555,8 +2475,8 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mdn-data@2.27.1:
-    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+  mdn-data@2.23.0:
+    resolution: {integrity: sha512-786vq1+4079JSeu2XdcDjrhi/Ry7BWtjDl9WtGPWLiIHb2T66GvIVflZTBoSNZ5JqTtJGYEVMuFA/lbQlMOyDQ==}
 
   meow@13.2.0:
     resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
@@ -2578,6 +2498,9 @@ packages:
     resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
     engines: {node: '>=10'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.3:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2585,10 +2508,6 @@ packages:
   mlly@1.8.2:
     resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
-  mrmime@2.0.1:
-    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
-    engines: {node: '>=10'}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2603,9 +2522,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  node-fetch-native@1.6.7:
-    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
-
   node-releases@2.0.36:
     resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
@@ -2624,8 +2540,11 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  ofetch@1.5.1:
-    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
@@ -2635,15 +2554,6 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.115.0:
-    resolution: {integrity: sha512-2w7Xn3CbS/zwzSY82S5WLemrRu3CT57uF7Lx8llrE/2bul6iMTcJE4Rbls7GDNbLn3ttATI68PfOz2Pt3KZ2cQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-
-  oxc-walker@0.7.0:
-    resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
-    peerDependencies:
-      oxc-parser: '>=0.98.0'
-
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -2761,9 +2671,6 @@ packages:
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
-  quansync@1.0.0:
-    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2788,10 +2695,6 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
-  regexp-tree@0.1.27:
-    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
-    hasBin: true
-
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -2807,6 +2710,11 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
+  reka-ui@2.9.2:
+    resolution: {integrity: sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw==}
+    peerDependencies:
+      vue: '>= 3.4.0'
+
   relative-time-format@1.1.12:
     resolution: {integrity: sha512-qaZBjmRIuXLfuLnzgqpFdBPa5W0euSX1tMnoMUHGPphLwJmrt8xbNiOIHrlvYOD6oNJ0M5owPCZyPibI8de5pQ==}
 
@@ -2890,7 +2798,6 @@ packages:
 
   shaka-player@5.0.8:
     resolution: {integrity: sha512-f886rKRvQ0IKhWGk+rINS++YTjTJyc4DT5YypTsHW6wiNV9fiHi2n35+lg5R+hj9RfhqkmJHMjJb3gprUTNa8w==}
-    engines: {node: '>=18'}
 
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -2920,10 +2827,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sirv@3.0.2:
-    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
-    engines: {node: '>=18'}
-
   smob@1.6.1:
     resolution: {integrity: sha512-KAkBqZl3c2GvNgNhcoyJae1aKldDW0LO279wF9bk1PnluRTETKBq0WyzRXxEhoQLk56yHaOY4JCBEKDuJIET5g==}
     engines: {node: '>=20.0.0'}
@@ -2980,6 +2883,10 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-comments@2.0.1:
     resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
     engines: {node: '>=10'}
@@ -2987,6 +2894,10 @@ packages:
   strnum@2.2.2:
     resolution: {integrity: sha512-DnR90I+jtXNSTXWdwrEy9FakW7UX+qUZg28gj5fk2vxxl7uS/3bpI4fjFYVmdK9etptYBPNkpahuQnEwhwECqA==}
 
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -2998,6 +2909,22 @@ packages:
   systemjs@6.15.1:
     resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==}
 
+  tailwind-csstree@0.1.5:
+    resolution: {integrity: sha512-ZHCKXz+TcBj7CJYStiuAtNenPpdHMrhgotOSNJ3UQTSTgwTfAyoyTA2SNW4oD8+2T6xt6awM7CZSU2+PXx9V3w==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      '@eslint/css': '>=1.0.0'
+    peerDependenciesMeta:
+      '@eslint/css':
+        optional: true
+
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
+  tapable@2.3.2:
+    resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==}
+    engines: {node: '>=6'}
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -3023,10 +2950,6 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  totalist@3.0.1:
-    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
-    engines: {node: '>=6'}
-
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
@@ -3036,6 +2959,14 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3047,9 +2978,6 @@ packages:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
 
-  type-level-regexp@0.1.17:
-    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
-
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -3078,12 +3006,6 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  unconfig-core@7.5.0:
-    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
-
-  unconfig@7.5.0:
-    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
-
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -3108,25 +3030,37 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unocss@66.6.7:
-    resolution: {integrity: sha512-TdZ/JnKhrqkknrMvLl0KOwrGzFThEspFIyYiylFYJki2JkMN/5EJIr+vIZEGRX69hFTjTLi6utIpbipueqzNbw==}
-    engines: {node: '>=14'}
+  unplugin-icons@23.0.1:
+    resolution: {integrity: sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==}
     peerDependencies:
-      '@unocss/astro': 66.6.7
-      '@unocss/postcss': 66.6.7
-      '@unocss/webpack': 66.6.7
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
-      '@unocss/astro':
+      '@svgr/core':
         optional: true
-      '@unocss/postcss':
+      '@svgx/core':
         optional: true
-      '@unocss/webpack':
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
         optional: true
 
   unplugin-utils@0.3.1:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-vue-components@32.0.0:
+    resolution: {integrity: sha512-uLdccgS7mf3pv1bCCP20y/hm+u1eOjAmygVkh+Oa70MPkzgl1eQv1L0CwdHNM3gscO8/GDMGIET98Ja47CBbZg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
   unplugin@2.3.11:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
@@ -3151,6 +3085,14 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  valibot@1.3.1:
+    resolution: {integrity: sha512-sfdRir/QFM0JaF22hqTroPc5xy4DimuGQVKFrzF1YfGwaS1nJot3Y8VqMdLO2Lg27fMzat2yD3pY5PbAYO39Gg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   vite-plugin-eslint@1.8.1:
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
@@ -3212,6 +3154,17 @@ packages:
       yaml:
         optional: true
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@10.4.0:
     resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4231,6 +4184,11 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/css-tree@3.6.9':
+    dependencies:
+      mdn-data: 2.23.0
+      source-map-js: 1.2.1
+
   '@eslint/js@10.0.1(eslint@10.1.0(jiti@2.6.1))':
     optionalDependencies:
       eslint: 10.1.0(jiti@2.6.1)
@@ -4242,6 +4200,26 @@ snapshots:
       '@eslint/core': 1.1.1
       levn: 0.4.1
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@floating-ui/vue@1.1.11(vue@3.5.31(typescript@5.9.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/utils': 0.2.11
+      vue-demi: 0.14.10(vue@3.5.31(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -4269,6 +4247,14 @@ snapshots:
       '@iconify/types': 2.0.0
       mlly: 1.8.2
 
+  '@internationalized/date@3.12.0':
+    dependencies:
+      '@swc/helpers': 0.5.20
+
+  '@internationalized/number@3.6.5':
+    dependencies:
+      '@swc/helpers': 0.5.20
+
   '@intlify/bundle-utils@11.1.1(vue-i18n@11.3.0(vue@3.5.31(typescript@5.9.3)))':
     dependencies:
       '@intlify/message-compiler': 11.3.0
@@ -4379,80 +4365,10 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
-  '@oxc-parser/binding-android-arm-eabi@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-android-arm64@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-arm64@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-x64@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-freebsd-x64@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-musl@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-ppc64-gnu@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-musl@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-gnu@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-openharmony-arm64@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.115.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
-    optional: true
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-ia32-msvc@0.115.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-x64-msvc@0.115.0':
-    optional: true
-
-  '@oxc-project/types@0.115.0': {}
-
   '@oxc-project/types@0.122.0': {}
 
   '@pkgr/core@0.2.9': {}
 
-  '@polka/url@1.0.0-next.29': {}
-
-  '@quansync/fs@1.0.0':
-    dependencies:
-      quansync: 1.0.0
-
   '@rolldown/binding-android-arm64@1.0.0-rc.12':
     optional: true
 
@@ -4564,6 +4480,85 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
+  '@swc/helpers@0.5.20':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/vite@4.2.2(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))':
+    dependencies:
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      tailwindcss: 4.2.2
+      vite: 8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3)
+
+  '@tanstack/virtual-core@3.13.23': {}
+
+  '@tanstack/vue-virtual@3.13.23(vue@3.5.31(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.23
+      vue: 3.5.31(typescript@5.9.3)
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -4586,6 +4581,8 @@ snapshots:
 
   '@types/trusted-types@2.0.7': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/project-service@8.57.2(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.57.2(typescript@5.9.3)
@@ -4621,173 +4618,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.57.2(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.1.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
-      eslint: 10.1.0(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/visitor-keys@8.57.2':
     dependencies:
       '@typescript-eslint/types': 8.57.2
       eslint-visitor-keys: 5.0.1
 
-  '@unocss/cli@66.6.7':
+  '@valibot/to-json-schema@1.6.0(valibot@1.3.1(typescript@5.9.3))':
     dependencies:
-      '@jridgewell/remapping': 2.3.5
-      '@unocss/config': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-      '@unocss/preset-wind4': 66.6.7
-      '@unocss/transformer-directives': 66.6.7
-      cac: 6.7.14
-      chokidar: 5.0.0
-      colorette: 2.0.20
-      consola: 3.4.2
-      magic-string: 0.30.21
-      pathe: 2.0.3
-      perfect-debounce: 2.1.0
-      tinyglobby: 0.2.15
-      unplugin-utils: 0.3.1
-
-  '@unocss/config@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      colorette: 2.0.20
-      consola: 3.4.2
-      unconfig: 7.5.0
-
-  '@unocss/core@66.6.7': {}
-
-  '@unocss/eslint-config@66.6.7(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@unocss/eslint-plugin': 66.6.7(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@unocss/eslint-plugin@66.6.7(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.57.2(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)
-      '@unocss/config': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-      magic-string: 0.30.21
-      synckit: 0.11.12
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  '@unocss/extractor-arbitrary-variants@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-
-  '@unocss/inspector@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-      colorette: 2.0.20
-      gzip-size: 6.0.0
-      sirv: 3.0.2
-
-  '@unocss/preset-attributify@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-
-  '@unocss/preset-icons@66.6.7':
-    dependencies:
-      '@iconify/utils': 3.1.0
-      '@unocss/core': 66.6.7
-      ofetch: 1.5.1
-
-  '@unocss/preset-mini@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/extractor-arbitrary-variants': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-
-  '@unocss/preset-tagify@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-
-  '@unocss/preset-typography@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-
-  '@unocss/preset-uno@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-
-  '@unocss/preset-web-fonts@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      ofetch: 1.5.1
-
-  '@unocss/preset-wind3@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-mini': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-
-  '@unocss/preset-wind4@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/extractor-arbitrary-variants': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-
-  '@unocss/preset-wind@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-
-  '@unocss/reset@66.6.7': {}
-
-  '@unocss/rule-utils@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      magic-string: 0.30.21
-
-  '@unocss/transformer-attributify-jsx@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      oxc-parser: 0.115.0
-      oxc-walker: 0.7.0(oxc-parser@0.115.0)
-
-  '@unocss/transformer-compile-class@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-
-  '@unocss/transformer-directives@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-      '@unocss/rule-utils': 66.6.7
-      css-tree: 3.2.1
-
-  '@unocss/transformer-variant-group@66.6.7':
-    dependencies:
-      '@unocss/core': 66.6.7
-
-  '@unocss/vite@66.6.7(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      '@unocss/config': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/inspector': 66.6.7
-      chokidar: 5.0.0
-      magic-string: 0.30.21
-      pathe: 2.0.3
-      tinyglobby: 0.2.15
-      unplugin-utils: 0.3.1
-      vite: 8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3)
+      valibot: 1.3.1(typescript@5.9.3)
 
   '@vitejs/plugin-legacy@8.0.1(terser@5.46.1)(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))':
     dependencies:
@@ -4893,6 +4731,19 @@ snapshots:
 
   '@vue/shared@3.5.31': {}
 
+  '@vueuse/core@14.2.1(vue@3.5.31(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.2.1
+      '@vueuse/shared': 14.2.1(vue@3.5.31(typescript@5.9.3))
+      vue: 3.5.31(typescript@5.9.3)
+
+  '@vueuse/metadata@14.2.1': {}
+
+  '@vueuse/shared@14.2.1(vue@3.5.31(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.31(typescript@5.9.3)
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -4919,6 +4770,10 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -5015,8 +4870,6 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
-  cac@6.7.14: {}
-
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -5038,6 +4891,11 @@ snapshots:
 
   caniuse-lite@1.0.30001781: {}
 
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.0.0
@@ -5054,8 +4912,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  colorette@2.0.20: {}
-
   commander@2.20.3: {}
 
   common-tags@1.8.2: {}
@@ -5064,8 +4920,6 @@ snapshots:
 
   confbox@0.2.4: {}
 
-  consola@3.4.2: {}
-
   convert-source-map@2.0.0: {}
 
   core-js-compat@3.49.0:
@@ -5082,11 +4936,6 @@ snapshots:
 
   crypto-random-string@2.0.0: {}
 
-  css-tree@3.2.1:
-    dependencies:
-      mdn-data: 2.27.1
-      source-map-js: 1.2.1
-
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
@@ -5133,8 +4982,6 @@ snapshots:
 
   defu@6.1.4: {}
 
-  destr@2.0.5: {}
-
   detect-libc@2.1.2: {}
 
   dijkstrajs@1.0.3: {}
@@ -5149,8 +4996,6 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  duplexer@0.1.2: {}
-
   ejs@3.1.10:
     dependencies:
       jake: 10.9.4
@@ -5159,6 +5004,11 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.2
+
   entities@7.0.1: {}
 
   es-abstract@1.24.1:
@@ -5314,6 +5164,23 @@ snapshots:
     dependencies:
       eslint: 10.1.0(jiti@2.6.1)
 
+  eslint-plugin-better-tailwindcss@4.3.2(eslint@10.1.0(jiti@2.6.1))(tailwindcss@4.2.2)(typescript@5.9.3):
+    dependencies:
+      '@eslint/css-tree': 3.6.9
+      '@valibot/to-json-schema': 1.6.0(valibot@1.3.1(typescript@5.9.3))
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      synckit: 0.11.12
+      tailwind-csstree: 0.1.5
+      tailwindcss: 4.2.2
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.3.1(typescript@5.9.3)
+    optionalDependencies:
+      eslint: 10.1.0(jiti@2.6.1)
+    transitivePeerDependencies:
+      - '@eslint/css'
+      - typescript
+
   eslint-plugin-prettier@5.5.5(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@10.1.0(jiti@2.6.1)))(eslint@10.1.0(jiti@2.6.1))(prettier@3.8.1):
     dependencies:
       eslint: 10.1.0(jiti@2.6.1)
@@ -5411,10 +5278,6 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-
   esutils@2.0.3: {}
 
   exsolve@1.0.8: {}
@@ -5576,12 +5439,10 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  gzip-size@6.0.0:
-    dependencies:
-      duplexer: 0.1.2
-
   has-bigints@1.1.0: {}
 
+  has-flag@4.0.0: {}
+
   has-property-descriptors@1.0.2:
     dependencies:
       es-define-property: 1.0.1
@@ -5877,16 +5738,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  magic-regexp@0.10.0:
-    dependencies:
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-      mlly: 1.8.2
-      regexp-tree: 0.1.27
-      type-level-regexp: 0.1.17
-      ufo: 1.6.3
-      unplugin: 2.3.11
-
   magic-string-ast@1.0.3:
     dependencies:
       magic-string: 0.30.21
@@ -5901,7 +5752,7 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mdn-data@2.27.1: {}
+  mdn-data@2.23.0: {}
 
   meow@13.2.0: {}
 
@@ -5920,6 +5771,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimist@1.2.8: {}
+
   minipass@7.1.3: {}
 
   mlly@1.8.2:
@@ -5929,8 +5782,6 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.3
 
-  mrmime@2.0.1: {}
-
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -5939,8 +5790,6 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  node-fetch-native@1.6.7: {}
-
   node-releases@2.0.36: {}
 
   nth-check@2.1.1:
@@ -5960,11 +5809,9 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  ofetch@1.5.1:
-    dependencies:
-      destr: 2.0.5
-      node-fetch-native: 1.6.7
-      ufo: 1.6.3
+  obug@2.1.1: {}
+
+  ohash@2.0.11: {}
 
   optionator@0.9.4:
     dependencies:
@@ -5981,36 +5828,6 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxc-parser@0.115.0:
-    dependencies:
-      '@oxc-project/types': 0.115.0
-    optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.115.0
-      '@oxc-parser/binding-android-arm64': 0.115.0
-      '@oxc-parser/binding-darwin-arm64': 0.115.0
-      '@oxc-parser/binding-darwin-x64': 0.115.0
-      '@oxc-parser/binding-freebsd-x64': 0.115.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.115.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.115.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.115.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.115.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.115.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.115.0
-      '@oxc-parser/binding-linux-x64-musl': 0.115.0
-      '@oxc-parser/binding-openharmony-arm64': 0.115.0
-      '@oxc-parser/binding-wasm32-wasi': 0.115.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.115.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.115.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.115.0
-
-  oxc-walker@0.7.0(oxc-parser@0.115.0):
-    dependencies:
-      magic-regexp: 0.10.0
-      oxc-parser: 0.115.0
-
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -6105,8 +5922,6 @@ snapshots:
 
   quansync@0.2.11: {}
 
-  quansync@1.0.0: {}
-
   queue-microtask@1.2.3: {}
 
   randombytes@2.1.0:
@@ -6134,8 +5949,6 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
-  regexp-tree@0.1.27: {}
-
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -6160,6 +5973,22 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
+  reka-ui@2.9.2(vue@3.5.31(typescript@5.9.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/vue': 1.1.11(vue@3.5.31(typescript@5.9.3))
+      '@internationalized/date': 3.12.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.23(vue@3.5.31(typescript@5.9.3))
+      '@vueuse/core': 14.2.1(vue@3.5.31(typescript@5.9.3))
+      '@vueuse/shared': 14.2.1(vue@3.5.31(typescript@5.9.3))
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.31(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   relative-time-format@1.1.12: {}
 
   require-directory@2.1.1: {}
@@ -6298,12 +6127,6 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  sirv@3.0.2:
-    dependencies:
-      '@polka/url': 1.0.0-next.29
-      mrmime: 2.0.1
-      totalist: 3.0.1
-
   smob@1.6.1: {}
 
   source-map-js@1.2.1: {}
@@ -6381,10 +6204,16 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-bom@3.0.0: {}
+
   strip-comments@2.0.1: {}
 
   strnum@2.2.2: {}
 
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   synckit@0.11.12:
@@ -6393,6 +6222,12 @@ snapshots:
 
   systemjs@6.15.1: {}
 
+  tailwind-csstree@0.1.5: {}
+
+  tailwindcss@4.2.2: {}
+
+  tapable@2.3.2: {}
+
   temp-dir@2.0.0: {}
 
   tempy@0.6.0:
@@ -6420,8 +6255,6 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  totalist@3.0.1: {}
-
   tr46@1.0.1:
     dependencies:
       punycode: 2.3.1
@@ -6430,8 +6263,20 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  tslib@2.8.1:
-    optional: true
+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.20.1
+      tapable: 2.3.2
+      tsconfig-paths: 4.2.0
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@2.8.1: {}
 
   type-check@0.4.0:
     dependencies:
@@ -6439,8 +6284,6 @@ snapshots:
 
   type-fest@0.16.0: {}
 
-  type-level-regexp@0.1.17: {}
-
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -6485,19 +6328,6 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  unconfig-core@7.5.0:
-    dependencies:
-      '@quansync/fs': 1.0.0
-      quansync: 1.0.0
-
-  unconfig@7.5.0:
-    dependencies:
-      '@quansync/fs': 1.0.0
-      defu: 6.1.4
-      jiti: 2.6.1
-      quansync: 1.0.0
-      unconfig-core: 7.5.0
-
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -6515,33 +6345,34 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss@66.6.7(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3)):
+  unplugin-icons@23.0.1(@vue/compiler-sfc@3.5.31):
     dependencies:
-      '@unocss/cli': 66.6.7
-      '@unocss/core': 66.6.7
-      '@unocss/preset-attributify': 66.6.7
-      '@unocss/preset-icons': 66.6.7
-      '@unocss/preset-mini': 66.6.7
-      '@unocss/preset-tagify': 66.6.7
-      '@unocss/preset-typography': 66.6.7
-      '@unocss/preset-uno': 66.6.7
-      '@unocss/preset-web-fonts': 66.6.7
-      '@unocss/preset-wind': 66.6.7
-      '@unocss/preset-wind3': 66.6.7
-      '@unocss/preset-wind4': 66.6.7
-      '@unocss/transformer-attributify-jsx': 66.6.7
-      '@unocss/transformer-compile-class': 66.6.7
-      '@unocss/transformer-directives': 66.6.7
-      '@unocss/transformer-variant-group': 66.6.7
-      '@unocss/vite': 66.6.7(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3))
-    transitivePeerDependencies:
-      - vite
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/utils': 3.1.0
+      local-pkg: 1.1.2
+      obug: 2.1.1
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.31
 
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.4
 
+  unplugin-vue-components@32.0.0(vue@3.5.31(typescript@5.9.3)):
+    dependencies:
+      chokidar: 5.0.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      obug: 2.1.1
+      picomatch: 4.0.4
+      tinyglobby: 0.2.15
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+      vue: 3.5.31(typescript@5.9.3)
+
   unplugin@2.3.11:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -6569,6 +6400,10 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  valibot@1.3.1(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   vite-plugin-eslint@1.8.1(eslint@10.1.0(jiti@2.6.1))(vite@8.0.3(esbuild@0.27.4)(jiti@2.6.1)(terser@5.46.1)(yaml@2.8.3)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
@@ -6602,6 +6437,10 @@ snapshots:
       terser: 5.46.1
       yaml: 2.8.3
 
+  vue-demi@0.14.10(vue@3.5.31(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.31(typescript@5.9.3)
+
   vue-eslint-parser@10.4.0(eslint@10.1.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
diff --git a/src/App.vue b/src/App.vue
index a8b75a75..361308cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="reset min-h-screen w-full flex flex-col px-1vw py-5 antialiased" :class="[theme]">
+    <div
+        class="flex min-h-screen w-full flex-col bg-white px-[1vw] py-5 text-black antialiased dark:bg-dark-900 dark:text-white"
+        :class="[theme]"
+    >
         <div class="flex-1">
             <NavBar />
             <router-view v-slot="{ Component }">
@@ -14,27 +17,28 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import NavBar from "./components/NavBar.vue";
 import FooterComponent from "./components/FooterComponent.vue";
-import { getPreferenceString } from "@/composables/usePreferences.js";
+import { testLocalStorage, usePreferenceString } from "@/composables/usePreferences.js";
 import { getDefaultLanguage, TimeAgo, TimeAgoConfig } from "@/composables/useFormatting.js";
 import { fetchSubscriptions } from "@/composables/useSubscriptions.js";
 import { getChannelGroups, createOrUpdateChannelGroup } from "@/composables/useChannelGroups.js";
 
 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
+const themePreference = usePreferenceString("theme", "dark");
+const localePreference = usePreferenceString("hl", "en");
 const theme = ref("dark");
 
 function setTheme() {
-    let themePref = getPreferenceString("theme", "dark");
     const themes = {
         dark: "dark",
         light: "light",
         auto: darkModePreference.matches ? "dark" : "light",
     };
 
-    theme.value = themes[themePref];
+    theme.value = themes[themePreference.value] ?? themes.dark;
 
     changeTitleBarColor();
 
@@ -48,11 +52,42 @@ function changeTitleBarColor() {
     themeColor.setAttribute("content", currentColor[theme.value]);
 }
 
-onMounted(() => {
-    setTheme();
-    darkModePreference.addEventListener("change", () => {
+async function applyLocale(locale = localePreference.value) {
+    const resolvedLocale = locale || (await getDefaultLanguage());
+
+    if (resolvedLocale !== TimeAgoConfig.locale) {
+        const localeTime = await import(`../node_modules/javascript-time-ago/locale/${resolvedLocale}.json`)
+            .catch(() => null)
+            .then(module => module?.default);
+        if (localeTime) {
+            TimeAgo.addLocale(localeTime);
+            TimeAgoConfig.locale = resolvedLocale;
+        }
+    }
+
+    if (window.i18n.global.locale.value !== resolvedLocale) {
+        if (!window.i18n.global.availableLocales.includes(resolvedLocale)) {
+            const messages = await import(`./locales/${resolvedLocale}.json`).then(module => module.default);
+            window.i18n.global.setLocaleMessage(resolvedLocale, messages);
+        }
+        window.i18n.global.locale.value = resolvedLocale;
+    }
+}
+
+function handlePreferredColorSchemeChange() {
+    if (themePreference.value === "auto") setTheme();
+}
+
+watch(
+    themePreference,
+    () => {
         setTheme();
-    });
+    },
+    { immediate: true },
+);
+
+onMounted(() => {
+    darkModePreference.addEventListener("change", handlePreferredColorSchemeChange);
 
     if ("indexedDB" in window) {
         const request = indexedDB.open("piped-db", 6);
@@ -107,202 +142,115 @@ onMounted(() => {
     } else console.log("This browser doesn't support IndexedDB");
 
     (async function () {
-        const defaultLang = await getDefaultLanguage();
-        const locale = getPreferenceString("hl", defaultLang);
-        if (locale !== TimeAgoConfig.locale) {
-            const localeTime = await import(`../node_modules/javascript-time-ago/locale/${locale}.json`)
-                .catch(() => null)
-                .then(module => module?.default);
-            if (localeTime) {
-                TimeAgo.addLocale(localeTime);
-                TimeAgoConfig.locale = locale;
-            }
-        }
-        if (window.i18n.global.locale.value !== locale) {
-            if (!window.i18n.global.availableLocales.includes(locale)) {
-                const messages = await import(`./locales/${locale}.json`).then(module => module.default);
-                window.i18n.global.setLocaleMessage(locale, messages);
-            }
-            window.i18n.global.locale.value = locale;
-        }
+        const initialLocale =
+            testLocalStorage() && localStorage.getItem("hl") === null
+                ? await getDefaultLanguage()
+                : localePreference.value;
+        await applyLocale(initialLocale);
+
+        watch(localePreference, locale => {
+            applyLocale(locale);
+        });
     })();
 });
+
+onBeforeUnmount(() => {
+    darkModePreference.removeEventListener("change", handlePreferredColorSchemeChange);
+});
 </script>
 
 <style>
-h1,
-p,
-a,
-b {
-    unicode-bidi: plaintext;
-    text-align: start;
-}
+@reference "./app.css";
 
-:root {
-    color-scheme: only light;
-}
+@layer base {
+    h1,
+    p,
+    a,
+    b {
+        unicode-bidi: plaintext;
+        text-align: start;
+    }
 
-::-webkit-scrollbar {
-    background-color: #d1d5db;
-}
+    :root {
+        color-scheme: only light;
+    }
 
-::-webkit-scrollbar-thumb {
-    background-color: #4b4f52;
-}
+    ::-webkit-scrollbar {
+        background-color: #d1d5db;
+    }
 
-::-webkit-scrollbar-thumb:hover {
-    background-color: #5b6469;
-}
+    ::-webkit-scrollbar-thumb {
+        background-color: #4b4f52;
+    }
 
-::-webkit-scrollbar-thumb:active {
-    background-color: #485053;
-}
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: #5b6469;
+    }
 
-::-webkit-scrollbar-corner {
-    background-color: #0b0e0f;
-}
+    ::-webkit-scrollbar-thumb:active {
+        background-color: #485053;
+    }
 
-:root {
-    scrollbar-color: #4b4f52 #d1d5db;
-}
+    ::-webkit-scrollbar-corner {
+        background-color: #0b0e0f;
+    }
 
-.dark ::-webkit-scrollbar {
-    background-color: #15191a;
-}
+    :root {
+        scrollbar-color: #4b4f52 #d1d5db;
+    }
 
-.dark ::-webkit-scrollbar-thumb {
-    background-color: #4b4f52;
-}
+    .dark ::-webkit-scrollbar {
+        background-color: #15191a;
+    }
 
-.dark ::-webkit-scrollbar-thumb:hover {
-    background-color: #5b6469;
-}
+    .dark ::-webkit-scrollbar-thumb {
+        background-color: #4b4f52;
+    }
 
-.dark ::-webkit-scrollbar-thumb:active {
-    background-color: #485053;
-}
+    .dark ::-webkit-scrollbar-thumb:hover {
+        background-color: #5b6469;
+    }
 
-.dark ::-webkit-scrollbar-corner {
-    background-color: #0b0e0f;
-}
+    .dark ::-webkit-scrollbar-thumb:active {
+        background-color: #485053;
+    }
 
-:root.dark {
-    scrollbar-color: #4b4f52 #15191a;
-}
+    .dark ::-webkit-scrollbar-corner {
+        background-color: #0b0e0f;
+    }
 
-* {
-    @apply font-sans;
-}
+    :root.dark {
+        scrollbar-color: #4b4f52 #15191a;
+    }
 
-.video-grid {
-    @apply grid grid-cols-1 mx-2 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 col-auto lt-md:gap-x-3 md:gap-x-6 gap-y-5;
-}
+    * {
+        font-family: var(--font-sans);
+    }
 
-.btn {
-    @apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block hover:bg-gray-500 hover:text-white;
-}
+    hr {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.75rem !important;
+        border-color: #d1d5db;
+    }
 
-.reset {
-    @apply text-black bg-white;
-}
+    .dark hr {
+        border-color: var(--color-dark-100);
+    }
 
-.dark {
-    @apply text-white bg-dark-900;
-}
+    h1,
+    h2 {
+        margin: 0;
+        font-weight: 700;
+    }
 
-.input,
-.select,
-.btn {
-    @apply w-auto text-gray-600 bg-gray-300;
-}
+    h1 {
+        font-size: 3rem !important;
+        line-height: 1;
+    }
 
-.input,
-.select {
-    @apply h-8;
-}
-
-.checkbox {
-    @apply h-4 w-4;
-}
-
-.dark .input,
-.dark .select,
-.dark .btn {
-    @apply text-gray-400 bg-dark-400;
-}
-
-.dark .btn {
-    @apply hover:bg-dark-300;
-}
-
-.input {
-    @apply px-2.5 rounded-md;
-}
-
-.input:focus {
-    @apply outline-red-500;
-    outline-style: solid;
-    outline-width: 2px;
-    box-shadow: 0 0 15px rgba(239, 68, 68, 1);
-}
-
-hr {
-    @apply !mt-2 !mb-3 border-gray-300;
-}
-
-.dark hr {
-    @apply border-dark-100;
-}
-
-h1,
-h2 {
-    @apply m-0 font-bold;
-}
-
-h1 {
-    @apply !text-5xl;
-}
-
-h2 {
-    @apply !text-3xl;
-}
-
-.table {
-    @apply w-full text-lg text-left font-light border;
-}
-
-.link {
-    @apply focus:text-red-500 hover:text-red-500;
-}
-
-.link-secondary {
-    @apply hover:text-dark-400 focus:text-dark-400 underline underline-dark-400;
-}
-
-.dark .link {
-    @apply focus:text-red-400 hover:text-red-400;
-}
-
-.dark .link-secondary {
-    @apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
-}
-
-.line {
-    @apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900;
-}
-
-.dark .line {
-    @apply bg-white;
-}
-
-.thumbnail-overlay {
-    @apply rounded-md absolute bg-black text-white bg-opacity-75 px-5px;
-}
-
-.thumbnail-right {
-    @apply bottom-5px right-5px;
-}
-.thumbnail-left {
-    @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
+    h2 {
+        font-size: 1.875rem !important;
+        line-height: 2.25rem;
+    }
 }
 </style>
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 00000000..993eb45f
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+@theme {
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    --color-dark-100: #3f3f46;
+    --color-dark-300: #323232;
+    --color-dark-400: #222222;
+    --color-dark-700: #1a1a1a;
+    --color-dark-800: #141414;
+    --color-dark-900: #0f0f0f;
+}
+
+@utility skip-segment-button {
+    z-index: 1000;
+    position: absolute;
+    transform: translate(0, -50%);
+    top: 50%;
+    right: 0;
+    background-color: rgb(0 0 0 / 0.5);
+    border: 2px rgba(255, 255, 255, 0.75) solid;
+    border-right: 0;
+    border-radius: 0.75em;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    line-height: 1.5em;
+}
+
+@utility skip-segment-icon {
+    font-size: 1.6em !important;
+    line-height: inherit !important;
+    margin-left: 0.4em;
+}
diff --git a/src/components/AddToGroupModal.vue b/src/components/AddToGroupModal.vue
index ccef74c2..2dd8f66c 100644
--- a/src/components/AddToGroupModal.vue
+++ b/src/components/AddToGroupModal.vue
@@ -1,6 +1,6 @@
 <template>
     <ModalComponent @close="$emit('close')">
-        <div class="min-w-[50vw] flex flex-col">
+        <div class="flex min-w-[50vw] flex-col">
             <div class="h-[70vh] overflow-y-scroll pr-4">
                 <span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
                 <div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
@@ -15,7 +15,11 @@
                     <hr class="h-1 w-full" />
                 </div>
             </div>
-            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="showCreateGroupModal = true" />
+            <button
+                v-t="'actions.create_group'"
+                class="ml-auto inline-block w-max cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="showCreateGroupModal = true"
+            />
         </div>
     </ModalComponent>
 
diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index e0d1f705..b5b94394 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -1,38 +1,53 @@
 <template>
-    <div class="flex flex-col flex-justify-between">
-        <router-link :to="item.url" class="link font-bold">
+    <div class="flex flex-col justify-between">
+        <router-link
+            :to="item.url"
+            class="font-bold hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+        >
             <div class="my-4 flex justify-center">
                 <img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="item.thumbnail" />
             </div>
-            <p>
+            <p class="line-clamp-2 leading-tight">
                 <span v-text="item.name" />
-                <i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
+                <i-fa6-solid-check v-if="item.verified" class="ml-1.5" />
             </p>
         </router-link>
-        <p v-if="item.description" class="pt-1 text-sm" v-text="item.description" />
-        <router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
-            <p>
+        <p
+            v-if="item.description"
+            class="line-clamp-2 pt-1 text-sm text-gray-600 dark:text-gray-400"
+            v-text="item.description"
+        />
+        <router-link
+            v-if="item.uploaderUrl"
+            class="mt-1 line-clamp-1 block text-sm underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
+            :to="item.uploaderUrl"
+        >
+            <p class="leading-tight">
                 <span v-text="item.uploader" />
-                <i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
+                <i-fa6-solid-check v-if="item.uploaderVerified" class="ml-1.5" />
             </p>
         </router-link>
 
-        <a v-if="item.uploaderName" class="link" v-text="item.uploaderName" />
+        <a
+            v-if="item.uploaderName"
+            class="mt-1 line-clamp-1 block text-sm hover:text-red-500 focus:text-red-500 dark:text-gray-300 dark:hover:text-red-400 dark:focus:text-red-400"
+            v-text="item.uploaderName"
+        />
         <template v-if="item.videos >= 0">
-            <br v-if="item.uploaderName" />
-            <strong v-text="`${item.videos} ${$t('video.videos')}`" />
+            <strong
+                class="mt-1 text-sm text-gray-800 dark:text-gray-200"
+                v-text="`${item.videos} ${$t('video.videos')}`"
+            />
         </template>
 
         <button
             v-if="subscribed != null"
-            class="btn mt-2 w-max"
+            class="mt-2 inline-block w-max cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
             @click="subscribeHandler"
             v-text="
                 $t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) + ' - ' + numberFormat(item.subscribers)
             "
         />
-
-        <br />
     </div>
 </template>
 
diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 931a18e1..aa88fc98 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -12,14 +12,14 @@
             <div class="flex place-items-center">
                 <img height="48" width="48" class="m-1 rounded-full" :src="channel.avatarUrl" />
                 <div class="flex items-center gap-1">
-                    <h1 class="!text-xl" v-text="channel.name" />
-                    <i v-if="channel.verified" class="i-fa6-solid:check !text-xl" />
+                    <h1 class="text-xl!" v-text="channel.name" />
+                    <i-fa6-solid-check v-if="channel.verified" class="text-xl!" />
                 </div>
             </div>
 
             <div class="flex gap-2">
                 <button
-                    class="btn"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                     @click="subscribeHandler"
                     v-text="
                         $t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) +
@@ -31,7 +31,7 @@
                 <button
                     v-if="subscribed"
                     v-t="'actions.add_to_group'"
-                    class="btn"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                     @click="showGroupModal = true"
                 ></button>
 
@@ -43,9 +43,9 @@
                     role="button"
                     :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
                     target="_blank"
-                    class="btn flex-col"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 >
-                    <i class="i-fa6-solid:rss" />
+                    <i-fa6-solid-rss />
                 </a>
             </div>
         </div>
@@ -58,20 +58,28 @@
             <button
                 v-for="(tab, index) in tabs"
                 :key="tab.name"
-                class="btn mr-2"
-                :class="{ active: selectedTab == index }"
+                class="mr-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                :class="{
+                    'bg-gray-500 text-white dark:bg-dark-300': selectedTab == index,
+                }"
                 @click="loadTab(index)"
             >
                 <span v-text="tab.translatedName"></span>
             </button>
             <router-link :to="`/playlist?list=UU${channel.id.substring(2)}`">
-                <button class="btn h-full">Play all videos</button>
+                <button
+                    class="inline-block h-full w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                >
+                    Play all videos
+                </button>
             </router-link>
         </div>
 
         <hr />
 
-        <div class="video-grid">
+        <div
+            class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+        >
             <ContentItem
                 v-for="item in contentItems"
                 :key="item.url"
diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index f22ced13..b12d006b 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,22 +1,22 @@
 <template>
     <!-- desktop view -->
-    <div v-if="!mobileLayout" class="max-h-75vh max-w-35vw min-h-64 flex-col overflow-y-auto lt-lg:hidden">
+    <div v-if="!mobileLayout" class="max-h-[75vh] min-h-64 max-w-[35vw] flex-col overflow-y-auto max-lg:hidden">
         <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
         </h2>
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="chapter-vertical"
+            class="cursor-pointer self-center p-2.5 hover:bg-gray-500"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
             <div class="flex">
-                <span class="mr-2 mt-5 text-current" v-text="index + 1" />
-                <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
+                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
+                <img class="h-[30%] w-[30%] shrink-0" :src="chapter.image" :alt="chapter.title" />
                 <div class="m-2 flex flex-col">
                     <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
                 </div>
             </div>
         </div>
@@ -25,7 +25,7 @@
     <!-- mobile vertical view -->
     <div
         v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
-        class="max-h-64 flex flex-col overflow-y-auto"
+        class="flex max-h-64 flex-col overflow-y-auto"
     >
         <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
@@ -33,16 +33,16 @@
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="chapter-vertical"
+            class="cursor-pointer self-center p-2.5 hover:bg-gray-500"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
             <div class="flex">
-                <span class="mr-2 mt-5 text-current" v-text="index + 1" />
-                <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
+                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
+                <img class="h-[30%] w-[30%] shrink-0" :src="chapter.image" :alt="chapter.title" />
                 <div class="m-2 flex flex-col">
                     <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
                 </div>
             </div>
         </div>
@@ -52,14 +52,18 @@
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="chapter"
+            class="cursor-pointer self-center p-2.5"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
-            <img :src="chapter.image" :alt="chapter.title" />
+            <img class="size-full" :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
-                <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
-                <span class="px-1 text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
+                <span
+                    class="inline-block w-[10em] truncate overflow-hidden text-sm"
+                    :title="chapter.title"
+                    v-text="chapter.title"
+                />
+                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
@@ -92,26 +96,11 @@ defineEmits(["seek"]);
 </script>
 
 <style>
-::-webkit-scrollbar {
-    height: 5px;
-}
-.chapter {
-    @apply cursor-pointer self-center p-2.5;
-}
-.chapter img {
-    @apply w-full h-full;
-}
-.chapter-vertical {
-    @apply cursor-pointer self-center p-2.5;
-}
-.chapter-vertical img {
-    @apply w-3/10 h-3/10;
-}
+@reference "../app.css";
 
-.chapter-vertical:hover {
-    @apply bg-gray-500;
-}
-.text-truncate {
-    @apply truncate overflow-hidden inline-block w-10em;
+@layer base {
+    ::-webkit-scrollbar {
+        height: 5px;
+    }
 }
 </style>
diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index 66d73220..09c4c6f0 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -1,13 +1,13 @@
 <template>
-    <div v-if="text" class="mx-1 whitespace-pre-wrap py-2">
+    <div v-if="text" class="mx-1 py-2 whitespace-pre-wrap">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-if="showFullText" class="contentText" v-html="fullText()" />
+        <span v-if="showFullText" class="wrap-anywhere" v-html="fullText()" />
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-else v-html="collapsedText()" />
         <span v-if="text.length > visibleLimit && !showFullText">...</span>
         <button
             v-if="text.length > visibleLimit"
-            class="block whitespace-normal text-neutral-500 font-semibold hover:underline"
+            class="block font-semibold whitespace-normal text-neutral-500 hover:underline"
             @click="showFullText = !showFullText"
         >
             [{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
@@ -40,9 +40,3 @@ function collapsedText() {
     return purifyHTML(rewriteDescription(props.text.slice(0, props.visibleLimit)));
 }
 </script>
-
-<style>
-.contentText {
-    word-wrap: anywhere;
-}
-</style>
diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index c977ab70..1f5b8ffe 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -1,18 +1,11 @@
 <template>
-    <div class="comment mt-1.5 flex">
-        <img
-            loading="lazy"
-            :src="comment.thumbnail"
-            class="comment-avatar h-12 w-12 rounded-full"
-            height="48"
-            width="48"
-            alt="Avatar"
-        />
+    <div class="mt-1.5 flex">
+        <img loading="lazy" :src="comment.thumbnail" class="size-12 rounded-full" height="48" width="48" alt="Avatar" />
 
-        <div class="comment-content pl-2">
-            <div class="comment-header">
-                <div v-if="comment.pinned" class="comment-pinned">
-                    <i class="i-fa6-solid:thumbtack" />
+        <div class="pl-2">
+            <div>
+                <div v-if="comment.pinned">
+                    <i-fa6-solid-thumbtack />
                     <span
                         v-t="{
                             path: 'comment.pinned_by',
@@ -22,45 +15,49 @@
                     />
                 </div>
 
-                <div class="comment-author">
-                    <router-link class="link font-bold" :to="comment.commentorUrl">{{ comment.author }}</router-link>
-                    <i v-if="comment.verified" class="i-fa6-solid:check ml-1.5" />
+                <div>
+                    <router-link
+                        class="font-bold hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+                        :to="comment.commentorUrl"
+                        >{{ comment.author }}</router-link
+                    >
+                    <i-fa6-solid-check v-if="comment.verified" class="ml-1.5" />
                 </div>
-                <div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
+                <div class="mb-1.5 text-sm" v-text="comment.commentedTime" />
             </div>
             <!-- eslint-disable-next-line vue/no-v-html -->
             <CollapsableText :text="comment.commentText" :visible-limit="500" />
-            <div class="comment-footer my-1 flex items-center gap-3">
-                <div class="i-fa6-solid:thumbs-up" />
+            <div class="my-1 flex items-center gap-3">
+                <i-fa6-solid-thumbs-up />
                 <span v-text="numberFormat(comment.likeCount)" />
-                <i v-if="comment.hearted" class="i-fa6-solid:heart" :title="$t('actions.creator_liked')" />
+                <i-fa6-solid-heart v-if="comment.hearted" :title="$t('actions.creator_liked')" />
                 <img
                     v-if="comment.creatorReplied"
                     :src="uploaderAvatarUrl"
-                    class="h-5 w-5 rounded-full"
+                    class="size-5 rounded-full"
                     :title="$t('actions.creator_replied')"
                 />
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div class="cursor-pointer" @click="loadReplies">
                     <a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />
-                    <i class="i-fa6-solid:level-down-alt ml-1.5" />
+                    <i-fa6-solid-turn-down class="ml-1.5" />
                 </div>
             </template>
             <template v-if="showingReplies">
                 <div class="cursor-pointer" @click="hideReplies">
                     <a v-t="'actions.hide_replies'" />
-                    <i class="i-fa6-solid:level-up-alt ml-1.5" />
+                    <i-fa6-solid-turn-up class="ml-1.5" />
                 </div>
             </template>
-            <div v-show="showingReplies" v-if="replies" class="replies">
+            <div v-show="showingReplies" v-if="replies">
                 <div v-for="reply in replies" :key="reply.commentId" class="w-full">
                     <!-- eslint-disable-next-line vue/no-undef-components -->
                     <CommentItem :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
                 <div v-if="nextpage" class="cursor-pointer" @click="loadReplies">
                     <a v-t="'actions.load_more_replies'" />
-                    <i class="i-fa6-solid:level-down-alt ml-1.5" />
+                    <i-fa6-solid-turn-down class="ml-1.5" />
                 </div>
             </div>
         </div>
diff --git a/src/components/ConfirmModal.vue b/src/components/ConfirmModal.vue
index 55ad12c1..8ccd739f 100644
--- a/src/components/ConfirmModal.vue
+++ b/src/components/ConfirmModal.vue
@@ -2,9 +2,17 @@
     <ModalComponent @close="$emit('close')">
         <div>
             <h3 class="text-xl" v-text="message" />
-            <div class="ml-auto mt-8 w-min flex gap-2">
-                <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
-                <button v-t="'actions.okay'" class="btn" @click="$emit('confirm')" />
+            <div class="mt-8 ml-auto flex w-min gap-2">
+                <button
+                    v-t="'actions.cancel'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="$emit('close')"
+                />
+                <button
+                    v-t="'actions.okay'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="$emit('confirm')"
+                />
             </div>
         </div>
     </ModalComponent>
diff --git a/src/components/CreateGroupModal.vue b/src/components/CreateGroupModal.vue
index e6c560b3..190a761b 100644
--- a/src/components/CreateGroupModal.vue
+++ b/src/components/CreateGroupModal.vue
@@ -2,8 +2,17 @@
     <ModalComponent @close="$emit('close')">
         <h2 v-t="'actions.create_group'" />
         <div class="flex flex-col">
-            <input v-model="groupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
-            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
+            <input
+                v-model="groupName"
+                class="my-4 h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
+                type="text"
+                :placeholder="$t('actions.group_name')"
+            />
+            <button
+                v-t="'actions.create_group'"
+                class="ml-auto inline-block w-max cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="createGroup()"
+            />
         </div>
     </ModalComponent>
 </template>
diff --git a/src/components/CreatePlaylistModal.vue b/src/components/CreatePlaylistModal.vue
index 42febe3b..db03c483 100644
--- a/src/components/CreatePlaylistModal.vue
+++ b/src/components/CreatePlaylistModal.vue
@@ -2,10 +2,23 @@
     <ModalComponent @close="$emit('close')">
         <div class="flex flex-col">
             <h2 v-t="'actions.create_playlist'" />
-            <input ref="input" v-model="playlistName" type="text" class="input mt-2" />
-            <div class="ml-auto mt-3 w-min flex">
-                <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
-                <button v-t="'actions.okay'" class="btn ml-2" @click="onCreatePlaylist" />
+            <input
+                ref="input"
+                v-model="playlistName"
+                type="text"
+                class="mt-2 h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
+            />
+            <div class="mt-3 ml-auto flex w-min">
+                <button
+                    v-t="'actions.cancel'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="$emit('close')"
+                />
+                <button
+                    v-t="'actions.okay'"
+                    class="ml-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="onCreatePlaylist"
+                />
             </div>
         </div>
     </ModalComponent>
diff --git a/src/components/CustomInstanceModal.vue b/src/components/CustomInstanceModal.vue
index c14d3973..0ca6fbc0 100644
--- a/src/components/CustomInstanceModal.vue
+++ b/src/components/CustomInstanceModal.vue
@@ -7,8 +7,8 @@
                 <div v-for="(customInstance, index) in customInstances" :key="customInstance.name">
                     <div class="flex items-center justify-between">
                         <span>{{ customInstance.name }} - {{ customInstance.api_url }}</span>
-                        <span
-                            class="i-fa6-solid:circle-minus cursor-pointer"
+                        <i-fa6-solid-circle-minus
+                            class="cursor-pointer"
                             @click="removeInstance(customInstance, index)"
                         />
                     </div>
@@ -16,15 +16,24 @@
                 </div>
             </div>
             <form class="flex flex-col items-end gap-2">
-                <input v-model="name" class="input w-full" type="text" :placeholder="$t('preferences.instance_name')" />
+                <input
+                    v-model="name"
+                    class="h-8 w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
+                    type="text"
+                    :placeholder="$t('preferences.instance_name')"
+                />
                 <input
                     v-model="url"
-                    class="input w-full"
+                    class="h-8 w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     type="text"
                     :placeholder="$t('preferences.api_url')"
                     @keyup.enter="addInstance"
                 />
-                <button v-t="'actions.add'" class="btn w-min" @click.prevent="addInstance" />
+                <button
+                    v-t="'actions.add'"
+                    class="inline-block w-min cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click.prevent="addInstance"
+                />
             </form>
         </div>
     </ModalComponent>
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index 9c718dc5..3cac5047 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -1,6 +1,10 @@
 <template>
     <p v-text="message" />
-    <button v-t="'actions.show_more'" class="btn" @click="toggleTrace" />
+    <button
+        v-t="'actions.show_more'"
+        class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        @click="toggleTrace"
+    />
     <p ref="stacktrace" class="whitespace-pre-wrap" hidden v-text="error" />
 </template>
 
diff --git a/src/components/ExportHistoryModal.vue b/src/components/ExportHistoryModal.vue
index d24223b4..652c30b3 100644
--- a/src/components/ExportHistoryModal.vue
+++ b/src/components/ExportHistoryModal.vue
@@ -1,11 +1,15 @@
 <template>
     <ModalComponent>
-        <div class="min-w-max flex flex-col">
+        <div class="flex min-w-max flex-col">
             <h2 v-t="'actions.export_history'" class="mb-4 text-center text-xl font-bold" />
             <form>
                 <div>
                     <label v-t="'actions.file_format'" class="mr-2" for="export-format" />
-                    <select id="export-format" v-model="exportAs" class="select">
+                    <select
+                        id="export-format"
+                        v-model="exportAs"
+                        class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+                    >
                         <option
                             v-for="option in exportOptions"
                             :key="option"
@@ -18,7 +22,7 @@
                     <label v-for="field in fields" :key="field" class="flex items-center gap-2">
                         <input
                             v-model="selectedFields"
-                            class="checkbox"
+                            class="size-4"
                             type="checkbox"
                             :value="field"
                             :disabled="field === 'videoId'"
@@ -27,7 +31,11 @@
                     </label>
                 </div>
             </form>
-            <button class="btn mt-4" @click="handleExport" v-text="$t('actions.export')" />
+            <button
+                class="mt-4 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="handleExport"
+                v-text="$t('actions.export')"
+            />
         </div>
     </ModalComponent>
 </template>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 17857dff..83dc8f3a 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,7 +1,7 @@
 <template>
     <h1 v-t="'titles.feed'" class="my-4 text-center font-bold" />
 
-    <div class="flex flex-col flex-wrap gap-2 children:(flex items-center gap-1) md:flex-row md:items-center">
+    <div class="flex flex-col flex-wrap gap-2 *:flex *:items-center *:gap-1 md:flex-row md:items-center">
         <span>
             <label for="filters">
                 <strong v-text="`${$t('actions.filter')}:`" />
@@ -10,7 +10,7 @@
                 id="filters"
                 v-model="selectedFilter"
                 default="all"
-                class="select flex-grow"
+                class="h-8 grow bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
                 @change="onFilterChange()"
             >
                 <option v-for="filter in availableFilters" :key="filter" v-t="`video.${filter}`" :value="filter" />
@@ -21,7 +21,12 @@
             <label for="group-selector">
                 <strong v-text="`${$t('titles.channel_groups')}:`" />
             </label>
-            <select id="group-selector" v-model="selectedGroupName" default="" class="select flex-grow">
+            <select
+                id="group-selector"
+                v-model="selectedGroupName"
+                default=""
+                class="h-8 grow bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            >
                 <option v-t="`video.all`" value="" />
                 <option
                     v-for="group in channelGroups"
@@ -39,14 +44,24 @@
     <hr />
 
     <span class="flex gap-2">
-        <router-link v-t="'titles.subscriptions'" class="btn" to="/subscriptions" />
-        <a :href="getRssUrl" class="btn">
-            <i class="i-fa6-solid:rss" />
+        <router-link
+            v-t="'titles.subscriptions'"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            to="/subscriptions"
+        />
+        <a
+            :href="getRssUrl"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        >
+            <i-fa6-solid-rss />
         </a>
     </span>
     <hr />
 
-    <LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
+    <LoadingIndicatorPage
+        :show-content="videosStore != null"
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <template v-for="video in filteredVideos" :key="video.url">
             <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" @update:watched="onUpdateWatched" />
         </template>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index b13d5abd..bfe38033 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,27 +1,41 @@
 <template>
-    <footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
-        <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
-            <i class="i-fa6-brands:github" />
+    <footer class="mt-10 flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-4 rounded-xl py-4 text-center">
+        <a
+            aria-label="GitHub"
+            href="https://github.com/TeamPiped/Piped"
+            target="_blank"
+            class="inline-flex items-center justify-center"
+        >
+            <i-fa6-brands-github />
             <span v-t="'actions.source_code'" class="ml-2 hover:underline" />
         </a>
-        <a href="https://docs.piped.video/" target="_blank">
-            <i class="i-fa6-solid:book" />
+        <a href="https://docs.piped.video/" target="_blank" class="inline-flex items-center justify-center">
+            <i-fa6-solid-book />
             <span v-t="'actions.documentation'" class="ml-2 hover:underline" />
         </a>
-        <a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
-            <i class="i-fa6-brands:bitcoin" />
+        <a
+            href="https://github.com/TeamPiped/Piped#donations"
+            target="_blank"
+            class="inline-flex items-center justify-center"
+        >
+            <i-fa6-brands-bitcoin />
             <span v-t="'actions.donations'" class="ml-2 hover:underline" />
         </a>
-        <a v-if="statusPageHref" :href="statusPageHref">
-            <i class="i-fa6-solid:server" />
+        <a v-if="statusPageHref" :href="statusPageHref" class="inline-flex items-center justify-center">
+            <i-fa6-solid-server />
             <span v-t="'actions.status_page'" class="ml-2 hover:underline" />
         </a>
-        <a v-if="donationHref" :href="donationHref">
-            <i class="i-fa6-solid:money-check" />
+        <a v-if="donationHref" :href="donationHref" class="inline-flex items-center justify-center">
+            <i-fa6-solid-money-check />
             <span v-t="'actions.instance_donations'" class="ml-2 hover:underline" />
         </a>
-        <a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
-            <i class="i-fa6-solid:eye" />
+        <a
+            v-if="privacyPolicyHref"
+            :href="privacyPolicyHref"
+            target="_blank"
+            class="inline-flex items-center justify-center"
+        >
+            <i-fa6-solid-eye />
             <span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:underline" />
         </a>
     </footer>
@@ -45,10 +59,14 @@ onMounted(() => {
 </script>
 
 <style>
-footer {
-    @apply bg-light-900;
-}
-.dark footer {
-    @apply bg-dark-800;
+@reference "../app.css";
+
+@layer components {
+    footer {
+        background-color: #cacaca;
+    }
+    .dark footer {
+        background-color: var(--color-dark-800);
+    }
 }
 </style>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 96d2f9d5..144b7a5e 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -3,10 +3,22 @@
 
     <div class="flex justify-between">
         <div class="flex flex-col gap-2 md:flex-row md:items-center">
-            <button v-t="'actions.clear_history'" class="btn" @click="clearHistory" />
+            <button
+                v-t="'actions.clear_history'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="clearHistory"
+            />
 
-            <button v-t="'actions.export_history'" class="btn" @click="showExportModal = !showExportModal" />
-            <button v-t="'actions.import_history'" class="btn" @click="showImportModal = !showImportModal" />
+            <button
+                v-t="'actions.export_history'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="showExportModal = !showExportModal"
+            />
+            <button
+                v-t="'actions.import_history'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="showImportModal = !showImportModal"
+            />
         </div>
 
         <div class="flex items-center gap-1">
@@ -16,7 +28,11 @@
         <div class="ml-4 flex items-center">
             <input id="autoDelete" v-model="autoDeleteHistory" type="checkbox" @change="onChange" />
             <label v-t="'actions.delete_automatically'" class="ml-2" for="autoDelete" />
-            <select v-model="autoDeleteDelayHours" class="select ml-3 pl-3" @change="onChange">
+            <select
+                v-model="autoDeleteDelayHours"
+                class="ml-3 h-8 rounded-md bg-gray-300 pl-3 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+                @change="onChange"
+            >
                 <option v-t="{ path: 'info.hours', args: { amount: '1' } }" value="1" />
                 <option v-t="{ path: 'info.hours', args: { amount: '3' } }" value="3" />
                 <option v-t="{ path: 'info.hours', args: { amount: '6' } }" value="6" />
@@ -33,7 +49,9 @@
 
     <hr />
 
-    <div class="video-grid">
+    <div
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <VideoItem v-for="video in videos" :key="video.url" :item="video" />
     </div>
 
diff --git a/src/components/ImportHistoryModal.vue b/src/components/ImportHistoryModal.vue
index a2abf21f..8538e00d 100644
--- a/src/components/ImportHistoryModal.vue
+++ b/src/components/ImportHistoryModal.vue
@@ -5,7 +5,12 @@
             <form>
                 <br />
                 <div>
-                    <input ref="fileSelector" class="btn mb-2 ml-2" type="file" @change="fileChange" />
+                    <input
+                        ref="fileSelector"
+                        class="mb-2 ml-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                        type="file"
+                        @change="fileChange"
+                    />
                 </div>
                 <div>
                     <strong
@@ -14,7 +19,7 @@
                 </div>
                 <div>
                     <strong class="flex items-center justify-center gap-2">
-                        <span v-t="'actions.override'" />: <input v-model="override" class="checkbox" type="checkbox" />
+                        <span v-t="'actions.override'" />: <input v-model="override" class="size-4" type="checkbox" />
                     </strong>
                 </div>
                 <br />
@@ -22,13 +27,19 @@
                     <progress :value="index" :max="itemsLength" />
                     <div
                         v-text="
-                            `${$t('info.success')}: ${success} ${$t('info.error')}: ${error} ${$t('info.skipped')}: ${skipped}`
+                            `${$t('info.success')}: ${success} ${$t('info.error')}: ${error} ${$t(
+                                'info.skipped',
+                            )}: ${skipped}`
                         "
                     />
                 </div>
                 <br />
                 <div>
-                    <a class="btn w-auto" @click="handleImport" v-text="$t('actions.import')" />
+                    <a
+                        class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                        @click="handleImport"
+                        v-text="$t('actions.import')"
+                    />
                 </div>
             </form>
         </div>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index 486cc211..f783bded 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -9,11 +9,15 @@
             </div>
             <div>
                 <strong
-                    ><span v-t="'actions.override'" />: <input v-model="override" class="checkbox" type="checkbox"
+                    ><span v-t="'actions.override'" />: <input v-model="override" class="size-4" type="checkbox"
                 /></strong>
             </div>
             <div>
-                <a v-t="'actions.import'" class="btn w-auto" @click="handleImport" />
+                <a
+                    v-t="'actions.import'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="handleImport"
+                />
             </div>
         </form>
         <br />
diff --git a/src/components/LoadingIndicatorPage.vue b/src/components/LoadingIndicatorPage.vue
index 65303cc8..597f198c 100644
--- a/src/components/LoadingIndicatorPage.vue
+++ b/src/components/LoadingIndicatorPage.vue
@@ -1,13 +1,17 @@
 <template>
-    <div v-if="!showContent" class="min-h-[75vh] w-full flex items-center justify-center">
+    <div v-if="!showContent" class="grid min-h-[75vh] w-full place-items-center">
         <span id="spinner" />
     </div>
-    <div v-else>
+    <div v-else v-bind="$attrs">
         <slot />
     </div>
 </template>
 
 <script setup>
+defineOptions({
+    inheritAttrs: false,
+});
+
 defineProps({
     showContent: {
         type: Boolean,
@@ -29,6 +33,7 @@ defineProps({
     display: inline-block;
     width: 70px;
     height: 70px;
+    margin-inline: auto;
 }
 #spinner:after {
     content: " ";
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 07fe78c1..a9fd02c7 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
-        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
+        <i-fa6-solid-circle-info class="mt-6 ml-2 cursor-pointer" :title="$t('info.login_note')" />
     </div>
     <hr />
-    <div class="w-full flex items-center justify-center text-center">
-        <form class="w-min children:pb-3">
+    <div class="flex w-full items-center justify-center text-center">
+        <form class="w-min *:pb-3">
             <div>
                 <input
                     v-model="username"
-                    class="input"
+                    class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     type="text"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
@@ -20,7 +20,7 @@
             <div>
                 <input
                     v-model="password"
-                    class="input"
+                    class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     type="password"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
@@ -29,7 +29,11 @@
                 />
             </div>
             <div>
-                <a v-t="'titles.login'" class="btn w-auto" @click="login" />
+                <a
+                    v-t="'titles.login'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="login"
+                />
             </div>
         </form>
     </div>
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 3cf6d777..8a832468 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="modal">
-        <div @click="handleClick">
-            <div class="modal-container">
-                <button @click="$emit('close')"><i class="i-fa6-solid:xmark" /></button>
+    <div class="fixed top-0 left-0 z-50 table size-full bg-gray-500/80 transition-opacity dark:bg-dark-900/80">
+        <div class="table-cell align-middle" @click="handleClick">
+            <div class="relative m-auto w-min min-w-[20vw] rounded-xl bg-white p-5 dark:bg-dark-700">
+                <button class="absolute top-1 right-2.5" @click="$emit('close')"><i-fa6-solid-xmark /></button>
                 <slot></slot>
             </div>
         </div>
@@ -34,27 +34,3 @@ onUnmounted(() => {
     window.removeEventListener("keydown", handleKeyDown);
 });
 </script>
-
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-gray bg-opacity-80 transition-opacity table;
-}
-.dark .modal {
-    @apply bg-dark-900 bg-opacity-80;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-min m-auto bg-white p-5 rounded-xl min-w-[20vw] relative;
-}
-.dark .modal-container {
-    @apply bg-dark-700;
-}
-
-.modal-container > button {
-    @apply absolute right-2.5 top-1;
-}
-</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 2cce3371..d09a2527 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,7 +1,7 @@
 <template>
-    <nav class="relative w-full flex flex-wrap items-center justify-center px-2 pb-2.5 sm:px-4">
+    <nav class="relative flex w-full flex-wrap items-center justify-center px-2 pb-2.5 sm:px-4">
         <div class="flex flex-1 justify-start">
-            <router-link class="flex items-center text-3xl font-bold font-sans" :to="homePagePath"
+            <router-link class="flex items-center font-sans text-3xl font-bold" :to="homePagePath"
                 ><img
                     alt="logo"
                     src="/img/icons/logo.svg"
@@ -11,11 +11,11 @@
                 />iped</router-link
             >
         </div>
-        <div class="search-container lt-md:hidden">
+        <div class="relative inline-flex items-center max-md:hidden">
             <input
                 ref="videoSearch"
                 v-model="searchText"
-                class="input h-10 w-72 pr-20"
+                class="h-10 w-72 rounded-md bg-gray-300 px-2.5 pr-20 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                 type="text"
                 role="search"
                 :title="$t('actions.search')"
@@ -25,81 +25,106 @@
                 @focus="onInputFocus"
                 @blur="onInputBlur"
             />
-            <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
+            <span
+                v-if="searchText"
+                class="absolute right-3 size-4 cursor-pointer rounded-full bg-[#ccc] text-center text-[10px] text-black opacity-50 hover:opacity-70"
+                @click="searchText = ''"
+                >⨉</span
+            >
         </div>
-        <button id="search-btn" class="input btn mx-1 h-10" @click="onSearchClick">
-            <div class="i-fa6-solid:magnifying-glass"></div>
+        <button
+            id="search-btn"
+            class="mx-1 inline-block h-10 w-auto cursor-pointer rounded-sm bg-gray-300 px-2.5 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            @click="onSearchClick"
+        >
+            <i-fa6-solid-magnifying-glass />
         </button>
         <!-- three vertical lines for toggling the hamburger menu on mobile -->
         <button class="mr-3 flex flex-col justify-end md:hidden" @click="showTopNav = !showTopNav">
-            <span class="line"></span>
-            <span class="line"></span>
-            <span class="line"></span>
+            <span class="my-[0.1125rem] rounded-xl bg-dark-900 px-2.5 py-px dark:bg-white"></span>
+            <span class="my-[0.1125rem] rounded-xl bg-dark-900 px-2.5 py-px dark:bg-white"></span>
+            <span class="my-[0.1125rem] rounded-xl bg-dark-900 px-2.5 py-px dark:bg-white"></span>
         </button>
         <!-- navigation bar for large screen devices -->
-        <ul class="md:text-1xl hidden list-none md:(flex flex flex-1 justify-end children:pl-3)">
+        <ul class="hidden list-none *:pl-3 md:flex md:flex-1 md:justify-end">
             <li v-if="shouldShowTrending">
-                <router-link v-t="'titles.trending'" to="/trending" class="nav-link" />
+                <router-link
+                    v-t="'titles.trending'"
+                    to="/trending"
+                    class="hover:text-red-500 dark:hover:text-red-400"
+                />
             </li>
             <li>
-                <router-link v-t="'titles.preferences'" to="/preferences" class="nav-link" />
+                <router-link
+                    v-t="'titles.preferences'"
+                    to="/preferences"
+                    class="hover:text-red-500 dark:hover:text-red-400"
+                />
             </li>
             <li v-if="shouldShowLogin">
-                <router-link v-t="'titles.login'" to="/login" class="nav-link" />
+                <router-link v-t="'titles.login'" to="/login" class="hover:text-red-500 dark:hover:text-red-400" />
             </li>
             <li v-if="shouldShowRegister">
-                <router-link v-t="'titles.register'" to="/register" class="nav-link" />
+                <router-link
+                    v-t="'titles.register'"
+                    to="/register"
+                    class="hover:text-red-500 dark:hover:text-red-400"
+                />
             </li>
             <li v-if="shouldShowHistory">
-                <router-link v-t="'titles.history'" to="/history" class="nav-link" />
+                <router-link v-t="'titles.history'" to="/history" class="hover:text-red-500 dark:hover:text-red-400" />
             </li>
             <li>
-                <router-link v-t="'titles.playlists'" to="/playlists" class="nav-link" />
+                <router-link
+                    v-t="'titles.playlists'"
+                    to="/playlists"
+                    class="hover:text-red-500 dark:hover:text-red-400"
+                />
             </li>
             <li v-if="!shouldShowTrending">
-                <router-link v-t="'titles.feed'" to="/feed" class="nav-link" />
+                <router-link v-t="'titles.feed'" to="/feed" class="hover:text-red-500 dark:hover:text-red-400" />
             </li>
         </ul>
     </nav>
     <!-- navigation bar for mobile devices -->
     <div
         v-if="showTopNav"
-        class="mobile-nav mb-4 flex flex-col children:(w-full flex items-center gap-1 border-b border-dark-100 p-1)"
+        class="mb-4 flex flex-col *:flex *:w-full *:items-center *:gap-1 *:border-b *:border-dark-100 *:p-1"
     >
         <router-link v-if="shouldShowTrending" to="/trending">
-            <div class="i-fa6-solid:fire"></div>
+            <i-fa6-solid-fire />
             <i18n-t keypath="titles.trending"></i18n-t>
         </router-link>
         <router-link to="/preferences">
-            <div class="i-fa6-solid:gear"></div>
+            <i-fa6-solid-gear />
             <i18n-t keypath="titles.preferences"></i18n-t>
         </router-link>
         <router-link v-if="shouldShowLogin" to="/login">
-            <div class="i-fa6-solid:user"></div>
+            <i-fa6-solid-user />
             <i18n-t keypath="titles.login"></i18n-t>
         </router-link>
         <router-link v-if="shouldShowLogin" to="/register">
-            <div class="i-fa6-solid:user-plus"></div>
+            <i-fa6-solid-user-plus />
             <i18n-t keypath="titles.register"></i18n-t>
         </router-link>
         <router-link v-if="shouldShowHistory" to="/history">
-            <div class="i-fa6-solid:clock-rotate-left"></div>
+            <i-fa6-solid-clock-rotate-left />
             <i18n-t keypath="titles.history"></i18n-t>
         </router-link>
         <router-link to="/playlists">
-            <div class="i-fa6-solid:list"></div>
+            <i-fa6-solid-list />
             <i18n-t keypath="titles.playlists"></i18n-t>
         </router-link>
         <router-link v-if="!shouldShowTrending" to="/feed">
-            <div class="i-fa6-solid:play"></div>
+            <i-fa6-solid-play />
             <i18n-t keypath="titles.feed"></i18n-t>
         </router-link>
     </div>
     <!-- search suggestions for mobile devices -->
-    <div class="search-container mb-2 w-full md:hidden">
+    <div class="relative mb-2 inline-flex w-full items-center md:hidden">
         <input
             v-model="searchText"
-            class="input h-10 w-full"
+            class="h-10 w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
             type="text"
             role="search"
             :title="$t('actions.search')"
@@ -109,7 +134,12 @@
             @focus="onInputFocus"
             @blur="onInputBlur"
         />
-        <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
+        <span
+            v-if="searchText"
+            class="absolute right-3 size-4 cursor-pointer rounded-full bg-[#ccc] text-center text-[10px] text-black opacity-50 hover:opacity-70"
+            @click="searchText = ''"
+            >⨉</span
+        >
     </div>
     <SearchSuggestions
         v-show="(searchText || showSearchHistory) && suggestionsVisible"
@@ -237,32 +267,6 @@ onMounted(() => {
 </script>
 
 <style>
-.search-container {
-    @apply relative inline-flex items-center;
-}
-.delete-search {
-    @apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[10px];
-}
-.mobile-nav div {
-    @apply mx-1;
-}
-
-#search-btn:hover {
-    @apply bg-red-400;
-}
-
-.dark #search-btn:hover {
-    @apply bg-dark-100;
-}
-
-.nav-link {
-    @apply hover:text-red-500;
-}
-
-.dark .nav-link {
-    @apply hover:text-red-400;
-}
-
 @media screen and (max-width: 848px) {
     #search-btn {
         display: none;
diff --git a/src/components/PageNotFound.vue b/src/components/PageNotFound.vue
index d3b458eb..277905f7 100644
--- a/src/components/PageNotFound.vue
+++ b/src/components/PageNotFound.vue
@@ -3,9 +3,13 @@ const homeUrl = import.meta.env.BASE_URL;
 </script>
 
 <template>
-    <div class="min-h-[88vh] flex flex-col items-center justify-center">
-        <h1 class="font-bold !text-9xl">404</h1>
-        <h2 v-t="'info.page_not_found'" class="!text-2xl" />
-        <a v-t="'actions.back_to_home'" class="btn mt-16" :href="homeUrl" />
+    <div class="flex min-h-[88vh] flex-col items-center justify-center">
+        <h1 class="text-9xl! font-bold">404</h1>
+        <h2 v-t="'info.page_not_found'" class="text-2xl!" />
+        <a
+            v-t="'actions.back_to_home'"
+            class="mt-16 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            :href="homeUrl"
+        />
     </div>
 </template>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index ad44bfbb..12de9dab 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -1,20 +1,23 @@
 <template>
     <ModalComponent @close="$emit('close')">
         <span v-t="'actions.select_playlist'" class="inline-block w-max text-2xl" />
-        <select v-model="selectedPlaylist" class="select mt-3 w-full">
+        <select
+            v-model="selectedPlaylist"
+            class="mt-3 h-8 w-full rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+        >
             <option v-for="playlist in playlists" :key="playlist.id" :value="playlist.id" v-text="playlist.name" />
         </select>
-        <div class="mt-3 w-full flex justify-between">
+        <div class="mt-3 flex w-full justify-between">
             <button
                 ref="addButton"
                 v-t="'actions.create_playlist'"
-                class="btn"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 @click="showCreatePlaylistModal = true"
             />
             <button
                 ref="addButton"
                 v-t="'actions.add_to_playlist'"
-                class="btn"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 @click="handleClick(selectedPlaylist)"
             />
         </div>
diff --git a/src/components/PlaylistItem.vue b/src/components/PlaylistItem.vue
index 6254fcc2..ce0ff137 100644
--- a/src/components/PlaylistItem.vue
+++ b/src/components/PlaylistItem.vue
@@ -1,27 +1,46 @@
 <template>
-    <div class="flex flex-col flex-justify-between">
-        <router-link :to="props.item.url" class="link inline-block">
+    <div class="flex flex-col justify-between">
+        <router-link
+            :to="props.item.url"
+            class="inline-block hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+        >
             <div class="relative">
                 <img loading="lazy" class="w-full" :src="props.item.thumbnail" />
             </div>
-            <p class="link pt-2 font-bold" :title="props.item.name" v-text="props.item.name" />
+            <p
+                class="line-clamp-2 pt-2 leading-tight font-bold hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+                :title="props.item.name"
+                v-text="props.item.name"
+            />
         </router-link>
-        <p v-if="props.item.description" v-text="props.item.description" />
+        <p
+            v-if="props.item.description"
+            class="mt-1 line-clamp-2 text-sm text-gray-600 dark:text-gray-400"
+            v-text="props.item.description"
+        />
 
-        <router-link v-if="props.item.uploaderUrl" class="link-secondary text-sm" :to="props.item.uploaderUrl">
-            <p>
+        <router-link
+            v-if="props.item.uploaderUrl"
+            class="mt-1 line-clamp-1 block text-sm underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
+            :to="props.item.uploaderUrl"
+        >
+            <p class="leading-tight">
                 <span v-text="props.item.uploaderName" />
-                <i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
+                <i-fa6-solid-check v-if="props.item.uploaderVerified" class="ml-1.5" />
             </p>
         </router-link>
-        <a v-else-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
+        <a
+            v-else-if="props.item.uploaderName"
+            class="mt-1 line-clamp-1 block text-sm hover:text-red-500 focus:text-red-500 dark:text-gray-300 dark:hover:text-red-400 dark:focus:text-red-400"
+            v-text="props.item.uploaderName"
+        />
 
         <template v-if="props.item.videos >= 0">
-            <br v-if="props.item.uploaderName" />
-            <span class="text-sm" v-text="`${props.item.videos} ${$t('video.videos')}`" />
+            <span
+                class="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300"
+                v-text="`${props.item.videos} ${$t('video.videos')}`"
+            />
         </template>
-
-        <br />
     </div>
 </template>
 
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 5a994cb5..93b3e81a 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -2,13 +2,16 @@
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
     <LoadingIndicatorPage v-show="!playlist?.error" :show-content="playlist != null">
-        <h1 class="mb-1 ml-1 mt-4 text-3xl!" v-text="playlist.name" />
+        <h1 class="mt-4 mb-1 ml-1 text-3xl!" v-text="playlist.name" />
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex justify-between <md:flex-col md:items-center">
+        <div class="mt-1 flex justify-between max-md:flex-col md:items-center">
             <div>
-                <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
+                <router-link
+                    class="flex items-center gap-3 hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+                    :to="playlist.uploaderUrl || '/'"
+                >
                     <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
@@ -21,18 +24,32 @@
                         }`
                     "
                 />
-                <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
+                <button
+                    v-if="!isPipedPlaylist"
+                    class="mx-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="bookmarkPlaylist"
+                >
                     {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
-                    }}<i class="i-fa6-solid:bookmark ml-3" />
+                    }}<i-fa6-solid-bookmark class="ml-3" />
                 </button>
-                <button v-if="authenticated && !isPipedPlaylist" class="btn mr-1" @click="clonePlaylist">
-                    {{ $t("actions.clone_playlist") }}<i class="i-fa6-solid:clone ml-3" />
+                <button
+                    v-if="authenticated && !isPipedPlaylist"
+                    class="mr-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="clonePlaylist"
+                >
+                    {{ $t("actions.clone_playlist") }}<i-fa6-solid-clone class="ml-3" />
                 </button>
-                <button class="btn mr-1" @click="downloadPlaylistAsTxt">
+                <button
+                    class="mr-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="downloadPlaylistAsTxt"
+                >
                     {{ $t("actions.download_as_txt") }}
                 </button>
-                <a class="btn mr-1" :href="getRssUrl">
-                    <i class="i-fa6-solid:rss" />
+                <a
+                    class="mr-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    :href="getRssUrl"
+                >
+                    <i-fa6-solid-rss />
                 </a>
                 <WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" />
             </div>
@@ -40,7 +57,9 @@
 
         <hr />
 
-        <div class="video-grid">
+        <div
+            class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+        >
             <VideoItem
                 v-for="(video, index) in playlist.relatedStreams"
                 :key="video.url"
diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index faf30d92..44324040 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -1,11 +1,15 @@
 <template>
     <div>
         <router-link :to="{ path: '/playlist', query: { list: playlistId } }"
-            ><h1 class="font-bold !text-lg hover:underline" v-text="playlist.name"
+            ><h1 class="text-lg! font-bold hover:underline" v-text="playlist.name"
         /></router-link>
         <span class="text-sm">
             <template v-if="playlist.uploader">
-                <router-link class="link-secondary" :to="playlist.uploaderUrl" :title="playlist.uploader">
+                <router-link
+                    class="underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
+                    :to="playlist.uploaderUrl"
+                    :title="playlist.uploader"
+                >
                     {{ playlist.uploader }}
                 </router-link>
                 -
@@ -13,7 +17,7 @@
             {{ selectedIndex }} / {{ playlist.videos }}
         </span>
     </div>
-    <div ref="scrollable" class="mt-4 max-h-screen-sm overflow-y-auto">
+    <div ref="scrollable" class="mt-4 max-h-160 overflow-y-auto">
         <div
             v-for="(related, index) in playlist.relatedStreams"
             :key="related.url"
@@ -22,8 +26,8 @@
             :prefer-listen="preferListen"
         >
             <router-link
-                class="flex rounded px-2 py-1 hover:bg-gray-50 .dark:hover:bg-neutral-800"
-                :class="{ 'bg-gray-200 .dark:bg-neutral-700': index === selectedIndex - 1 }"
+                class="flex rounded-sm px-2 py-1 hover:bg-gray-50 dark:hover:bg-neutral-800"
+                :class="{ 'bg-gray-200 dark:bg-neutral-700': index === selectedIndex - 1 }"
                 :to="{
                     path: '/watch',
                     query: {
@@ -40,16 +44,20 @@
                 </div>
 
                 <div class="ml-2 flex flex-col">
-                    <span class="link" :title="related.title" v-text="related.title" />
+                    <span
+                        class="hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+                        :title="related.title"
+                        v-text="related.title"
+                    />
                     <div class="flex-1">
                         <router-link
                             v-if="related.uploaderUrl && related.uploaderName && !hideChannel"
-                            class="link-secondary block overflow-hidden text-xs"
+                            class="block overflow-hidden text-xs underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
                             :to="related.uploaderUrl"
                             :title="related.uploaderName"
                         >
                             <span v-text="related.uploaderName" />
-                            <i v-if="related.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
+                            <i-fa6-solid-check v-if="related.uploaderVerified" class="ml-1.5" />
                         </router-link>
                     </div>
                 </div>
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index bdabe7a7..43864869 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -2,9 +2,18 @@
     <h2 v-t="'titles.playlists'" class="my-4 font-bold" />
 
     <div class="mb-3 flex justify-between">
-        <button v-t="'actions.create_playlist'" class="btn" @click="showCreatePlaylistModal = true" />
+        <button
+            v-t="'actions.create_playlist'"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            @click="showCreatePlaylistModal = true"
+        />
         <div class="flex">
-            <button v-if="playlists.length > 0" v-t="'actions.export_to_json'" class="btn" @click="exportPlaylists" />
+            <button
+                v-if="playlists.length > 0"
+                v-t="'actions.export_to_json'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="exportPlaylists"
+            />
             <input
                 id="fileSelector"
                 ref="fileSelector"
@@ -13,45 +22,63 @@
                 multiple="multiple"
                 @change="importPlaylists"
             />
-            <label v-t="'actions.import_from_json_csv'" for="fileSelector" class="btn ml-2" />
+            <label
+                v-t="'actions.import_from_json_csv'"
+                for="fileSelector"
+                class="ml-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            />
         </div>
     </div>
 
-    <div class="video-grid">
+    <div
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <div v-for="playlist in playlists" :key="playlist.id">
             <router-link :to="`/playlist?list=${playlist.id}`">
                 <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
                 <div class="relative text-sm">
                     <span
-                        class="thumbnail-overlay thumbnail-right"
+                        class="absolute right-1.25 bottom-1.25 rounded-md bg-black/75 px-1.25 text-white"
                         v-text="`${playlist.videos} ${$t('video.videos')}`"
                     />
                 </div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="link my-2 flex overflow-hidden"
+                    class="my-2 flex overflow-hidden hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
                     :title="playlist.name"
                     v-text="playlist.name"
                 />
             </router-link>
-            <button v-t="'actions.edit_playlist'" class="btn h-auto" @click="showPlaylistEditModal(playlist)" />
-            <button v-t="'actions.delete_playlist'" class="btn ml-2 h-auto" @click="playlistToDelete = playlist.id" />
+            <button
+                v-t="'actions.edit_playlist'"
+                class="inline-block size-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="showPlaylistEditModal(playlist)"
+            />
+            <button
+                v-t="'actions.delete_playlist'"
+                class="ml-2 inline-block size-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="playlistToDelete = playlist.id"
+            />
             <ModalComponent v-if="playlist.id == playlistToEdit" @close="playlistToEdit = null">
                 <div class="flex flex-col gap-2">
                     <h2 v-t="'actions.edit_playlist'" />
                     <input
                         v-model="newPlaylistName"
-                        class="input"
+                        class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                         type="text"
                         :placeholder="$t('actions.playlist_name')"
                     />
                     <input
                         v-model="newPlaylistDescription"
-                        class="input"
+                        class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                         type="text"
                         :placeholder="$t('actions.playlist_description')"
                     />
-                    <button v-t="'actions.okay'" class="btn ml-auto" @click="editPlaylist(playlist)" />
+                    <button
+                        v-t="'actions.okay'"
+                        class="ml-auto inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                        @click="editPlaylist(playlist)"
+                    />
                 </div>
             </ModalComponent>
             <ConfirmModal
@@ -66,7 +93,10 @@
 
     <h2 v-t="'titles.bookmarks'" class="my-4 font-bold" />
 
-    <div v-if="bookmarks" class="video-grid">
+    <div
+        v-if="bookmarks"
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <router-link
             v-for="(playlist, index) in bookmarks"
             :key="playlist.playlistId"
@@ -74,19 +104,22 @@
         >
             <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
             <div class="relative text-sm">
-                <span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
-                <div class="absolute bottom-100px right-5px z-100 px-5px" @click.prevent="removeBookmark(index)">
-                    <i class="i-fa6-solid:bookmark ml-3" />
+                <span
+                    class="absolute right-1.25 bottom-1.25 rounded-md bg-black/75 px-1.25 text-white"
+                    v-text="`${playlist.videos} ${$t('video.videos')}`"
+                />
+                <div class="absolute right-1.25 bottom-25 z-100 px-1.25" @click.prevent="removeBookmark(index)">
+                    <i-fa6-solid-bookmark class="ml-3" />
                 </div>
             </div>
             <p
                 style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                class="link my-2 flex overflow-hidden"
+                class="my-2 flex overflow-hidden hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
                 :title="playlist.name"
                 v-text="playlist.name"
             />
             <a :href="playlist.uploaderUrl" class="flex items-center">
-                <img class="h-32px w-32px rounded-full" :src="playlist.uploaderAvatar" />
+                <img class="size-8 rounded-full" :src="playlist.uploaderAvatar" />
                 <span class="ml-3 hover:underline" v-text="playlist.uploader" />
             </a>
         </router-link>
@@ -95,7 +128,7 @@
     <CreatePlaylistModal
         v-if="showCreatePlaylistModal"
         @close="showCreatePlaylistModal = false"
-        @created="fetchPlaylists"
+        @created="fetchPlaylistsList"
     />
 </template>
 
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index fe6b88aa..6aad9517 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -1,286 +1,306 @@
 <template>
     <div class="flex">
-        <button @click="$router.go(-1) || $router.push('/')">
-            <i class="i-fa6-solid:chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
+        <button
+            class="inline-flex items-center gap-1 rounded-sm bg-gray-300 px-3 py-2 text-gray-700 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-300 dark:hover:bg-dark-300"
+            @click="$router.go(-1) || $router.push('/')"
+        >
+            <i-fa6-solid-chevron-left class="shrink-0" /><span v-t="'actions.back'" />
         </button>
     </div>
     <h1 v-t="'titles.preferences'" class="text-center font-bold" />
     <hr />
-    <label for="ddlTheme" class="pref">
+    <label
+        for="ddlTheme"
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+    >
         <strong v-t="'actions.theme'" />
-        <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
+        <select
+            id="ddlTheme"
+            v-model="selectedTheme"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option v-t="'actions.auto'" value="auto" />
             <option v-t="'actions.dark'" value="dark" />
             <option v-t="'actions.light'" value="light" />
         </select>
     </label>
-    <label class="pref" for="ddlLanguageSelection">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="ddlLanguageSelection"
+    >
         <strong v-t="'actions.language_selection'" />
-        <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
+        <select
+            id="ddlLanguageSelection"
+            v-model="selectedLanguage"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
         </select>
     </label>
-    <label class="pref" for="ddlCountrySelection">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="ddlCountrySelection"
+    >
         <strong v-t="'actions.country_selection'" />
-        <select id="ddlCountrySelection" v-model="countrySelected" class="select w-50" @change="onChange($event)">
+        <select
+            id="ddlCountrySelection"
+            v-model="countrySelected"
+            class="h-8 w-50 bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
         </select>
     </label>
-    <label class="pref" for="ddlDefaultHomepage">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="ddlDefaultHomepage"
+    >
         <strong v-t="'actions.default_homepage'" />
-        <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
+        <select
+            id="ddlDefaultHomepage"
+            v-model="defaultHomepage"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option v-t="'titles.trending'" value="trending" />
             <option v-t="'titles.feed'" value="feed" />
         </select>
     </label>
 
     <h2 v-t="'titles.player'" class="text-center" />
-    <label class="pref" for="chkAutoPlayVideo">
-        <strong v-t="'actions.autoplay_video'" />
-        <input
-            id="chkAutoPlayVideo"
-            v-model="autoPlayVideo"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkAutoDisplayCaptions">
-        <strong v-t="'actions.auto_display_captions'" />
-        <input
-            id="chkAutoDisplayCaptions"
-            v-model="autoDisplayCaptions"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkAutoPlayNextCountdown">
+    <PreferenceRow for-id="chkAutoPlayVideo">
+        <template #label>
+            <strong v-t="'actions.autoplay_video'" />
+        </template>
+        <PreferenceSwitch id="chkAutoPlayVideo" v-model="autoPlayVideo" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkAutoDisplayCaptions">
+        <template #label>
+            <strong v-t="'actions.auto_display_captions'" />
+        </template>
+        <PreferenceSwitch id="chkAutoDisplayCaptions" v-model="autoDisplayCaptions" @change="onChange" />
+    </PreferenceRow>
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="chkAutoPlayNextCountdown"
+    >
         <strong v-t="'actions.autoplay_next_countdown'" />
-        <input
+        <PreferenceNumberField
             id="chkAutoPlayNextCountdown"
             v-model="autoPlayNextCountdown"
-            class="input w-24"
-            type="number"
-            @change="onChange($event)"
+            :min="0"
+            @change="onChange"
         />
     </label>
-    <label class="pref" for="chkAudioOnly">
-        <strong v-t="'actions.audio_only'" />
-        <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-    <label class="pref" for="chkPreferHls">
-        <strong v-t="'actions.prefer_hls'" />
-        <input id="chkPreferHls" v-model="preferHls" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-    <label class="pref" for="ddlDefaultQuality">
+    <PreferenceRow for-id="chkAudioOnly">
+        <template #label>
+            <strong v-t="'actions.audio_only'" />
+        </template>
+        <PreferenceSwitch id="chkAudioOnly" v-model="listen" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkPreferHls">
+        <template #label>
+            <strong v-t="'actions.prefer_hls'" />
+        </template>
+        <PreferenceSwitch id="chkPreferHls" v-model="preferHls" @change="onChange" />
+    </PreferenceRow>
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="ddlDefaultQuality"
+    >
         <strong v-t="'actions.default_quality'" />
-        <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
-            <option v-t="'actions.auto'" value="0" />
+        <select
+            id="ddlDefaultQuality"
+            v-model.number="defaultQuality"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
+            <option v-t="'actions.auto'" :value="0" />
             <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
         </select>
     </label>
-    <label class="pref" for="txtBufferingGoal">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="txtBufferingGoal"
+    >
         <strong v-t="'actions.buffering_goal'" />
-        <input
-            id="txtBufferingGoal"
-            v-model="bufferingGoal"
-            class="input w-24"
-            type="text"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkMinimizeComments">
-        <strong v-t="'actions.minimize_comments_default'" />
-        <input
-            id="chkMinimizeComments"
-            v-model="minimizeComments"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkMinimizeDescription">
-        <strong v-t="'actions.minimize_description_default'" />
-        <input
-            id="chkMinimizeDescription"
-            v-model="minimizeDescription"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkMinimizeRecommendations">
-        <strong v-t="'actions.minimize_recommendations_default'" />
-        <input
-            id="chkMinimizeRecommendations"
-            v-model="minimizeRecommendations"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkMinimizeChapters">
-        <strong v-t="'actions.minimize_chapters_default'" />
-        <input
-            id="chkMinimizeChapters"
-            v-model="minimizeChapters"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
+        <PreferenceNumberField id="txtBufferingGoal" v-model="bufferingGoal" :min="10" @change="onChange" />
     </label>
+    <PreferenceRow for-id="chkMinimizeComments">
+        <template #label>
+            <strong v-t="'actions.minimize_comments_default'" />
+        </template>
+        <PreferenceSwitch id="chkMinimizeComments" v-model="minimizeComments" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkMinimizeDescription">
+        <template #label>
+            <strong v-t="'actions.minimize_description_default'" />
+        </template>
+        <PreferenceSwitch id="chkMinimizeDescription" v-model="minimizeDescription" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkMinimizeRecommendations">
+        <template #label>
+            <strong v-t="'actions.minimize_recommendations_default'" />
+        </template>
+        <PreferenceSwitch id="chkMinimizeRecommendations" v-model="minimizeRecommendations" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkMinimizeChapters">
+        <template #label>
+            <strong v-t="'actions.minimize_chapters_default'" />
+        </template>
+        <PreferenceSwitch id="chkMinimizeChapters" v-model="minimizeChapters" @change="onChange" />
+    </PreferenceRow>
     <!-- chapters layout on mobile -->
-    <label class="pref lg:invisible" for="chkMinimizeChapters">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] lg:invisible dark:odd:bg-dark-800"
+        for="chkMinimizeChapters"
+    >
         <strong v-t="'actions.chapters_layout_mobile'" />
 
-        <select id="ddlDefaultHomepage" v-model="mobileChapterLayout" class="select w-auto" @change="onChange($event)">
+        <select
+            id="ddlDefaultHomepage"
+            v-model="mobileChapterLayout"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option v-t="'video.chapters_horizontal'" value="Horizontal" />
             <option v-t="'video.chapters_vertical'" value="Vertical" />
         </select>
     </label>
-    <label class="pref" for="chkShowWatchOnYouTube">
-        <strong v-t="'actions.show_watch_on_youtube'" />
-        <input
-            id="chkShowWatchOnYouTube"
-            v-model="showWatchOnYouTube"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkShowSearchSuggestions">
-        <strong v-t="'actions.show_search_suggestions'" />
-        <input
-            id="chkShowSearchSuggestions"
-            v-model="searchSuggestions"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkStoreSearchHistory">
-        <strong v-t="'actions.store_search_history'" />
-        <input
-            id="chkStoreSearchHistory"
-            v-model="searchHistory"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="chkStoreWatchHistory">
-        <strong v-t="'actions.store_watch_history'" />
-        <input
-            id="chkStoreWatchHistory"
-            v-model="watchHistory"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label v-if="watchHistory" class="pref" for="chkHideWatched">
-        <strong v-t="'actions.hide_watched'" />
-        <input id="chkHideWatched" v-model="hideWatched" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-    <label class="pref" for="ddlEnabledCodecs">
-        <strong v-t="'actions.enabled_codecs'" />
-        <select
-            id="ddlEnabledCodecs"
-            v-model="enabledCodecs"
-            class="select h-auto w-auto"
-            multiple
-            @change="onChange($event)"
-        >
-            <option value="av1">AV1</option>
-            <option value="vp9">VP9</option>
-            <option value="avc">AVC (h.264)</option>
-        </select>
-    </label>
-    <label class="pref" for="chkDisableLBRY">
-        <strong v-t="'actions.disable_lbry'" />
-        <input id="chkDisableLBRY" v-model="disableLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-    <label class="pref" for="chkEnableLBRYProxy">
-        <strong v-t="'actions.enable_lbry_proxy'" />
-        <input
-            id="chkEnableLBRYProxy"
-            v-model="proxyLBRY"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label class="pref" for="txtPrefetchLimit">
+    <PreferenceRow for-id="chkShowWatchOnYouTube">
+        <template #label>
+            <strong v-t="'actions.show_watch_on_youtube'" />
+        </template>
+        <PreferenceSwitch id="chkShowWatchOnYouTube" v-model="showWatchOnYouTube" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkShowSearchSuggestions">
+        <template #label>
+            <strong v-t="'actions.show_search_suggestions'" />
+        </template>
+        <PreferenceSwitch id="chkShowSearchSuggestions" v-model="searchSuggestions" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkStoreSearchHistory">
+        <template #label>
+            <strong v-t="'actions.store_search_history'" />
+        </template>
+        <PreferenceSwitch id="chkStoreSearchHistory" v-model="searchHistory" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkStoreWatchHistory">
+        <template #label>
+            <strong v-t="'actions.store_watch_history'" />
+        </template>
+        <PreferenceSwitch id="chkStoreWatchHistory" v-model="watchHistory" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow v-if="watchHistory" for-id="chkHideWatched">
+        <template #label>
+            <strong v-t="'actions.hide_watched'" />
+        </template>
+        <PreferenceSwitch id="chkHideWatched" v-model="hideWatched" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="ddlEnabledCodecs">
+        <template #label>
+            <strong v-t="'actions.enabled_codecs'" />
+        </template>
+        <PreferenceListbox id="ddlEnabledCodecs" v-model="enabledCodecs" :options="codecOptions" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkDisableLBRY">
+        <template #label>
+            <strong v-t="'actions.disable_lbry'" />
+        </template>
+        <PreferenceSwitch id="chkDisableLBRY" v-model="disableLBRY" @change="onChange" />
+    </PreferenceRow>
+    <PreferenceRow for-id="chkEnableLBRYProxy">
+        <template #label>
+            <strong v-t="'actions.enable_lbry_proxy'" />
+        </template>
+        <PreferenceSwitch id="chkEnableLBRYProxy" v-model="proxyLBRY" @change="onChange" />
+    </PreferenceRow>
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="txtPrefetchLimit"
+    >
         <strong v-t="'actions.concurrent_prefetch_limit'" />
-        <input
-            id="txtPrefetchLimit"
-            v-model="prefetchLimit"
-            class="input w-24"
-            type="text"
-            @change="onChange($event)"
-        />
+        <PreferenceNumberField id="txtPrefetchLimit" v-model="prefetchLimit" :min="0" @change="onChange" />
     </label>
 
     <h2 class="text-center">SponsorBlock</h2>
     <p class="text-center">
-        <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
+        <span v-t="'actions.uses_api_from'" /><a
+            class="hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+            href="https://sponsor.ajay.app/"
+            >sponsor.ajay.app</a
+        >
     </p>
-    <label class="pref" for="chkEnableSponsorblock">
-        <strong v-t="'actions.enable_sponsorblock'" />
-        <input
-            id="chkEnableSponsorblock"
-            v-model="sponsorBlock"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
+    <PreferenceRow for-id="chkEnableSponsorblock">
+        <template #label>
+            <strong v-t="'actions.enable_sponsorblock'" />
+        </template>
+        <PreferenceSwitch id="chkEnableSponsorblock" v-model="sponsorBlock" @change="onChange" />
+    </PreferenceRow>
     <div v-if="sponsorBlock">
-        <label v-for="[name, item] in skipOptions" :key="name" class="pref" :for="'ddlSkip_' + name">
+        <label
+            v-for="(item, name) in skipOptions"
+            :key="name"
+            class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+            :for="'ddlSkip_' + name"
+        >
             <strong v-t="item.label" />
-            <select :id="'ddlSkip_' + name" v-model="item.value" class="select w-auto" @change="onChange($event)">
+            <select
+                :id="'ddlSkip_' + name"
+                v-model="item.value"
+                class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+                @change="onChange($event)"
+            >
                 <option v-t="'actions.no'" value="no" />
                 <option v-t="'actions.skip_button_only'" value="button" />
                 <option v-t="'actions.skip_automatically'" value="auto" />
             </select>
         </label>
-        <label class="pref" for="chkShowMarkers">
-            <strong v-t="'actions.show_markers'" />
-            <input
-                id="chkShowMarkers"
-                v-model="showMarkers"
-                class="checkbox"
-                type="checkbox"
-                @change="onChange($event)"
-            />
-        </label>
-        <label class="pref" for="txtMinSegmentLength">
+        <PreferenceRow for-id="chkShowMarkers">
+            <template #label>
+                <strong v-t="'actions.show_markers'" />
+            </template>
+            <PreferenceSwitch id="chkShowMarkers" v-model="showMarkers" @change="onChange" />
+        </PreferenceRow>
+        <label
+            class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+            for="txtMinSegmentLength"
+        >
             <strong v-t="'actions.min_segment_length'" />
-            <input
-                id="txtMinSegmentLength"
-                v-model="minSegmentLength"
-                class="input w-24"
-                type="text"
-                @change="onChange($event)"
-            />
+            <PreferenceNumberField id="txtMinSegmentLength" v-model="minSegmentLength" :min="0" @change="onChange" />
         </label>
     </div>
 
     <h2 v-t="'titles.dearrow'" class="text-center" />
     <p class="text-center">
-        <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
+        <span v-t="'actions.uses_api_from'" /><a
+            class="hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+            href="https://sponsor.ajay.app/"
+            >sponsor.ajay.app</a
+        >
     </p>
-    <label class="pref" for="chkDeArrow">
-        <strong v-t="'actions.enable_dearrow'" />
-        <input id="chkDeArrow" v-model="dearrow" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
+    <PreferenceRow for-id="chkDeArrow">
+        <template #label>
+            <strong v-t="'actions.enable_dearrow'" />
+        </template>
+        <PreferenceSwitch id="chkDeArrow" v-model="dearrow" @change="onChange" />
+    </PreferenceRow>
 
     <h2 v-t="'titles.instance'" class="text-center" />
     <p v-t="'actions.instances_not_shown'" class="text-center" />
-    <label class="pref" for="ddlInstanceSelection">
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        for="ddlInstanceSelection"
+    >
         <strong v-text="`${$t('actions.instance_selection')}:`" />
-        <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
+        <select
+            id="ddlInstanceSelection"
+            v-model="selectedInstance"
+            class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+            @change="onChange($event)"
+        >
             <option
                 v-for="instance in instances"
                 :key="instance.name"
@@ -289,23 +309,22 @@
             />
         </select>
     </label>
-    <label class="pref" for="chkAuthInstance">
-        <strong v-text="`${$t('actions.different_auth_instance')}:`" />
-        <input
-            id="chkAuthInstance"
-            v-model="authInstance"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
+    <PreferenceRow for-id="chkAuthInstance">
+        <template #label>
+            <strong v-text="`${$t('actions.different_auth_instance')}:`" />
+        </template>
+        <PreferenceSwitch id="chkAuthInstance" v-model="authInstance" @change="onChange" />
+    </PreferenceRow>
     <template v-if="authInstance">
-        <label class="pref" for="ddlAuthInstanceSelection">
+        <label
+            class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+            for="ddlAuthInstanceSelection"
+        >
             <strong v-text="`${$t('actions.instance_auth_selection')}:`" />
             <select
                 id="ddlAuthInstanceSelection"
                 v-model="selectedAuthInstance"
-                class="select w-auto"
+                class="h-8 w-auto bg-gray-300 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
                 @change="onChange($event)"
             >
                 <option
@@ -317,16 +336,23 @@
             </select>
         </label>
     </template>
-    <div class="pref">
+    <div class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800">
         <span v-t="'titles.custom_instances'" class="w-max" />
-        <button v-t="'actions.customize'" class="btn" @click="showCustomInstancesModal = true" />
+        <button
+            v-t="'actions.customize'"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            @click="showCustomInstancesModal = true"
+        />
     </div>
     <br />
 
     <!-- options that are visible only when logged in -->
     <div v-if="authenticated">
         <h2 v-t="'titles.account'" class="text-center"></h2>
-        <label class="pref" for="txtDeleteAccountPassword">
+        <label
+            class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+            for="txtDeleteAccountPassword"
+        >
             <strong v-t="'actions.delete_account'" />
             <div class="flex items-center">
                 <input
@@ -335,18 +361,28 @@
                     v-model="password"
                     :placeholder="$t('login.password')"
                     :aria-label="$t('login.password')"
-                    class="input mr-2 w-auto"
+                    class="mr-2 h-8 w-auto rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     type="password"
                     @keyup.enter="deleteAccount"
                 />
-                <a v-t="'actions.delete_account'" class="btn w-auto" @click="deleteAccount" />
+                <a
+                    v-t="'actions.delete_account'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="deleteAccount"
+                />
             </div>
         </label>
-        <div class="pref">
-            <a v-t="'actions.logout'" class="btn w-auto" @click="logout" />
+        <div
+            class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        >
+            <a
+                v-t="'actions.logout'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="logout"
+            />
             <a
                 v-t="'actions.invalidate_session'"
-                class="btn w-auto"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 style="margin-left: 0.5em"
                 @click="invalidateSession"
             />
@@ -354,14 +390,14 @@
         <br />
     </div>
     <h2 id="instancesList" v-t="'actions.instances_list'" />
-    <table class="table">
+    <table class="w-full border text-left text-lg font-light">
         <thead>
             <tr>
                 <th v-t="'preferences.instance_name'" />
                 <th v-t="'preferences.instance_locations'" />
                 <th v-t="'preferences.has_cdn'" />
                 <th v-t="'preferences.registered_users'" />
-                <th v-t="'preferences.version'" class="lt-md:hidden" />
+                <th v-t="'preferences.version'" class="max-md:hidden" />
                 <th v-t="'preferences.up_to_date'" />
                 <th v-t="'preferences.uptime_30d'" />
                 <th v-t="'preferences.ssl_score'" />
@@ -373,7 +409,7 @@
                 <td v-text="instance.locations" />
                 <td v-text="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
                 <td v-text="instance.registered" />
-                <td class="lt-md:hidden" v-text="instance.version" />
+                <td class="max-md:hidden" v-text="instance.version" />
                 <td v-text="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
                 <td v-text="`${Number.parseFloat(instance.uptime_30d.toFixed(2))}%`" />
                 <td>
@@ -385,9 +421,22 @@
     <br />
     <p v-t="'info.preferences_note'" />
     <br />
-    <button v-t="'actions.reset_preferences'" class="btn" @click="showConfirmResetPrefsDialog = true" />
-    <button v-t="'actions.backup_preferences'" class="btn mx-4" @click="backupPreferences()" />
-    <label v-t="'actions.restore_preferences'" for="fileSelector" class="btn" @click="restorePreferences()" />
+    <button
+        v-t="'actions.reset_preferences'"
+        class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        @click="showConfirmResetPrefsDialog = true"
+    />
+    <button
+        v-t="'actions.backup_preferences'"
+        class="mx-4 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        @click="backupPreferences()"
+    />
+    <label
+        v-t="'actions.restore_preferences'"
+        for="fileSelector"
+        class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        @click="restorePreferences()"
+    />
     <input id="fileSelector" ref="fileSelectorEl" class="hidden" type="file" @change="restorePreferences()" />
     <ConfirmModal
         v-if="showConfirmResetPrefsDialog"
@@ -405,18 +454,22 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onActivated } from "vue";
+import { computed, onActivated, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import CountryMapDefault from "@/utils/CountryMaps/en.json";
 import ConfirmModal from "./ConfirmModal.vue";
 import CustomInstanceModal from "./CustomInstanceModal.vue";
+import PreferenceListbox from "./ui/PreferenceListbox.vue";
+import PreferenceNumberField from "./ui/PreferenceNumberField.vue";
+import PreferenceRow from "./ui/PreferenceRow.vue";
+import PreferenceSwitch from "./ui/PreferenceSwitch.vue";
 import {
     testLocalStorage,
-    getPreferenceString,
-    getPreferenceBoolean,
-    getPreferenceNumber,
-    getPreferenceJSON,
+    usePreferenceBoolean,
+    usePreferenceJSON,
+    usePreferenceNumber,
+    usePreferenceString,
 } from "@/composables/usePreferences";
 import { fetchJson, apiUrl, authApiUrl, getAuthToken, hashCode, isAuthenticated } from "@/composables/useApi";
 import { getCustomInstances } from "@/composables/useCustomInstances";
@@ -429,51 +482,54 @@ const { t } = useI18n();
 
 const fileSelectorEl = ref(null);
 
-const mobileChapterLayout = ref("Vertical");
-const selectedInstance = ref(null);
-const authInstance = ref(false);
-const selectedAuthInstance = ref(null);
+function createDefaultSkipOptions() {
+    return {
+        sponsor: { value: "auto", label: "actions.skip_sponsors" },
+        intro: { value: "no", label: "actions.skip_intro" },
+        outro: { value: "no", label: "actions.skip_outro" },
+        preview: { value: "no", label: "actions.skip_preview" },
+        interaction: { value: "auto", label: "actions.skip_interaction" },
+        selfpromo: { value: "auto", label: "actions.skip_self_promo" },
+        music_offtopic: { value: "auto", label: "actions.skip_non_music" },
+        poi_highlight: { value: "no", label: "actions.skip_highlight" },
+        filler: { value: "no", label: "actions.skip_filler_tangent" },
+    };
+}
+
+const mobileChapterLayout = usePreferenceString("mobileChapterLayout", "Vertical");
+const selectedInstance = usePreferenceString("instance", import.meta.env.VITE_PIPED_API);
+const authInstance = usePreferenceBoolean("authInstance", false);
+const selectedAuthInstance = usePreferenceString("auth_instance_url", selectedInstance.value);
 const customInstances = ref([]);
 const publicInstances = ref([]);
-const sponsorBlock = ref(true);
-const skipOptions = ref(
-    new Map([
-        ["sponsor", { value: "auto", label: "actions.skip_sponsors" }],
-        ["intro", { value: "no", label: "actions.skip_intro" }],
-        ["outro", { value: "no", label: "actions.skip_outro" }],
-        ["preview", { value: "no", label: "actions.skip_preview" }],
-        ["interaction", { value: "auto", label: "actions.skip_interaction" }],
-        ["selfpromo", { value: "auto", label: "actions.skip_self_promo" }],
-        ["music_offtopic", { value: "auto", label: "actions.skip_non_music" }],
-        ["poi_highlight", { value: "no", label: "actions.skip_highlight" }],
-        ["filler", { value: "no", label: "actions.skip_filler_tangent" }],
-    ]),
-);
-const showMarkers = ref(true);
-const minSegmentLength = ref(0);
-const dearrow = ref(false);
-const selectedTheme = ref("dark");
-const autoPlayVideo = ref(true);
-const autoDisplayCaptions = ref(false);
-const autoPlayNextCountdown = ref(5);
-const listen = ref(false);
+const sponsorBlock = usePreferenceBoolean("sponsorblock", true);
+const skipOptionsStorage = usePreferenceJSON("skipOptions", null);
+const skipOptions = ref(createDefaultSkipOptions());
+const showMarkers = usePreferenceBoolean("showMarkers", true);
+const minSegmentLength = usePreferenceNumber("minSegmentLength", 0);
+const dearrow = usePreferenceBoolean("dearrow", false);
+const selectedTheme = usePreferenceString("theme", "dark");
+const autoPlayVideo = usePreferenceBoolean("playerAutoPlay", true);
+const autoDisplayCaptions = usePreferenceBoolean("autoDisplayCaptions", false);
+const autoPlayNextCountdown = usePreferenceNumber("autoPlayNextCountdown", 5);
+const listen = usePreferenceBoolean("listen", false);
 const resolutions = [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320];
-const preferHls = ref(false);
-const defaultQuality = ref(0);
-const bufferingGoal = ref(10);
+const preferHls = usePreferenceBoolean("preferHls", false);
+const defaultQuality = usePreferenceNumber("quality", 0);
+const bufferingGoal = usePreferenceNumber("bufferGoal", 10);
 const countryMap = ref(CountryMapDefault);
-const countrySelected = ref("US");
-const defaultHomepage = ref("trending");
-const minimizeComments = ref(false);
-const minimizeDescription = ref(true);
-const minimizeRecommendations = ref(false);
-const minimizeChapters = ref(false);
-const showWatchOnYouTube = ref(false);
-const searchSuggestions = ref(true);
-const watchHistory = ref(false);
-const searchHistory = ref(false);
-const hideWatched = ref(false);
-const selectedLanguage = ref("en");
+const countrySelected = usePreferenceString("region", "US");
+const defaultHomepage = usePreferenceString("homepage", "trending");
+const minimizeComments = usePreferenceBoolean("minimizeComments", false);
+const minimizeDescription = usePreferenceBoolean("minimizeDescription", true);
+const minimizeRecommendations = usePreferenceBoolean("minimizeRecommendations", false);
+const minimizeChapters = usePreferenceBoolean("minimizeChapters", false);
+const showWatchOnYouTube = usePreferenceBoolean("showWatchOnYouTube", false);
+const searchSuggestions = usePreferenceBoolean("searchSuggestions", true);
+const watchHistory = usePreferenceBoolean("watchHistory", false);
+const searchHistory = usePreferenceBoolean("searchHistory", false);
+const hideWatched = usePreferenceBoolean("hideWatched", false);
+const selectedLanguage = usePreferenceString("hl", "en");
 const languages = [
     { code: "ar", name: "Arabic" },
     { code: "az", name: "Azərbaycan" },
@@ -525,10 +581,23 @@ const languages = [
     { code: "zh_Hant", name: "繁體中文" },
     { code: "zh_Hans", name: "简体中文" },
 ];
-const enabledCodecs = ref(["vp9", "avc"]);
-const disableLBRY = ref(false);
-const proxyLBRY = ref(false);
-const prefetchLimit = ref(2);
+const enabledCodecsStorage = usePreferenceString("enabledCodecs", "vp9,avc");
+const enabledCodecs = computed({
+    get() {
+        return enabledCodecsStorage.value?.split(",").filter(Boolean) ?? [];
+    },
+    set(value) {
+        enabledCodecsStorage.value = value.join(",");
+    },
+});
+const codecOptions = [
+    { value: "av1", label: "AV1" },
+    { value: "vp9", label: "VP9" },
+    { value: "avc", label: "AVC (h.264)" },
+];
+const disableLBRY = usePreferenceBoolean("disableLBRY", false);
+const proxyLBRY = usePreferenceBoolean("proxyLBRY", false);
+const prefetchLimit = usePreferenceNumber("prefetchLimit", 2);
 const password = ref(null);
 const showConfirmResetPrefsDialog = ref(false);
 const showCustomInstancesModal = ref(false);
@@ -536,132 +605,97 @@ const showCustomInstancesModal = ref(false);
 const authenticated = computed(() => isAuthenticated());
 const instances = computed(() => [...publicInstances.value, ...customInstances.value]);
 
+function normalizeSkipOptions(rawSkipOptions) {
+    const normalized = createDefaultSkipOptions();
+    if (!rawSkipOptions || typeof rawSkipOptions !== "object") return normalized;
+
+    Object.entries(rawSkipOptions).forEach(([key, value]) => {
+        const currentOption = normalized[key];
+        if (!currentOption) {
+            console.log("Unknown sponsor type: " + key);
+            return;
+        }
+
+        if (value && typeof value === "object" && "value" in value) currentOption.value = value.value;
+        else if (typeof value === "string") currentOption.value = value;
+    });
+
+    return normalized;
+}
+
+watch(
+    skipOptions,
+    value => {
+        skipOptionsStorage.value = Object.fromEntries(
+            Object.entries(value).map(([key, option]) => [key, option.value]),
+        );
+    },
+    { deep: true },
+);
+
 onActivated(() => {
     document.title = t("titles.preferences") + " - Piped";
 });
 
+async function loadCountryMap(language) {
+    if (language === "en") {
+        countryMap.value = CountryMapDefault;
+        return;
+    }
+
+    try {
+        countryMap.value = await import(`../utils/CountryMaps/${language}.json`).then(val => val.default);
+    } catch {
+        countryMap.value = CountryMapDefault;
+        console.error("Countries not translated into " + language);
+    }
+}
+
+watch(
+    selectedLanguage,
+    language => {
+        loadCountryMap(language);
+    },
+    { immediate: true },
+);
+
+watch(searchHistory, value => {
+    if (!value) localStorage.removeItem("search_history");
+});
+
 onMounted(async () => {
     if (Object.keys(route.query).length > 0) router.replace({ query: {} });
 
     fetchInstances();
 
     if (testLocalStorage()) {
-        selectedInstance.value = getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
-        authInstance.value = getPreferenceBoolean("authInstance", false);
-        selectedAuthInstance.value = getPreferenceString("auth_instance_url", selectedInstance.value);
+        skipOptions.value = normalizeSkipOptions(skipOptionsStorage.value);
 
-        sponsorBlock.value = getPreferenceBoolean("sponsorblock", true);
-        var savedSkipOptions, skipList;
-        if ((savedSkipOptions = getPreferenceJSON("skipOptions")) !== undefined) {
-            Object.entries(savedSkipOptions).forEach(([key, value]) => {
-                var opt = skipOptions.value.get(key);
-                if (opt !== undefined) opt.value = value;
-                else console.log("Unknown sponsor type: " + key);
-            });
-        } else if ((skipList = getPreferenceString("selectedSkip")) !== undefined) {
-            skipList = skipList.split(",");
-            skipOptions.value.forEach(opt => (opt.value = "no"));
-            skipList.forEach(skip => {
-                var opt = skipOptions.value.get(skip);
-                if (opt !== undefined) opt.value = "auto";
-                else console.log("Unknown sponsor type: " + skip);
-            });
-        }
+        if (localStorage.getItem("hl") === null) selectedLanguage.value = await getDefaultLanguage();
+        if (!selectedAuthInstance.value) selectedAuthInstance.value = selectedInstance.value;
 
-        showMarkers.value = getPreferenceBoolean("showMarkers", true);
-        minSegmentLength.value = Math.max(getPreferenceNumber("minSegmentLength", 0), 0);
-        dearrow.value = getPreferenceBoolean("dearrow", false);
-        selectedTheme.value = getPreferenceString("theme", "dark");
-        autoPlayVideo.value = getPreferenceBoolean("playerAutoPlay", true);
-        autoDisplayCaptions.value = getPreferenceBoolean("autoDisplayCaptions", false);
-        autoPlayNextCountdown.value = getPreferenceNumber("autoPlayNextCountdown", 5);
-        listen.value = getPreferenceBoolean("listen", false);
-        defaultQuality.value = Number(localStorage.getItem("quality"));
-        bufferingGoal.value = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
-        countrySelected.value = getPreferenceString("region", "US");
-        defaultHomepage.value = getPreferenceString("homepage", "trending");
-        minimizeComments.value = getPreferenceBoolean("minimizeComments", false);
-        minimizeDescription.value = getPreferenceBoolean("minimizeDescription", true);
-        minimizeRecommendations.value = getPreferenceBoolean("minimizeRecommendations", false);
-        minimizeChapters.value = getPreferenceBoolean("minimizeChapters", false);
-        showWatchOnYouTube.value = getPreferenceBoolean("showWatchOnYouTube", false);
-        searchSuggestions.value = getPreferenceBoolean("searchSuggestions", true);
-        watchHistory.value = getPreferenceBoolean("watchHistory", false);
-        searchHistory.value = getPreferenceBoolean("searchHistory", false);
-        selectedLanguage.value = getPreferenceString("hl", await getDefaultLanguage());
-        enabledCodecs.value = getPreferenceString("enabledCodecs", "vp9,avc").split(",");
-        disableLBRY.value = getPreferenceBoolean("disableLBRY", false);
-        proxyLBRY.value = getPreferenceBoolean("proxyLBRY", false);
-        prefetchLimit.value = getPreferenceNumber("prefetchLimit", 2);
-        hideWatched.value = getPreferenceBoolean("hideWatched", false);
-        mobileChapterLayout.value = getPreferenceString("mobileChapterLayout", "Vertical");
-        if (selectedLanguage.value != "en") {
-            try {
-                countryMap.value = await import(`../utils/CountryMaps/${selectedLanguage.value}.json`).then(
-                    val => val.default,
-                );
-            } catch {
-                console.error("Countries not translated into " + selectedLanguage.value);
+        if (skipOptionsStorage.value === null) {
+            const legacySelectedSkip = localStorage.getItem("selectedSkip");
+            if (legacySelectedSkip) {
+                const nextSkipOptions = createDefaultSkipOptions();
+
+                for (const skip of legacySelectedSkip.split(",")) {
+                    if (nextSkipOptions[skip] !== undefined) nextSkipOptions[skip].value = "auto";
+                    else console.log("Unknown sponsor type: " + skip);
+                }
+
+                skipOptions.value = nextSkipOptions;
             }
         }
     }
 });
 
-async function onChange() {
-    if (testLocalStorage()) {
-        var shouldReload = false;
-
-        if (
-            getPreferenceString("theme", "dark") !== selectedTheme.value ||
-            getPreferenceBoolean("watchHistory", false) != watchHistory.value ||
-            getPreferenceString("hl", await getDefaultLanguage()) !== selectedLanguage.value ||
-            getPreferenceString("enabledCodecs", "vp9,avc") !== enabledCodecs.value.join(",")
-        )
-            shouldReload = true;
-
-        localStorage.setItem("instance", selectedInstance.value);
-        localStorage.setItem("authInstance", authInstance.value);
-        localStorage.setItem("auth_instance_url", selectedAuthInstance.value);
-        localStorage.setItem("sponsorblock", sponsorBlock.value);
-
-        var savedSkipObj = {};
-        skipOptions.value.forEach((v, k) => (savedSkipObj[k] = v.value));
-        localStorage.setItem("skipOptions", JSON.stringify(savedSkipObj));
-
-        localStorage.setItem("showMarkers", showMarkers.value);
-        localStorage.setItem("minSegmentLength", minSegmentLength.value);
-
-        localStorage.setItem("dearrow", dearrow.value);
-
-        localStorage.setItem("theme", selectedTheme.value);
-        localStorage.setItem("playerAutoPlay", autoPlayVideo.value);
-        localStorage.setItem("autoDisplayCaptions", autoDisplayCaptions.value);
-        localStorage.setItem("autoPlayNextCountdown", autoPlayNextCountdown.value);
-        localStorage.setItem("listen", listen.value);
-        localStorage.setItem("preferHls", preferHls.value);
-        localStorage.setItem("quality", defaultQuality.value);
-        localStorage.setItem("bufferGoal", bufferingGoal.value);
-        localStorage.setItem("region", countrySelected.value);
-        localStorage.setItem("homepage", defaultHomepage.value);
-        localStorage.setItem("minimizeComments", minimizeComments.value);
-        localStorage.setItem("minimizeDescription", minimizeDescription.value);
-        localStorage.setItem("minimizeRecommendations", minimizeRecommendations.value);
-        localStorage.setItem("minimizeChapters", minimizeChapters.value);
-        localStorage.setItem("showWatchOnYouTube", showWatchOnYouTube.value);
-        localStorage.setItem("searchSuggestions", searchSuggestions.value);
-        localStorage.setItem("watchHistory", watchHistory.value);
-        localStorage.setItem("searchHistory", searchHistory.value);
-        if (!searchHistory.value) localStorage.removeItem("search_history");
-        localStorage.setItem("hl", selectedLanguage.value);
-        localStorage.setItem("enabledCodecs", enabledCodecs.value.join(","));
-        localStorage.setItem("disableLBRY", disableLBRY.value);
-        localStorage.setItem("proxyLBRY", proxyLBRY.value);
-        localStorage.setItem("prefetchLimit", prefetchLimit.value);
-        localStorage.setItem("hideWatched", hideWatched.value);
-        localStorage.setItem("mobileChapterLayout", mobileChapterLayout.value);
-
-        if (shouldReload) window.location.reload();
-    }
+function onChange() {
+    if (!searchHistory.value) localStorage.removeItem("search_history");
+    minSegmentLength.value = Math.max(minSegmentLength.value || 0, 0);
+    bufferingGoal.value = Math.max(bufferingGoal.value || 10, 10);
+    prefetchLimit.value = Math.max(prefetchLimit.value || 0, 0);
+    autoPlayNextCountdown.value = Math.max(autoPlayNextCountdown.value || 0, 0);
 }
 
 async function fetchInstances() {
@@ -669,7 +703,7 @@ async function fetchInstances() {
 
     fetchJson(import.meta.env.VITE_PIPED_INSTANCES).then(resp => {
         publicInstances.value = resp;
-        if (!publicInstances.value.some(instance => instance.api_url == apiUrl()))
+        if (!publicInstances.value.some(instance => instance.api_url == apiUrl())) {
             publicInstances.value.push({
                 name: "Selected Instance",
                 api_url: apiUrl(),
@@ -677,6 +711,7 @@ async function fetchInstances() {
                 cdn: false,
                 uptime_30d: 100,
             });
+        }
     });
 }
 
@@ -740,15 +775,3 @@ function restorePreferences() {
     });
 }
 </script>
-
-<style>
-.pref {
-    @apply flex justify-between items-center my-2 mx-[15vw] lt-md:mx-[2vw];
-}
-.pref:nth-child(odd) {
-    @apply bg-gray-200;
-}
-.dark .pref:nth-child(odd) {
-    @apply bg-dark-800;
-}
-</style>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 83ecdcdc..f57194a8 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
-        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
+        <i-fa6-solid-circle-info class="mt-6 ml-2 cursor-pointer" :title="$t('info.register_note')" />
     </div>
     <hr />
     <div class="flex flex-col items-center justify-center text-center">
-        <form class="w-max items-center px-3 children:pb-3">
+        <form class="w-max items-center px-3 *:pb-3">
             <div>
                 <input
                     v-model="username"
-                    class="input w-full"
+                    class="h-8 w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     type="text"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
@@ -20,33 +20,45 @@
             <div class="flex justify-center">
                 <input
                     v-model="password"
-                    class="input h-auto w-full"
+                    class="h-auto w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     :type="showPassword ? 'text' : 'password'"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
                     :aria-label="$t('login.password')"
                     @keyup.enter="register"
                 />
-                <button type="button" class="btn ml-2" @click="showPassword = !showPassword">
-                    <div class="i-fa6-solid:eye" />
+                <button
+                    type="button"
+                    class="ml-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="showPassword = !showPassword"
+                >
+                    <i-fa6-solid-eye />
                 </button>
             </div>
             <div class="flex justify-center">
                 <input
                     v-model="passwordConfirm"
-                    class="input h-auto w-full"
+                    class="h-auto w-full rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                     :type="showConfirmPassword ? 'text' : 'password'"
                     autocomplete="password"
                     :placeholder="$t('login.password_confirm')"
                     :aria-label="$t('login.password_confirm')"
                     @keyup.enter="register"
                 />
-                <button type="button" class="btn ml-2" @click="showConfirmPassword = !showConfirmPassword">
-                    <div class="i-fa6-solid:eye" />
+                <button
+                    type="button"
+                    class="ml-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="showConfirmPassword = !showConfirmPassword"
+                >
+                    <i-fa6-solid-eye />
                 </button>
             </div>
             <div>
-                <a v-t="'titles.register'" class="btn w-auto" @click="register" />
+                <a
+                    v-t="'titles.register'"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                    @click="register"
+                />
             </div>
         </form>
     </div>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index f4d45a8c..f2e58cde 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -4,7 +4,13 @@
     <label for="ddlSearchFilters">
         <strong v-text="`${$t('actions.filter')}:`" />
     </label>
-    <select id="ddlSearchFilters" v-model="selectedFilter" default="all" class="select w-auto" @change="updateFilter()">
+    <select
+        id="ddlSearchFilters"
+        v-model="selectedFilter"
+        default="all"
+        class="h-8 w-auto rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+        @change="updateFilter()"
+    >
         <option v-for="filter in availableFilters" :key="filter" v-t="`search.${filter}`" :value="filter" />
     </select>
 
@@ -18,7 +24,10 @@
         </i18n-t>
     </div>
 
-    <LoadingIndicatorPage :show-content="Boolean(results != null && results.items?.length)" class="video-grid">
+    <LoadingIndicatorPage
+        :show-content="Boolean(results != null && results.items?.length)"
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <template v-for="result in results.items" :key="result.url">
             <ContentItem :item="result" height="94" width="168" />
         </template>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 0b9bf195..16c2eb4d 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="suggestions-container absolute">
+    <div
+        class="absolute left-1/2 z-10 box-border w-full max-w-3xl -translate-x-1/2 transform-gpu bg-gray-300 max-md:max-w-[calc(100%-0.5rem)] dark:bg-dark-400"
+    >
         <ul>
             <li
                 v-for="(suggestion, i) in searchSuggestions"
@@ -8,8 +10,8 @@
                 @click="setSelected(i)"
             >
                 <router-link
-                    class="suggestion"
-                    :class="{ 'suggestion-selected': selected === i }"
+                    class="block w-full p-1"
+                    :class="{ 'bg-gray-200 dark:bg-dark-100': selected === i }"
                     :to="`/results?search_query=${encodeURIComponent(suggestion)}`"
                     >{{ suggestion }}</router-link
                 >
@@ -84,25 +86,3 @@ function setSelected(val) {
 
 defineExpose({ onKeyUp, refreshSuggestions });
 </script>
-
-<style>
-.suggestions-container {
-    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
-}
-
-.dark .suggestions-container {
-    @apply bg-dark-400;
-}
-
-.suggestion-selected {
-    @apply bg-gray-200;
-}
-
-.dark .suggestion-selected {
-    @apply bg-dark-100;
-}
-
-.suggestion {
-    @apply block w-full p-1;
-}
-</style>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index ab8c09bf..3925f1af 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -16,7 +16,12 @@
         </div>
         <div v-if="withTimeCode" class="mt-2 flex items-center justify-between">
             <label v-t="'actions.time_code'" />
-            <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
+            <input
+                v-model="timeStamp"
+                class="h-8 w-12 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
+                type="text"
+                @change="onChange"
+            />
         </div>
         <hr />
         <a :href="generatedLink" target="_blank">
@@ -24,9 +29,21 @@
         </a>
         <QrCode v-if="showQrCode" :text="generatedLink" />
         <div class="mt-4 flex justify-end">
-            <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
-            <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
-            <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />
+            <button
+                v-t="'actions.generate_qrcode'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="showQrCode = !showQrCode"
+            />
+            <button
+                v-t="'actions.follow_link'"
+                class="ml-3 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="followLink()"
+            />
+            <button
+                v-t="'actions.copy_link'"
+                class="ml-3 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="copyLink()"
+            />
         </div>
     </ModalComponent>
 </template>
diff --git a/src/components/SortingSelector.vue b/src/components/SortingSelector.vue
index 7427c1bb..68ec785a 100644
--- a/src/components/SortingSelector.vue
+++ b/src/components/SortingSelector.vue
@@ -1,6 +1,10 @@
 <template>
     <label v-t="'actions.sort_by'" for="ddlSortBy" />
-    <select id="ddlSortBy" v-model="selectedSort" class="select flex-grow">
+    <select
+        id="ddlSortBy"
+        v-model="selectedSort"
+        class="h-8 grow rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
+    >
         <option v-for="(value, key) in options" :key="key" v-t="`actions.${key}`" :value="value" />
     </select>
 </template>
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 6b1ef3f1..36274957 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -4,18 +4,24 @@
     <div class="flex flex-wrap justify-between">
         <div class="flex gap-1">
             <!-- import json/csv -->
-            <button class="btn">
+            <button
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            >
                 <router-link v-t="'actions.import_from_json_csv'" to="/import" />
             </button>
             <!-- export to json -->
-            <button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
+            <button
+                v-t="'actions.export_to_json'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="exportHandler"
+            />
         </div>
         <div class="m-1 flex flex-wrap gap-1">
             <!-- import channel groups to json-->
             <div>
                 <label
                     for="fileSelector"
-                    class="btn"
+                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                     v-text="`${$t('actions.import_from_json')} (${$t('titles.channel_groups')})`"
                 />
                 <input
@@ -30,30 +36,30 @@
 
             <!-- export channel groups to json  -->
             <button
-                class="btn"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 @click="exportGroupsHandler"
                 v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
             />
         </div>
         <!-- subscriptions count, only shown if there are any  -->
-        <div v-if="subscriptions.length > 0" class="flex self-center gap-1">
+        <div v-if="subscriptions.length > 0" class="flex gap-1 self-center">
             <i18n-t keypath="subscriptions.subscribed_channels_count">{{ subscriptions.length }}</i18n-t>
         </div>
     </div>
     <br />
     <hr />
-    <div class="w-full flex flex-wrap">
+    <div class="flex w-full flex-wrap">
         <button
             v-for="group in channelGroups"
             :key="group.groupName"
-            class="btn mx-1 w-max"
-            :class="{ selected: selectedGroup === group }"
+            class="mx-1 inline-block w-max cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            :class="{ 'border-2 border-red-500': selectedGroup === group }"
             @click="selectGroup(group)"
         >
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
             <div v-if="group.groupName != '' && selectedGroup == group">
-                <i class="i-fa6-solid:pen mx-2" @click="showEditGroupModal = true" />
-                <i class="i-fa6-solid:circle-minus mx-2" @click="groupToDelete = group.groupName" />
+                <i-fa6-solid-pen class="mx-2" @click="showEditGroupModal = true" />
+                <i-fa6-solid-circle-minus class="mx-2" @click="groupToDelete = group.groupName" />
             </div>
         </button>
         <ConfirmModal
@@ -62,28 +68,31 @@
             @close="groupToDelete = null"
             @confirm="deleteGroup(groupToDelete)"
         />
-        <button class="btn mx-1" @click="showCreateGroupModal = true">
-            <i class="i-fa6-solid:circle-plus" />
+        <button
+            class="mx-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+            @click="showCreateGroupModal = true"
+        >
+            <i-fa6-solid-circle-plus />
         </button>
     </div>
     <br />
     <hr />
     <!-- Subscriptions card list -->
-    <div class="xl:grid xl:grid-cols-5 <md:flex-wrap">
+    <div class="max-md:flex-wrap xl:grid xl:grid-cols-5">
         <!-- channel info card -->
         <div
             v-for="subscription in filteredSubscriptions"
             :key="subscription.url"
-            class="col m-2 border border-gray-500 rounded-lg p-1"
+            class="m-2 rounded-lg border border-gray-500 p-1"
         >
-            <router-link :to="subscription.url" class="text-4x4 flex p-2 font-bold">
-                <img :src="subscription.avatar" class="h-[fit-content] rounded-full" width="48" height="48" />
+            <router-link :to="subscription.url" class="flex p-2 text-4xl font-bold">
+                <img :src="subscription.avatar" class="h-fit rounded-full" width="48" height="48" />
                 <span class="mx-2 self-center" v-text="subscription.name" />
             </router-link>
             <!-- subscribe / unsubscribe btn -->
             <button
                 v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
-                class="btn mt-2 w-full"
+                class="mt-2 inline-block w-full cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                 @click="handleButton(subscription)"
             />
         </div>
@@ -97,20 +106,29 @@
     />
 
     <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
-        <div class="mb-5 mt-3 flex justify-between">
-            <input v-model="editedGroupName" type="text" class="input" />
-            <button v-t="'actions.okay'" class="btn" :placeholder="$t('actions.group_name')" @click="editGroupName()" />
+        <div class="mt-3 mb-5 flex justify-between">
+            <input
+                v-model="editedGroupName"
+                type="text"
+                class="h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
+            />
+            <button
+                v-t="'actions.okay'"
+                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                :placeholder="$t('actions.group_name')"
+                @click="editGroupName()"
+            />
         </div>
-        <div class="mb-2 mt-3 h-[80vh] flex flex-col overflow-y-scroll pr-2">
+        <div class="mt-3 mb-2 flex h-[80vh] flex-col overflow-y-scroll pr-2">
             <div v-for="subscription in subscriptions" :key="subscription.name">
                 <div class="mr-3 flex items-center justify-between">
                     <a :href="subscription.url" target="_blank" class="flex items-center overflow-hidden">
-                        <img :src="subscription.avatar" class="h-8 w-8 rounded-full" />
+                        <img :src="subscription.avatar" class="size-8 rounded-full" />
                         <span class="ml-2">{{ subscription.name }}</span>
                     </a>
                     <input
                         type="checkbox"
-                        class="checkbox"
+                        class="size-4"
                         :checked="selectedGroup.channels.includes(subscription.url.substr(-24))"
                         @change="checkedChange(subscription)"
                     />
@@ -276,9 +294,3 @@ onActivated(() => {
     document.title = "Subscriptions - Piped";
 });
 </script>
-
-<style>
-.selected {
-    border: 0.1rem outset red;
-}
-</style>
diff --git a/src/components/ToastComponent.vue b/src/components/ToastComponent.vue
index fe6d8ffa..fd6436fa 100644
--- a/src/components/ToastComponent.vue
+++ b/src/components/ToastComponent.vue
@@ -1,7 +1,9 @@
 <template>
-    <div class="toast">
+    <div
+        class="fixed top-12 right-12 z-9999 flex min-w-max flex-col justify-center rounded-sm bg-white/80 p-4 text-black shadow-sm duration-200 dark:bg-dark-900/80 dark:text-white"
+    >
         <slot />
-        <button v-t="'actions.dismiss'" @click="dismiss" />
+        <button v-t="'actions.dismiss'" class="underline" @click="dismiss" />
     </div>
 </template>
 
@@ -12,15 +14,3 @@ function dismiss() {
     emit("dismissed");
 }
 </script>
-
-<style>
-.toast {
-    @apply bg-white/80 text-black flex flex-col justify-center fixed top-12 right-12 p-4 min-w-max shadow rounded duration-200 z-9999;
-}
-.dark .toast {
-    @apply bg-dark-900/80 text-white;
-}
-.toast button {
-    @apply underline;
-}
-</style>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index d9725cea..dce05e77 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -3,7 +3,10 @@
 
     <hr />
 
-    <LoadingIndicatorPage :show-content="videos.length != 0" class="video-grid">
+    <LoadingIndicatorPage
+        :show-content="videos.length != 0"
+        class="mx-2 grid grid-cols-1 gap-y-5 max-md:gap-x-3 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 md:gap-x-6 lg:grid-cols-4 xl:grid-cols-5"
+    >
         <VideoItem v-for="video in videos" :key="video.url" :item="video" height="118" width="210" />
     </LoadingIndicatorPage>
 </template>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index b9477629..9b08fba3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,7 +1,7 @@
 <template>
-    <div v-if="showVideo" class="flex flex-col flex-justify-between">
+    <div v-if="showVideo" class="flex flex-col justify-between">
         <router-link
-            class="link inline-block w-full"
+            class="inline-block w-full hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
             :to="{
                 path: '/watch',
                 query: {
@@ -17,52 +17,54 @@
             <div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="link flex overflow-hidden pt-2 font-bold"
+                    class="flex overflow-hidden pt-2 leading-tight font-bold hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
                     :title="title"
                     v-text="title"
                 />
             </div>
         </router-link>
 
-        <div class="flex">
+        <div class="flex items-start pt-1">
             <router-link :to="item.uploaderUrl">
                 <img
                     v-if="item.uploaderAvatar"
                     loading="lazy"
                     :src="item.uploaderAvatar"
-                    class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
+                    class="mt-0.5 mr-0.5 size-8 shrink-0 rounded-full"
                     width="68"
                     height="68"
                 />
             </router-link>
 
-            <div class="flex-1 px-2">
+            <div class="min-w-0 flex-1 px-2">
                 <router-link
                     v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
-                    class="link-secondary block overflow-hidden text-sm"
+                    class="inline-flex max-w-full items-center gap-1 text-sm/tight underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400 dark:hover:underline dark:hover:decoration-gray-400"
                     :to="item.uploaderUrl"
                     :title="item.uploaderName"
                 >
-                    <span v-text="item.uploaderName" />
-                    <i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
+                    <span class="truncate" v-text="item.uploaderName" />
+                    <i-fa6-solid-check v-if="item.uploaderVerified" class="shrink-0" />
                 </router-link>
 
-                <div v-if="item.views >= 0 || item.uploadedDate" class="video-info">
-                    <span v-if="item.views >= 0">
-                        <i class="i-fa6-solid:eye" />
-                        <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
+                <div
+                    v-if="item.views >= 0 || item.uploadedDate"
+                    class="mt-1 flex flex-wrap items-center gap-x-1 text-xs font-normal text-gray-600 dark:text-gray-400"
+                >
+                    <span v-if="item.views >= 0" class="inline-flex items-center gap-1">
+                        <i-fa6-solid-eye class="shrink-0" />
+                        <span v-text="`${numberFormat(item.views)} •`" />
                     </span>
                     <span
                         v-if="item.uploaded > 0"
-                        class="pl-0.5"
                         :title="new Date(item.uploaded).toLocaleString()"
                         v-text="timeAgo(item.uploaded)"
                     />
-                    <span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
+                    <span v-else-if="item.uploadedDate" v-text="item.uploadedDate" />
                 </div>
             </div>
 
-            <div class="flex items-center gap-2.5">
+            <div class="ml-1 flex shrink-0 items-center gap-2.5 pt-0.5">
                 <router-link
                     :to="{
                         path: '/watch',
@@ -76,13 +78,14 @@
                     :aria-label="preferListen ? title : 'Listen to ' + title"
                     :title="preferListen ? title : 'Listen to ' + title"
                 >
-                    <i :class="preferListen ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'" />
+                    <i-fa6-solid-tv v-if="preferListen" />
+                    <i-fa6-solid-headphones v-else />
                 </router-link>
                 <button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
-                    <i class="i-fa6-solid:circle-plus" />
+                    <i-fa6-solid-circle-plus />
                 </button>
                 <button :title="$t('actions.share')" @click="showShareModal = !showShareModal">
-                    <i class="i-fa6-solid:share" />
+                    <i-fa6-solid-share />
                 </button>
                 <button
                     v-if="admin"
@@ -90,19 +93,18 @@
                     :title="$t('actions.remove_from_playlist')"
                     @click="showConfirmRemove = true"
                 >
-                    <i class="i-fa6-solid:circle-minus" />
+                    <i-fa6-solid-circle-minus />
                 </button>
                 <button
                     v-if="showMarkOnWatched && isFeed"
                     ref="watchButton"
                     @click="toggleWatched(item.url.substr(-11))"
                 >
-                    <i
+                    <i-fa6-solid-eye-slash
                         v-if="item.watched && item.currentTime > item.duration * 0.9"
                         :title="$t('actions.mark_as_unwatched')"
-                        class="i-fa6-solid:eye-slash"
                     />
-                    <i v-else :title="$t('actions.mark_as_watched')" class="i-fa6-solid:eye" />
+                    <i-fa6-solid-eye v-else :title="$t('actions.mark_as_watched')" />
                 </button>
                 <ConfirmModal
                     v-if="showConfirmRemove"
@@ -229,13 +231,3 @@ onMounted(() => {
     shouldShowMarkOnWatched();
 });
 </script>
-
-<style>
-.video-info {
-    @apply mt-1 text-xs text-gray-600 font-normal;
-}
-
-.dark .video-info {
-    @apply text-gray-400;
-}
-</style>
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index e170f4c0..d869e6d6 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -2,8 +2,8 @@
     <div
         ref="container"
         data-shaka-player-container
-        class="relative max-h-screen w-full flex justify-center"
-        :class="{ 'player-container': !isEmbed }"
+        class="relative flex max-h-screen w-full justify-center"
+        :class="{ 'max-h-[75vh] min-h-64 bg-black': !isEmbed }"
     >
         <video
             ref="videoEl"
@@ -22,26 +22,26 @@
             @click="onClickSkipSegment"
         >
             <span v-t="'actions.skip_segment'" />
-            <i class="skip-segment-icon i-fa6-solid:forward-step" aria-hidden="true" />
+            <i-fa6-solid-forward-step class="skip-segment-icon" aria-hidden="true" />
         </button>
         <span
             v-if="error > 0"
             v-t="{ path: 'player.failed', args: [error] }"
-            class="absolute top-8 rounded bg-black/80 p-2 text-lg backdrop-blur-sm"
+            class="absolute top-8 rounded-sm bg-black/80 p-2 text-lg backdrop-blur-sm"
         />
         <div
             v-if="showCurrentSpeed"
-            class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
+            class="absolute top-1/2 left-1/2 flex -translate-1/2 transform flex-col items-center gap-6 rounded-4xl bg-white/80 px-8 py-4 text-lg dark:bg-dark-700/80"
         >
-            <i class="i-fa6-solid:gauge-high h-25 w-25 p-5" />
+            <i-fa6-solid-gauge-high class="size-25 p-5" />
             <span v-text="videoEl.playbackRate" />
         </div>
         <div
             v-if="showCurrentVolume"
-            class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
+            class="absolute top-1/2 left-1/2 flex -translate-1/2 transform flex-col items-center gap-6 rounded-4xl bg-white/80 px-8 py-4 text-lg dark:bg-dark-700/80"
         >
-            <i v-if="videoEl.volume > 0" class="i-fa6-solid:volume-high h-25 w-25 p-5" />
-            <i v-else class="i-fa6-solid:volume-xmark h-25 w-25 p-5" />
+            <i-fa6-solid-volume-high v-if="videoEl.volume > 0" class="size-25 p-5" />
+            <i-fa6-solid-volume-xmark v-else class="size-25 p-5" />
             <span v-text="Math.round(videoEl.volume * 100) / 100" />
         </div>
     </div>
@@ -51,12 +51,16 @@
         <div class="flex flex-col">
             <input
                 v-model="playbackSpeedInput"
-                class="input my-3"
+                class="my-3 h-8 w-auto rounded-md bg-gray-300 px-2.5 text-gray-600 focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400"
                 type="text"
                 :placeholder="$t('actions.playback_speed')"
                 @keyup.enter="setSpeedFromInput()"
             />
-            <button v-t="'actions.okay'" class="btn ml-auto w-min" @click="setSpeedFromInput()" />
+            <button
+                v-t="'actions.okay'"
+                class="ml-auto inline-block w-min cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                @click="setSpeedFromInput()"
+            />
         </div>
     </ModalComponent>
 </template>
@@ -917,86 +921,55 @@ defineExpose({
 </script>
 
 <style>
-:root {
-    --player-base: rgba(255, 255, 255, 0.3);
-    --player-buffered: rgba(255, 255, 255, 0.54);
-    --player-played: rgba(255, 0, 0);
+@layer base {
+    :root {
+        --player-base: rgba(255, 255, 255, 0.3);
+        --player-buffered: rgba(255, 255, 255, 0.54);
+        --player-played: rgba(255, 0, 0);
 
-    --spon-seg-sponsor: #00d400;
-    --spon-seg-selfpromo: #ffff00;
-    --spon-seg-interaction: #cc00ff;
-    --spon-seg-poi_highlight: #ff1684;
-    --spon-seg-intro: #00ffff;
-    --spon-seg-outro: #0202ed;
-    --spon-seg-preview: #008fd6;
-    --spon-seg-filler: #7300ff;
-    --spon-seg-music_offtopic: #ff9900;
-    --spon-seg-default: white;
+        --spon-seg-sponsor: #00d400;
+        --spon-seg-selfpromo: #ffff00;
+        --spon-seg-interaction: #cc00ff;
+        --spon-seg-poi_highlight: #ff1684;
+        --spon-seg-intro: #00ffff;
+        --spon-seg-outro: #0202ed;
+        --spon-seg-preview: #008fd6;
+        --spon-seg-filler: #7300ff;
+        --spon-seg-music_offtopic: #ff9900;
+        --spon-seg-default: white;
+    }
 }
 
-.player-container {
-    @apply max-h-75vh min-h-64 bg-black;
-}
+@layer components {
+    .shaka-video-container .material-icons-round {
+        font-size: 1.25rem !important;
+        line-height: 1.75rem;
+    }
 
-.shaka-video-container .material-icons-round {
-    @apply !text-xl;
-}
+    .shaka-video-container:-webkit-full-screen {
+        max-height: none !important;
+    }
 
-.shaka-video-container:-webkit-full-screen {
-    max-height: none !important;
-}
+    /* captions style */
+    .shaka-text-wrapper * {
+        text-align: left !important;
+    }
 
-/* captions style */
-.shaka-text-wrapper * {
-    text-align: left !important;
-}
+    .shaka-text-wrapper > span > span {
+        background-color: transparent !important;
+    }
 
-.shaka-text-wrapper > span > span {
-    background-color: transparent !important;
-}
+    /* apply to all spans that don't include multiple other spans to avoid the style being applied to the text container too when the subtitles are two lines */
+    .shaka-text-wrapper > span > span *:first-child:last-child {
+        background-color: rgba(0, 0, 0, 0.6) !important;
+        padding: 0.09em 0;
+    }
 
-/* apply to all spans that don't include multiple other spans to avoid the style being applied to the text container too when the subtitles are two lines */
-.shaka-text-wrapper > span > span *:first-child:last-child {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-    padding: 0.09em 0;
-}
-
-.skip-segment-button {
-    /* position button above player overlay */
-    z-index: 1000;
-
-    position: absolute;
-    transform: translate(0, -50%);
-    top: 50%;
-    right: 0;
-
-    background-color: rgb(0 0 0 / 0.5);
-    border: 2px rgba(255, 255, 255, 0.75) solid;
-    border-right: 0;
-    border-radius: 0.75em;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 0.5em;
-
-    /* center text vertically */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    color: #fff;
-    line-height: 1.5em;
-}
-
-.skip-segment-button .skip-segment-icon {
-    font-size: 1.6em !important;
-    line-height: inherit !important;
-    margin-left: 0.4em;
-}
-
-/* Override Tailwind preflight's `img { max-width: 100% }` which clamps
-   the sprite-sheet image to the container width and breaks Shaka's
-   transform-based thumbnail cropping. */
-.shaka-player-ui-thumbnail-image {
-    max-width: none !important;
+    /* Override Tailwind preflight's `img { max-width: 100% }` which clamps
+       the sprite-sheet image to the container width and breaks Shaka's
+       transform-based thumbnail cropping. */
+    .shaka-player-ui-thumbnail-image {
+        max-width: none !important;
+    }
 }
 </style>
diff --git a/src/components/VideoThumbnail.vue b/src/components/VideoThumbnail.vue
index d7b556ef..761e95df 100644
--- a/src/components/VideoThumbnail.vue
+++ b/src/components/VideoThumbnail.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="w-full">
+    <div class="relative w-full">
         <img
             loading="lazy"
             class="aspect-video w-full rounded-md object-contain"
             :src="item.thumbnail"
             :alt="item.title"
-            :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
+            :class="{ 'w-full object-contain': item.isShort, 'opacity-75': item.watched }"
         />
         <!-- progress bar -->
         <div class="relative h-1 w-full">
@@ -15,20 +15,33 @@
                 :style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
             />
         </div>
-    </div>
-
-    <div class="relative" :class="small ? 'text-xs' : 'text-sm'">
         <!-- shorts thumbnail -->
-        <span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
+        <span
+            v-if="item.isShort"
+            v-t="'video.shorts'"
+            class="absolute bottom-1.25 left-1.25 rounded-md bg-red-600 px-1.25 text-xs font-bold text-white uppercase"
+        />
         <span
             v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
-            class="thumbnail-overlay thumbnail-right px-0.5"
+            class="absolute right-1.25 bottom-1.25 rounded-md bg-black/75 px-0.5 text-white"
+            :class="small ? 'text-xs' : 'text-sm'"
             v-text="timeFormat(item.duration)"
         />
-        <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
-            <i class="i-fa6-solid:tower-broadcast w-3" />
+        <i18n-t
+            v-else
+            keypath="video.live"
+            class="absolute right-1.25 bottom-1.25 inline-flex items-center gap-1 rounded-md bg-red-600 px-1.25 text-white"
+            :class="small ? 'text-xs' : 'text-sm'"
+            tag="div"
+        >
+            <i-fa6-solid-tower-broadcast class="w-3" />
         </i18n-t>
-        <span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
+        <span
+            v-if="item.watched"
+            v-t="'video.watched'"
+            class="absolute bottom-1.25 left-1.25 rounded-md bg-black/75 px-1.25 text-white"
+            :class="small ? 'text-xs' : 'text-sm'"
+        />
     </div>
 </template>
 <script setup>
@@ -49,9 +62,3 @@ defineProps({
     },
 });
 </script>
-
-<style>
-.shorts-img {
-    @apply w-full object-contain;
-}
-</style>
diff --git a/src/components/WatchOnButton.vue b/src/components/WatchOnButton.vue
index 88cc2bcb..a1103b2d 100644
--- a/src/components/WatchOnButton.vue
+++ b/src/components/WatchOnButton.vue
@@ -17,15 +17,21 @@ defineProps({
 <template>
     <template v-if="getPreferenceBoolean('showWatchOnYouTube', false)">
         <!-- For large screens -->
-        <a :href="link" class="btn flex items-center lt-lg:hidden">
+        <a
+            :href="link"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-lg:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        >
             <i18n-t keypath="player.watch_on" tag="strong">{{ platform }}</i18n-t>
-            <i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
-            <i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
+            <i-fa6-brands-youtube v-if="platform == 'YouTube'" class="mx-1.5" />
+            <i-fa6-brands-odysee v-else-if="platform == 'Odysee'" class="mx-1.5" />
         </a>
         <!-- For small screens -->
-        <a :href="link" class="btn flex items-center lg:hidden">
-            <i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
-            <i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
+        <a
+            :href="link"
+            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 lg:hidden dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+        >
+            <i-fa6-brands-youtube v-if="platform == 'YouTube'" class="mx-1.5" />
+            <i-fa6-brands-odysee v-else-if="platform == 'Odysee'" class="mx-1.5" />
         </a>
     </template>
 </template>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index dbe30ea2..def8c611 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="video && isEmbed" class="absolute left-0 top-0 z-50 h-full w-full bg-black">
+    <div v-if="video && isEmbed" class="absolute top-0 left-0 z-50 size-full bg-black">
         <VideoPlayer
             ref="videoPlayer"
             :video="video"
@@ -9,7 +9,7 @@
             :is-embed="isEmbed"
         />
     </div>
-    <div id="theaterModeSpot" class="-mx-1vw"></div>
+    <div id="theaterModeSpot" class="-mx-[1vw]"></div>
     <LoadingIndicatorPage :show-content="video != null && !isEmbed" class="w-full">
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
         <Transition>
@@ -43,9 +43,10 @@
                                     setPreference('theaterMode', theaterMode);
                                 "
                             >
-                                <div
-                                    :class="theaterMode ? 'i-fa6-solid:chevron-left' : 'i-fa6-solid:chevron-right'"
-                                ></div>
+                                <div>
+                                    <i-fa6-solid-chevron-left v-if="theaterMode" />
+                                    <i-fa6-solid-chevron-right v-else />
+                                </div>
                             </button>
                         </div>
                     </Teleport>
@@ -66,8 +67,8 @@
                         />
                     </div>
                     <!-- video title -->
-                    <div class="mt-2 break-words text-2xl font-bold" v-text="video.title" />
-                    <div class="mb-3 mt-3 flex flex-wrap">
+                    <div class="mt-2 text-2xl font-bold wrap-break-word" v-text="video.title" />
+                    <div class="my-3 flex flex-wrap">
                         <!-- views / date -->
                         <div class="flex flex-auto gap-2">
                             <span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
@@ -78,11 +79,11 @@
                         <div class="flex gap-2">
                             <template v-if="video.likes >= 0">
                                 <div class="flex items-center">
-                                    <div class="i-fa6-solid:thumbs-up" />
+                                    <i-fa6-solid-thumbs-up />
                                     <strong class="ml-1" v-text="addCommas(video.likes)" />
                                 </div>
                                 <div class="flex items-center">
-                                    <div class="i-fa6-solid:thumbs-down" />
+                                    <i-fa6-solid-thumbs-down />
                                     <strong
                                         class="ml-1"
                                         v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'"
@@ -108,11 +109,14 @@
                                 alt=""
                                 class="rounded-full"
                             />
-                            <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{
-                                video.uploader
-                            }}</router-link>
+                            <router-link
+                                v-if="video.uploaderUrl"
+                                class="ml-1.5 hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
+                                :to="video.uploaderUrl"
+                                >{{ video.uploader }}</router-link
+                            >
                             <!-- Verified Badge -->
-                            <i v-if="video.uploaderVerified" class="i-fa6-solid:check ml-1" />
+                            <i-fa6-solid-check v-if="video.uploaderVerified" class="ml-1" />
                         </div>
                         <PlaylistAddModal
                             v-if="showModal"
@@ -130,14 +134,20 @@
                         />
                         <div class="ml-auto flex flex-wrap gap-1">
                             <!-- Subscribe Button -->
-                            <button class="btn flex items-center gap-1 <md:hidden" @click="downloadCurrentFrame">
-                                {{ $t("actions.download_frame") }}<i class="i-fa6-solid:download" />
-                            </button>
-                            <button class="btn flex items-center" @click="showModal = !showModal">
-                                {{ $t("actions.add_to_playlist") }}<i class="i-fa6-solid:circle-plus ml-1" />
+                            <button
+                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                @click="downloadCurrentFrame"
+                            >
+                                {{ $t("actions.download_frame") }}<i-fa6-solid-download />
                             </button>
                             <button
-                                class="btn"
+                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                @click="showModal = !showModal"
+                            >
+                                {{ $t("actions.add_to_playlist") }}<i-fa6-solid-circle-plus class="ml-1" />
+                            </button>
+                            <button
+                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                                 @click="subscribeHandler"
                                 v-text="
                                     $t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) +
@@ -156,14 +166,17 @@
                                         video.uploaderUrl.split('/')[2]
                                     }`"
                                     target="_blank"
-                                    class="btn flex items-center"
+                                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                                 >
-                                    <i class="i-fa6-solid:rss mx-1.5" />
+                                    <i-fa6-solid-rss class="mx-1.5" />
                                 </a>
                                 <!-- Share Dialog -->
-                                <button class="btn flex items-center" @click="showShareModal = !showShareModal">
-                                    <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
-                                    <i class="i-fa6-solid:share mx-1.5" />
+                                <button
+                                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                    @click="showShareModal = !showShareModal"
+                                >
+                                    <i18n-t class="max-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
+                                    <i-fa6-solid-share class="mx-1.5" />
                                 </button>
                                 <!-- YouTube -->
                                 <WatchOnButton :link="youtubeVideoHref" />
@@ -178,12 +191,12 @@
                                     :to="toggleListenUrl"
                                     :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                                     :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
-                                    class="btn flex items-center"
+                                    class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                                 >
-                                    <i
-                                        :class="isListening ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'"
-                                        class="mx-1.5"
-                                    />
+                                    <div>
+                                        <i-fa6-solid-tv v-if="isListening" class="mx-1.5" />
+                                        <i-fa6-solid-headphones v-else class="mx-1.5" />
+                                    </div>
                                 </router-link>
                             </div>
                         </div>
@@ -194,7 +207,7 @@
                     <div
                         v-for="metaInfo in video?.metaInfo ?? []"
                         :key="metaInfo.title"
-                        class="btn my-3 flex flex-wrap cursor-default gap-2 px-4 py-2"
+                        class="my-3 inline-block w-auto cursor-default rounded-sm bg-gray-300 px-4 py-2 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
                     >
                         <span>{{ metaInfo.description ?? metaInfo.title }}</span>
                         <a v-for="(link, linkIndex) in metaInfo.urls" :key="linkIndex" :href="link" class="underline">{{
@@ -205,18 +218,21 @@
 
                     <button
                         v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`"
-                        class="btn mb-2"
+                        class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                         @click="showDesc = !showDesc"
                     />
 
-                    <span v-show="video?.chapters?.length > 0" class="btn ml-2">
+                    <span
+                        v-show="video?.chapters?.length > 0"
+                        class="ml-2 inline-block w-auto cursor-default rounded-sm bg-gray-300 py-2 text-gray-600 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400"
+                    >
                         <input id="showChapters" v-model="showChapters" type="checkbox" />
                         <label v-t="'actions.show_chapters'" class="ml-2" for="showChapters" />
                     </span>
 
                     <template v-if="showDesc">
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div class="description break-words" v-html="purifiedDescription" />
+                        <div class="wrap-break-word [&_a]:underline [&_a]:brightness-75" v-html="purifiedDescription" />
                         <br />
 
                         <div
@@ -231,7 +247,7 @@
                             <router-link
                                 v-for="tag in video.tags"
                                 :key="tag"
-                                class="btn line-clamp-1 rounded-s px-2 py-1"
+                                class="line-clamp-1 inline-block w-auto cursor-pointer rounded-sm rounded-s bg-gray-300 px-2 py-1 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                                 :to="`/results?search_query=${encodeURIComponent(tag)}`"
                                 >{{ tag }}</router-link
                             >
@@ -254,7 +270,7 @@
                 <select
                     id="chkAutoPlay"
                     v-model.number="selectedAutoPlay"
-                    class="select ml-1.5"
+                    class="ml-1.5 h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
                     @change="onChange($event)"
                 >
                     <option v-t="'actions.never'" value="0" />
@@ -266,7 +282,7 @@
                 <div v-if="isMobile">
                     <a
                         v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
-                        class="btn mb-2"
+                        class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                         @click="showRecs = !showRecs"
                     />
                     <hr v-show="showRecs" />
@@ -288,7 +304,7 @@
                     <div class="">
                         <button
                             v-if="!comments?.disabled"
-                            class="btn mb-2"
+                            class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             @click="toggleCommentsVisibility"
                             v-text="
                                 `${$t(
@@ -333,7 +349,7 @@
                 />
                 <a
                     v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
-                    class="btn mb-2"
+                    class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                     @click="showRecs = !showRecs"
                 />
                 <hr v-show="showRecs" />
@@ -803,9 +819,4 @@ onUnmounted(() => {
     opacity: 0;
     transform: translateX(100%) scale(0.5);
 }
-
-.description a {
-    text-decoration: underline;
-    filter: brightness(0.75);
-}
 </style>
diff --git a/src/components/ui/PreferenceListbox.vue b/src/components/ui/PreferenceListbox.vue
new file mode 100644
index 00000000..17af6fb3
--- /dev/null
+++ b/src/components/ui/PreferenceListbox.vue
@@ -0,0 +1,47 @@
+<template>
+    <ListboxRoot
+        :id="id"
+        :model-value="modelValue"
+        multiple
+        class="w-52 rounded-md bg-gray-300 text-gray-700 dark:bg-dark-400 dark:text-gray-300"
+        @update:model-value="handleUpdate"
+    >
+        <ListboxContent class="max-h-28 overflow-y-auto rounded-md p-1">
+            <ListboxItem
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                class="flex cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm transition-colors outline-none data-highlighted:bg-gray-500 data-highlighted:text-white data-[state=checked]:bg-red-100 data-[state=checked]:text-red-700 dark:data-highlighted:bg-dark-300 dark:data-[state=checked]:bg-red-950/40 dark:data-[state=checked]:text-red-200"
+            >
+                <span v-text="option.label" />
+                <ListboxItemIndicator class="ml-2 text-red-500 dark:text-red-400">✓</ListboxItemIndicator>
+            </ListboxItem>
+        </ListboxContent>
+    </ListboxRoot>
+</template>
+
+<script setup>
+import { ListboxContent, ListboxItem, ListboxItemIndicator, ListboxRoot } from "reka-ui";
+
+defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        required: true,
+    },
+    options: {
+        type: Array,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function handleUpdate(value) {
+    emit("update:modelValue", value);
+    emit("change", value);
+}
+</script>
diff --git a/src/components/ui/PreferenceNumberField.vue b/src/components/ui/PreferenceNumberField.vue
new file mode 100644
index 00000000..bf26a2d4
--- /dev/null
+++ b/src/components/ui/PreferenceNumberField.vue
@@ -0,0 +1,61 @@
+<template>
+    <NumberFieldRoot
+        :id="id"
+        :model-value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        class="inline-flex h-8 items-center rounded-md bg-gray-300 text-gray-700 dark:bg-dark-400 dark:text-gray-300"
+        @update:model-value="handleUpdate"
+    >
+        <NumberFieldDecrement
+            class="inline-flex h-full w-8 items-center justify-center rounded-l-md border-r border-gray-400 text-base transition-colors hover:bg-gray-500 hover:text-white focus-visible:outline-2 focus-visible:outline-red-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-300 dark:hover:bg-dark-300"
+            aria-label="Decrease value"
+        >
+            −
+        </NumberFieldDecrement>
+        <NumberFieldInput
+            class="h-full w-16 bg-transparent px-2 text-center text-gray-700 outline-none focus-visible:outline-2 focus-visible:outline-red-500 dark:text-gray-300"
+        />
+        <NumberFieldIncrement
+            class="inline-flex h-full w-8 items-center justify-center rounded-r-md border-l border-gray-400 text-base transition-colors hover:bg-gray-500 hover:text-white focus-visible:outline-2 focus-visible:outline-red-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-300 dark:hover:bg-dark-300"
+            aria-label="Increase value"
+        >
+            +
+        </NumberFieldIncrement>
+    </NumberFieldRoot>
+</template>
+
+<script setup>
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from "reka-ui";
+
+defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    modelValue: {
+        type: Number,
+        required: true,
+    },
+    min: {
+        type: Number,
+        default: undefined,
+    },
+    max: {
+        type: Number,
+        default: undefined,
+    },
+    step: {
+        type: Number,
+        default: 1,
+    },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function handleUpdate(value) {
+    emit("update:modelValue", value ?? 0);
+    emit("change", value ?? 0);
+}
+</script>
diff --git a/src/components/ui/PreferenceRow.vue b/src/components/ui/PreferenceRow.vue
new file mode 100644
index 00000000..50106439
--- /dev/null
+++ b/src/components/ui/PreferenceRow.vue
@@ -0,0 +1,18 @@
+<template>
+    <label
+        class="mx-[15vw] my-2 flex items-center justify-between odd:bg-gray-200 max-md:mx-[2vw] dark:odd:bg-dark-800"
+        :for="forId"
+    >
+        <slot name="label" />
+        <slot />
+    </label>
+</template>
+
+<script setup>
+defineProps({
+    forId: {
+        type: String,
+        required: true,
+    },
+});
+</script>
diff --git a/src/components/ui/PreferenceSwitch.vue b/src/components/ui/PreferenceSwitch.vue
new file mode 100644
index 00000000..2fb1b80e
--- /dev/null
+++ b/src/components/ui/PreferenceSwitch.vue
@@ -0,0 +1,34 @@
+<template>
+    <SwitchRoot
+        :id="id"
+        :model-value="modelValue"
+        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-gray-300 transition-colors focus-visible:outline-2 focus-visible:outline-red-500 data-[state=checked]:bg-red-500 dark:bg-dark-400 dark:data-[state=checked]:bg-red-400"
+        @update:model-value="handleUpdate"
+    >
+        <SwitchThumb
+            class="pointer-events-none block size-5 translate-x-0 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-5"
+        />
+    </SwitchRoot>
+</template>
+
+<script setup>
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+
+defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    modelValue: {
+        type: Boolean,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function handleUpdate(value) {
+    emit("update:modelValue", value);
+    emit("change", value);
+}
+</script>
diff --git a/src/composables/usePreferences.js b/src/composables/usePreferences.js
index 38e5646f..b4d090ff 100644
--- a/src/composables/usePreferences.js
+++ b/src/composables/usePreferences.js
@@ -1,3 +1,7 @@
+import { StorageSerializers, useLocalStorage } from "@vueuse/core";
+
+const preferenceRefs = new Map();
+
 export function testLocalStorage() {
     try {
         if (window.localStorage !== undefined) localStorage;
@@ -7,20 +11,83 @@ export function testLocalStorage() {
     }
 }
 
+function getQueryPreference(key) {
+    return new URLSearchParams(window.location.search).get(key);
+}
+
+function getOrCreatePreferenceRef(key, createRef) {
+    if (preferenceRefs.has(key)) return preferenceRefs.get(key);
+
+    const preferenceRef = createRef();
+    preferenceRefs.set(key, preferenceRef);
+    return preferenceRef;
+}
+
+function createPreferenceRefForValue(key, value) {
+    if (typeof value === "string" || value === undefined) return usePreferenceString(key);
+    if (typeof value === "boolean") return usePreferenceBoolean(key, value);
+    if (typeof value === "number") return usePreferenceNumber(key, value);
+    return usePreferenceJSON(key, value);
+}
+
+export function usePreferenceString(key, defaultVal) {
+    return getOrCreatePreferenceRef(key, () =>
+        useLocalStorage(key, defaultVal ?? null, {
+            serializer: StorageSerializers.any,
+            writeDefaults: false,
+        }),
+    );
+}
+
+export function usePreferenceBoolean(key, defaultVal = false) {
+    return getOrCreatePreferenceRef(key, () =>
+        useLocalStorage(key, defaultVal, {
+            writeDefaults: false,
+        }),
+    );
+}
+
+export function usePreferenceNumber(key, defaultVal = 0) {
+    return getOrCreatePreferenceRef(key, () =>
+        useLocalStorage(key, defaultVal, {
+            writeDefaults: false,
+        }),
+    );
+}
+
+export function usePreferenceJSON(key, defaultVal) {
+    return getOrCreatePreferenceRef(key, () =>
+        useLocalStorage(key, defaultVal ?? null, {
+            serializer: StorageSerializers.object,
+            writeDefaults: false,
+        }),
+    );
+}
+
 export function setPreference(key, value, disableAlert = false) {
     try {
-        localStorage.setItem(key, value);
+        createPreferenceRefForValue(key, value).value = value;
     } catch {
         if (!disableAlert) alert("Could not save preference to local storage.");
     }
 }
 
 export function getPreferenceBoolean(key, defaultVal) {
-    var value;
-    if (
-        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
-    ) {
+    const queryValue = getQueryPreference(key);
+    if (queryValue !== null) {
+        switch (String(queryValue).toLowerCase()) {
+            case "true":
+            case "1":
+            case "on":
+            case "yes":
+                return true;
+            default:
+                return false;
+        }
+    }
+
+    if (testLocalStorage()) {
+        const value = usePreferenceBoolean(key, defaultVal).value;
         switch (String(value).toLowerCase()) {
             case "true":
             case "1":
@@ -30,36 +97,47 @@ export function getPreferenceBoolean(key, defaultVal) {
             default:
                 return false;
         }
-    } else return defaultVal;
+    }
+
+    return defaultVal;
 }
 
 export function getPreferenceString(key, defaultVal) {
-    var value;
-    if (
-        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
-    ) {
-        return value;
-    } else return defaultVal;
+    const queryValue = getQueryPreference(key);
+    if (queryValue !== null) return queryValue;
+
+    if (testLocalStorage()) {
+        const value = usePreferenceString(key, defaultVal).value;
+        return value ?? defaultVal;
+    }
+
+    return defaultVal;
 }
 
 export function getPreferenceNumber(key, defaultVal) {
-    var value;
-    if (
-        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
-    ) {
+    const queryValue = getQueryPreference(key);
+    if (queryValue !== null) {
+        const num = Number(queryValue);
+        return isNaN(num) ? defaultVal : num;
+    }
+
+    if (testLocalStorage()) {
+        const value = usePreferenceNumber(key, defaultVal).value;
         const num = Number(value);
         return isNaN(num) ? defaultVal : num;
-    } else return defaultVal;
+    }
+
+    return defaultVal;
 }
 
 export function getPreferenceJSON(key, defaultVal) {
-    var value;
-    if (
-        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
-    ) {
-        return JSON.parse(value);
-    } else return defaultVal;
+    const queryValue = getQueryPreference(key);
+    if (queryValue !== null) return JSON.parse(queryValue);
+
+    if (testLocalStorage()) {
+        const value = usePreferenceJSON(key, defaultVal).value;
+        return value ?? defaultVal;
+    }
+
+    return defaultVal;
 }
diff --git a/src/main.js b/src/main.js
index 99f96664..eb0c54aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,8 +4,7 @@ import App from "./App.vue";
 
 import { createI18n } from "vue-i18n";
 import enLocale from "@/locales/en.json";
-import "@unocss/reset/tailwind.css";
-import "uno.css";
+import "./app.css";
 
 import("./registerServiceWorker");
 
diff --git a/uno.config.js b/uno.config.js
deleted file mode 100644
index 7603e384..00000000
--- a/uno.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { defineConfig } from "unocss";
-import transformerDirective from "@unocss/transformer-directives";
-import transformerVariantGroup from "@unocss/transformer-variant-group";
-
-import presetUno from "@unocss/preset-uno";
-import presetIcons from "@unocss/preset-icons";
-import presetWebFonts from "@unocss/preset-web-fonts";
-
-export default defineConfig({
-    transformers: [transformerDirective(), transformerVariantGroup()],
-    presets: [
-        presetUno({
-            dark: "media",
-        }),
-        presetIcons({
-            extraProperties: {
-                display: "inline-block",
-                "vertical-align": "middle",
-            },
-        }),
-        presetWebFonts({
-            provider: "none",
-            fonts: {
-                sans: [
-                    "-apple-system",
-                    "BlinkMacSystemFont",
-                    "Segoe UI",
-                    "Roboto",
-                    "Helvetica Neue",
-                    "Arial",
-                    "Noto Sans",
-                    "sans-serif",
-                    "Apple Color Emoji",
-                    "Segoe UI Emoji",
-                    "Segoe UI Symbol",
-                    "Noto Color Emoji",
-                ],
-            },
-        }),
-    ],
-});
diff --git a/vite.config.js b/vite.config.js
index 3b455b09..ff7da2e2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,9 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import Unocss from "unocss/vite";
+import tailwindcss from "@tailwindcss/vite";
+import Icons from "unplugin-icons/vite";
+import Components from "unplugin-vue-components/vite";
+import IconsResolver from "unplugin-icons/resolver";
 import legacy from "@vitejs/plugin-legacy";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { VitePWA } from "vite-plugin-pwa";
@@ -11,7 +14,12 @@ import eslintPlugin from "vite-plugin-eslint";
 export default defineConfig({
     plugins: [
         vue(),
-        Unocss(),
+        tailwindcss(),
+        Icons({ compiler: "vue3", scale: 1 }),
+        Components({
+            resolvers: [IconsResolver()],
+            dts: false,
+        }),
         VueI18nPlugin({
             include: path.resolve(__dirname, "./src/locales/**"),
         }),