diff --git a/web-src/package-lock.json b/web-src/package-lock.json
index 66ae569d..5580baec 100644
--- a/web-src/package-lock.json
+++ b/web-src/package-lock.json
@@ -65,12 +65,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
-      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.3"
+        "@babel/types": "^7.26.7"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -80,9 +80,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
-      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -526,13 +526,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
-      "integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz",
+      "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.5",
+        "@eslint/object-schema": "^2.1.6",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -541,9 +541,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.1.tgz",
-      "integrity": "sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.10.0.tgz",
+      "integrity": "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -578,9 +578,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.17.0.tgz",
-      "integrity": "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==",
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.19.0.tgz",
+      "integrity": "sha512-rbq9/g38qjfqFLOVPvwjIvFFdNziEC5S65jmjPw5r6A//QH+W91akh9irMwjDN8zKUTak6W9EsAv4m/7Wnw0UQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -588,9 +588,9 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
-      "integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -598,12 +598,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
-      "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.5.tgz",
+      "integrity": "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
+        "@eslint/core": "^0.10.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -840,9 +841,9 @@
       }
     },
     "node_modules/@parcel/watcher": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
-      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -861,25 +862,25 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.0",
-        "@parcel/watcher-darwin-arm64": "2.5.0",
-        "@parcel/watcher-darwin-x64": "2.5.0",
-        "@parcel/watcher-freebsd-x64": "2.5.0",
-        "@parcel/watcher-linux-arm-glibc": "2.5.0",
-        "@parcel/watcher-linux-arm-musl": "2.5.0",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
-        "@parcel/watcher-linux-arm64-musl": "2.5.0",
-        "@parcel/watcher-linux-x64-glibc": "2.5.0",
-        "@parcel/watcher-linux-x64-musl": "2.5.0",
-        "@parcel/watcher-win32-arm64": "2.5.0",
-        "@parcel/watcher-win32-ia32": "2.5.0",
-        "@parcel/watcher-win32-x64": "2.5.0"
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
       }
     },
     "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
-      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
       "cpu": [
         "arm64"
       ],
@@ -898,9 +899,9 @@
       }
     },
     "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
-      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
       "cpu": [
         "arm64"
       ],
@@ -919,9 +920,9 @@
       }
     },
     "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
-      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
       "cpu": [
         "x64"
       ],
@@ -940,9 +941,9 @@
       }
     },
     "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
-      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
       "cpu": [
         "x64"
       ],
@@ -961,9 +962,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
-      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
       "cpu": [
         "arm"
       ],
@@ -982,9 +983,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
-      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
       "cpu": [
         "arm"
       ],
@@ -1003,9 +1004,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
-      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
       "cpu": [
         "arm64"
       ],
@@ -1024,9 +1025,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
-      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
       "cpu": [
         "arm64"
       ],
@@ -1045,9 +1046,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
-      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
       "cpu": [
         "x64"
       ],
@@ -1066,9 +1067,9 @@
       }
     },
     "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
-      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
       "cpu": [
         "x64"
       ],
@@ -1087,9 +1088,9 @@
       }
     },
     "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
-      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
       "cpu": [
         "arm64"
       ],
@@ -1108,9 +1109,9 @@
       }
     },
     "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
-      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
       "cpu": [
         "ia32"
       ],
@@ -1129,9 +1130,9 @@
       }
     },
     "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
-      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
       "cpu": [
         "x64"
       ],
@@ -1173,9 +1174,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
-      "integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.2.tgz",
+      "integrity": "sha512-6Fyg9yQbwJR+ykVdT9sid1oc2ewejS6h4wzQltmJfSW53N60G/ah9pngXGANdy9/aaE/TcUFpWosdm7JXS1WTQ==",
       "cpu": [
         "arm"
       ],
@@ -1187,9 +1188,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.1.tgz",
-      "integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.2.tgz",
+      "integrity": "sha512-K5GfWe+vtQ3kyEbihrimM38UgX57UqHp+oME7X/EX9Im6suwZfa7Hsr8AtzbJvukTpwMGs+4s29YMSO3rwWtsw==",
       "cpu": [
         "arm64"
       ],
@@ -1201,9 +1202,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
-      "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.2.tgz",
+      "integrity": "sha512-PSN58XG/V/tzqDb9kDGutUruycgylMlUE59f40ny6QIRNsTEIZsrNQTJKUN2keMMSmlzgunMFqyaGLmly39sug==",
       "cpu": [
         "arm64"
       ],
@@ -1215,9 +1216,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.1.tgz",
-      "integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.2.tgz",
+      "integrity": "sha512-gQhK788rQJm9pzmXyfBB84VHViDERhAhzGafw+E5mUpnGKuxZGkMVDa3wgDFKT6ukLC5V7QTifzsUKdNVxp5qQ==",
       "cpu": [
         "x64"
       ],
@@ -1229,9 +1230,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.1.tgz",
-      "integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.2.tgz",
+      "integrity": "sha512-eiaHgQwGPpxLC3+zTAcdKl4VsBl3r0AiJOd1Um/ArEzAjN/dbPK1nROHrVkdnoE6p7Svvn04w3f/jEZSTVHunA==",
       "cpu": [
         "arm64"
       ],
@@ -1243,9 +1244,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.1.tgz",
-      "integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.2.tgz",
+      "integrity": "sha512-lhdiwQ+jf8pewYOTG4bag0Qd68Jn1v2gO1i0mTuiD+Qkt5vNfHVK/jrT7uVvycV8ZchlzXp5HDVmhpzjC6mh0g==",
       "cpu": [
         "x64"
       ],
@@ -1257,9 +1258,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.1.tgz",
-      "integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.2.tgz",
+      "integrity": "sha512-lfqTpWjSvbgQP1vqGTXdv+/kxIznKXZlI109WkIFPbud41bjigjNmOAAKoazmRGx+k9e3rtIdbq2pQZPV1pMig==",
       "cpu": [
         "arm"
       ],
@@ -1271,9 +1272,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.1.tgz",
-      "integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.2.tgz",
+      "integrity": "sha512-RGjqULqIurqqv+NJTyuPgdZhka8ImMLB32YwUle2BPTDqDoXNgwFjdjQC59FbSk08z0IqlRJjrJ0AvDQ5W5lpw==",
       "cpu": [
         "arm"
       ],
@@ -1285,9 +1286,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.1.tgz",
-      "integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.2.tgz",
+      "integrity": "sha512-ZvkPiheyXtXlFqHpsdgscx+tZ7hoR59vOettvArinEspq5fxSDSgfF+L5wqqJ9R4t+n53nyn0sKxeXlik7AY9Q==",
       "cpu": [
         "arm64"
       ],
@@ -1299,9 +1300,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.1.tgz",
-      "integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.2.tgz",
+      "integrity": "sha512-UlFk+E46TZEoxD9ufLKDBzfSG7Ki03fo6hsNRRRHF+KuvNZ5vd1RRVQm8YZlGsjcJG8R252XFK0xNPay+4WV7w==",
       "cpu": [
         "arm64"
       ],
@@ -1313,9 +1314,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.1.tgz",
-      "integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.2.tgz",
+      "integrity": "sha512-hJhfsD9ykx59jZuuoQgYT1GEcNNi3RCoEmbo5OGfG8RlHOiVS7iVNev9rhLKh7UBYq409f4uEw0cclTXx8nh8Q==",
       "cpu": [
         "loong64"
       ],
@@ -1327,9 +1328,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.1.tgz",
-      "integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.2.tgz",
+      "integrity": "sha512-g/O5IpgtrQqPegvqopvmdCF9vneLE7eqYfdPWW8yjPS8f63DNam3U4ARL1PNNB64XHZDHKpvO2Giftf43puB8Q==",
       "cpu": [
         "ppc64"
       ],
@@ -1341,9 +1342,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.1.tgz",
-      "integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.2.tgz",
+      "integrity": "sha512-bSQijDC96M6PuooOuXHpvXUYiIwsnDmqGU8+br2U7iPoykNi9JtMUpN7K6xml29e0evK0/g0D1qbAUzWZFHY5Q==",
       "cpu": [
         "riscv64"
       ],
@@ -1355,9 +1356,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.1.tgz",
-      "integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.2.tgz",
+      "integrity": "sha512-49TtdeVAsdRuiUHXPrFVucaP4SivazetGUVH8CIxVsNsaPHV4PFkpLmH9LeqU/R4Nbgky9lzX5Xe1NrzLyraVA==",
       "cpu": [
         "s390x"
       ],
@@ -1369,9 +1370,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.1.tgz",
-      "integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.2.tgz",
+      "integrity": "sha512-j+jFdfOycLIQ7FWKka9Zd3qvsIyugg5LeZuHF6kFlXo6MSOc6R1w37YUVy8VpAKd81LMWGi5g9J25P09M0SSIw==",
       "cpu": [
         "x64"
       ],
@@ -1383,9 +1384,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.1.tgz",
-      "integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.2.tgz",
+      "integrity": "sha512-aDPHyM/D2SpXfSNCVWCxyHmOqN9qb7SWkY1+vaXqMNMXslZYnwh9V/UCudl6psyG0v6Ukj7pXanIpfZwCOEMUg==",
       "cpu": [
         "x64"
       ],
@@ -1397,9 +1398,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.1.tgz",
-      "integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.2.tgz",
+      "integrity": "sha512-LQRkCyUBnAo7r8dbEdtNU08EKLCJMgAk2oP5H3R7BnUlKLqgR3dUjrLBVirmc1RK6U6qhtDw29Dimeer8d5hzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1411,9 +1412,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.1.tgz",
-      "integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.2.tgz",
+      "integrity": "sha512-wt8OhpQUi6JuPFkm1wbVi1BByeag87LDFzeKSXzIdGcX4bMLqORTtKxLoCbV57BHYNSUSOKlSL4BYYUghainYA==",
       "cpu": [
         "ia32"
       ],
@@ -1425,9 +1426,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.1.tgz",
-      "integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.2.tgz",
+      "integrity": "sha512-rUrqINax0TvrPBXrFKg0YbQx18NpPN3NNrgmaao9xRNbTwek7lOXObhx8tQy8gelmQ/gLaGy1WptpU2eKJZImg==",
       "cpu": [
         "x64"
       ],
@@ -1795,9 +1796,9 @@
       "license": "MIT"
     },
     "node_modules/core-js": {
-      "version": "3.39.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
-      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
+      "integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -1974,19 +1975,19 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.17.0.tgz",
-      "integrity": "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==",
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.19.0.tgz",
+      "integrity": "sha512-ug92j0LepKlbbEv6hD911THhoRHmbdXt2gX+VDABAW/Ir7D3nqKdv5Pf5vtlyY6HQMTEP2skXY43ueqTCWssEA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.19.0",
-        "@eslint/core": "^0.9.0",
+        "@eslint/core": "^0.10.0",
         "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "9.17.0",
-        "@eslint/plugin-kit": "^0.2.3",
+        "@eslint/js": "9.19.0",
+        "@eslint/plugin-kit": "^0.2.5",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.1",
@@ -2207,9 +2208,9 @@
       "license": "MIT"
     },
     "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2217,7 +2218,7 @@
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
@@ -2251,9 +2252,9 @@
       "license": "MIT"
     },
     "node_modules/fastq": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
+      "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -2427,9 +2428,9 @@
       "license": "MIT"
     },
     "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2747,18 +2748,25 @@
       }
     },
     "node_modules/mlly": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.3.tgz",
-      "integrity": "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.0",
-        "pathe": "^1.1.2",
-        "pkg-types": "^1.2.1",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/mlly/node_modules/pathe": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.2.tgz",
+      "integrity": "sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2922,9 +2930,9 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
-      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.3",
@@ -2944,21 +2952,28 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.0.tgz",
-      "integrity": "sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.8",
-        "mlly": "^1.7.3",
-        "pathe": "^1.1.2"
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
       }
     },
+    "node_modules/pkg-types/node_modules/pathe": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.2.tgz",
+      "integrity": "sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2975,7 +2990,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -3061,13 +3076,13 @@
       "license": "MIT"
     },
     "node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",
+      "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 14.18.0"
       },
       "funding": {
         "type": "individual",
@@ -3102,9 +3117,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz",
-      "integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==",
+      "version": "4.34.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.2.tgz",
+      "integrity": "sha512-sBDUoxZEaqLu9QeNalL8v3jw6WjPku4wfZGyTU7l7m1oC+rpRihXc/n/H+4148ZkGz5Xli8CHMns//fFGKvpIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3118,25 +3133,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.29.1",
-        "@rollup/rollup-android-arm64": "4.29.1",
-        "@rollup/rollup-darwin-arm64": "4.29.1",
-        "@rollup/rollup-darwin-x64": "4.29.1",
-        "@rollup/rollup-freebsd-arm64": "4.29.1",
-        "@rollup/rollup-freebsd-x64": "4.29.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.29.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.29.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.29.1",
-        "@rollup/rollup-linux-arm64-musl": "4.29.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.29.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.29.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.29.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.29.1",
-        "@rollup/rollup-linux-x64-gnu": "4.29.1",
-        "@rollup/rollup-linux-x64-musl": "4.29.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.29.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.29.1",
-        "@rollup/rollup-win32-x64-msvc": "4.29.1",
+        "@rollup/rollup-android-arm-eabi": "4.34.2",
+        "@rollup/rollup-android-arm64": "4.34.2",
+        "@rollup/rollup-darwin-arm64": "4.34.2",
+        "@rollup/rollup-darwin-x64": "4.34.2",
+        "@rollup/rollup-freebsd-arm64": "4.34.2",
+        "@rollup/rollup-freebsd-x64": "4.34.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.34.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.34.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.34.2",
+        "@rollup/rollup-linux-arm64-musl": "4.34.2",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.34.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.34.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.34.2",
+        "@rollup/rollup-linux-x64-gnu": "4.34.2",
+        "@rollup/rollup-linux-x64-musl": "4.34.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.34.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.34.2",
+        "@rollup/rollup-win32-x64-msvc": "4.34.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -3165,9 +3180,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.83.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.0.tgz",
-      "integrity": "sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==",
+      "version": "1.83.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
+      "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3186,9 +3201,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -3326,9 +3341,9 @@
       "license": "MIT"
     },
     "node_modules/unplugin": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.0.tgz",
-      "integrity": "sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/web-src/src/App.vue b/web-src/src/App.vue
index 2f86aee6..f2bb5196 100644
--- a/web-src/src/App.vue
+++ b/web-src/src/App.vue
@@ -1,27 +1,24 @@
 <template>
-  <div id="app">
-    <navbar-top />
-    <vue-progress-bar class="has-background-info" />
-    <router-view v-slot="{ Component }">
-      <component :is="Component" />
-    </router-view>
-
-    <modal-dialog-remote-pairing
-      :show="pairing_active"
-      @close="pairing_active = false"
-    />
-    <modal-dialog-update
-      :show="show_update_dialog"
-      @close="show_update_dialog = false"
-    />
-    <notification-list v-show="!show_burger_menu" />
-    <navbar-bottom />
-    <div
-      v-show="show_burger_menu || show_player_menu"
-      class="fd-overlay-fullscreen"
-      @click="show_burger_menu = show_player_menu = false"
-    />
-  </div>
+  <navbar-top />
+  <vue-progress-bar class="has-background-info" />
+  <router-view v-slot="{ Component }">
+    <component :is="Component" />
+  </router-view>
+  <modal-dialog-remote-pairing
+    :show="pairing_active"
+    @close="pairing_active = false"
+  />
+  <modal-dialog-update
+    :show="show_update_dialog"
+    @close="show_update_dialog = false"
+  />
+  <notification-list v-show="!show_burger_menu" />
+  <navbar-bottom />
+  <div
+    v-show="show_burger_menu || show_player_menu"
+    class="overlay-fullscreen"
+    @click="show_burger_menu = show_player_menu = false"
+  />
 </template>
 
 <script>
diff --git a/web-src/src/components/ControlDropdown.vue b/web-src/src/components/ControlDropdown.vue
index 16a723d8..f996a3fb 100644
--- a/web-src/src/components/ControlDropdown.vue
+++ b/web-src/src/components/ControlDropdown.vue
@@ -64,5 +64,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/NavbarItemLink.vue b/web-src/src/components/ControlLink.vue
similarity index 86%
rename from web-src/src/components/NavbarItemLink.vue
rename to web-src/src/components/ControlLink.vue
index ef3293e0..997af8c8 100644
--- a/web-src/src/components/NavbarItemLink.vue
+++ b/web-src/src/components/ControlLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <a class="navbar-item" :href="href" @click.stop.prevent="open">
+  <a :href="href" @click.stop.prevent="open">
     <slot />
   </a>
 </template>
@@ -8,7 +8,7 @@
 import { useUIStore } from '@/stores/ui'
 
 export default {
-  name: 'NavbarItemLink',
+  name: 'ControlLink',
   props: {
     to: { required: true, type: Object }
   },
diff --git a/web-src/src/components/ControlMainVolume.vue b/web-src/src/components/ControlMainVolume.vue
new file mode 100644
index 00000000..b70d171c
--- /dev/null
+++ b/web-src/src/components/ControlMainVolume.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="media is-align-items-center mb-0">
+    <div class="media-left">
+      <a class="button is-small" @click="toggle">
+        <mdicon class="icon" :name="icon" />
+      </a>
+    </div>
+    <div class="media-content">
+      <div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />
+      <control-slider
+        v-model:value="player.volume"
+        :cursor="cursor"
+        :max="100"
+        @change="changeVolume"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ControlSlider from '@/components/ControlSlider.vue'
+import { mdiCancel } from '@mdi/js'
+import { usePlayerStore } from '@/stores/player'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ControlVolume',
+  components: { ControlSlider },
+  setup() {
+    return {
+      player: usePlayerStore()
+    }
+  },
+  data() {
+    return {
+      cursor: mdiCancel,
+      old_volume: 0
+    }
+  },
+  computed: {
+    icon() {
+      return this.player.volume > 0 ? 'volume-high' : 'volume-off'
+    }
+  },
+  watch: {
+    'player.volume'() {
+      if (this.player.volume > 0) {
+        this.old_volume = this.player.volume
+      }
+    }
+  },
+  methods: {
+    changeVolume(value) {
+      webapi.player_volume(this.player.volume)
+    },
+    toggle() {
+      this.player.volume = this.player.volume > 0 ? 0 : this.old_volume
+      this.changeVolume()
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlOutputVolume.vue b/web-src/src/components/ControlOutputVolume.vue
new file mode 100644
index 00000000..6c528ea6
--- /dev/null
+++ b/web-src/src/components/ControlOutputVolume.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="media is-align-items-center mb-0">
+    <div class="media-left">
+      <a
+        class="button is-small"
+        :class="{ 'has-text-grey-light': !output.selected }"
+        @click="toggle"
+      >
+        <mdicon class="icon" :name="icon" :title="output.type" />
+      </a>
+    </div>
+    <div class="media-content">
+      <div
+        class="is-size-7 is-uppercase"
+        :class="{ 'has-text-grey-light': !output.selected }"
+        v-text="output.name"
+      />
+      <control-slider
+        v-model:value="volume"
+        :disabled="!output.selected"
+        :max="100"
+        :cursor="cursor"
+        @change="changeVolume"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ControlSlider from '@/components/ControlSlider.vue'
+import { mdiCancel } from '@mdi/js'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ControlOutputVolume',
+  components: {
+    ControlSlider
+  },
+  props: { output: { required: true, type: Object } },
+
+  data() {
+    return {
+      cursor: mdiCancel,
+      volume: this.output.selected ? this.output.volume : 0
+    }
+  },
+
+  computed: {
+    icon() {
+      if (this.output.type.startsWith('AirPlay')) {
+        return 'cast-variant'
+      } else if (this.output.type === 'Chromecast') {
+        return 'cast'
+      } else if (this.output.type === 'fifo') {
+        return 'pipe'
+      }
+      return 'server'
+    }
+  },
+
+  watch: {
+    output() {
+      this.volume = this.output.volume
+    }
+  },
+
+  methods: {
+    changeVolume() {
+      webapi.player_output_volume(this.output.id, this.volume)
+    },
+    toggle() {
+      const values = {
+        selected: !this.output.selected
+      }
+      webapi.output_update(this.output.id, values)
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/PlayerButtonSeekBack.vue b/web-src/src/components/ControlPlayerBack.vue
similarity index 83%
rename from web-src/src/components/PlayerButtonSeekBack.vue
rename to web-src/src/components/ControlPlayerBack.vue
index d8fed00a..86d649cb 100644
--- a/web-src/src/components/PlayerButtonSeekBack.vue
+++ b/web-src/src/components/ControlPlayerBack.vue
@@ -1,8 +1,8 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
     <mdicon
+      class="icon"
       name="rewind-10"
-      :size="icon_size"
       :title="$t('player.button.seek-backward')"
     />
   </a>
@@ -14,10 +14,9 @@ import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonSeekBack',
+  name: 'ControlPlayerBack',
   props: {
-    icon_size: { default: 16, type: Number },
-    seek_ms: { required: true, type: Number }
+    offset: { required: true, type: Number }
   },
 
   setup() {
@@ -52,7 +51,7 @@ export default {
   methods: {
     seek() {
       if (!this.disabled) {
-        webapi.player_seek(this.seek_ms * -1)
+        webapi.player_seek(this.offset * -1)
       }
     }
   }
diff --git a/web-src/src/components/PlayerButtonConsume.vue b/web-src/src/components/ControlPlayerConsume.vue
similarity index 67%
rename from web-src/src/components/PlayerButtonConsume.vue
rename to web-src/src/components/ControlPlayerConsume.vue
index 5a0f2673..3be17a34 100644
--- a/web-src/src/components/PlayerButtonConsume.vue
+++ b/web-src/src/components/ControlPlayerConsume.vue
@@ -1,9 +1,9 @@
 <template>
-  <a :class="{ 'is-info': is_consume }" @click="toggle_consume_mode">
+  <a :class="{ 'is-info': is_consume }" @click="toggle">
     <mdicon
       class="icon"
       name="fire"
-      :size="icon_size"
+      size="16"
       :title="$t('player.button.consume')"
     />
   </a>
@@ -14,10 +14,7 @@ import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonConsume',
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
+  name: 'ControlPlayerConsume',
 
   setup() {
     return {
@@ -32,11 +29,9 @@ export default {
   },
 
   methods: {
-    toggle_consume_mode() {
+    toggle() {
       webapi.player_consume(!this.is_consume)
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonSeekForward.vue b/web-src/src/components/ControlPlayerForward.vue
similarity index 83%
rename from web-src/src/components/PlayerButtonSeekForward.vue
rename to web-src/src/components/ControlPlayerForward.vue
index d64f93c0..c055dd54 100644
--- a/web-src/src/components/PlayerButtonSeekForward.vue
+++ b/web-src/src/components/ControlPlayerForward.vue
@@ -1,8 +1,8 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
     <mdicon
+      class="icon"
       name="fast-forward-30"
-      :size="icon_size"
       :title="$t('player.button.seek-forward')"
     />
   </a>
@@ -14,10 +14,9 @@ import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonSeekForward',
+  name: 'ControlPlayerForward',
   props: {
-    icon_size: { default: 16, type: Number },
-    seek_ms: { required: true, type: Number }
+    offset: { required: true, type: Number }
   },
 
   setup() {
@@ -52,7 +51,7 @@ export default {
   methods: {
     seek() {
       if (!this.disabled) {
-        webapi.player_seek(this.seek_ms)
+        webapi.player_seek(this.offset)
       }
     }
   }
diff --git a/web-src/src/components/PlayerButtonLyrics.vue b/web-src/src/components/ControlPlayerLyrics.vue
similarity index 66%
rename from web-src/src/components/PlayerButtonLyrics.vue
rename to web-src/src/components/ControlPlayerLyrics.vue
index 5444abf8..5bacbed2 100644
--- a/web-src/src/components/PlayerButtonLyrics.vue
+++ b/web-src/src/components/ControlPlayerLyrics.vue
@@ -1,9 +1,9 @@
 <template>
-  <a :class="{ 'is-info': is_active }" @click="toggle_lyrics">
+  <a :class="{ 'is-info': is_active }" @click="toggle">
     <mdicon
       class="icon"
-      :name="icon_name"
-      :size="icon_size"
+      :name="icon"
+      :size="16"
       :title="$t('player.button.toggle-lyrics')"
     />
   </a>
@@ -13,10 +13,7 @@
 import { useLyricsStore } from '@/stores/lyrics'
 
 export default {
-  name: 'PlayerButtonLyrics',
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
+  name: 'ControlPlayerLyrics',
 
   setup() {
     return {
@@ -25,7 +22,7 @@ export default {
   },
 
   computed: {
-    icon_name() {
+    icon() {
       return this.is_active ? 'script-text-play' : 'script-text-outline'
     },
     is_active() {
@@ -34,11 +31,9 @@ export default {
   },
 
   methods: {
-    toggle_lyrics() {
+    toggle() {
       this.lyricsStore.pane = !this.lyricsStore.pane
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonNext.vue b/web-src/src/components/ControlPlayerNext.vue
similarity index 78%
rename from web-src/src/components/PlayerButtonNext.vue
rename to web-src/src/components/ControlPlayerNext.vue
index 4f507895..43369c42 100644
--- a/web-src/src/components/PlayerButtonNext.vue
+++ b/web-src/src/components/ControlPlayerNext.vue
@@ -1,8 +1,8 @@
 <template>
   <a :disabled="disabled" @click="play_next">
     <mdicon
+      class="icon"
       name="skip-forward"
-      :size="icon_size"
       :title="$t('player.button.skip-forward')"
     />
   </a>
@@ -13,10 +13,7 @@ import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonNext',
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
+  name: 'ControlPlayerNext',
 
   computed: {
     disabled() {
@@ -29,11 +26,8 @@ export default {
       if (this.disabled) {
         return
       }
-
       webapi.player_next()
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/ControlPlayerPlay.vue
similarity index 82%
rename from web-src/src/components/PlayerButtonPlayPause.vue
rename to web-src/src/components/ControlPlayerPlay.vue
index f1f8744f..83bea4d8 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/web-src/src/components/ControlPlayerPlay.vue
@@ -1,10 +1,6 @@
 <template>
-  <a :disabled="disabled" @click="toggle_play_pause">
-    <mdicon
-      :name="icon_name"
-      :size="icon_size"
-      :title="$t(`player.button.${icon_name}`)"
-    />
+  <a :disabled="disabled" @click="toggle">
+    <mdicon class="icon" :name="icon" :title="$t(`player.button.${icon}`)" />
   </a>
 </template>
 
@@ -15,9 +11,8 @@ import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonPlayPause',
+  name: 'ControlPlayerPlay',
   props: {
-    icon_size: { default: 16, type: Number },
     show_disabled_message: Boolean
   },
 
@@ -33,7 +28,7 @@ export default {
     disabled() {
       return this.queueStore?.count <= 0
     },
-    icon_name() {
+    icon() {
       if (!this.is_playing) {
         return 'play'
       } else if (this.is_pause_allowed) {
@@ -51,7 +46,7 @@ export default {
   },
 
   methods: {
-    toggle_play_pause() {
+    toggle() {
       if (this.disabled) {
         if (this.show_disabled_message) {
           this.notificationsStore.add({
@@ -74,5 +69,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonPrevious.vue b/web-src/src/components/ControlPlayerPrevious.vue
similarity index 81%
rename from web-src/src/components/PlayerButtonPrevious.vue
rename to web-src/src/components/ControlPlayerPrevious.vue
index ce3eac9d..89893733 100644
--- a/web-src/src/components/PlayerButtonPrevious.vue
+++ b/web-src/src/components/ControlPlayerPrevious.vue
@@ -1,8 +1,8 @@
 <template>
   <a :disabled="disabled" @click="play_previous">
     <mdicon
+      class="icon"
       name="skip-backward"
-      :size="icon_size"
       :title="$t('player.button.skip-backward')"
     />
   </a>
@@ -13,10 +13,7 @@ import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonPrevious',
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
+  name: 'ControlPlayerPrevious',
 
   setup() {
     return {
@@ -40,5 +37,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonRepeat.vue b/web-src/src/components/ControlPlayerRepeat.vue
similarity index 74%
rename from web-src/src/components/PlayerButtonRepeat.vue
rename to web-src/src/components/ControlPlayerRepeat.vue
index 3e68e294..c4970919 100644
--- a/web-src/src/components/PlayerButtonRepeat.vue
+++ b/web-src/src/components/ControlPlayerRepeat.vue
@@ -1,10 +1,10 @@
 <template>
-  <a :class="{ 'is-info': !is_repeat_off }" @click="toggle_repeat_mode">
+  <a :class="{ 'is-info': !is_repeat_off }" @click="toggle">
     <mdicon
       class="icon"
-      :name="icon_name"
-      :size="icon_size"
-      :title="$t(`player.button.${icon_name}`)"
+      :name="icon"
+      :size="16"
+      :title="$t(`player.button.${icon}`)"
     />
   </a>
 </template>
@@ -14,19 +14,14 @@ import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonRepeat',
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
-
+  name: 'ControlPlayerRepeat',
   setup() {
     return {
       playerStore: usePlayerStore()
     }
   },
-
   computed: {
-    icon_name() {
+    icon() {
       if (this.is_repeat_all) {
         return 'repeat'
       } else if (this.is_repeat_single) {
@@ -46,7 +41,7 @@ export default {
   },
 
   methods: {
-    toggle_repeat_mode() {
+    toggle() {
       if (this.is_repeat_all) {
         webapi.player_repeat('single')
       } else if (this.is_repeat_single) {
@@ -58,5 +53,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/PlayerButtonShuffle.vue b/web-src/src/components/ControlPlayerShuffle.vue
similarity index 61%
rename from web-src/src/components/PlayerButtonShuffle.vue
rename to web-src/src/components/ControlPlayerShuffle.vue
index 7ee15d06..ab61c705 100644
--- a/web-src/src/components/PlayerButtonShuffle.vue
+++ b/web-src/src/components/ControlPlayerShuffle.vue
@@ -1,10 +1,10 @@
 <template>
-  <a :class="{ 'is-info': is_shuffle }" @click="toggle_shuffle_mode">
+  <a :class="{ 'is-info': is_shuffle }" @click="toggle">
     <mdicon
       class="icon"
-      :name="icon_name"
-      :size="icon_size"
-      :title="$t(`player.button.${icon_name}`)"
+      :name="icon"
+      :size="16"
+      :title="$t(`player.button.${icon}`)"
     />
   </a>
 </template>
@@ -14,20 +14,14 @@ import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
-  name: 'PlayerButtonShuffle',
-
-  props: {
-    icon_size: { default: 16, type: Number }
-  },
-
+  name: 'ControlPlayerShuffle',
   setup() {
     return {
       playerStore: usePlayerStore()
     }
   },
-
   computed: {
-    icon_name() {
+    icon() {
       if (this.is_shuffle) {
         return 'shuffle'
       }
@@ -37,13 +31,10 @@ export default {
       return this.playerStore.shuffle
     }
   },
-
   methods: {
-    toggle_shuffle_mode() {
+    toggle() {
       webapi.player_shuffle(!this.is_shuffle)
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ControlSetting.vue b/web-src/src/components/ControlSetting.vue
new file mode 100644
index 00000000..e7884ec8
--- /dev/null
+++ b/web-src/src/components/ControlSetting.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldset :disabled="disabled">
+    <div class="field">
+      <label v-if="$slots.label" class="label has-text-weight-normal">
+        <slot name="label" />
+      </label>
+      <div class="control" :class="{ 'has-icons-right': isSuccess || isError }">
+        <slot name="input" :setting="setting" :update="update" />
+        <mdicon
+          v-if="isSuccess || isError"
+          class="icon is-right"
+          :name="isSuccess ? 'check' : 'close'"
+          size="16"
+        />
+      </div>
+      <p v-if="$slots.help" class="help">
+        <slot name="help" />
+      </p>
+    </div>
+  </fieldset>
+</template>
+
+<script>
+import { useSettingsStore } from '@/stores/settings'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ControlSetting',
+  props: {
+    category: { required: true, type: String },
+    disabled: Boolean,
+    name: { required: true, type: String },
+    placeholder: { default: '', type: String }
+  },
+
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
+  data() {
+    return {
+      timerDelay: 2000,
+      timerId: -1
+    }
+  },
+
+  computed: {
+    isError() {
+      return this.timerId === -2
+    },
+    isSuccess() {
+      return this.timerId >= 0
+    },
+    setting() {
+      return this.settingsStore.setting(this.category, this.name)
+    }
+  },
+
+  methods: {
+    update(event, sanitise) {
+      const value = sanitise?.(event.target)
+      if (value === this.setting.value) {
+        return
+      }
+      const setting = {
+        category: this.category,
+        name: this.name,
+        value
+      }
+      webapi
+        .settings_update(this.category, setting)
+        .then(() => {
+          window.clearTimeout(this.timerId)
+          this.settingsStore.update(setting)
+        })
+        .catch(() => {
+          this.timerId = -2
+        })
+        .finally(() => {
+          this.timerId = window.setTimeout(() => {
+            this.timerId = -1
+          }, this.timerDelay)
+        })
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlSettingIntegerField.vue b/web-src/src/components/ControlSettingIntegerField.vue
new file mode 100644
index 00000000..de203bb0
--- /dev/null
+++ b/web-src/src/components/ControlSettingIntegerField.vue
@@ -0,0 +1,46 @@
+<template>
+  <control-setting
+    :category="category"
+    :disabled="disabled"
+    :name="name"
+    :placeholder="placeholder"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #input="{ setting, update }">
+      <input
+        class="input"
+        inputmode="numeric"
+        min="0"
+        :placeholder="placeholder"
+        :value="setting.value"
+        @input="update($event, sanitise)"
+      />
+    </template>
+    <template #help>
+      <slot name="help" />
+    </template>
+  </control-setting>
+</template>
+
+<script>
+import ControlSetting from '@/components/ControlSetting.vue'
+
+export default {
+  name: 'ControlSettingIntegerField',
+  components: { ControlSetting },
+  props: {
+    category: { required: true, type: String },
+    disabled: Boolean,
+    name: { required: true, type: String },
+    placeholder: { default: '', type: String }
+  },
+  methods: {
+    sanitise(target) {
+      const value = parseInt(target.value.replace(/\D+/gu, ''), 10) || 0
+      return (target.value = value)
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlSettingSwitch.vue b/web-src/src/components/ControlSettingSwitch.vue
new file mode 100644
index 00000000..c675bea6
--- /dev/null
+++ b/web-src/src/components/ControlSettingSwitch.vue
@@ -0,0 +1,39 @@
+<template>
+  <control-setting :category="category" :disabled="disabled" :name="name">
+    <template #input="{ setting, update }">
+      <control-switch
+        :model-value="setting.value"
+        @update:model-value="
+          (value) => update({ target: { checked: value } }, sanitise)
+        "
+      >
+        <template #label>
+          <slot name="label" />
+        </template>
+        <template #help>
+          <slot name="help" />
+        </template>
+      </control-switch>
+    </template>
+  </control-setting>
+</template>
+
+<script>
+import ControlSetting from '@/components/ControlSetting.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
+
+export default {
+  name: 'ControlSettingSwitch',
+  components: { ControlSetting, ControlSwitch },
+  props: {
+    category: { required: true, type: String },
+    disabled: { default: false, type: Boolean },
+    name: { required: true, type: String }
+  },
+  methods: {
+    sanitise(target) {
+      return target.checked
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlSettingTextField.vue b/web-src/src/components/ControlSettingTextField.vue
new file mode 100644
index 00000000..baf48040
--- /dev/null
+++ b/web-src/src/components/ControlSettingTextField.vue
@@ -0,0 +1,44 @@
+<template>
+  <control-setting
+    :category="category"
+    :disabled="disabled"
+    :name="name"
+    :placeholder="placeholder"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #input="{ setting, update }">
+      <input
+        class="input"
+        inputmode="text"
+        :placeholder="placeholder"
+        :value="setting.value"
+        @input="update($event, sanitise)"
+      />
+    </template>
+    <template #help>
+      <slot name="help" />
+    </template>
+  </control-setting>
+</template>
+
+<script>
+import ControlSetting from '@/components/ControlSetting.vue'
+
+export default {
+  name: 'ControlSettingTextField',
+  components: { ControlSetting },
+  props: {
+    category: { required: true, type: String },
+    disabled: Boolean,
+    name: { required: true, type: String },
+    placeholder: { default: '', type: String }
+  },
+  methods: {
+    sanitise(target) {
+      return target.value
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlSlider.vue b/web-src/src/components/ControlSlider.vue
index 2d4a82f5..feb9100a 100644
--- a/web-src/src/components/ControlSlider.vue
+++ b/web-src/src/components/ControlSlider.vue
@@ -32,3 +32,112 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use 'bulma/sass/utilities/mixins';
+
+@mixin thumb {
+  -webkit-appearance: none;
+  width: var(--th);
+  height: var(--th);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--bulma-light);
+  border: 1px solid var(--bulma-grey-lighter);
+  @media (prefers-color-scheme: dark) {
+    background: var(--bulma-grey-lighter);
+    border: 1px solid var(--bulma-grey-dark);
+  }
+}
+
+@mixin thumb-inactive {
+  box-sizing: border-box;
+  background-color: var(--bulma-light);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--bulma-grey-dark);
+    border: 1px solid var(--bulma-grey-darker);
+  }
+}
+
+@mixin track {
+  height: calc(var(--sh));
+  border-radius: calc(var(--sh) / 2);
+  background: linear-gradient(
+    90deg,
+    var(--bulma-dark) var(--sx),
+    var(--bulma-grey-lighter) var(--sx)
+  );
+  @media (prefers-color-scheme: dark) {
+    background: linear-gradient(
+      90deg,
+      var(--bulma-grey-lighter) var(--sx),
+      var(--bulma-grey-dark) var(--sx)
+    );
+  }
+}
+
+@mixin track-inactive {
+  background: linear-gradient(
+    90deg,
+    var(--bulma-grey-light) var(--sx),
+    var(--bulma-light) var(--sx)
+  );
+  @media (prefers-color-scheme: dark) {
+    background: linear-gradient(
+      90deg,
+      var(--bulma-grey-dark) var(--sx),
+      var(--bulma-black-ter) var(--sx)
+    );
+  }
+}
+
+input[type='range'].slider {
+  --sh: 0.25rem;
+  --th: calc(var(--sh) * 4);
+  background-color: transparent;
+  @include mixins.mobile {
+    --th: calc(var(--sh) * 5);
+  }
+  & {
+    --sx: calc(var(--th) / 2 + (var(--ratio) * (100% - var(--th))));
+    -webkit-appearance: none;
+    min-width: 250px;
+    height: calc(var(--sh) * 5);
+    width: 100% !important;
+    cursor: grab;
+  }
+  &:active {
+    cursor: grabbing;
+  }
+  &::-webkit-slider-thumb {
+    @include thumb;
+    & {
+      margin-top: calc((var(--th) - var(--sh)) / -2);
+    }
+  }
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+  &::-webkit-slider-runnable-track {
+    @include track;
+  }
+  &::-moz-range-track {
+    @include track;
+  }
+  &.is-inactive {
+    cursor: var(--cursor, not-allowed);
+    &::-webkit-slider-thumb {
+      @include thumb-inactive;
+    }
+    &::-webkit-slider-runnable-track {
+      @include track-inactive;
+    }
+    &::-moz-range-thumb {
+      @include thumb-inactive;
+    }
+    &::-moz-range-track {
+      @include track-inactive;
+    }
+  }
+}
+</style>
diff --git a/web-src/src/components/ControlStreamVolume.vue b/web-src/src/components/ControlStreamVolume.vue
new file mode 100644
index 00000000..e6a40a89
--- /dev/null
+++ b/web-src/src/components/ControlStreamVolume.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="media is-align-items-center mb-0">
+    <div class="media-left">
+      <a
+        class="button is-small"
+        :class="{
+          'has-text-grey-light': !playing && !loading,
+          'is-loading': loading
+        }"
+        @click="togglePlay"
+      >
+        <mdicon class="icon" name="broadcast" />
+      </a>
+    </div>
+    <div class="media-content is-align-items-center">
+      <div class="is-flex" :class="{ 'has-text-grey-light': !playing }">
+        <div class="is-size-7 is-uppercase" v-text="$t('navigation.stream')" />
+        <a href="stream.mp3" class="ml-2" target="_blank">
+          <mdicon class="icon is-small" name="open-in-new" />
+        </a>
+      </div>
+      <control-slider
+        v-model:value="volume"
+        :cursor="cursor"
+        :disabled="!playing"
+        :max="100"
+        @change="changeVolume"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ControlSlider from '@/components/ControlSlider.vue'
+import audio from '@/lib/Audio'
+import { mdiCancel } from '@mdi/js'
+
+export default {
+  name: 'ControlStreamVolume',
+  components: { ControlSlider },
+  emits: ['change', 'mute'],
+  data() {
+    return {
+      cursor: mdiCancel,
+      loading: false,
+      playing: false,
+      volume: 10
+    }
+  },
+  mounted() {
+    this.setupAudio()
+  },
+  unmounted() {
+    this.closeAudio()
+  },
+  methods: {
+    changeVolume() {
+      audio.setVolume(this.volume / 100)
+    },
+    closeAudio() {
+      audio.stop()
+      this.playing = false
+    },
+    playChannel() {
+      if (this.playing) {
+        return
+      }
+      this.loading = true
+      audio.play('/stream.mp3')
+      audio.setVolume(this.volume / 100)
+    },
+    setupAudio() {
+      const a = audio.setup()
+      a.addEventListener('waiting', () => {
+        this.playing = false
+        this.loading = true
+      })
+      a.addEventListener('playing', () => {
+        this.playing = true
+        this.loading = false
+      })
+      a.addEventListener('ended', () => {
+        this.playing = false
+        this.loading = false
+      })
+      a.addEventListener('error', () => {
+        this.closeAudio()
+        this.notificationsStore.add({
+          text: this.$t('navigation.stream-error'),
+          type: 'danger'
+        })
+        this.playing = false
+        this.loading = false
+      })
+    },
+    togglePlay() {
+      if (this.loading) {
+        return
+      }
+      if (this.playing) {
+        this.closeAudio()
+      }
+      this.playChannel()
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ControlSwitch.vue b/web-src/src/components/ControlSwitch.vue
new file mode 100644
index 00000000..8a919932
--- /dev/null
+++ b/web-src/src/components/ControlSwitch.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="field">
+    <label class="toggle">
+      <div class="control is-flex is-align-content-center">
+        <input
+          :checked="modelValue"
+          type="checkbox"
+          class="toggle-checkbox"
+          @change="$emit('update:modelValue', !modelValue)"
+        />
+        <div class="toggle-switch" />
+        <slot name="label" />
+      </div>
+    </label>
+    <div v-if="$slots.help" class="help">
+      <slot name="help" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlSwitch',
+  props: {
+    modelValue: Boolean
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style lang="scss" scoped>
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+
+  &-switch {
+    display: inline-block;
+    background: var(--bulma-grey-lighter);
+    border-radius: 1rem;
+    width: 2.5rem;
+    height: 1.25rem;
+    position: relative;
+    vertical-align: middle;
+    transition: background 0.25s;
+    margin-right: 0.5rem;
+
+    &:before {
+      content: '';
+      display: block;
+      background: var(--bulma-white);
+      border-radius: 50%;
+      width: 1rem;
+      height: 1rem;
+      position: absolute;
+      top: 0.125rem;
+      left: 0.125rem;
+      transition: left 0.25s;
+    }
+  }
+
+  &:hover &-switch:before {
+    background: var(--bulma-white);
+  }
+
+  &-checkbox {
+    position: absolute;
+    visibility: hidden;
+
+    &:checked + .toggle-switch {
+      background: var(--bulma-dark);
+
+      &:before {
+        left: 1.375rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/web-src/src/components/IndexButtonList.vue b/web-src/src/components/IndexButtonList.vue
index 22b02623..74710b17 100644
--- a/web-src/src/components/IndexButtonList.vue
+++ b/web-src/src/components/IndexButtonList.vue
@@ -1,10 +1,10 @@
 <template>
   <section>
-    <nav class="buttons is-centered mb-4 fd-is-square">
+    <nav class="buttons is-centered mb-4">
       <router-link
         v-for="index in indices"
         :key="index"
-        class="button is-small"
+        class="button is-small is-square"
         :to="{ hash: `#index_${index}`, query: $route.query }"
       >
         {{ index }}
@@ -20,4 +20,11 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+.is-square {
+  height: 1.75rem;
+  min-width: 1.75rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+</style>
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 6e4814e5..5d8c39f7 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -1,37 +1,35 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
+    <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>
-    <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div
+    <div
+      v-else
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item.item)"
+    >
+      <cover-artwork
         v-if="settingsStore.show_cover_artwork_in_album_lists"
-        class="media-left"
-      >
-        <cover-artwork
-          :url="item.item.artwork_url"
-          :artist="item.item.artist"
-          :album="item.item.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+        :url="item.item.artwork_url"
+        :artist="item.item.artist"
+        :album="item.item.name"
+        class="media-left fd-has-shadow fd-cover fd-cover-small-image"
+      />
+      <div class="media-content">
+        <div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
+        <div
+          class="is-size-7 has-text-grey has-text-weight-bold"
+          v-text="item.item.artist"
+        />
+        <div
+          v-if="item.item.date_released && item.item.media_kind === 'music'"
+          class="is-size-7 has-text-grey"
+          v-text="$filters.date(item.item.date_released)"
         />
-      </div>
-      <div class="media-content is-clickable is-clipped">
-        <div>
-          <h1 class="title is-6" v-text="item.item.name" />
-          <h2
-            class="subtitle is-7 has-text-grey has-text-weight-bold"
-            v-text="item.item.artist"
-          />
-          <h2
-            v-if="item.item.date_released && item.item.media_kind === 'music'"
-            class="subtitle is-7 has-text-grey"
-            v-text="$filters.date(item.item.date_released)"
-          />
-        </div>
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -49,7 +47,7 @@
       @remove-podcast="open_remove_podcast_dialog()"
       @play-count-changed="play_count_changed()"
     />
-    <modal-dialog
+    <modal-dialog-action
       :close_action="$t('page.podcast.cancel')"
       :delete_action="$t('page.podcast.remove')"
       :show="show_remove_podcast_modal"
@@ -64,20 +62,20 @@
           <b v-text="rss_playlist_to_remove.name" />)
         </p>
       </template>
-    </modal-dialog>
+    </modal-dialog-action>
   </teleport>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
+  components: { CoverArtwork, ModalDialogAction, ModalDialogAlbum },
   props: {
     items: { required: true, type: Object },
     media_kind: { default: '', type: String }
@@ -148,5 +146,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 435f1223..d42528b3 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -1,28 +1,29 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center" @click="open(item)">
+    <div
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item)"
+    >
       <div
         v-if="settingsStore.show_cover_artwork_in_album_lists"
-        class="media-left is-clickable"
+        class="media-left"
       >
         <cover-artwork
           :url="artwork_url(item)"
           :artist="item.artist"
           :album="item.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+          class="fd-has-shadow fd-cover fd-cover-small-image"
         />
       </div>
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.name" />
-        <h2
-          class="subtitle is-7 has-text-grey has-text-weight-bold"
+      <div class="media-content">
+        <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
+        <div
+          class="is-size-7 has-text-weight-bold has-text-grey"
           v-text="item.artists[0]?.name"
         />
-        <h2
-          class="subtitle is-7 has-text-grey"
-          v-text="
-            [item.album_type, $filters.date(item.release_date)].join(', ')
-          "
+        <div
+          class="is-size-7 has-text-grey"
+          v-text="$filters.date(item.release_date)"
         />
       </div>
       <div class="media-right">
@@ -76,5 +77,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index c289316b..268754ab 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -1,17 +1,21 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>
     </div>
-    <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+    <div
+      v-else
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item.item)"
+    >
+      <div class="media-content">
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -60,5 +64,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListArtistsSpotify.vue b/web-src/src/components/ListArtistsSpotify.vue
index c9a38e72..9010d0b7 100644
--- a/web-src/src/components/ListArtistsSpotify.vue
+++ b/web-src/src/components/ListArtistsSpotify.vue
@@ -1,8 +1,8 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center">
-      <div class="media-content is-clickable is-clipped" @click="open(item)">
-        <h1 class="title is-6" v-text="item.name" />
+    <div class="media is-align-items-center mb-0">
+      <div class="media-content is-clickable" @click="open(item)">
+        <p class="title is-6" v-text="item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -45,5 +45,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 981e9bfd..59e4b403 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -1,17 +1,21 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>
     </div>
-    <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+    <div
+      v-else
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item.item)"
+    >
+      <div class="media-content">
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -62,5 +66,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index a17a9d3d..211ddd61 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -1,9 +1,11 @@
 <template>
-  <div v-if="$route.query.directory" class="media is-align-items-center">
-    <figure class="media-left is-clickable" @click="open_parent">
-      <mdicon class="icon" name="chevron-left" size="16" />
-    </figure>
-    <div class="media-content is-clipped">
+  <div v-if="$route.query.directory" class="media is-align-items-center mb-0">
+    <mdicon
+      class="icon media-left is-clickable"
+      name="chevron-left"
+      @click="open_parent"
+    />
+    <div class="media-content">
       <nav class="breadcrumb">
         <ul>
           <li v-for="directory in directories" :key="directory.index">
@@ -19,12 +21,13 @@
     </div>
   </div>
   <template v-for="item in items" :key="item.path">
-    <div class="media is-align-items-center" @click="open(item)">
-      <figure class="media-left is-clickable">
-        <mdicon class="icon" name="folder" size="16" />
-      </figure>
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.name" />
+    <div
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item)"
+    >
+      <mdicon class="media-left icon" name="folder" />
+      <div class="media-content">
+        <p class="title is-6" v-text="item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -90,5 +93,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 83cbbe2e..5b496fb8 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -1,17 +1,21 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>
     </div>
-    <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+    <div
+      v-else
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item.item)"
+    >
+      <div class="media-content">
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -63,5 +67,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index cd57b4f8..db17d2a0 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,26 +1,27 @@
 <template>
   <div
     v-if="is_next || !show_only_next_items"
-    class="media is-align-items-center"
+    class="media is-align-items-center is-clickable mb-0"
+    @click="play"
   >
     <div v-if="edit_mode" class="media-left">
       <mdicon
-        class="icon has-text-grey fd-is-movable handle"
+        class="icon has-text-grey is-movable"
         name="drag-horizontal"
-        size="16"
+        size="18"
       />
     </div>
-    <div class="media-content is-clickable is-clipped" @click="play">
-      <h1
-        class="title is-6"
+    <div class="media-content">
+      <div
+        class="is-size-6 has-text-weight-bold"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next
         }"
         v-text="item.title"
       />
-      <h2
-        class="subtitle is-7 has-text-weight-bold"
+      <div
+        class="is-size-7 has-text-weight-bold"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
@@ -28,8 +29,8 @@
         }"
         v-text="item.artist"
       />
-      <h2
-        class="subtitle is-7"
+      <div
+        class="is-size-7"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
@@ -81,4 +82,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+.is-movable {
+  cursor: move;
+}
+</style>
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 505dc5a4..3c9f21cf 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -1,11 +1,12 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div class="media is-align-items-center" @click="open(item.item)">
-      <figure class="media-left is-clickable">
-        <mdicon class="icon" :name="icon_name(item.item)" size="16" />
-      </figure>
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+    <div
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item.item)"
+    >
+      <mdicon class="media-left icon" :name="icon(item.item)" />
+      <div class="media-content">
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -39,7 +40,7 @@ export default {
   },
 
   methods: {
-    icon_name(item) {
+    icon(item) {
       if (item.type === 'folder') {
         return 'folder'
       } else if (item.type === 'rss') {
@@ -61,5 +62,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListPlaylistsSpotify.vue b/web-src/src/components/ListPlaylistsSpotify.vue
index 9536af64..f4f76697 100644
--- a/web-src/src/components/ListPlaylistsSpotify.vue
+++ b/web-src/src/components/ListPlaylistsSpotify.vue
@@ -1,9 +1,15 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center">
-      <div class="media-content is-clickable is-clipped" @click="open(item)">
-        <h1 class="title is-6" v-text="item.name" />
-        <h2 class="subtitle is-7" v-text="item.owner.display_name" />
+    <div
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item)"
+    >
+      <div class="media-content">
+        <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
+        <div
+          class="is-size-7 has-text-weight-bold has-text-grey"
+          v-text="item.owner.display_name"
+        />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -46,5 +52,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index e21ee3df..e2b081fd 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -1,35 +1,33 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
+    <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>
     <div
       v-else
-      class="media is-align-items-center"
+      class="media is-align-items-center is-clickable mb-0"
       :class="{ 'with-progress': show_progress }"
       @click="play(item.item)"
     >
-      <figure v-if="show_icon" class="media-left is-clickable">
-        <mdicon class="icon" name="file-outline" size="16" />
-      </figure>
-      <div class="media-content is-clickable is-clipped">
-        <h1
-          class="title is-6"
+      <mdicon v-if="show_icon" class="media-left icon" name="file-outline" />
+      <div class="media-content">
+        <div
+          class="is-size-6 has-text-weight-bold"
           :class="{
             'has-text-grey':
               item.item.media_kind === 'podcast' && item.item.play_count > 0
           }"
           v-text="item.item.title"
         />
-        <h2
-          class="subtitle is-7 has-text-grey has-text-weight-bold"
+        <div
+          class="is-size-7 has-text-weight-bold has-text-grey"
           v-text="item.item.artist"
         />
-        <h2 class="subtitle is-7 has-text-grey" v-text="item.item.album" />
+        <div class="is-size-7 has-text-grey" v-text="item.item.album" />
         <progress
           v-if="show_progress && item.item.seek_ms > 0"
           class="progress is-info"
@@ -103,4 +101,8 @@ export default {
 .progress {
   height: 0.25rem;
 }
+
+.media.with-progress {
+  margin-top: 0.375rem;
+}
 </style>
diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue
index 4aff9071..ac817f39 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -1,29 +1,29 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center">
+    <div class="media is-align-items-center mb-0">
       <div
-        class="media-content is-clipped"
+        class="media-content"
         :class="{
           'is-clickable': item.is_playable,
-          'fd-is-not-allowed': !item.is_playable
+          'is-not-allowed': !item.is_playable
         }"
         @click="play(item)"
       >
-        <h1
-          class="title is-6"
+        <div
+          class="is-size-6 has-text-weight-bold"
           :class="{ 'has-text-grey-light': !item.is_playable }"
           v-text="item.name"
         />
-        <h2
-          class="subtitle is-7 has-text-weight-bold"
+        <div
+          class="is-size-7 has-text-weight-bold"
           :class="{
             'has-text-grey': item.is_playable,
             'has-text-grey-light': !item.is_playable
           }"
           v-text="item.artists[0].name"
         />
-        <h2 class="subtitle is-7 has-text-grey" v-text="item.album.name" />
-        <h2 v-if="!item.is_playable" class="subtitle is-7">
+        <div class="is-size-7 has-text-grey" v-text="item.album.name" />
+        <div v-if="!item.is_playable" class="is-size-7 has-text-grey">
           (<span v-text="$t('list.spotify.not-playable-track')" />
           <span
             v-if="item.restrictions?.reason"
@@ -33,7 +33,7 @@
               })
             "
           />)
-        </h2>
+        </div>
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -83,4 +83,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+.is-not-allowed {
+  cursor: not-allowed;
+}
+</style>
diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index d82f791b..2c62400f 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -223,4 +223,14 @@ export default {
 .lyrics div:last-child {
   padding-bottom: calc(25vh - 3rem);
 }
+
+/* Lyrics animation */
+@keyframes pop-color {
+  0% {
+    color: var(--bulma-black);
+  }
+  100% {
+    color: var(--bulma-success);
+  }
+}
 </style>
diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 2a315a1f..3d0a30a3 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -5,38 +5,13 @@
       <div class="modal-content">
         <div class="card">
           <div class="card-content">
-            <p v-if="title" class="title is-4" v-text="title" />
-            <slot name="modal-content" />
+            <slot name="content" />
           </div>
           <footer class="card-footer is-clipped">
-            <a class="card-footer-item has-text-dark" @click="$emit('close')">
-              <mdicon class="icon" name="cancel" size="16" />
-              <span class="is-size-7" v-text="close_action" />
-            </a>
-            <a
-              v-if="delete_action"
-              class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
-              @click="$emit('delete')"
-            >
-              <mdicon class="icon" name="delete" size="16" />
-              <span class="is-size-7" v-text="delete_action" />
-            </a>
-            <a
-              v-if="ok_action"
-              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-              @click="$emit('ok')"
-            >
-              <mdicon class="icon" name="check" size="16" />
-              <span class="is-size-7" v-text="ok_action" />
-            </a>
+            <slot name="footer" />
           </footer>
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
     </div>
   </transition>
 </template>
@@ -45,14 +20,35 @@
 export default {
   name: 'ModalDialog',
   props: {
-    close_action: { default: '', type: String },
-    delete_action: { default: '', type: String },
-    ok_action: { default: '', type: String },
-    show: Boolean,
-    title: { required: true, type: String }
+    show: Boolean
   },
-  emits: ['delete', 'close', 'ok']
+  emits: ['close'],
+  watch: {
+    show(value) {
+      const { classList } = document.querySelector('html')
+      if (value) {
+        classList.add('is-clipped')
+      } else {
+        classList.remove('is-clipped')
+      }
+    }
+  }
 }
 </script>
 
-<style></style>
+<style scoped>
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>
diff --git a/web-src/src/components/ModalDialogAction.vue b/web-src/src/components/ModalDialogAction.vue
new file mode 100644
index 00000000..d5822a4c
--- /dev/null
+++ b/web-src/src/components/ModalDialogAction.vue
@@ -0,0 +1,53 @@
+<template>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p v-if="title" class="title is-4" v-text="title" />
+      <slot name="modal-content" />
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="$emit('close')">
+        <mdicon class="icon" name="cancel" size="16" />
+        <span class="is-size-7" v-text="close_action" />
+      </a>
+      <a
+        v-if="delete_action"
+        class="card-footer-item has-background-danger"
+        @click="$emit('delete')"
+      >
+        <mdicon class="icon" name="delete" size="16" />
+        <span class="is-size-7" v-text="delete_action" />
+      </a>
+      <a v-if="ok_action" class="card-footer-item" @click="$emit('ok')">
+        <mdicon class="icon" name="check" size="16" />
+        <span class="is-size-7" v-text="ok_action" />
+      </a>
+    </template>
+  </modal-dialog>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog.vue'
+
+export default {
+  name: 'ModalDialogAction',
+  components: { ModalDialog },
+  props: {
+    close_action: { default: '', type: String },
+    delete_action: { default: '', type: String },
+    ok_action: { default: '', type: String },
+    show: Boolean,
+    title: { required: true, type: String }
+  },
+  emits: ['delete', 'close', 'ok'],
+  watch: {
+    show() {
+      const { classList } = document.querySelector('html')
+      if (this.show) {
+        classList.add('is-clipped')
+      } else {
+        classList.remove('is-clipped')
+      }
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ModalDialogAddRss.vue b/web-src/src/components/ModalDialogAddRss.vue
index 2bc3efaf..9685c115 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -1,68 +1,55 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <form class="card" @submit.prevent="add_stream">
-          <div class="card-content">
-            <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
-            <div class="field">
-              <p class="control has-icons-left">
-                <input
-                  ref="url_field"
-                  v-model="url"
-                  class="input is-shadowless"
-                  type="url"
-                  pattern="http[s]?://.+"
-                  required
-                  :placeholder="$t('dialog.add.rss.placeholder')"
-                  :disabled="loading"
-                  @input="check_url"
-                />
-                <mdicon class="icon is-left" name="rss" size="16" />
-              </p>
-              <p class="help" v-text="$t('dialog.add.rss.help')" />
-            </div>
-          </div>
-          <footer v-if="loading" class="card-footer">
-            <a class="card-footer-item has-text-dark">
-              <mdicon class="icon" name="web" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.add.rss.processing')"
-              />
-            </a>
-          </footer>
-          <footer v-else class="card-footer is-clipped">
-            <a class="card-footer-item has-text-dark" @click="$emit('close')">
-              <mdicon class="icon" name="cancel" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
-            </a>
-            <a
-              :class="{ 'is-disabled': disabled }"
-              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-              @click="add_stream"
-            >
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
-            </a>
-          </footer>
-        </form>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
+      <div class="field">
+        <p class="control has-icons-left">
+          <input
+            ref="url_field"
+            v-model="url"
+            class="input"
+            type="url"
+            pattern="http[s]?://.+"
+            required
+            :placeholder="$t('dialog.add.rss.placeholder')"
+            :disabled="loading"
+            @input="check_url"
+          />
+          <mdicon class="icon is-left" name="rss" size="16" />
+        </p>
+        <p class="help" v-text="$t('dialog.add.rss.help')" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+    </template>
+    <template v-if="loading" #footer>
+      <a class="card-footer-item has-text-dark">
+        <mdicon class="icon" name="web" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.rss.processing')" />
+      </a>
+    </template>
+    <template v-else #footer>
+      <a class="card-footer-item has-text-dark" @click="$emit('close')">
+        <mdicon class="icon" name="cancel" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
+      </a>
+      <a
+        :class="{ 'is-disabled': disabled }"
+        class="card-footer-item"
+        @click="add_stream"
+      >
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddRss',
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close', 'podcast-added'],
 
@@ -107,5 +94,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAddUrlStream.vue b/web-src/src/components/ModalDialogAddUrlStream.vue
index 998ebcb3..362871ed 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -1,75 +1,64 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <form class="card" @submit.prevent="play">
-          <div class="card-content">
-            <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
-            <div class="field">
-              <p class="control has-icons-left">
-                <input
-                  ref="url_field"
-                  v-model="url"
-                  class="input is-shadowless"
-                  type="url"
-                  pattern="http[s]?://.+"
-                  required
-                  :placeholder="$t('dialog.add.stream.placeholder')"
-                  :disabled="loading"
-                  @input="check_url"
-                />
-                <mdicon class="icon is-left" name="web" size="16" />
-              </p>
-            </div>
-          </div>
-          <footer v-if="loading" class="card-footer">
-            <a class="card-footer-item has-text-dark">
-              <mdicon class="icon" name="web" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.add.stream.loading')"
-              />
-            </a>
-          </footer>
-          <footer v-else class="card-footer is-clipped">
-            <a class="card-footer-item has-text-dark" @click="$emit('close')">
-              <mdicon class="icon" name="cancel" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
-            </a>
-            <a
-              :class="{ 'is-disabled': disabled }"
-              class="card-footer-item has-text-dark"
-              @click="add_stream"
-            >
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
-            </a>
-            <a
-              :class="{ 'is-disabled': disabled }"
-              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-              @click="play"
-            >
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
-            </a>
-          </footer>
-        </form>
-      </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <form @submit.prevent="play">
+        <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
+        <div class="field">
+          <p class="control has-icons-left">
+            <input
+              ref="url_field"
+              v-model="url"
+              class="input"
+              type="url"
+              pattern="http[s]?://.+"
+              required
+              :placeholder="$t('dialog.add.stream.placeholder')"
+              :disabled="loading"
+              @input="check_url"
+            />
+            <mdicon class="icon is-left" name="web" size="16" />
+          </p>
+        </div>
+      </form>
+    </template>
+    <template v-if="loading" #footer>
+      <a class="card-footer-item has-text-dark">
+        <mdicon class="icon" name="web" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.stream.loading')" />
+      </a>
+    </template>
+    <template v-else #footer>
+      <a class="card-footer-item has-text-dark" @click="$emit('close')">
+        <mdicon class="icon" name="cancel" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
+      </a>
+      <a
+        :class="{ 'is-disabled': disabled }"
+        class="card-footer-item has-text-dark"
+        @click="add_stream"
+      >
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
+      </a>
+      <a
+        :class="{ 'is-disabled': disabled }"
+        class="card-footer-item has-text-dark"
+        @click="play"
+      >
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddUrlStream',
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -125,5 +114,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 1e4ae3a4..5ab2e983 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -1,116 +1,107 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <cover-artwork
-              :url="item.artwork_url"
-              :artist="item.artist"
-              :album="item.name"
-              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
-            />
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div v-if="media_kind_resolved === 'podcast'" class="buttons">
-              <a
-                class="button is-small"
-                @click="mark_played"
-                v-text="$t('dialog.album.mark-as-played')"
-              />
-              <a
-                v-if="item.data_kind === 'url'"
-                class="button is-small"
-                @click="$emit('remove-podcast')"
-                v-text="$t('dialog.album.remove-podcast')"
-              />
-            </div>
-            <div class="content is-small">
-              <p v-if="item.artist">
-                <span class="heading" v-text="$t('dialog.album.artist')" />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_artist"
-                  v-text="item.artist"
-                />
-              </p>
-              <p v-if="item.date_released">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.album.release-date')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.date(item.date_released)"
-                />
-              </p>
-              <p v-else-if="item.year">
-                <span class="heading" v-text="$t('dialog.album.year')" />
-                <span class="title is-6" v-text="item.year" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.album.tracks')" />
-                <span class="title is-6" v-text="item.track_count" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.album.duration')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(item.length_ms)"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.album.type')" />
-                <span
-                  class="title is-6"
-                  v-text="
-                    `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-                  "
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.album.added-on')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.datetime(item.time_added)"
-                />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.album.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.album.play')" />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <cover-artwork
+        :url="item.artwork_url"
+        :artist="item.artist"
+        :album="item.name"
+        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+      />
+      <div v-if="media_kind_resolved === 'podcast'" class="buttons">
+        <a
+          class="button is-small"
+          @click="mark_played"
+          v-text="$t('dialog.album.mark-as-played')"
+        />
+        <a
+          v-if="item.data_kind === 'url'"
+          class="button is-small"
+          @click="$emit('remove-podcast')"
+          v-text="$t('dialog.album.remove-podcast')"
+        />
+      </div>
+      <div v-if="item.artist" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artist" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div v-if="item.date_released" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.date_released)" />
+      </div>
+      <div v-else-if="item.year" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.album.year')" />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.album.type')" />
+        <div
+          class="title is-6"
+          v-text="
+            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+          "
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.album.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.album.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
-  components: { CoverArtwork },
+  components: { ModalDialog, CoverArtwork },
   props: {
     item: { required: true, type: Object },
     media_kind: { default: '', type: String },
@@ -184,5 +175,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 8a4407c6..505503d2 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -1,90 +1,66 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <cover-artwork
-              :url="artwork_url(item)"
-              :artist="item.artist"
-              :album="item.name"
-              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
-              @load="artwork_loaded"
-              @error="artwork_error"
-            />
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.album.album-artist')"
-                />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_artist"
-                  v-text="item.artists[0].name"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.album.release-date')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.date(item.release_date)"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.album.type')"
-                />
-                <span class="title is-6" v-text="item.album_type" />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.spotify.album.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.album.add-next')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.album.play')"
-              />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <cover-artwork
+        :url="artwork_url(item)"
+        :artist="item.artist"
+        :album="item.name"
+        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+        @load="artwork_loaded"
+        @error="artwork_error"
+      />
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artists[0].name" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.release_date)" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.type')"
+        />
+        <div class="title is-6" v-text="item.album_type" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.album.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.album.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.album.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbumSpotify',
-  components: { CoverArtwork },
+  components: { ModalDialog, CoverArtwork },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -133,5 +109,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index fb1663db..2a98b7a6 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -1,68 +1,59 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span class="heading" v-text="$t('dialog.artist.albums')" />
-                <span class="title is-6" v-text="item.album_count" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.artist.tracks')" />
-                <span class="title is-6" v-text="item.track_count" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.artist.type')" />
-                <span
-                  class="title is-6"
-                  v-text="$t(`data.kind.${item.data_kind}`)"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.artist.added-on')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.datetime(item.time_added)"
-                />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.artist.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.artist.play')" />
-            </a>
-          </footer>
-        </div>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.albums')"
+        />
+        <div class="title is-6" v-text="item.album_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.artist.type')" />
+        <div class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.artist.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.artist.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtist',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -89,5 +80,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index dbc1a7d1..09496722 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -1,72 +1,51 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.artist.popularity')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="[item.popularity, item.followers.total].join(' / ')"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.artist.genres')"
-                />
-                <span class="title is-6" v-text="item.genres.join(', ')" />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.artist.add')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.artist.add-next')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.artist.play')"
-              />
-            </a>
-          </footer>
-        </div>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.artist.popularity')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.popularity, item.followers.total].join(' / ')"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.artist.genres')"
+        />
+        <div class="title is-6" v-text="item.genres.join(', ')" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.artist.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.artist.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.artist.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtistSpotify',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -93,5 +72,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 7e28c599..42a7891e 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -1,71 +1,62 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a
-                class="has-text-link"
-                @click="open_albums"
-                v-text="item.name"
-              />
-            </p>
-            <p>
-              <span class="heading" v-text="$t('dialog.composer.albums')" />
-              <a
-                class="has-text-link is-6"
-                @click="open_albums"
-                v-text="item.album_count"
-              />
-            </p>
-            <p>
-              <span class="heading" v-text="$t('dialog.composer.tracks')" />
-              <a
-                class="has-text-link is-6"
-                @click="open_tracks"
-                v-text="item.track_count"
-              />
-            </p>
-            <p>
-              <span class="heading" v-text="$t('dialog.composer.duration')" />
-              <span
-                class="title is-6"
-                v-text="$filters.durationInHours(item.length_ms)"
-              />
-            </p>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.composer.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.composer.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.composer.play')" />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open_albums" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.albums')"
+        />
+        <div class="title is-6">
+          <a @click="open_albums" v-text="item.album_count" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.tracks')"
+        />
+        <div class="title is-6">
+          <a @click="open_tracks" v-text="item.track_count" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.composer.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.composer.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.composer.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogComposer',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -105,5 +96,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index d7c54461..0843e3a1 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -1,45 +1,32 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4" v-text="item" />
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.directory.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.directory.add-next')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.directory.play')" />
-            </a>
-          </footer>
-        </div>
-      </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p class="title is-4" v-text="item" />
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.directory.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.directory.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.directory.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogDirectory',
+  components: { ModalDialog },
   props: { item: { required: true, type: String }, show: Boolean },
   emits: ['close'],
 
@@ -66,5 +53,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 2099668d..3996228c 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -1,61 +1,58 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span class="heading" v-text="$t('dialog.genre.albums')" />
-                <span class="title is-6" v-text="item.album_count" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.genre.tracks')" />
-                <span class="title is-6" v-text="item.track_count" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.genre.duration')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(item.length_ms)"
-                />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.genre.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.genre.play')" />
-            </a>
-          </footer>
-        </div>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.albums')"
+        />
+        <div class="title is-6" v-text="item.album_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.genre.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.genre.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogGenre',
+  components: { ModalDialog },
   props: {
     item: { required: true, type: Object },
     media_kind: { required: true, type: String },
@@ -92,5 +89,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index b6e3d8fb..78035b62 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -1,61 +1,55 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span class="heading" v-text="$t('dialog.playlist.path')" />
-                <span class="title is-6" v-text="item.path" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.playlist.type')" />
-                <span
-                  class="title is-6"
-                  v-text="$t(`playlist.type.${item.type}`)"
-                />
-              </p>
-              <p v-if="!item.folder">
-                <span class="heading" v-text="$t('dialog.playlist.tracks')" />
-                <span class="title is-6" v-text="item.item_count" />
-              </p>
-            </div>
-          </div>
-          <footer v-if="!item.folder" class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.playlist.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.playlist.play')" />
-            </a>
-          </footer>
-        </div>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.path')"
+        />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.type')"
+        />
+        <div class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
+      </div>
+      <div v-if="!item.folder" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.tracks')"
+        />
+        <div class="title is-6" v-text="item.item_count" />
+      </div>
+    </template>
+    <template v-if="!item.folder" #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylist',
+  components: { ModalDialog },
   props: {
     item: { required: true, type: Object },
     show: Boolean,
@@ -86,5 +80,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylistSave.vue b/web-src/src/components/ModalDialogPlaylistSave.vue
index 4d033a10..a334a5a6 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -1,73 +1,56 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <form class="card" @submit.prevent="save">
-          <div class="card-content">
-            <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
-            <div class="field">
-              <p class="control has-icons-left">
-                <input
-                  ref="playlist_name_field"
-                  v-model="playlist_name"
-                  class="input is-shadowless"
-                  type="text"
-                  pattern=".+"
-                  required
-                  :placeholder="$t('dialog.playlist.save.playlist-name')"
-                  :disabled="loading"
-                  @input="check_name"
-                />
-                <mdicon class="icon is-left" name="file-music" size="16" />
-              </p>
-            </div>
-          </div>
-          <footer v-if="loading" class="card-footer">
-            <a class="card-footer-item has-text-dark">
-              <mdicon class="icon" name="web" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.playlist.save.saving')"
-              />
-            </a>
-          </footer>
-          <footer v-else class="card-footer is-clipped">
-            <a class="card-footer-item has-text-danger" @click="$emit('close')">
-              <mdicon class="icon" name="cancel" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.playlist.save.cancel')"
-              />
-            </a>
-            <a
-              :class="{ 'is-disabled': disabled }"
-              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-              @click="save"
-            >
-              <mdicon class="icon" name="content-save" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.playlist.save.save')"
-              />
-            </a>
-          </footer>
-        </form>
-      </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <form @submit.prevent="save">
+        <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
+        <div class="field">
+          <p class="control has-icons-left">
+            <input
+              ref="playlist_name_field"
+              v-model="playlist_name"
+              class="input"
+              type="text"
+              pattern=".+"
+              required
+              :placeholder="$t('dialog.playlist.save.playlist-name')"
+              :disabled="loading"
+              @input="check_name"
+            />
+            <mdicon class="icon is-left" name="file-music" size="16" />
+          </p>
+        </div>
+      </form>
+    </template>
+    <template v-if="loading" #footer>
+      <a class="card-footer-item has-text-dark">
+        <mdicon class="icon" name="web" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.save.saving')" />
+      </a>
+    </template>
+    <template v-else #footer>
+      <a class="card-footer-item has-text-danger" @click="$emit('close')">
+        <mdicon class="icon" name="cancel" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.save.cancel')" />
+      </a>
+      <a
+        :class="{ 'is-disabled': disabled }"
+        class="card-footer-item has-text-weight-bold"
+        @click="save"
+      >
+        <mdicon class="icon" name="content-save" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.playlist.save.save')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSave',
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -111,5 +94,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 63fc7622..145198f1 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -1,76 +1,58 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4">
-              <a class="has-text-link" @click="open" v-text="item.name" />
-            </p>
-            <div class="content is-small">
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.playlist.owner')"
-                />
-                <span class="title is-6" v-text="item.owner.display_name" />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.playlist.tracks')"
-                />
-                <span class="title is-6" v-text="item.tracks.total" />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.playlist.path')"
-                />
-                <span class="title is-6" v-text="item.uri" />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.playlist.add')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.playlist.add-next')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.playlist.play')"
-              />
-            </a>
-          </footer>
-        </div>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.owner')"
+        />
+        <div class="title is-6" v-text="item.owner.display_name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.tracks')"
+        />
+        <div class="title is-6" v-text="item.tracks.total" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.path')"
+        />
+        <div class="title is-6" v-text="item.uri" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.playlist.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span
+          class="is-size-7"
+          v-text="$t('dialog.spotify.playlist.add-next')"
+        />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.playlist.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSpotify',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -97,5 +79,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 73426416..d540658e 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -1,146 +1,141 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4" v-text="item.title" />
-            <p class="subtitle" v-text="item.artist" />
-            <div class="content is-small">
-              <p v-if="item.album">
-                <span class="heading" v-text="$t('dialog.queue-item.album')" />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_album"
-                  v-text="item.album"
-                />
-              </p>
-              <p v-if="item.album_artist">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.queue-item.album-artist')"
-                />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_album_artist"
-                  v-text="item.album_artist"
-                />
-              </p>
-              <p v-if="item.composer">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.queue-item.composer')"
-                />
-                <span class="title is-6" v-text="item.composer" />
-              </p>
-              <p v-if="item.year">
-                <span class="heading" v-text="$t('dialog.queue-item.year')" />
-                <span class="title is-6" v-text="item.year" />
-              </p>
-              <p v-if="item.genre">
-                <span class="heading" v-text="$t('dialog.queue-item.genre')" />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_genre"
-                  v-text="item.genre"
-                />
-              </p>
-              <p v-if="item.disc_number">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.queue-item.position')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="[item.disc_number, item.track_number].join(' / ')"
-                />
-              </p>
-              <p v-if="item.length_ms">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.queue-item.duration')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(item.length_ms)"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.queue-item.path')" />
-                <span class="title is-6" v-text="item.path" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.queue-item.type')" />
-                <span class="title is-6">
-                  <span
-                    v-text="
-                      `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-                    "
-                  />
-                </span>
-              </p>
-              <p v-if="item.samplerate">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.queue-item.quality')"
-                />
-                <span class="title is-6">
-                  <span v-text="item.type" />
-                  <span
-                    v-if="item.samplerate"
-                    v-text="
-                      $t('dialog.queue-item.samplerate', {
-                        rate: item.samplerate
-                      })
-                    "
-                  />
-                  <span
-                    v-if="item.channels"
-                    v-text="
-                      $t('dialog.queue-item.channels', {
-                        channels: $filters.channels(item.channels)
-                      })
-                    "
-                  />
-                  <span
-                    v-if="item.bitrate"
-                    v-text="
-                      $t('dialog.queue-item.bitrate', { rate: item.bitrate })
-                    "
-                  />
-                </span>
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="remove">
-              <mdicon class="icon" name="delete" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.queue-item.remove')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <div class="title is-4" v-text="item.title" />
+      <div class="subtitle" v-text="item.artist" />
+      <div v-if="item.album" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.album')"
+        />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div v-if="item.album_artist" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_album_artist" v-text="item.album_artist" />
+        </div>
+      </div>
+      <div v-if="item.composer" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.composer')"
+        />
+        <div class="title is-6" v-text="item.composer" />
+      </div>
+      <div v-if="item.year" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.year')"
+        />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div v-if="item.genre" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.genre')"
+        />
+        <div class="title is-6">
+          <a @click="open_genre" v-text="item.genre" />
+        </div>
+      </div>
+      <div v-if="item.disc_number" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div v-if="item.length_ms" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.path')"
+        />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.type')"
+        />
+        <div class="title is-6">
+          <span
+            v-text="
+              `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+            "
+          />
+        </div>
+      </div>
+      <div v-if="item.samplerate" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.quality')"
+        />
+        <div class="title is-6">
+          <span v-text="item.type" />
+          <span
+            v-if="item.samplerate"
+            v-text="
+              $t('dialog.queue-item.samplerate', {
+                rate: item.samplerate
+              })
+            "
+          />
+          <span
+            v-if="item.channels"
+            v-text="
+              $t('dialog.queue-item.channels', {
+                channels: $filters.channels(item.channels)
+              })
+            "
+          />
+          <span
+            v-if="item.bitrate"
+            v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="remove">
+        <mdicon class="icon" name="delete" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.queue-item.remove')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -233,5 +228,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogRemotePairing.vue b/web-src/src/components/ModalDialogRemotePairing.vue
index 7615a6de..cda8cfd6 100644
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -1,63 +1,44 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
-            <form @submit.prevent="kickoff_pairing">
-              <label class="label" v-text="pairing.remote" />
-              <div class="field">
-                <div class="control">
-                  <input
-                    ref="pin_field"
-                    v-model="pairing_req.pin"
-                    class="input"
-                    inputmode="numeric"
-                    pattern="[\d]{4}"
-                    :placeholder="$t('dialog.remote-pairing.pairing-code')"
-                  />
-                </div>
-              </div>
-            </form>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
+      <form @submit.prevent="kickoff_pairing">
+        <label class="label" v-text="pairing.remote" />
+        <div class="field">
+          <div class="control">
+            <input
+              ref="pin_field"
+              v-model="pairing_req.pin"
+              class="input"
+              inputmode="numeric"
+              pattern="[\d]{4}"
+              :placeholder="$t('dialog.remote-pairing.pairing-code')"
+            />
           </div>
-          <footer class="card-footer is-clipped">
-            <a class="card-footer-item has-text-danger" @click="$emit('close')">
-              <mdicon class="icon" name="cancel" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.remote-pairing.cancel')"
-              />
-            </a>
-            <a
-              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-              @click="kickoff_pairing"
-            >
-              <mdicon class="icon" name="cellphone" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.remote-pairing.pair')"
-              />
-            </a>
-          </footer>
         </div>
-      </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      </form>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-danger" @click="$emit('close')">
+        <mdicon class="icon" name="cancel" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.remote-pairing.cancel')" />
+      </a>
+      <a class="card-footer-item" @click="kickoff_pairing">
+        <mdicon class="icon" name="cellphone" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogRemotePairing',
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -98,5 +79,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index b8f7c026..1692d5f0 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -1,182 +1,181 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4" v-text="item.title" />
-            <p class="subtitle" v-text="item.artist" />
-            <div v-if="item.media_kind === 'podcast'" class="buttons">
-              <a
-                v-if="item.play_count > 0"
-                class="button is-small"
-                @click="mark_new"
-                v-text="$t('dialog.track.mark-as-new')"
-              />
-              <a
-                v-if="item.play_count === 0"
-                class="button is-small"
-                @click="mark_played"
-                v-text="$t('dialog.track.mark-as-played')"
-              />
-            </div>
-            <div class="content is-small">
-              <p v-if="item.album">
-                <span class="heading" v-text="$t('dialog.track.album')" />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_album"
-                  v-text="item.album"
-                />
-              </p>
-              <p v-if="item.album_artist && item.media_kind !== 'audiobook'">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.track.album-artist')"
-                />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_album_artist"
-                  v-text="item.album_artist"
-                />
-              </p>
-              <p v-if="item.composer">
-                <span class="heading" v-text="$t('dialog.track.composer')" />
-                <span class="title is-6" v-text="item.composer" />
-              </p>
-              <p v-if="item.date_released">
-                <span
-                  class="heading"
-                  v-text="$t('dialog.track.release-date')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.date(item.date_released)"
-                />
-              </p>
-              <p v-else-if="item.year">
-                <span class="heading" v-text="$t('dialog.track.year')" />
-                <span class="title is-6" v-text="item.year" />
-              </p>
-              <p v-if="item.genre">
-                <span class="heading" v-text="$t('dialog.track.genre')" />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_genre"
-                  v-text="item.genre"
-                />
-              </p>
-              <p v-if="item.disc_number">
-                <span class="heading" v-text="$t('dialog.track.position')" />
-                <span
-                  class="title is-6"
-                  v-text="[item.disc_number, item.track_number].join(' / ')"
-                />
-              </p>
-              <p v-if="item.length_ms">
-                <span class="heading" v-text="$t('dialog.track.duration')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(item.length_ms)"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.track.path')" />
-                <span class="title is-6" v-text="item.path" />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.track.type')" />
-                <span class="title is-6">
-                  <span
-                    v-text="
-                      `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-                    "
-                  />
-                </span>
-              </p>
-              <p v-if="item.samplerate">
-                <span class="heading" v-text="$t('dialog.track.quality')" />
-                <span class="title is-6">
-                  <span v-text="item.type" />
-                  <span
-                    v-if="item.samplerate"
-                    v-text="
-                      $t('dialog.track.samplerate', {
-                        rate: item.samplerate
-                      })
-                    "
-                  />
-                  <span
-                    v-if="item.channels"
-                    v-text="
-                      $t('dialog.track.channels', {
-                        channels: $filters.channels(item.channels)
-                      })
-                    "
-                  />
-                  <span
-                    v-if="item.bitrate"
-                    v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
-                  />
-                </span>
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.track.added-on')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.datetime(item.time_added)"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.track.rating')" />
-                <span
-                  class="title is-6"
-                  v-text="
-                    $t('dialog.track.rating-value', {
-                      rating: Math.floor(item.rating / 10)
-                    })
-                  "
-                />
-              </p>
-              <p v-if="item.comment">
-                <span class="heading" v-text="$t('dialog.track.comment')" />
-                <span class="title is-6" v-text="item.comment" />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.track.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.track.play')" />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p class="title is-4" v-text="item.title" />
+      <p class="subtitle" v-text="item.artist" />
+      <div v-if="item.media_kind === 'podcast'" class="buttons">
+        <a
+          v-if="item.play_count > 0"
+          class="button is-small"
+          @click="mark_new"
+          v-text="$t('dialog.track.mark-as-new')"
+        />
+        <a
+          v-if="item.play_count === 0"
+          class="button is-small"
+          @click="mark_played"
+          v-text="$t('dialog.track.mark-as-played')"
+        />
+      </div>
+      <div v-if="item.album" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.album')" />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div
+        v-if="item.album_artist && item.media_kind !== 'audiobook'"
+        class="mb-3"
+      >
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_album_artist" v-text="item.album_artist" />
+        </div>
+      </div>
+      <div v-if="item.composer" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.composer')"
+        />
+        <div class="title is-6" v-text="item.composer" />
+      </div>
+      <div v-if="item.date_released" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.date_released)" />
+      </div>
+      <div v-else-if="item.year" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.year')" />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div v-if="item.genre" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.genre')" />
+        <div class="title is-6">
+          <a @click="open_genre" v-text="item.genre" />
+        </div>
+      </div>
+      <div v-if="item.disc_number" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div v-if="item.length_ms" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.path')" />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.type')" />
+        <div
+          class="title is-6"
+          v-text="
+            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+          "
+        />
+      </div>
+      <div v-if="item.samplerate" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.quality')"
+        />
+        <div class="title is-6">
+          <span v-text="item.type" />
+          <span
+            v-if="item.samplerate"
+            v-text="
+              $t('dialog.track.samplerate', {
+                rate: item.samplerate
+              })
+            "
+          />
+          <span
+            v-if="item.channels"
+            v-text="
+              $t('dialog.track.channels', {
+                channels: $filters.channels(item.channels)
+              })
+            "
+          />
+          <span
+            v-if="item.bitrate"
+            v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
+          />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
+      </div>
+      <div>
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.rating')"
+        />
+        <div
+          class="title is-6"
+          v-text="
+            $t('dialog.track.rating-value', {
+              rating: Math.floor(item.rating / 10)
+            })
+          "
+        />
+      </div>
+      <div v-if="item.comment" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.comment')"
+        />
+        <div class="title is-6" v-text="item.comment" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.track.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.track.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
 
@@ -296,5 +295,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index fcdef6c1..b0f6e4fc 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -1,110 +1,88 @@
 <template>
-  <transition name="fade">
-    <div v-if="show" class="modal is-active">
-      <div class="modal-background" @click="$emit('close')" />
-      <div class="modal-content">
-        <div class="card">
-          <div class="card-content">
-            <p class="title is-4" v-text="item.name" />
-            <p class="subtitle" v-text="item.artists[0].name" />
-            <div class="content is-small">
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.album')"
-                />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_album"
-                  v-text="item.album.name"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.album-artist')"
-                />
-                <a
-                  class="title is-6 has-text-link"
-                  @click="open_artist"
-                  v-text="item.artists[0].name"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.release-date')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.date(item.album.release_date)"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.position')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="[item.disc_number, item.track_number].join(' / ')"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.duration')"
-                />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(item.duration_ms)"
-                />
-              </p>
-              <p>
-                <span
-                  class="heading"
-                  v-text="$t('dialog.spotify.track.path')"
-                />
-                <span class="title is-6" v-text="item.uri" />
-              </p>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item has-text-dark" @click="queue_add">
-              <mdicon class="icon" name="playlist-plus" size="16" />
-              <span class="is-size-7" v-text="$t('dialog.spotify.track.add')" />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="queue_add_next">
-              <mdicon class="icon" name="playlist-play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.track.add-next')"
-              />
-            </a>
-            <a class="card-footer-item has-text-dark" @click="play">
-              <mdicon class="icon" name="play" size="16" />
-              <span
-                class="is-size-7"
-                v-text="$t('dialog.spotify.track.play')"
-              />
-            </a>
-          </footer>
+  <modal-dialog :show="show" @close="$emit('close')">
+    <template #content>
+      <p class="title is-4" v-text="item.name" />
+      <p class="subtitle" v-text="item.artists[0].name" />
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.album')"
+        />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album.name" />
         </div>
       </div>
-      <button
-        class="modal-close is-large"
-        aria-label="close"
-        @click="$emit('close')"
-      />
-    </div>
-  </transition>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artists[0].name" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.release-date')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.date(item.album.release_date)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.duration_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.path')"
+        />
+        <div class="title is-6" v-text="item.uri" />
+      </div>
+    </template>
+    <template #footer>
+      <a class="card-footer-item has-text-dark" @click="queue_add">
+        <mdicon class="icon" name="playlist-plus" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.track.add')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="queue_add_next">
+        <mdicon class="icon" name="playlist-play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.track.add-next')" />
+      </a>
+      <a class="card-footer-item has-text-dark" @click="play">
+        <mdicon class="icon" name="play" size="16" />
+        <span class="is-size-7" v-text="$t('dialog.spotify.track.play')" />
+      </a>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrackSpotify',
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
@@ -138,5 +116,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogUpdate.vue b/web-src/src/components/ModalDialogUpdate.vue
index 1d6ea7d2..033ebab4 100644
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -1,19 +1,19 @@
 <template>
-  <modal-dialog
+  <modal-dialog-action
     :show="show"
     :title="$t('dialog.update.title')"
-    :ok_action="library.updating ? '' : $t('dialog.update.rescan')"
+    :ok_action="libraryStore.updating ? '' : $t('dialog.update.rescan')"
     :close_action="$t('dialog.update.cancel')"
     @ok="update_library"
     @close="close()"
   >
     <template #modal-content>
-      <div v-if="!library.updating">
-        <p class="mb-3" v-text="$t('dialog.update.info')" />
+      <div v-if="!libraryStore.updating">
         <div v-if="spotify_enabled || rss.tracks > 0" class="field">
+          <label class="label" v-text="$t('dialog.update.info')" />
           <div class="control">
             <div class="select is-small">
-              <select v-model="update_dialog_scan_kind">
+              <select v-model="libraryStore.update_dialog_scan_kind">
                 <option value="" v-text="$t('dialog.update.all')" />
                 <option value="files" v-text="$t('dialog.update.local')" />
                 <option
@@ -30,32 +30,29 @@
             </div>
           </div>
         </div>
-        <div class="field">
-          <input
-            id="rescan"
-            v-model="rescan_metadata"
-            type="checkbox"
-            class="switch is-rounded is-small"
-          />
-          <label for="rescan" v-text="$t('dialog.update.rescan-metadata')" />
-        </div>
+        <control-switch v-model="rescan_metadata">
+          <template #label>
+            <span v-text="$t('dialog.update.rescan-metadata')" />
+          </template>
+        </control-switch>
       </div>
       <div v-else>
         <p class="mb-3" v-text="$t('dialog.update.progress')" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-action>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import { useLibraryStore } from '@/stores/library'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogUpdate',
-  components: { ModalDialog },
+  components: { ControlSwitch, ModalDialogAction },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -73,42 +70,26 @@ export default {
   },
 
   computed: {
-    library() {
-      return this.libraryStore.$state
-    },
-
     rss() {
       return this.libraryStore.rss
     },
-
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
-    },
-
-    update_dialog_scan_kind: {
-      get() {
-        return this.library.update_dialog_scan_kind
-      },
-      set(value) {
-        this.library.update_dialog_scan_kind = value
-      }
     }
   },
 
   methods: {
     close() {
-      this.update_dialog_scan_kind = ''
+      this.libraryStore.update_dialog_scan_kind = ''
       this.$emit('close')
     },
     update_library() {
       if (this.rescan_metadata) {
-        webapi.library_rescan(this.update_dialog_scan_kind)
+        webapi.library_rescan(this.libraryStore.update_dialog_scan_kind)
       } else {
-        webapi.library_update(this.update_dialog_scan_kind)
+        webapi.library_update(this.libraryStore.update_dialog_scan_kind)
       }
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 8eea3a69..b915961d 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -1,250 +1,68 @@
 <template>
   <nav
-    class="navbar is-block is-white is-fixed-bottom fd-bottom-navbar"
-    :class="{
-      'is-transparent': is_now_playing_page,
-      'is-dark': !is_now_playing_page
-    }"
-    role="navigation"
-    aria-label="player controls"
+    class="navbar is-fixed-bottom"
+    :class="{ 'is-dark': !is_now_playing_page }"
   >
-    <!-- Player menu for desktop -->
-    <div
-      class="navbar-item has-dropdown has-dropdown-up is-hidden-touch"
-      :class="{ 'is-active': show_player_menu }"
-    >
-      <div class="navbar-dropdown is-right fd-width-auto">
-        <div class="navbar-item">
-          <!-- Outputs: master volume -->
-          <div class="level is-mobile">
-            <div class="level-left is-flex-grow-1">
-              <div class="level-item is-flex-grow-0">
-                <a class="button is-white is-small" @click="toggle_mute_volume">
-                  <mdicon
-                    class="icon"
-                    :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                    size="18"
-                  />
-                </a>
-              </div>
-              <div class="level-item">
-                <div>
-                  <p class="heading" v-text="$t('navigation.volume')" />
-                  <control-slider
-                    v-model:value="player.volume"
-                    :max="100"
-                    @change="change_volume"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Outputs: master volume -->
-        <hr class="my-3" />
-        <navbar-item-output
-          v-for="output in outputs"
-          :key="output.id"
-          :output="output"
-        />
-        <!-- Outputs: stream volume -->
-        <hr class="my-3" />
-        <div class="navbar-item">
-          <div class="level is-mobile">
-            <div class="level-left is-flex-grow-1">
-              <div class="level-item is-flex-grow-0">
-                <a
-                  class="button is-white is-small"
-                  :class="{
-                    'has-text-grey-light': !playing && !loading,
-                    'is-loading': loading
-                  }"
-                  @click="togglePlay"
-                >
-                  <mdicon class="icon" name="broadcast" size="18" />
-                </a>
-              </div>
-              <div class="level-item">
-                <div class="is-flex-grow-1">
-                  <div
-                    class="is-flex is-align-content-center"
-                    :class="{ 'has-text-grey-light': !playing }"
-                  >
-                    <p class="heading" v-text="$t('navigation.stream')" />
-                    <a href="stream.mp3" class="heading ml-2" target="_blank">
-                      <mdicon
-                        class="icon is-small"
-                        name="open-in-new"
-                        size="16"
-                      />
-                    </a>
-                  </div>
-                  <control-slider
-                    v-model:value="stream_volume"
-                    :disabled="!playing"
-                    :max="100"
-                    :cursor="cursor"
-                    @change="change_stream_volume"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr class="my-3" />
-        <div class="navbar-item is-justify-content-center">
-          <div class="buttons has-addons">
-            <player-button-repeat class="button" />
-            <player-button-shuffle class="button" />
-            <player-button-consume class="button" />
-            <player-button-lyrics class="button" />
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="navbar-brand is-flex-grow-1">
-      <navbar-item-link :to="{ name: 'queue' }" class="mr-auto">
-        <mdicon class="icon" name="playlist-play" size="24" />
-      </navbar-item-link>
-      <navbar-item-link
-        v-if="!is_now_playing_page"
-        :to="{ name: 'now-playing' }"
-        exact
-        class="is-expanded is-clipped is-size-7"
-      >
-        <div class="fd-is-text-clipped">
-          <strong v-text="current.title" />
-          <br />
-          <span v-text="current.artist" />
-          <span
-            v-if="current.album"
-            v-text="$t('navigation.now-playing', { album: current.album })"
-          />
-        </div>
-      </navbar-item-link>
-      <player-button-previous
-        v-if="is_now_playing_page"
-        class="navbar-item px-2"
-        :icon_size="24"
-      />
-      <player-button-seek-back
-        v-if="is_now_playing_page"
-        :seek_ms="10000"
-        class="navbar-item px-2"
-        :icon_size="24"
-      />
-      <player-button-play-pause
-        class="navbar-item px-2"
-        :icon_size="36"
-        show_disabled_message
-      />
-      <player-button-seek-forward
-        v-if="is_now_playing_page"
-        :seek_ms="30000"
-        class="navbar-item px-2"
-        :icon_size="24"
-      />
-      <player-button-next
-        v-if="is_now_playing_page"
-        class="navbar-item px-2"
-        :icon_size="24"
-      />
+      <control-link class="navbar-item" :to="{ name: 'queue' }">
+        <mdicon class="icon" name="playlist-play" />
+      </control-link>
+      <template v-if="is_now_playing_page">
+        <control-player-previous class="navbar-item ml-auto" />
+        <control-player-back class="navbar-item" :offset="10000" />
+        <control-player-play class="navbar-item" show_disabled_message />
+        <control-player-forward class="navbar-item" :offset="30000" />
+        <control-player-next class="navbar-item mr-auto" />
+      </template>
+      <template v-else>
+        <control-link
+          :to="{ name: 'now-playing' }"
+          exact
+          class="navbar-item is-justify-content-flex-start is-expanded is-clipped is-size-7"
+        >
+          <div class="is-text-clipped">
+            <strong v-text="current.title" />
+            <br />
+            <span v-text="current.artist" />
+            <span
+              v-if="current.album"
+              v-text="$t('navigation.now-playing', { album: current.album })"
+            />
+          </div>
+        </control-link>
+        <control-player-play class="navbar-item" show_disabled_message />
+      </template>
       <a
-        class="navbar-item ml-auto"
-        @click="show_player_menu = !show_player_menu"
+        class="navbar-item"
+        @click="uiStore.show_player_menu = !uiStore.show_player_menu"
       >
         <mdicon
           class="icon"
-          :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
+          :name="uiStore.show_player_menu ? 'chevron-down' : 'chevron-up'"
         />
       </a>
-    </div>
-    <!-- Player menu for mobile and tablet -->
-    <div
-      class="navbar-menu is-hidden-desktop"
-      :class="{ 'is-active': show_player_menu }"
-    >
-      <div class="navbar-item">
-        <div class="buttons has-addons is-centered">
-          <player-button-repeat class="button" />
-          <player-button-shuffle class="button" />
-          <player-button-consume class="button" />
-          <player-button-lyrics class="button" />
-        </div>
-      </div>
-      <hr class="my-3" />
-      <!-- Outputs: master volume -->
-      <div class="navbar-item">
-        <div class="level is-mobile">
-          <div class="level-left is-flex-grow-1">
-            <div class="level-item is-flex-grow-0">
-              <a class="button is-white is-small" @click="toggle_mute_volume">
-                <mdicon
-                  class="icon"
-                  :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                  size="18"
-                />
-              </a>
+      <div
+        class="dropdown is-up is-right"
+        :class="{ 'is-active': uiStore.show_player_menu }"
+      >
+        <div class="dropdown-menu">
+          <div class="dropdown-content">
+            <div class="dropdown-item pt-0">
+              <control-main-volume />
+              <control-output-volume
+                v-for="output in outputsStore.outputs"
+                :key="output.id"
+                :output="output"
+              />
+              <control-stream-volume />
             </div>
-            <div class="level-item">
-              <div class="is-flex-grow-1">
-                <p class="heading" v-text="$t('navigation.volume')" />
-                <control-slider
-                  v-model:value="player.volume"
-                  :max="100"
-                  @change="change_volume"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr class="my-3" />
-      <!-- Outputs: speaker volumes -->
-      <navbar-item-output
-        v-for="output in outputs"
-        :key="output.id"
-        :output="output"
-      />
-      <!-- Outputs: stream volume -->
-      <hr class="my-3" />
-      <div class="navbar-item mb-5">
-        <div class="level is-mobile">
-          <div class="level-left is-flex-grow-1">
-            <div class="level-item is-flex-grow-0">
-              <a
-                class="button is-white is-small"
-                :class="{
-                  'has-text-grey-light': !playing && !loading,
-                  'is-loading': loading
-                }"
-                @click="togglePlay"
-              >
-                <mdicon class="icon" name="radio-tower" size="16" />
-              </a>
-            </div>
-            <div class="level-item">
-              <div class="is-flex-grow-1">
-                <div
-                  class="is-flex is-align-content-center"
-                  :class="{ 'has-text-grey-light': !playing }"
-                >
-                  <p class="heading" v-text="$t('navigation.stream')" />
-                  <a href="stream.mp3" class="heading ml-2" target="_blank">
-                    <mdicon
-                      class="icon is-small"
-                      name="open-in-new"
-                      size="16"
-                    />
-                  </a>
-                </div>
-                <control-slider
-                  v-model:value="stream_volume"
-                  :disabled="!playing"
-                  :max="100"
-                  :cursor="cursor"
-                  @change="change_stream_volume"
-                />
+            <hr class="dropdown-divider" />
+            <div class="dropdown-item is-flex is-justify-content-center">
+              <div class="buttons has-addons">
+                <control-player-repeat class="button" />
+                <control-player-shuffle class="button" />
+                <control-player-consume class="button" />
+                <control-player-lyrics class="button" />
               </div>
             </div>
           </div>
@@ -255,168 +73,66 @@
 </template>
 
 <script>
-import ControlSlider from '@/components/ControlSlider.vue'
-import NavbarItemLink from '@/components/NavbarItemLink.vue'
-import NavbarItemOutput from '@/components/NavbarItemOutput.vue'
-import PlayerButtonConsume from '@/components/PlayerButtonConsume.vue'
-import PlayerButtonLyrics from '@/components/PlayerButtonLyrics.vue'
-import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
-import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
-import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
-import PlayerButtonRepeat from '@/components/PlayerButtonRepeat.vue'
-import PlayerButtonSeekBack from '@/components/PlayerButtonSeekBack.vue'
-import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
-import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
-import audio from '@/lib/Audio'
-import { mdiCancel } from '@mdi/js'
+import ControlLink from '@/components/ControlLink.vue'
+import ControlMainVolume from '@/components/ControlMainVolume.vue'
+import ControlOutputVolume from '@/components/ControlOutputVolume.vue'
+import ControlPlayerBack from '@/components/ControlPlayerBack.vue'
+import ControlPlayerConsume from '@/components/ControlPlayerConsume.vue'
+import ControlPlayerForward from '@/components/ControlPlayerForward.vue'
+import ControlPlayerLyrics from '@/components/ControlPlayerLyrics.vue'
+import ControlPlayerNext from '@/components/ControlPlayerNext.vue'
+import ControlPlayerPlay from '@/components/ControlPlayerPlay.vue'
+import ControlPlayerPrevious from '@/components/ControlPlayerPrevious.vue'
+import ControlPlayerRepeat from '@/components/ControlPlayerRepeat.vue'
+import ControlPlayerShuffle from '@/components/ControlPlayerShuffle.vue'
+import ControlStreamVolume from '@/components/ControlStreamVolume.vue'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useOutputsStore } from '@/stores/outputs'
-import { usePlayerStore } from '@/stores/player'
 import { useQueueStore } from '@/stores/queue'
 import { useUIStore } from '@/stores/ui'
-import webapi from '@/webapi'
 
 export default {
   name: 'NavbarBottom',
   components: {
-    ControlSlider,
-    NavbarItemLink,
-    NavbarItemOutput,
-    PlayerButtonConsume,
-    PlayerButtonLyrics,
-    PlayerButtonNext,
-    PlayerButtonPlayPause,
-    PlayerButtonPrevious,
-    PlayerButtonRepeat,
-    PlayerButtonSeekBack,
-    PlayerButtonSeekForward,
-    PlayerButtonShuffle
+    ControlLink,
+    ControlOutputVolume,
+    ControlMainVolume,
+    ControlPlayerBack,
+    ControlPlayerConsume,
+    ControlPlayerForward,
+    ControlPlayerLyrics,
+    ControlPlayerNext,
+    ControlPlayerPlay,
+    ControlPlayerPrevious,
+    ControlPlayerRepeat,
+    ControlPlayerShuffle,
+    ControlStreamVolume
   },
 
   setup() {
     return {
       notificationsStore: useNotificationsStore(),
       outputsStore: useOutputsStore(),
-      playerStore: usePlayerStore(),
       queueStore: useQueueStore(),
       uiStore: useUIStore()
     }
   },
 
-  data() {
-    return {
-      cursor: mdiCancel,
-      loading: false,
-      old_volume: 0,
-      playing: false,
-      show_desktop_outputs_menu: false,
-      show_outputs_menu: false,
-      stream_volume: 10
-    }
-  },
-
   computed: {
     is_now_playing_page() {
       return this.$route.name === 'now-playing'
     },
     current() {
       return this.queueStore.current
-    },
-    outputs() {
-      return this.outputsStore.outputs
-    },
-    player() {
-      return this.playerStore
-    },
-    show_player_menu: {
-      get() {
-        return this.uiStore.show_player_menu
-      },
-      set(value) {
-        this.uiStore.show_player_menu = value
-      }
-    }
-  },
-
-  watch: {
-    'playerStore.volume'() {
-      if (this.player.volume > 0) {
-        this.old_volume = this.player.volume
-      }
-    }
-  },
-
-  // On app mounted
-  mounted() {
-    this.setupAudio()
-  },
-
-  // On app destroyed
-  unmounted() {
-    this.closeAudio()
-  },
-
-  methods: {
-    change_stream_volume() {
-      audio.setVolume(this.stream_volume / 100)
-    },
-    change_volume() {
-      webapi.player_volume(this.player.volume)
-    },
-    closeAudio() {
-      audio.stop()
-      this.playing = false
-    },
-    on_click_outside_outputs() {
-      this.show_outputs_menu = false
-    },
-    playChannel() {
-      if (this.playing) {
-        return
-      }
-      this.loading = true
-      audio.play('/stream.mp3')
-      audio.setVolume(this.stream_volume / 100)
-    },
-    setupAudio() {
-      const a = audio.setup()
-      a.addEventListener('waiting', () => {
-        this.playing = false
-        this.loading = true
-      })
-      a.addEventListener('playing', () => {
-        this.playing = true
-        this.loading = false
-      })
-      a.addEventListener('ended', () => {
-        this.playing = false
-        this.loading = false
-      })
-      a.addEventListener('error', () => {
-        this.closeAudio()
-        this.notificationsStore.add({
-          text: this.$t('navigation.stream-error'),
-          type: 'danger'
-        })
-        this.playing = false
-        this.loading = false
-      })
-    },
-    togglePlay() {
-      if (this.loading) {
-        return
-      }
-      if (this.playing) {
-        this.closeAudio()
-      }
-      this.playChannel()
-    },
-    toggle_mute_volume() {
-      this.player.volume = this.player.volume > 0 ? 0 : this.old_volume
-      this.change_volume()
     }
   }
 }
 </script>
 
-<style></style>
+<style scoped>
+.is-text-clipped {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/web-src/src/components/NavbarItemOutput.vue b/web-src/src/components/NavbarItemOutput.vue
deleted file mode 100644
index 2fe5adc0..00000000
--- a/web-src/src/components/NavbarItemOutput.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="navbar-item">
-    <div class="level is-mobile">
-      <div class="level-left is-flex-grow-1">
-        <div class="level-item is-flex-grow-0">
-          <a
-            class="button is-white is-small"
-            :class="{ 'has-text-grey-light': !output.selected }"
-            @click="set_enabled"
-          >
-            <mdicon
-              class="icon"
-              :name="type_class"
-              size="18"
-              :title="output.type"
-            />
-          </a>
-        </div>
-        <div class="level-item">
-          <div class="is-flex-grow-1">
-            <p
-              class="heading"
-              :class="{ 'has-text-grey-light': !output.selected }"
-              v-text="output.name"
-            />
-            <control-slider
-              v-model:value="volume"
-              :disabled="!output.selected"
-              :max="100"
-              :cursor="cursor"
-              @change="change_volume"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import ControlSlider from '@/components/ControlSlider.vue'
-import { mdiCancel } from '@mdi/js'
-import webapi from '@/webapi'
-
-export default {
-  name: 'NavbarItemOutput',
-  components: {
-    ControlSlider
-  },
-  props: { output: { required: true, type: Object } },
-
-  data() {
-    return {
-      cursor: mdiCancel,
-      volume: this.output.selected ? this.output.volume : 0
-    }
-  },
-
-  computed: {
-    type_class() {
-      if (this.output.type.startsWith('AirPlay')) {
-        return 'cast-variant'
-      } else if (this.output.type === 'Chromecast') {
-        return 'cast'
-      } else if (this.output.type === 'fifo') {
-        return 'pipe'
-      }
-      return 'server'
-    }
-  },
-
-  watch: {
-    output() {
-      this.volume = this.output.volume
-    }
-  },
-
-  methods: {
-    change_volume() {
-      webapi.player_output_volume(this.output.id, this.volume)
-    },
-
-    set_enabled() {
-      const values = {
-        selected: !this.output.selected
-      }
-      webapi.output_update(this.output.id, values)
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 379b2493..d056c3a4 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -1,135 +1,151 @@
 <template>
-  <nav
-    class="navbar is-light is-fixed-top"
-    :style="zindex"
-    role="navigation"
-    aria-label="main navigation"
-  >
-    <div class="navbar-brand">
-      <navbar-item-link
+  <nav class="navbar is-light is-fixed-top" :style="zindex">
+    <div class="navbar-brand is-flex-grow-1">
+      <control-link
         v-if="settingsStore.show_menu_item_playlists"
+        class="navbar-item"
         :to="{ name: 'playlists' }"
       >
         <mdicon class="icon" name="music-box-multiple" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_music"
+        class="navbar-item"
         :to="{ name: 'music' }"
       >
         <mdicon class="icon" name="music" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_podcasts"
+        class="navbar-item"
         :to="{ name: 'podcasts' }"
       >
         <mdicon class="icon" name="microphone" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_audiobooks"
+        class="navbar-item"
         :to="{ name: 'audiobooks' }"
       >
         <mdicon class="icon" name="book-open-variant" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_radio"
+        class="navbar-item"
         :to="{ name: 'radio' }"
       >
         <mdicon class="icon" name="radio" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_files"
+        class="navbar-item"
         :to="{ name: 'files' }"
       >
         <mdicon class="icon" name="folder-open" size="16" />
-      </navbar-item-link>
-      <navbar-item-link
+      </control-link>
+      <control-link
         v-if="settingsStore.show_menu_item_search"
+        class="navbar-item"
         :to="{ name: searchStore.search_source }"
       >
         <mdicon class="icon" name="magnify" size="16" />
-      </navbar-item-link>
-      <div
-        class="navbar-burger"
-        :class="{ 'is-active': show_burger_menu }"
-        @click="show_burger_menu = !show_burger_menu"
+      </control-link>
+      <a
+        class="navbar-item ml-auto"
+        @click="uiStore.show_burger_menu = !uiStore.show_burger_menu"
       >
-        <span />
-        <span />
-        <span />
-      </div>
-    </div>
-    <div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
-      <div class="navbar-start" />
-      <div class="navbar-end">
-        <!-- Burger menu entries -->
-        <div
-          class="navbar-item has-dropdown is-hoverable"
-          :class="{ 'is-active': show_settings_menu }"
-          @click="on_click_outside_settings"
-        >
-          <a class="navbar-item is-arrowless is-hidden-touch">
-            <mdicon class="icon" name="menu" size="24" />
-          </a>
-          <div class="navbar-dropdown is-right">
-            <navbar-item-link :to="{ name: 'playlists' }">
-              <mdicon class="icon" name="music-box-multiple" size="16" />
+        <mdicon
+          class="icon"
+          :name="uiStore.show_burger_menu ? 'close' : 'menu'"
+        />
+      </a>
+      <div
+        class="dropdown is-right"
+        :class="{ 'is-active': uiStore.show_burger_menu }"
+      >
+        <div class="dropdown-menu">
+          <div class="dropdown-content">
+            <control-link class="dropdown-item" :to="{ name: 'playlists' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="music-box-multiple" size="16" />
+              </span>
               <b v-text="$t('navigation.playlists')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music' }">
-              <mdicon class="icon" name="music" size="16" />
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'music' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="music" size="16" />
+              </span>
               <b v-text="$t('navigation.music')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music-artists' }">
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'music-artists' }">
               <span class="pl-5" v-text="$t('navigation.artists')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music-albums' }">
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'music-albums' }">
               <span class="pl-5" v-text="$t('navigation.albums')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music-genres' }">
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'music-genres' }">
               <span class="pl-5" v-text="$t('navigation.genres')" />
-            </navbar-item-link>
-            <navbar-item-link
+            </control-link>
+            <control-link
               v-if="spotify_enabled"
+              class="dropdown-item"
               :to="{ name: 'music-spotify' }"
             >
               <span class="pl-5" v-text="$t('navigation.spotify')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'podcasts' }">
-              <mdicon class="icon" name="microphone" size="16" />
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'podcasts' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="microphone" size="16" />
+              </span>
               <b v-text="$t('navigation.podcasts')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'audiobooks' }">
-              <mdicon class="icon" name="book-open-variant" size="16" />
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'audiobooks' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="book-open-variant" size="16" />
+              </span>
               <b v-text="$t('navigation.audiobooks')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'radio' }">
-              <mdicon class="icon" name="radio" size="16" />
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'radio' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="radio" size="16" />
+              </span>
               <b v-text="$t('navigation.radio')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: 'files' }">
-              <mdicon class="icon" name="folder-open" size="16" />
+            </control-link>
+            <control-link class="dropdown-item" :to="{ name: 'files' }">
+              <span class="icon-text">
+                <mdicon class="icon" name="folder-open" size="16" />
+              </span>
               <b v-text="$t('navigation.files')" />
-            </navbar-item-link>
-            <navbar-item-link :to="{ name: searchStore.search_source }">
-              <mdicon class="icon" name="magnify" size="16" />
+            </control-link>
+            <control-link
+              class="dropdown-item"
+              :to="{ name: searchStore.search_source }"
+            >
+              <span class="icon-text">
+                <mdicon class="icon" name="magnify" size="16" />
+              </span>
               <b v-text="$t('navigation.search')" />
-            </navbar-item-link>
+            </control-link>
             <hr class="my-3" />
-            <navbar-item-link :to="{ name: 'settings-webinterface' }">
+            <control-link
+              class="dropdown-item"
+              :to="{ name: 'settings-webinterface' }"
+            >
               {{ $t('navigation.settings') }}
-            </navbar-item-link>
+            </control-link>
             <a
-              class="navbar-item"
+              class="dropdown-item"
               @click.stop.prevent="open_update_dialog()"
               v-text="$t('navigation.update-library')"
             />
-            <navbar-item-link :to="{ name: 'about' }">
+            <control-link class="dropdown-item" :to="{ name: 'about' }">
               {{ $t('navigation.about') }}
-            </navbar-item-link>
+            </control-link>
           </div>
         </div>
       </div>
     </div>
+
     <div
       v-show="show_settings_menu"
       class="is-overlay"
@@ -139,7 +155,7 @@
 </template>
 
 <script>
-import NavbarItemLink from '@/components/NavbarItemLink.vue'
+import ControlLink from '@/components/ControlLink.vue'
 import { useSearchStore } from '@/stores/search'
 import { useServicesStore } from '@/stores/services'
 import { useSettingsStore } from '@/stores/settings'
@@ -147,7 +163,7 @@ import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'NavbarTop',
-  components: { NavbarItemLink },
+  components: { ControlLink },
 
   setup() {
     return {
@@ -165,22 +181,6 @@ export default {
   },
 
   computed: {
-    show_burger_menu: {
-      get() {
-        return this.uiStore.show_burger_menu
-      },
-      set(value) {
-        this.uiStore.show_burger_menu = value
-      }
-    },
-    show_update_dialog: {
-      get() {
-        return this.uiStore.show_update_dialog
-      },
-      set(value) {
-        this.uiStore.show_update_dialog = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     },
@@ -203,12 +203,10 @@ export default {
       this.show_settings_menu = !this.show_settings_menu
     },
     open_update_dialog() {
-      this.show_update_dialog = true
+      this.uiStore.show_update_dialog = true
       this.show_settings_menu = false
-      this.show_burger_menu = false
+      this.uiStore.show_burger_menu = false
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
deleted file mode 100644
index 6211e7b6..00000000
--- a/web-src/src/components/SettingsCheckbox.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="field">
-    <input
-      :id="setting.name"
-      v-model="setting.value"
-      type="checkbox"
-      class="switch is-rounded mr-2"
-      @change="update_setting"
-    />
-    <label class="pt-0" :for="setting.name">
-      <slot name="label" />
-    </label>
-    <i
-      class="is-size-7"
-      :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
-      v-text="info"
-    />
-    <p v-if="$slots['info']" class="help">
-      <slot name="info" />
-    </p>
-  </div>
-</template>
-
-<script>
-import { useSettingsStore } from '@/stores/settings'
-import webapi from '@/webapi'
-
-export default {
-  name: 'SettingsCheckbox',
-  props: {
-    category: { required: true, type: String },
-    name: { required: true, type: String }
-  },
-
-  setup() {
-    return {
-      settingsStore: useSettingsStore()
-    }
-  },
-
-  data() {
-    return {
-      statusUpdate: '',
-      timerDelay: 2000,
-      timerId: -1
-    }
-  },
-
-  computed: {
-    info() {
-      if (this.is_success) {
-        return this.$t('setting.saved')
-      } else if (this.is_error) {
-        return this.$t('setting.not-saved')
-      }
-      return ''
-    },
-    is_error() {
-      return this.statusUpdate === 'error'
-    },
-    is_success() {
-      return this.statusUpdate === 'success'
-    },
-    setting() {
-      const setting = this.settingsStore.setting(this.category, this.name)
-      if (!setting) {
-        return {
-          category: this.category,
-          name: this.name,
-          value: false
-        }
-      }
-      return setting
-    }
-  },
-
-  methods: {
-    clear_status() {
-      if (this.is_error) {
-        this.setting.value = !this.setting.value
-      }
-      this.statusUpdate = ''
-    },
-    update_setting() {
-      this.timerId = -1
-      const setting = {
-        category: this.category,
-        name: this.name,
-        value: this.setting.value
-      }
-      webapi
-        .settings_update(this.category, setting)
-        .then(() => {
-          this.settingsStore.update(setting)
-          this.statusUpdate = 'success'
-        })
-        .catch(() => {
-          this.statusUpdate = 'error'
-        })
-        .finally(() => {
-          this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
-        })
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
deleted file mode 100644
index 1b2de8d9..00000000
--- a/web-src/src/components/SettingsIntfield.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <fieldset :disabled="disabled">
-    <div class="field">
-      <label class="label has-text-weight-normal">
-        <slot name="label" />
-        <i
-          class="is-size-7"
-          :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
-          v-text="info"
-        />
-      </label>
-      <div class="control">
-        <input
-          ref="setting"
-          class="column input is-one-fifth"
-          inputmode="numeric"
-          min="0"
-          :placeholder="placeholder"
-          :value="setting.value"
-          @input="set_update_timer"
-        />
-      </div>
-      <p v-if="$slots['info']" class="help">
-        <slot name="info" />
-      </p>
-    </div>
-  </fieldset>
-</template>
-
-<script>
-import { useSettingsStore } from '@/stores/settings'
-import webapi from '@/webapi'
-
-export default {
-  name: 'SettingsIntfield',
-  props: {
-    category: { required: true, type: String },
-    disabled: Boolean,
-    name: { required: true, type: String },
-    placeholder: { default: '', type: String }
-  },
-
-  setup() {
-    return {
-      settingsStore: useSettingsStore()
-    }
-  },
-
-  data() {
-    return {
-      statusUpdate: '',
-      timerDelay: 2000,
-      timerId: -1
-    }
-  },
-
-  computed: {
-    info() {
-      if (this.statusUpdate === 'success') {
-        return this.$t('setting.saved')
-      } else if (this.statusUpdate === 'error') {
-        return this.$t('setting.not-saved')
-      }
-      return ''
-    },
-    is_error() {
-      return this.statusUpdate === 'error'
-    },
-    is_success() {
-      return this.statusUpdate === 'success'
-    },
-    setting() {
-      return this.settingsStore.setting(this.category, this.name)
-    }
-  },
-
-  methods: {
-    clear_status() {
-      this.statusUpdate = ''
-    },
-    set_update_timer(event) {
-      event.target.value = event.target.value.replace(/[^0-9]/gu, '')
-      if (this.timerId > 0) {
-        window.clearTimeout(this.timerId)
-        this.timerId = -1
-      }
-      this.statusUpdate = ''
-      this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
-    },
-    update_setting() {
-      this.timerId = -1
-      const newValue = parseInt(this.$refs.setting.value, 10)
-      if (isNaN(newValue) || newValue === this.value) {
-        this.statusUpdate = ''
-        return
-      }
-      const setting = {
-        category: this.category,
-        name: this.name,
-        value: newValue
-      }
-      webapi
-        .settings_update(this.category, setting)
-        .then(() => {
-          this.settingsStore.update(setting)
-          this.statusUpdate = 'success'
-        })
-        .catch(() => {
-          this.statusUpdate = 'error'
-          this.$refs.setting.value = this.value
-        })
-        .finally(() => {
-          this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
-        })
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
deleted file mode 100644
index f3a5f85b..00000000
--- a/web-src/src/components/SettingsTextfield.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <fieldset :disabled="disabled">
-    <div class="field">
-      <label class="label has-text-weight-normal">
-        <slot name="label" />
-        <i
-          class="is-size-7"
-          :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
-          v-text="info"
-        />
-      </label>
-      <div class="control">
-        <input
-          ref="setting"
-          class="input"
-          type="text"
-          :placeholder="placeholder"
-          :value="setting.value"
-          @input="set_update_timer"
-        />
-      </div>
-      <p v-if="$slots['info']" class="help">
-        <slot name="info" />
-      </p>
-    </div>
-  </fieldset>
-</template>
-
-<script>
-import { useSettingsStore } from '@/stores/settings'
-import webapi from '@/webapi'
-
-export default {
-  name: 'SettingsTextfield',
-  props: {
-    category: { required: true, type: String },
-    disabled: Boolean,
-    name: { required: true, type: String },
-    placeholder: { default: '', type: String }
-  },
-
-  setup() {
-    return {
-      settingsStore: useSettingsStore()
-    }
-  },
-
-  data() {
-    return {
-      statusUpdate: '',
-      timerDelay: 2000,
-      timerId: -1
-    }
-  },
-
-  computed: {
-    info() {
-      if (this.statusUpdate === 'success') {
-        return this.$t('setting.saved')
-      } else if (this.statusUpdate === 'error') {
-        return this.$t('setting.not-saved')
-      }
-      return ''
-    },
-    is_error() {
-      return this.statusUpdate === 'error'
-    },
-    is_success() {
-      return this.statusUpdate === 'success'
-    },
-    setting() {
-      return this.settingsStore.setting(this.category, this.name)
-    }
-  },
-
-  methods: {
-    clear_status() {
-      this.statusUpdate = ''
-    },
-    set_update_timer() {
-      if (this.timerId > 0) {
-        window.clearTimeout(this.timerId)
-        this.timerId = -1
-      }
-      this.statusUpdate = ''
-      const newValue = this.$refs.setting.value
-      if (newValue !== this.value) {
-        this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
-      }
-    },
-    update_setting() {
-      this.timerId = -1
-      const newValue = this.$refs.setting.value
-      if (newValue === this.value) {
-        this.statusUpdate = ''
-        return
-      }
-      const setting = {
-        category: this.category,
-        name: this.name,
-        value: newValue
-      }
-      webapi
-        .settings_update(this.category, setting)
-        .then(() => {
-          this.settingsStore.update(setting)
-          this.statusUpdate = 'success'
-        })
-        .catch(() => {
-          this.statusUpdate = 'error'
-          this.$refs.setting.value = this.value
-        })
-        .finally(() => {
-          this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
-        })
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index 8af3d9ef..869ec81e 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-tabs-section">
+  <section class="section tabs-section">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
@@ -67,5 +67,3 @@ export default {
   name: 'TabsAudiobooks'
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index f1a1d466..e7176471 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-tabs-section">
+  <section class="section tabs-section">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
@@ -129,5 +129,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index e36ae1a3..51e00ffb 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -53,5 +53,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsSettings.vue b/web-src/src/components/TabsSettings.vue
index 11748c77..7eba3228 100644
--- a/web-src/src/components/TabsSettings.vue
+++ b/web-src/src/components/TabsSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-tabs-section">
+  <section class="section tabs-section">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
@@ -64,5 +64,3 @@ export default {
   name: 'TabsSettings'
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/filter/index.js b/web-src/src/filter/index.js
index 89df3c48..de8e22b4 100644
--- a/web-src/src/filter/index.js
+++ b/web-src/src/filter/index.js
@@ -32,7 +32,7 @@ export const filters = {
       .toLocaleString(DateTime.DATETIME_MED)
   },
   durationInDays(value) {
-    const minutes = Math.floor(value / 60000)
+    const minutes = Math.floor(value / 60)
     if (minutes > 1440) {
       return Duration.fromObject({ minutes })
         .shiftTo('days', 'hours', 'minutes')
@@ -53,6 +53,6 @@ export const filters = {
   },
   timeFromNow(value) {
     const diff = DateTime.now().diff(DateTime.fromISO(value))
-    return this.durationInDays(diff.as('milliseconds'))
+    return this.durationInDays(diff.as('seconds'))
   }
 }
diff --git a/web-src/src/i18n/de.json b/web-src/src/i18n/de.json
index 256cee17..01fcaf19 100644
--- a/web-src/src/i18n/de.json
+++ b/web-src/src/i18n/de.json
@@ -241,6 +241,7 @@
       "compiled-with": "Compiliert mit Unterstützung von {options}.",
       "library": "Bibliothek",
       "more": "mehr",
+      "name": "Name",
       "total-playtime": "Gesamte Spielzeit",
       "tracks": "Tracks",
       "update": "Neu einlesen",
@@ -407,8 +408,8 @@
       "count": "{count} Track|{count} Track|{count} Tracks",
       "edit": "Bearbeiten",
       "hide-previous": "Vorherige verbergen",
-      "title": "Warteschlange",
-      "save": "Speichern"
+      "save": "Speichern",
+      "title": "Warteschlange"
     },
     "radio": {
       "count": "{count} Station|{count} Station|{count} Stationen",
@@ -445,6 +446,7 @@
         "discogs": "Discogs",
         "explanation-1": "OwnTone verarbeitet PNG- und JPEG-Artwork, welches in einer eigenen Datei in der Bibliothek, in die Dateien eingebettet oder online von Radiostationen bereitgestellt werden kann.",
         "explanation-2": "Zusätzlich kann auf folgende Artwork-Anbieter zugegriffen werden:",
+        "show-coverart": "Zeige Cover-Artwork in der Albumliste",
         "spotify": "Spotify",
         "streaming": "Bereitgestellte Artwork von Radiostationen ignorieren"
       },
@@ -460,7 +462,6 @@
         "verify": "Verifizieren"
       },
       "general": {
-        "album-lists": "Album-Listen",
         "audiobooks": "Hörbücher",
         "files": "Dateien",
         "genres": "Genres",
@@ -473,17 +474,16 @@
         "playlists": "Playlisten",
         "podcasts": "Podcasts",
         "radio": "Radio",
-        "recently-added-page-info": "Beschränkte die Zahl der Alben auf der \"kürzlich hinzugefügt\"-Seite",
+        "recently-added-page-info": "Beschränkte die Zahl der Alben",
         "recently-added-page": "Kürzlich hinzugefügt-Seite",
         "search": "Suche",
-        "show-composer-genres-info-1": "Komma-separierte Liste der Genres, wo der Komponist auf der \"Aktuell läuft\"-Seite angezeigt werden soll",
-        "show-composer-genres-info-2": "Leer lassen, um ihn immer anzuzeigen.",
+        "show-composer-genres-info-1": "Komma getrennte Liste der Genres, für die der Komponist angezeigt werden soll.",
+        "show-composer-genres-info-2": "Leer lassen, um den Komponisten immer anzuzeigen.",
         "show-composer-genres-info-3": "Der Genre-Tag des aktuellen Tracks wird abgeglichen als Teil-String des Genre-Tags. Z.B. \"classical, soundtrack\" wird den Komponisten beim Genre-Tag \"Contemporary Classical\" anzeigen",
         "show-composer-genres": "Zeige den Komponisten für die aufgelisteten Genres an",
-        "show-composer-info": "Wenn aktiviert, wird der Komponist auf der \"Aktuell läuft\"-Seite angezeigt.",
+        "show-composer-info": "Wenn aktiviert, wird der Komponist angezeigt.",
         "show-composer": "Komponisten anzeigen",
-        "show-coverart": "Zeige Cover-Artwork in der Albumliste",
-        "show-path": "Dateipfad auf der \"Aktuell läuft\"-Seite anzeigen"
+        "show-path": "Dateipfad anzeigen"
       },
       "services": {
         "lastfm": {
@@ -495,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone wurde entweder ohne Unterstützung für Spotify erstellt oder libspotify ist nicht installiert.",
           "logged-as": "Angemeldet als ",
-          "requirements": "Spotify Premium Abo erforderlich.",
-          "scopes": "Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
+          "requirements": "Spotify Premium Abo erforderlich. Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
           "user": "Zugriff gestattet für ",
           "authorize": "Authorisiere Web-API-Zugriff",
           "grant-access": "Zugriff auf die Spotify Web-API gestatten",
@@ -572,10 +571,6 @@
       "toggle-lyrics": "Liedtexte anzeigen/verbergen"
     }
   },
-  "setting": {
-    "not-saved": " (Fehler beim Speichern der Einstellungen)",
-    "saved": " (Einstellungen gesichert)"
-  },
   "server": {
     "connection-failed": "Fehler bei Verbindung zum OwnTone-Server",
     "request-failed": "Anfrage gescheitert (Status: {status} {cause} {url})",
diff --git a/web-src/src/i18n/en.json b/web-src/src/i18n/en.json
index 77c8ac47..19dc3433 100644
--- a/web-src/src/i18n/en.json
+++ b/web-src/src/i18n/en.json
@@ -241,6 +241,7 @@
       "compiled-with": "Compiled with support for {options}.",
       "library": "Library",
       "more": "more",
+      "name": "Name",
       "total-playtime": "Total playtime",
       "tracks": "Tracks",
       "update": "Update",
@@ -407,8 +408,8 @@
       "count": "{count} track|{count} track|{count} tracks",
       "edit": "Edit",
       "hide-previous": "Hide previous",
-      "title": "Queue",
-      "save": "Save"
+      "save": "Save",
+      "title": "Queue"
     },
     "radio": {
       "count": "{count} station|{count} station|{count} stations",
@@ -473,16 +474,16 @@
         "playlists": "Playlists",
         "podcasts": "Podcasts",
         "radio": "Radio",
-        "recently-added-page-info": "Limit the number of albums shown on the \"Recently Added\" page",
+        "recently-added-page-info": "Limit the number of albums displayed",
         "recently-added-page": "Recently added page",
         "search": "Search",
-        "show-composer-genres-info-1": "Comma separated list of genres the composer should be displayed on the \"Now playing page\"",
-        "show-composer-genres-info-2": "Leave empty to always show the composer.",
+        "show-composer-genres-info-1": "Comma-separated list of genres, for which the composer must be displayed",
+        "show-composer-genres-info-2": "Leave empty to always show the composer",
         "show-composer-genres-info-3": "The genre tag of the current track is matched by checking, if one of the defined genres are included. For example setting to \"classical, soundtrack\" will show the composer for tracks with a genre tag of \"Contemporary Classical\"",
         "show-composer-genres": "Show composer only for listed genres",
-        "show-composer-info": "If enabled the composer of the current playing track is shown on the \"Now playing page\"",
+        "show-composer-info": "If enabled, the composer of the current playing track is displayed",
         "show-composer": "Show composer",
-        "show-path": "Show filepath on the \"Now playing\" page"
+        "show-path": "Show filepath"
       },
       "services": {
         "lastfm": {
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone was either built without support for Spotify or libspotify is not installed.",
           "logged-as": "Logged in as ",
-          "requirements": "You must have a Spotify premium account.",
-          "scopes": "Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
+          "requirements": "You must have a Spotify premium account. Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
           "user": "Access granted for ",
           "authorize": "Authorize Web API access",
           "grant-access": "Grant access to the Spotify Web API",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "Toggle lyrics"
     }
   },
-  "setting": {
-    "not-saved": " (error saving setting)",
-    "saved": " (setting saved)"
-  },
   "server": {
     "connection-failed": "Failed to connect to OwnTone server",
     "request-failed": "Request failed (status: {status} {cause} {url})",
diff --git a/web-src/src/i18n/fr.json b/web-src/src/i18n/fr.json
index a36aadd1..8ad8fdca 100644
--- a/web-src/src/i18n/fr.json
+++ b/web-src/src/i18n/fr.json
@@ -241,6 +241,7 @@
       "compiled-with": "Compilé avec les options {options}.",
       "library": "Bibliothèque",
       "more": "plus",
+      "name": "Nom",
       "total-playtime": "Durée totale de lecture",
       "tracks": "Pistes",
       "update": "Actualiser",
@@ -407,8 +408,8 @@
       "count": "{count} piste|{count} piste|{count} pistes",
       "edit": "Éditer",
       "hide-previous": "Masquer l’historique",
-      "queue": "File d’attente",
-      "save": "Enregistrer"
+      "save": "Enregistrer",
+      "title": "File d’attente"
     },
     "radio": {
       "count": "{count} station|{count} station|{count} stations",
@@ -473,16 +474,16 @@
         "playlists": "Listes de lecture",
         "podcasts": "Podcasts",
         "radio": "Radio",
-        "recently-added-page-info": "Limiter le nombre d’albums affichés dans la section « Ajouts récents »",
+        "recently-added-page-info": "Limiter le nombre d’albums affichés",
         "recently-added-page": "Page « Ajouts récents »",
         "search": "Recherche",
-        "show-composer-genres-info-1": "Liste des genres, séparés par des virgules, que le compositeur doit afficher sur la page « En cours de lecture ».",
+        "show-composer-genres-info-1": "Liste de genres séparés par des virgules pour lesquels le compositeur doit être affiché.",
         "show-composer-genres-info-2": "Laissez vide pour toujours afficher le compositeur.",
         "show-composer-genres-info-3": "L’étiquette de genre de la piste actuelle est comparée en vérifiant si l’un des genres définis est inclus. Par exemple, en choisissant \"classique, bande sonore\", le compositeur pour les pistes dont l’étiquette de genre est \"classique contemporain\" sera affiché.",
         "show-composer-genres": "Afficher le compositeur uniquement pour les genres listés",
-        "show-composer-info": "Si actif, le compositeur de la piste en cours de lecture est affiché sur la page « En cours de lecture »",
+        "show-composer-info": "Si actif, le compositeur de la piste en cours de lecture est affiché",
         "show-composer": "Afficher le compositeur",
-        "show-path": "Afficher le chemin du fichier sur la page « En cours de lecture »"
+        "show-path": "Afficher le chemin du fichier"
       },
       "services": {
         "lastfm": {
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "L’option Spotify n’est pas présente.",
           "logged-as": "Connecté en tant que ",
-          "requirements": "Vous devez posséder un compte Spotify Premium.",
-          "scopes": "L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
+          "requirements": "Vous devez posséder un compte Spotify Premium. L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
           "user": "Accès autorisé pour ",
           "authorize": "Autoriser l’accès à l’API",
           "grant-access": "Accordez l’accès à l’API de Spotify",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "Voir/Cacher les paroles"
     }
   },
-  "setting": {
-    "not-saved": " (erreur à l’enregistrement du réglage)",
-    "saved": " (réglage enregistré)"
-  },
   "server": {
     "connection-failed": "Échec de connexion au serveur",
     "request-failed": "La requête a échoué (status: {status} {cause} {url})",
diff --git a/web-src/src/i18n/zh-CN.json b/web-src/src/i18n/zh-CN.json
index fb8f0fae..6d61ee56 100644
--- a/web-src/src/i18n/zh-CN.json
+++ b/web-src/src/i18n/zh-CN.json
@@ -241,6 +241,7 @@
       "compiled-with": "编译支持来自于 {options}",
       "library": "资料库",
       "more": "更多",
+      "name": "名称",
       "total-playtime": "总播放时长",
       "tracks": "曲目总数",
       "update": "更新",
@@ -407,8 +408,8 @@
       "count": "{count} 只曲目|{count} 只曲目",
       "edit": "编辑",
       "hide-previous": "隐藏历史",
-      "title": "清单",
-      "save": "保存"
+      "save": "保存",
+      "title": "清单"
     },
     "radio": {
       "count": "{count} 个电台|{count} 个电台",
@@ -473,16 +474,16 @@
         "playlists": "播放列表",
         "podcasts": "播客",
         "radio": "广播电台",
-        "recently-added-page-info": "限制“最近添加”页面上显示的专辑数量",
+        "recently-added-page-info": "限制显示的相册数量",
         "recently-added-page": "“最近添加”页面",
         "search": "搜索",
-        "show-composer-genres-info-1": "以逗号分隔流派，作曲家会在“正在播放的页面”上显示",
+        "show-composer-genres-info-1": "以逗号分隔的流派列表，必须显示作曲家所属的流派",
         "show-composer-genres-info-2": "留空以始终显示作曲家",
         "show-composer-genres-info-3": "通过检查是否包含定义的流派之一来匹配当前曲目的流派标签。例如，设置为“古典、原声带”将显示流派标签为“当代古典”的曲目的作曲家",
         "show-composer-genres": "仅显示列出的流派的作曲家",
-        "show-composer-info": "如果启用，当前播放曲目的作曲家将显示在“正在播放页面”上",
+        "show-composer-info": "如果启用，则会显示当前播放曲目的作曲家",
         "show-composer": "显示作曲家",
-        "show-path": "在“正在播放”页面显示文件路径"
+        "show-path": "显示文件路径"
       },
       "services": {
         "lastfm": {
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone的构建没有来自 Spotify 官方的支持，也未安装 libspotify",
           "logged-as": "登录为 ",
-          "requirements": "您必须拥有 Spotify付费帐户",
-          "scopes": "访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
+          "requirements": "您必须拥有 Spotify付费帐户。访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
           "user": "授予访问权限",
           "authorize": "授权 Web API 访问",
           "grant-access": "授予对 Spotify Web API 的访问权限",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "显示/隐藏歌词"
     }
   },
-  "setting": {
-    "not-saved": " (设置保存错误)",
-    "saved": " (设置已保存)"
-  },
   "server": {
     "connection-failed": "无法连接到 OwnTone 服务器",
     "request-failed": "请求失败 (状态：{status} {cause} {url})",
diff --git a/web-src/src/i18n/zh-TW.json b/web-src/src/i18n/zh-TW.json
index 89be5902..cd1617e5 100644
--- a/web-src/src/i18n/zh-TW.json
+++ b/web-src/src/i18n/zh-TW.json
@@ -241,6 +241,7 @@
       "compiled-with": "編譯支持來自於 {options}",
       "library": "資料庫",
       "more": "更多",
+      "name": "名稱",
       "total-playtime": "總播放時長",
       "tracks": "曲目總數",
       "update": "更新",
@@ -407,8 +408,8 @@
       "count": "{count} 首曲目|{count} 首曲目",
       "edit": "編輯",
       "hide-previous": "隱藏歷史",
-      "title": "清單",
-      "save": "儲存"
+      "save": "儲存",
+      "title": "清單"
     },
     "radio": {
       "count": "{count} 個電台|{count} 個電台",
@@ -473,16 +474,16 @@
         "playlists": "播放列表",
         "podcasts": "Podcast",
         "radio": "電台",
-        "recently-added-page-info": "限制“最近新增”頁面上顯示的專輯數量",
+        "recently-added-page-info": "限制顯示的相簿數量",
         "recently-added-page": "“最近新增”頁面",
         "search": "搜尋",
-        "show-composer-genres-info-1": "以逗號分隔音樂類型，作曲家會在“正在播放的頁面”上顯示",
+        "show-composer-genres-info-1": "以逗號分隔的音樂類型清單，將顯示作曲家的音樂類型",
         "show-composer-genres-info-2": "留空以始終顯示作曲家",
         "show-composer-genres-info-3": "通過檢查是否包含定義的音樂類型之一來匹配當前曲目的音樂類型標籤。例如，設定為“古典、原聲帶”將顯示音樂類型標籤為“當代古典”的曲目的作曲家",
         "show-composer-genres": "僅顯示列出的音樂類型的作曲家",
-        "show-composer-info": "如果啓用，當前播放曲目的作曲家將顯示在“正在播放頁面”上",
+        "show-composer-info": "如果啟用，則會顯示目前播放曲目的作曲家",
         "show-composer": "顯示作曲家",
-        "show-path": "在“正在播放”頁面顯示文件路徑"
+        "show-path": "顯示檔案路徑"
       },
       "services": {
         "lastfm": {
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone並無 Spotify 官方的支持，也未安裝 libspotify",
           "logged-as": "登入為 ",
-          "requirements": "您必須擁有 Spotify付費帳戶",
-          "scopes": "訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
+          "requirements": "您必須擁有 Spotify付費帳戶。訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
           "user": "授予訪問權限",
           "authorize": "授權 Web API 訪問",
           "grant-access": "授予對 Spotify Web API 的訪問權限",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "顯示/隱藏歌詞"
     }
   },
-  "setting": {
-    "not-saved": " (設定儲存錯誤)",
-    "saved": " (設定已儲存)"
-  },
   "server": {
     "connection-failed": "無法連接到 OwnTone 伺服器",
     "request-failed": "請求失敗 (狀態：{status} {cause} {url})",
diff --git a/web-src/src/icons.js b/web-src/src/icons.js
index 2b58f093..b289f862 100644
--- a/web-src/src/icons.js
+++ b/web-src/src/icons.js
@@ -14,6 +14,7 @@ import {
   mdiChevronDown,
   mdiChevronLeft,
   mdiChevronUp,
+  mdiClose,
   mdiContentSave,
   mdiDelete,
   mdiDeleteEmpty,
@@ -79,6 +80,7 @@ export const icons = {
   mdiChevronDown,
   mdiChevronLeft,
   mdiChevronUp,
+  mdiClose,
   mdiContentSave,
   mdiDelete,
   mdiDeleteEmpty,
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 12bf2bf7..3c17ff43 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -3,7 +3,7 @@
 @use 'bulma/bulma';
 @use 'bulma/sass/utilities/mixins';
 
-.fd-tabs-section {
+.tabs-section {
   padding-bottom: 0;
   padding-top: 0;
   background: var(--bulma-body-background-color);
diff --git a/web-src/src/pages/PageAbout.vue b/web-src/src/pages/PageAbout.vue
index 5e1fc027..a44547aa 100644
--- a/web-src/src/pages/PageAbout.vue
+++ b/web-src/src/pages/PageAbout.vue
@@ -1,180 +1,166 @@
 <template>
-  <div>
-    <section class="section">
-      <div class="container">
-        <div class="columns is-centered">
-          <div class="column is-four-fifths has-text-centered-mobile">
-            <h1 class="title is-4" v-text="configuration.library_name" />
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="section">
-      <div class="container">
-        <div class="columns is-centered">
-          <div class="column is-four-fifths">
-            <div class="content">
-              <nav class="level is-mobile">
-                <!-- Left side -->
-                <div class="level-left">
-                  <div class="level-item">
-                    <p class="title is-5" v-text="$t('page.about.library')" />
-                  </div>
+  <section class="section">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <div class="content">
+            <nav class="level">
+              <div class="level-left">
+                <div class="level-item">
+                  <p class="title is-4" v-text="$t('page.about.library')" />
                 </div>
-                <!-- Right side -->
-                <div class="level-right">
-                  <div v-if="library.updating">
-                    <a
-                      class="button is-small is-loading"
-                      v-text="$t('page.about.update')"
-                    />
-                  </div>
-                  <div v-else>
-                    <a
-                      class="button is-small"
-                      @click="showUpdateDialog()"
-                      v-text="$t('page.about.update')"
-                    />
-                  </div>
-                </div>
-              </nav>
-              <table class="table">
-                <tbody>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.artists')"
-                    />
-                    <td
-                      class="has-text-right"
-                      v-text="$filters.number(library.artists)"
-                    />
-                  </tr>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.albums')"
-                    />
-                    <td
-                      class="has-text-right"
-                      v-text="$filters.number(library.albums)"
-                    />
-                  </tr>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.tracks')"
-                    />
-                    <td
-                      class="has-text-right"
-                      v-text="$filters.number(library.songs)"
-                    />
-                  </tr>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.total-playtime')"
-                    />
-                    <td
-                      class="has-text-right"
-                      v-text="
-                        $filters.durationInDays(library.db_playtime * 1000)
-                      "
-                    />
-                  </tr>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.updated')"
-                    />
-                    <td class="has-text-right">
-                      <span
-                        v-text="
-                          $t('page.about.updated-on', {
-                            time: $filters.timeFromNow(library.updated_at)
-                          })
-                        "
-                      />
-                      (<span
-                        class="has-text-grey"
-                        v-text="$filters.datetime(library.updated_at)"
-                      />)
-                    </td>
-                  </tr>
-                  <tr>
-                    <th
-                      class="has-text-left"
-                      v-text="$t('page.about.uptime')"
-                    />
-                    <td class="has-text-right">
-                      <span
-                        v-text="$filters.timeFromNow(library.started_at, true)"
-                      />
-                      (<span
-                        class="has-text-grey"
-                        v-text="$filters.datetime(library.started_at)"
-                      />)
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="section">
-      <div class="container">
-        <div class="columns is-centered">
-          <div class="column is-four-fifths">
-            <div class="content has-text-centered-mobile">
-              <p
-                class="is-size-7"
-                v-text="
-                  $t('page.about.version', { version: configuration.version })
-                "
-              />
-              <p
-                class="is-size-7"
-                v-text="
-                  $t('page.about.compiled-with', {
-                    options: configuration.buildoptions.join(', ')
-                  })
-                "
-              />
-              <i18n-t
-                tag="p"
-                class="is-size-7"
-                keypath="page.about.built-with"
-                scope="global"
-              >
-                <template #bulma>
-                  <a href="https://bulma.io">Bulma</a>
-                </template>
-                <template #mdi>
-                  <a href="https://pictogrammers.com/library/mdi/">
-                    Material Design Icons
-                  </a>
-                </template>
-                <template #vuejs>
-                  <a href="https://vuejs.org/">Vue.js</a>
-                </template>
-                <template #axios>
-                  <a href="https://github.com/axios/axios">axios</a>
-                </template>
-                <template #others>
+              </div>
+              <div class="level-right">
+                <div v-if="library.updating">
                   <a
-                    href="https://github.com/owntone/owntone-server/network/dependencies"
-                    v-text="$t('page.about.more')"
+                    class="button is-small is-loading"
+                    v-text="$t('page.about.update')"
                   />
-                </template>
-              </i18n-t>
+                </div>
+                <div v-else>
+                  <a
+                    class="button is-small"
+                    @click="showUpdateDialog()"
+                    v-text="$t('page.about.update')"
+                  />
+                </div>
+              </div>
+            </nav>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.name')"
+              />
+              <div class="media-right" v-text="configuration.library_name" />
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.artists')"
+              />
+              <div
+                class="media-right"
+                v-text="$filters.number(library.artists)"
+              />
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.albums')"
+              />
+              <div
+                media="media-right"
+                v-text="$filters.number(library.albums)"
+              />
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.tracks')"
+              />
+              <div
+                class="media-right"
+                v-text="$filters.number(library.songs)"
+              />
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.total-playtime')"
+              />
+              <div
+                class="media-right"
+                v-text="$filters.durationInDays(library.db_playtime)"
+              />
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.updated')"
+              />
+              <div class="media-right">
+                <span
+                  v-text="
+                    $t('page.about.updated-on', {
+                      time: $filters.timeFromNow(library.updated_at)
+                    })
+                  "
+                />
+                (<span
+                  class="has-text-grey"
+                  v-text="$filters.datetime(library.updated_at)"
+                />)
+              </div>
+            </div>
+            <div class="media">
+              <div
+                class="media-content has-text-weight-bold"
+                v-text="$t('page.about.uptime')"
+              />
+              <div class="media-right">
+                <span v-text="$filters.timeFromNow(library.started_at, true)" />
+                (<span
+                  class="has-text-grey"
+                  v-text="$filters.datetime(library.started_at)"
+                />)
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
+  <section class="section">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <div class="content has-text-centered-mobile">
+            <p
+              class="is-size-7"
+              v-text="
+                $t('page.about.version', { version: configuration.version })
+              "
+            />
+            <p
+              class="is-size-7"
+              v-text="
+                $t('page.about.compiled-with', {
+                  options: configuration.buildoptions.join(', ')
+                })
+              "
+            />
+            <i18n-t
+              tag="p"
+              class="is-size-7"
+              keypath="page.about.built-with"
+              scope="global"
+            >
+              <template #bulma>
+                <a href="https://bulma.io">Bulma</a>
+              </template>
+              <template #mdi>
+                <a href="https://pictogrammers.com/library/mdi/">
+                  Material Design Icons
+                </a>
+              </template>
+              <template #vuejs>
+                <a href="https://vuejs.org/">Vue.js</a>
+              </template>
+              <template #axios>
+                <a href="https://github.com/axios/axios">axios</a>
+              </template>
+              <template #others>
+                <a
+                  href="https://github.com/owntone/owntone-server/network/dependencies"
+                  v-text="$t('page.about.more')"
+                />
+              </template>
+            </i18n-t>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -209,5 +195,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index abbdb754..b9d45cab 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -2,17 +2,20 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
-          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </h2>
-        <div class="buttons fd-is-centered-mobile mt-5">
-          <a class="button is-small is-dark is-rounded" @click="play">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
+        <div class="buttons is-centered-mobile mt-5">
+          <a
+            class="button has-background-light is-small is-rounded"
+            @click="play"
+          >
             <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.album.shuffle')" />
           </a>
           <a
-            class="button is-small is-light is-rounded"
+            class="button is-small has-background-light is-rounded"
             @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
@@ -29,8 +32,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.album.track-count', { count: album.track_count })"
         />
         <list-tracks :items="tracks" :uris="album.uri" />
@@ -104,5 +107,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 411b5121..4702b2fb 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -2,15 +2,11 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
-          <a
-            class="has-text-link"
-            @click="open_artist"
-            v-text="album.artists[0].name"
-          />
-        </h2>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artists[0].name" />
+        </div>
+        <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.spotify.album.shuffle')" />
@@ -33,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.spotify.album.track-count', { count: album.tracks.total })
           "
@@ -127,5 +123,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index d7378630..035ec713 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -1,60 +1,54 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="albums.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.albums.filter')" />
-            <div class="field">
-              <div class="control">
-                <input
-                  id="switchHideSingles"
-                  v-model="hide_singles"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSingles"
-                  v-text="$t('page.albums.hide-singles')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.albums.hide-singles-help')" />
-            </div>
-            <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.albums.hide-spotify')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.albums.hide-spotify-help')" />
-            </div>
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.filter')"
+            />
+            <control-switch v-model="uiStore.hide_singles">
+              <template #label>
+                <span v-text="$t('page.albums.hide-singles')" />
+              </template>
+              <template #help>
+                <span v-text="$t('page.albums.hide-singles-help')" />
+              </template>
+            </control-switch>
+            <control-switch
+              v-if="spotify_enabled"
+              v-model="uiStore.hide_spotify"
+            >
+              <template #label>
+                <span v-text="$t('page.albums.hide-spotify')" />
+              </template>
+              <template #help>
+                <span v-text="$t('page.albums.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.albums_sort"
               :options="groupings"
             />
           </div>
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.albums.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.albums.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.albums.count', { count: albums.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-albums :items="albums" />
       </template>
@@ -65,6 +59,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -88,6 +83,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListAlbums,
     TabsMusic
@@ -157,43 +153,17 @@ export default {
   computed: {
     albums() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.albums_sort
       )
       options.filters = [
-        (album) => !this.hide_singles || album.track_count > 2,
-        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
+        (album) => !this.uiStore.hide_singles || album.track_count > 2,
+        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
       ]
       return this.albums_list.group(options)
     },
-    hide_singles: {
-      get() {
-        return this.uiStore.hide_singles
-      },
-      set(value) {
-        this.uiStore.hide_singles = value
-      }
-    },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.albums_sort
-      },
-      set(value) {
-        this.uiStore.albums_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index e370abe8..a50eb0ff 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -4,34 +4,46 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.filter')" />
-            <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artist.hide-spotify')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
-            </div>
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
+            <control-switch
+              v-if="spotify_enabled"
+              v-model="uiStore.hide_spotify"
+            >
+              <template #label>
+                <span v-text="$t('page.artist.hide-spotify')" />
+              </template>
+              <template #help>
+                <span v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artist_albums_sort"
               :options="groupings"
             />
           </div>
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.artist.album-count', { count: albums.count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.artist.track-count', { count: track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -48,17 +60,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.artist.album-count', { count: albums.count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.artist.track-count', { count: track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-artist
           :item="artist"
@@ -73,6 +74,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@@ -99,6 +101,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     ListAlbums,
     ModalDialogArtist
   },
@@ -136,29 +139,13 @@ export default {
   computed: {
     albums() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artist_albums_sort
       )
       options.filters = [
-        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
+        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
       ]
       return this.albums_list.group(options)
     },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artist_albums_sort
-      },
-      set(value) {
-        this.uiStore.artist_albums_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     },
@@ -187,5 +174,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 0c1ae4f5..412784a7 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -2,7 +2,11 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.spotify.artist.album-count', { count: total })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.spotify.artist.album-count', { count: total })"
-        />
         <list-albums-spotify :items="albums" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
@@ -140,5 +140,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 48fb5fb4..dcb00701 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -5,27 +5,29 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.filter')" />
-            <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artist.hide-spotify')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
-            </div>
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
+            <control-switch
+              v-if="spotify_enabled"
+              v-model="uiStore.hide_spotify"
+            >
+              <template #label>
+                <span v-text="$t('page.artist.hide-spotify')" />
+              </template>
+              <template #help>
+                <span v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artist_tracks_sort"
               :options="groupings"
             />
           </div>
@@ -33,6 +35,16 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_artist"
+            v-text="$t('page.artist.album-count', { count: album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.artist.track-count', { count: tracks.count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -49,17 +61,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_artist"
-            v-text="$t('page.artist.album-count', { count: album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.artist.track-count', { count: tracks.count })"
-          />
-        </p>
         <list-tracks :items="tracks" :uris="track_uris" />
         <modal-dialog-artist
           :item="artist"
@@ -74,6 +75,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
@@ -101,6 +103,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListTracks,
     ModalDialogArtist
@@ -147,22 +150,6 @@ export default {
           .map((track) => track.item.album_id)
       ).size
     },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artist_tracks_sort
-      },
-      set(value) {
-        this.uiStore.artist_tracks_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     },
@@ -171,10 +158,10 @@ export default {
     },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artist_tracks_sort
       )
       options.filters = [
-        (track) => !this.hide_spotify || track.data_kind !== 'spotify'
+        (track) => !this.uiStore.hide_spotify || track.data_kind !== 'spotify'
       ]
       return this.tracks_list.group(options)
     }
@@ -197,5 +184,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index a9151226..8fbb644b 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -1,60 +1,53 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="artists.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artists.filter')" />
-            <div class="field">
-              <div class="control">
-                <input
-                  id="switchHideSingles"
-                  v-model="hide_singles"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSingles"
-                  v-text="$t('page.artists.hide-singles')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.artists.hide-singles-help')" />
-            </div>
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.filter')"
+            />
+            <control-switch v-model="uiStore.hide_singles">
+              <template #label>
+                <span v-text="$t('page.artists.hide-singles')" />
+              </template>
+              <template #help>
+                <span v-text="$t('page.artists.hide-singles-help')" />
+              </template>
+            </control-switch>
             <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artists.hide-spotify')"
-                />
-              </div>
-              <p class="help" v-text="$t('page.artists.hide-spotify-help')" />
+              <control-switch v-model="uiStore.hide_spotify">
+                <template #label>
+                  <span v-text="$t('page.artists.hide-spotify')" />
+                </template>
+                <template #help>
+                  <span v-text="$t('page.artists.hide-spotify-help')" />
+                </template>
+              </control-switch>
             </div>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artists_sort"
               :options="groupings"
             />
           </div>
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.artists.count', { count: artists.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-artists :items="artists" />
       </template>
@@ -65,6 +58,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
@@ -88,6 +82,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListArtists,
     TabsMusic
@@ -125,47 +120,21 @@ export default {
   },
 
   computed: {
-    // Wraps GroupedList and updates it if filter or sort changes
     artists() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artists_sort
       )
       options.filters = [
         (artist) =>
-          !this.hide_singles || artist.track_count > artist.album_count * 2,
-        (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
+          !this.uiStore.hide_singles ||
+          artist.track_count > artist.album_count * 2,
+        (artist) => !this.uiStore.hide_spotify || artist.data_kind !== 'spotify'
       ]
       return this.artists_list.group(options)
     },
-    hide_singles: {
-      get() {
-        return this.uiStore.hide_singles
-      },
-      set(value) {
-        this.uiStore.hide_singles = value
-      }
-    },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artists_sort
-      },
-      set(value) {
-        this.uiStore.artists_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index fc5a3520..be9e3398 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -2,11 +2,11 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
-          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </h2>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
+        <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
             <span v-text="$t('page.audiobooks.album.play')" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.audiobooks.album.track-count', {
               count: album.track_count
@@ -103,5 +103,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index 79ad9f52..21babef6 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
@@ -8,7 +8,7 @@
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.audiobooks.albums.title')" />
         <p
-          class="heading"
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.albums.count', { count: albums.count })"
         />
       </template>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 728dfc34..42171edd 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -2,7 +2,15 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.audiobooks.artist.album-count', {
+              count: artist.album_count
+            })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,14 +27,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="
-            $t('page.audiobooks.artist.album-count', {
-              count: artist.album_count
-            })
-          "
-        />
         <list-albums :items="albums" />
         <modal-dialog-artist
           :item="artist"
@@ -87,5 +87,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 102ed2c5..175554c2 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="artists.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-artists :items="artists" />
       </template>
@@ -62,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 068b683c..b4198776 100644
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 71fb5e91..9f132b7a 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -2,7 +2,21 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="
+              $t('page.composer.album-count', { count: composer.album_count })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,21 +33,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="
-              $t('page.composer.album-count', { count: composer.album_count })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-composer
           :item="composer"
@@ -104,5 +103,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index e7c84858..34fb15f3 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -5,16 +5,35 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.composer_tracks_sort"
               :options="groupings"
             />
           </div>
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_albums"
+            v-text="
+              $t('page.composer.album-count', {
+                count: composer.album_count
+              })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,23 +50,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_albums"
-            v-text="
-              $t('page.composer.album-count', {
-                count: composer.album_count
-              })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-composer
           :item="composer"
@@ -130,17 +132,9 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.composer_tracks_sort
-      },
-      set(value) {
-        this.uiStore.composer_tracks_sort = value
-      }
-    },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.composer_tracks_sort
       )
       return this.tracks_list.group(options)
     }
@@ -160,5 +154,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 9467b37e..fd74319c 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="composers.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.composers.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.composers.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.composers.count', { count: composers.total })"
         />
       </template>
@@ -56,5 +56,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index bd7c0dc5..1d55eae3 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -137,5 +137,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index 435321aa..5ceab0ef 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -5,7 +5,17 @@
         <index-button-list :indices="albums.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -22,17 +32,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-genre
           :item="genre"
@@ -109,5 +108,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index c127e17a..2c2857a7 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -5,16 +5,29 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.genre.sort.title')"
+            />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.genre_tracks_sort"
               :options="groupings"
             />
           </div>
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_genre"
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,17 +44,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_genre"
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-genre
           :item="genre"
@@ -126,17 +128,9 @@ export default {
     expression() {
       return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.genre_tracks_sort
-      },
-      set(value) {
-        this.uiStore.genre_tracks_sort = value
-      }
-    },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.genre_tracks_sort
       )
       return this.tracks_list.group(options)
     }
@@ -157,5 +151,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index d13180fa..7bf8d0f6 100644
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue
index f2547200..bd6e8043 100644
--- a/web-src/src/pages/PageMusic.vue
+++ b/web-src/src/pages/PageMusic.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -12,7 +12,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               :to="{ name: 'music-recently-added' }"
             >
               {{ $t('page.music.show-more') }}
@@ -32,7 +32,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               :to="{ name: 'music-recently-played' }"
             >
               {{ $t('page.music.show-more') }}
@@ -95,5 +95,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 2ef0844d..d4dfcdda 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -62,5 +62,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue
index 9fe21929..68c9ef2b 100644
--- a/web-src/src/pages/PageMusicRecentlyPlayed.vue
+++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -51,5 +51,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue
index 8e46abfd..88cfd138 100644
--- a/web-src/src/pages/PageMusicSpotify.vue
+++ b/web-src/src/pages/PageMusicSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -13,7 +13,7 @@
           <p class="level-item">
             <router-link
               :to="{ name: 'music-spotify-new-releases' }"
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
             >
               {{ $t('page.spotify.music.show-more') }}
             </router-link>
@@ -36,7 +36,7 @@
           <p class="level-item">
             <router-link
               :to="{ name: 'music-spotify-featured-playlists' }"
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
             >
               {{ $t('page.spotify.music.show-more') }}
             </router-link>
@@ -102,5 +102,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
index a4fe8900..1ccb330d 100644
--- a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
+++ b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -60,5 +60,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index 05767726..7f427e45 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -57,5 +57,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 3186a718..ae6ecc2d 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -1,56 +1,56 @@
 <template>
   <div class="hero is-full-height">
-    <div v-if="track.id > 0" class="hero-body is-flex is-align-items-center">
-      <div class="container has-text-centered" style="max-width: 500px">
-        <cover-artwork
-          :url="track.artwork_url"
-          :artist="track.artist"
-          :album="track.album"
-          class="is-clickable fd-has-shadow fd-cover-big-image"
-          :class="{ 'is-masked': lyricsStore.pane }"
-          @click="open_dialog(track)"
-        />
-        <lyrics-pane v-if="lyricsStore.pane" />
-        <control-slider
-          v-model:value="track_progress"
-          class="mt-5"
-          :disabled="is_live"
-          :max="track_progress_max"
-          :cursor="cursor"
-          @change="seek"
-          @mousedown="start_dragging"
-          @mouseup="end_dragging"
-        />
-        <div class="is-flex is-justify-content-space-between">
-          <p class="subtitle is-7" v-text="track_elapsed_time" />
-          <p class="subtitle is-7" v-text="track_total_time" />
-        </div>
-        <p class="title is-5" v-text="track.title" />
-        <p class="title is-6" v-text="track.artist" />
-        <p
-          v-if="composer"
-          class="subtitle is-6 has-text-grey has-text-weight-bold"
-          v-text="composer"
-        />
-        <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
-        <p
-          v-if="settingsStore.show_filepath_now_playing"
-          class="subtitle is-6 has-text-grey"
-          v-text="track.path"
-        />
-      </div>
-    </div>
-    <div v-else class="hero-body is-flex is-align-items-center">
+    <div class="hero-body is-flex is-align-items-center">
       <div class="container has-text-centered">
-        <p class="title is-5" v-text="$t('page.now-playing.title')" />
-        <p class="subtitle" v-text="$t('page.now-playing.info')" />
+        <div v-if="track.id" class="mx-auto" style="max-width: 32rem">
+          <cover-artwork
+            :url="track.artwork_url"
+            :artist="track.artist"
+            :album="track.album"
+            class="is-clickable fd-has-shadow fd-cover-big-image"
+            :class="{ 'is-masked': lyricsStore.pane }"
+            @click="open_dialog(track)"
+          />
+          <lyrics-pane v-if="lyricsStore.pane" />
+          <control-slider
+            v-model:value="track_progress"
+            class="mt-5"
+            :disabled="is_live"
+            :max="track_progress_max"
+            :cursor="cursor"
+            @change="seek"
+            @mousedown="start_dragging"
+            @mouseup="end_dragging"
+          />
+          <div class="is-flex is-justify-content-space-between">
+            <p class="subtitle is-7" v-text="track_elapsed_time" />
+            <p class="subtitle is-7" v-text="track_total_time" />
+          </div>
+          <p class="title is-5" v-text="track.title" />
+          <p class="title is-6" v-text="track.artist" />
+          <p
+            v-if="composer"
+            class="subtitle is-6 has-text-grey has-text-weight-bold"
+            v-text="composer"
+          />
+          <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
+          <p
+            v-if="settingsStore.show_filepath_now_playing"
+            class="subtitle is-6 has-text-grey"
+            v-text="track.path"
+          />
+        </div>
+        <div v-else>
+          <p class="title is-5" v-text="$t('page.now-playing.title')" />
+          <p class="subtitle" v-text="$t('page.now-playing.info')" />
+        </div>
       </div>
+      <modal-dialog-queue-item
+        :show="show_details_modal"
+        :item="selected_item"
+        @close="show_details_modal = false"
+      />
     </div>
-    <modal-dialog-queue-item
-      :show="show_details_modal"
-      :item="selected_item"
-      @close="show_details_modal = false"
-    />
   </div>
 </template>
 
@@ -196,5 +196,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index 44d454aa..f61f4ba4 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -2,14 +2,14 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p
+        <div
           class="title is-4"
           v-text="
             playlist.id === 0 ? $t('page.playlists.title') : playlist.name
           "
         />
-        <p
-          class="heading"
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.playlists.count', { count: playlists.count })"
         />
       </template>
@@ -89,5 +89,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index d6ecb791..18bc08f9 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -3,6 +3,10 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.playlist.track-count', { count: tracks.count })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.playlist.track-count', { count: tracks.count })"
-        />
         <list-tracks :items="tracks" :uris="uris" />
         <modal-dialog-playlist
           :item="playlist"
@@ -90,5 +90,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
index 71e003c7..f22473db 100644
--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -3,6 +3,12 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,12 +25,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="
-            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
-          "
-        />
         <list-tracks-spotify :items="tracks" :context_uri="playlist.uri" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
@@ -151,5 +151,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 1a1ebd2b..bcfd0360 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -2,11 +2,11 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
           <br />
-        </h2>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        </div>
+        <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
             <span v-text="$t('page.podcast.play')" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.podcast.track-count', { count: album.track_count })"
         />
         <list-tracks
@@ -46,7 +46,7 @@
           @play-count-changed="reload_tracks"
           @remove-podcast="open_remove_podcast_dialog"
         />
-        <modal-dialog
+        <modal-dialog-action
           :show="show_remove_podcast_modal"
           :title="$t('page.podcast.remove-podcast')"
           :close_action="$t('page.podcast.cancel')"
@@ -61,7 +61,7 @@
               <b v-text="rss_playlist_to_remove.name" />)
             </p>
           </template>
-        </modal-dialog>
+        </modal-dialog-action>
       </template>
     </content-with-hero>
   </div>
@@ -72,7 +72,7 @@ import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
 
@@ -96,7 +96,7 @@ export default {
     ContentWithHero,
     CoverArtwork,
     ListTracks,
-    ModalDialog,
+    ModalDialogAction,
     ModalDialogAlbum
   },
 
@@ -147,5 +147,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 08b0d160..59445faf 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -22,9 +22,9 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.podcasts.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.podcasts.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.podcasts.count', { count: albums.total })"
         />
       </template>
@@ -145,5 +145,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index c71f1440..6a24092c 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.queue.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.queue.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.queue.count', { count: queue.count })"
         />
       </template>
@@ -51,12 +51,7 @@
         </div>
       </template>
       <template #content>
-        <draggable
-          v-model="queue_items"
-          handle=".handle"
-          item-key="id"
-          @end="move_item"
-        >
+        <draggable v-model="queue_items" item-key="id" @end="move_item">
           <template #item="{ element, index }">
             <list-item-queue-item
               :item="element"
@@ -208,5 +203,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index 072e92e4..5bb02bf5 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.radio.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.radio.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.radio.count', { count: tracks.total })"
         />
       </template>
@@ -48,5 +48,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 540acf04..792b1eec 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -9,7 +9,7 @@
                 <input
                   ref="search_field"
                   v-model="search_query"
-                  class="input is-rounded is-shadowless"
+                  class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.search.placeholder')"
                   autocomplete="off"
@@ -49,7 +49,7 @@
   </section>
   <tabs-search @search-library="search" @search-spotify="search_spotify" />
   <template v-for="[type, items] in results" :key="type">
-    <content-with-heading class="pt-0">
+    <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t(`page.search.${type}s`)" />
       </template>
@@ -60,7 +60,7 @@
         <nav v-if="show_all_button(items)" class="level">
           <p class="level-item">
             <a
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               @click="expand(type)"
               v-text="
                 $t(`page.search.show-${type}s`, items.total, {
@@ -226,5 +226,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 154b1bfb..8864e2e2 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -9,7 +9,7 @@
                 <input
                   ref="search_field"
                   v-model="search_query"
-                  class="input is-rounded is-shadowless"
+                  class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.spotify.search.placeholder')"
                   autocomplete="off"
@@ -32,7 +32,7 @@
   </section>
   <tabs-search @search-library="search_library" @search-spotify="search" />
   <template v-for="[type, items] in results" :key="type">
-    <content-with-heading class="pt-0">
+    <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t(`page.spotify.search.${type}s`)" />
       </template>
@@ -55,7 +55,7 @@
         <nav v-if="show_all_button(items)" class="level">
           <p class="level-item">
             <a
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               @click="expand(type)"
               v-text="
                 $t(`page.spotify.search.show-${type}s`, items.total, {
@@ -227,5 +227,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsArtwork.vue b/web-src/src/pages/PageSettingsArtwork.vue
index 903c5a8b..37aa944f 100644
--- a/web-src/src/pages/PageSettingsArtwork.vue
+++ b/web-src/src/pages/PageSettingsArtwork.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
@@ -10,24 +10,24 @@
           class="content"
           v-text="$t('page.settings.artwork.explanation-1')"
         />
-        <settings-checkbox category="artwork" name="streamurl_ignore">
+        <control-setting-switch category="artwork" name="streamurl_ignore">
           <template #label>
             <span v-text="$t('page.settings.artwork.streaming')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox
+        </control-setting-switch>
+        <control-setting-switch
           category="artwork"
           name="show_cover_artwork_in_album_lists"
         >
           <template #label>
             <span v-text="$t('page.settings.artwork.show-coverart')" />
           </template>
-        </settings-checkbox>
+        </control-setting-switch>
         <div
           class="content"
           v-text="$t('page.settings.artwork.explanation-2')"
         />
-        <settings-checkbox
+        <control-setting-switch
           v-if="spotify.spotify_logged_in"
           category="artwork"
           name="use_artwork_source_spotify"
@@ -38,16 +38,19 @@
               <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
-        </settings-checkbox>
-        <settings-checkbox category="artwork" name="use_artwork_source_discogs">
+        </control-setting-switch>
+        <control-setting-switch
+          category="artwork"
+          name="use_artwork_source_discogs"
+        >
           <template #label>
             <span v-text="$t('page.settings.artwork.discogs')" />
             <a href="https://www.discogs.com/" target="_blank">
               <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
-        </settings-checkbox>
-        <settings-checkbox
+        </control-setting-switch>
+        <control-setting-switch
           category="artwork"
           name="use_artwork_source_coverartarchive"
         >
@@ -57,7 +60,7 @@
               <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
-        </settings-checkbox>
+        </control-setting-switch>
       </template>
     </content-with-heading>
   </div>
@@ -65,13 +68,13 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
+import ControlSettingSwitch from '@/components/ControlSettingSwitch.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
 import { useServicesStore } from '@/stores/services'
 
 export default {
   name: 'PageSettingsArtwork',
-  components: { ContentWithHeading, SettingsCheckbox, TabsSettings },
+  components: { ContentWithHeading, ControlSettingSwitch, TabsSettings },
 
   setup() {
     return { servicesStore: useServicesStore() }
@@ -84,5 +87,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsOnlineServices.vue b/web-src/src/pages/PageSettingsOnlineServices.vue
index c87bd37c..7ef16b8e 100644
--- a/web-src/src/pages/PageSettingsOnlineServices.vue
+++ b/web-src/src/pages/PageSettingsOnlineServices.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
@@ -9,18 +9,19 @@
         />
       </template>
       <template #content>
-        <div v-if="!spotify.spotify_installed" class="notification is-size-7">
+        <div v-if="!spotify.spotify_installed" class="notification help">
           <p v-text="$t('page.settings.services.spotify.no-support')" />
         </div>
         <div v-if="spotify.spotify_installed">
-          <div class="notification is-size-7">
-            <span v-text="$t('page.settings.services.spotify.requirements')" />
-          </div>
-          <div class="mt-5">
+          <div>
             <p
               class="content"
               v-text="$t('page.settings.services.spotify.grant-access')"
             />
+            <div class="notification help">
+              <p v-text="$t('page.settings.services.spotify.requirements')" />
+              <p v-text="spotify_required_scope.join(', ')" />
+            </div>
             <p v-if="spotify.webapi_token_valid">
               <span v-text="$t('page.settings.services.spotify.user')" />
               <code v-text="spotify.webapi_user" />
@@ -29,25 +30,21 @@
               <span v-text="$t('page.settings.services.spotify.reauthorize')" />
               <code v-text="spotify_missing_scope.join()" />
             </p>
-            <div class="field mt-5">
+            <div
+              v-if="
+                !spotify.webapi_token_valid || spotify_missing_scope.length > 0
+              "
+              class="field"
+            >
               <div class="control">
                 <a
                   class="button"
-                  :class="{
-                    'is-info':
-                      !spotify.webapi_token_valid ||
-                      spotify_missing_scope.length > 0
-                  }"
                   :href="spotify.oauth_uri"
                   v-text="$t('page.settings.services.spotify.authorize')"
                 />
               </div>
             </div>
-            <p class="help">
-              <span v-text="$t('page.settings.services.spotify.scopes')" />
-              <code v-text="spotify_required_scope.join(', ')" />
-            </p>
-            <div v-if="spotify.webapi_token_valid" class="field mt-5">
+            <div v-if="spotify.webapi_token_valid" class="field">
               <div class="control">
                 <a
                   class="button is-danger"
@@ -204,5 +201,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsRemotesOutputs.vue b/web-src/src/pages/PageSettingsRemotesOutputs.vue
index 185752ee..a122b082 100644
--- a/web-src/src/pages/PageSettingsRemotesOutputs.vue
+++ b/web-src/src/pages/PageSettingsRemotesOutputs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
@@ -50,18 +50,14 @@
           v-text="$t('page.settings.devices.speaker-pairing-info')"
         />
         <div v-for="output in outputs" :key="output.id">
-          <div class="field">
-            <div class="control">
-              <input
-                :id="output.id"
-                v-model="output.selected"
-                type="checkbox"
-                class="switch is-rounded mr-2"
-                @change="output_toggle(output.id)"
-              />
-              <label :for="output.id" class="checkbox" v-text="output.name" />
-            </div>
-          </div>
+          <control-switch
+            v-model="output.selected"
+            @update:model-value="toggleOutput(output.id)"
+          >
+            <template #label>
+              <span v-text="output.name" />
+            </template>
+          </control-switch>
           <form
             v-if="output.needs_auth_key"
             class="mb-5"
@@ -94,6 +90,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
 import { useOutputsStore } from '@/stores/outputs'
 import { useRemotesStore } from '@/stores/remotes'
@@ -101,7 +98,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'PageSettingsRemotesOutputs',
-  components: { ContentWithHeading, TabsSettings },
+  components: { ContentWithHeading, ControlSwitch, TabsSettings },
 
   setup() {
     return { outputsStore: useOutputsStore(), remotesStore: useRemotesStore() }
@@ -127,14 +124,12 @@ export default {
     kickoff_pairing() {
       webapi.pairing_kickoff(this.pairing_req)
     },
-    kickoff_verification(outputId) {
-      webapi.output_update(outputId, this.verification_req)
+    kickoff_verification(identifier) {
+      webapi.output_update(identifier, this.verification_req)
     },
-    output_toggle(outputId) {
-      webapi.output_toggle(outputId)
+    toggleOutput(identifier) {
+      webapi.output_toggle(identifier)
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index 63343df9..70732fdb 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
@@ -25,50 +25,62 @@
           class="notification is-size-7"
           v-text="$t('page.settings.general.navigation-item-selection-info')"
         />
-        <settings-checkbox
+        <control-setting-switch
           category="webinterface"
           name="show_menu_item_playlists"
         >
           <template #label>
             <span v-text="$t('page.settings.general.playlists')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox category="webinterface" name="show_menu_item_music">
+        </control-setting-switch>
+        <control-setting-switch
+          category="webinterface"
+          name="show_menu_item_music"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.music')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox
+        </control-setting-switch>
+        <control-setting-switch
           category="webinterface"
           name="show_menu_item_podcasts"
         >
           <template #label>
             <span v-text="$t('page.settings.general.podcasts')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox
+        </control-setting-switch>
+        <control-setting-switch
           category="webinterface"
           name="show_menu_item_audiobooks"
         >
           <template #label>
             <span v-text="$t('page.settings.general.audiobooks')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox category="webinterface" name="show_menu_item_radio">
+        </control-setting-switch>
+        <control-setting-switch
+          category="webinterface"
+          name="show_menu_item_radio"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.radio')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox category="webinterface" name="show_menu_item_files">
+        </control-setting-switch>
+        <control-setting-switch
+          category="webinterface"
+          name="show_menu_item_files"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.files')" />
           </template>
-        </settings-checkbox>
-        <settings-checkbox category="webinterface" name="show_menu_item_search">
+        </control-setting-switch>
+        <control-setting-switch
+          category="webinterface"
+          name="show_menu_item_search"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.search')" />
           </template>
-        </settings-checkbox>
+        </control-setting-switch>
       </template>
     </content-with-heading>
     <content-with-heading>
@@ -79,18 +91,26 @@
         />
       </template>
       <template #content>
-        <settings-checkbox
+        <control-setting-switch
+          category="webinterface"
+          name="show_filepath_now_playing"
+        >
+          <template #label>
+            <span v-text="$t('page.settings.general.show-path')" />
+          </template>
+        </control-setting-switch>
+        <control-setting-switch
           category="webinterface"
           name="show_composer_now_playing"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-composer')" />
           </template>
-          <template #info>
+          <template #help>
             <span v-text="$t('page.settings.general.show-composer-info')" />
           </template>
-        </settings-checkbox>
-        <settings-textfield
+        </control-setting-switch>
+        <control-setting-text-field
           category="webinterface"
           name="show_composer_for_genre"
           :disabled="!settingsStore.show_composer_now_playing"
@@ -99,7 +119,7 @@
           <template #label>
             <span v-text="$t('page.settings.general.show-composer-genres')" />
           </template>
-          <template #info>
+          <template #help>
             <p
               class="help"
               v-text="$t('page.settings.general.show-composer-genres-info-1')"
@@ -113,15 +133,7 @@
               v-text="$t('page.settings.general.show-composer-genres-info-3')"
             />
           </template>
-        </settings-textfield>
-        <settings-checkbox
-          category="webinterface"
-          name="show_filepath_now_playing"
-        >
-          <template #label>
-            <span v-text="$t('page.settings.general.show-path')" />
-          </template>
-        </settings-checkbox>
+        </control-setting-text-field>
       </template>
     </content-with-heading>
     <content-with-heading>
@@ -132,13 +144,16 @@
         />
       </template>
       <template #content>
-        <settings-intfield category="webinterface" name="recently_added_limit">
+        <control-setting-integer-field
+          category="webinterface"
+          name="recently_added_limit"
+        >
           <template #label>
             <span
               v-text="$t('page.settings.general.recently-added-page-info')"
             />
           </template>
-        </settings-intfield>
+        </control-setting-integer-field>
       </template>
     </content-with-heading>
   </div>
@@ -147,9 +162,9 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
-import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
-import SettingsIntfield from '@/components/SettingsIntfield.vue'
-import SettingsTextfield from '@/components/SettingsTextfield.vue'
+import ControlSettingIntegerField from '@/components/ControlSettingIntegerField.vue'
+import ControlSettingSwitch from '@/components/ControlSettingSwitch.vue'
+import ControlSettingTextField from '@/components/ControlSettingTextField.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
 import { useSettingsStore } from '@/stores/settings'
 
@@ -158,9 +173,9 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
-    SettingsCheckbox,
-    SettingsIntfield,
-    SettingsTextfield,
+    ControlSettingIntegerField,
+    ControlSettingSwitch,
+    ControlSettingTextField,
     TabsSettings
   },
 
@@ -200,5 +215,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 726aa31f..d979dd0a 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -41,8 +41,7 @@ import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
 import { useUIStore } from '@/stores/ui'
 
-const TOP_WITH_TABS = 140
-const TOP_WITHOUT_TABS = 110
+const TOP_WITH_TABS = 100
 
 export const router = createRouter({
   history: createWebHashHistory(),
@@ -70,7 +69,7 @@ export const router = createRouter({
     },
     {
       component: PageAlbums,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-albums',
       path: '/music/albums'
     },
@@ -88,7 +87,7 @@ export const router = createRouter({
     },
     {
       component: PageArtists,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-artists',
       path: '/music/artists'
     },
@@ -106,7 +105,7 @@ export const router = createRouter({
     },
     {
       component: PageAudiobooksAlbums,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'audiobooks-albums',
       path: '/audiobooks/albums'
     },
@@ -118,13 +117,13 @@ export const router = createRouter({
     },
     {
       component: PageAudiobooksArtists,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'audiobooks-artists',
       path: '/audiobooks/artists'
     },
     {
       component: PageAudiobooksGenres,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'audiobooks-genres',
       path: '/audiobooks/genres'
     },
@@ -140,55 +139,55 @@ export const router = createRouter({
     },
     {
       component: PageMusic,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-history',
       path: '/music/history'
     },
     {
       component: PageMusicRecentlyAdded,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-recently-added',
       path: '/music/recently-added'
     },
     {
       component: PageMusicRecentlyPlayed,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-recently-played',
       path: '/music/recently-played'
     },
     {
       component: PageMusicSpotify,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-spotify',
       path: '/music/spotify'
     },
     {
       component: PageMusicSpotifyFeaturedPlaylists,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-spotify-featured-playlists',
       path: '/music/spotify/featured-playlists'
     },
     {
       component: PageMusicSpotifyNewReleases,
-      meta: { has_tabs: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-spotify-new-releases',
       path: '/music/spotify/new-releases'
     },
     {
       component: PageComposerAlbums,
-      meta: { has_index: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-composer-albums',
       path: '/music/composers/:name/albums'
     },
     {
       component: PageComposerTracks,
-      meta: { has_index: true, show_progress: true },
+      meta: { show_progress: true },
       name: 'music-composer-tracks',
       path: '/music/composers/:name/tracks'
     },
     {
       component: PageComposers,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-composers',
       path: '/music/composers'
     },
@@ -212,7 +211,7 @@ export const router = createRouter({
     },
     {
       component: PageGenres,
-      meta: { has_index: true, has_tabs: true, show_progress: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-genres',
       path: '/music/genres'
     },
@@ -313,30 +312,16 @@ export const router = createRouter({
        * Staying on the same page and jumping to an anchor (e. g. index nav)
        * As there is no transition, there is no timeout added
        */
-      const top = to.meta.has_tabs ? TOP_WITH_TABS : TOP_WITHOUT_TABS
-      return { behavior: 'smooth', el: to.hash, top }
+      return { behavior: 'smooth', el: to.hash, top: TOP_WITH_TABS }
     }
     if (to.hash) {
       // We are navigating to an anchor of a new page, add a timeout to let the transition effect finish before scrolling
       return new Promise((resolve, reject) => {
         setTimeout(() => {
-          resolve({ el: to.hash, top: 120 })
+          resolve({ el: to.hash, top: TOP_WITH_TABS })
         }, delay)
       })
     }
-    if (to.meta.has_index) {
-      /*
-       * Navigate to a page with index nav that should be hidden automatically
-       * If a tab navigation exists, an offset to the "top" anchor is added
-       */
-      return new Promise((resolve, reject) => {
-        const top = to.meta.has_tabs ? TOP_WITH_TABS : TOP_WITHOUT_TABS
-        setTimeout(() => {
-          resolve({ el: '#top', top })
-        }, delay)
-      })
-    }
-
     return { left: 0, top: 0 }
   }
 })
diff --git a/web-src/src/stores/settings.js b/web-src/src/stores/settings.js
index f39ff1f5..2b023172 100644
--- a/web-src/src/stores/settings.js
+++ b/web-src/src/stores/settings.js
@@ -13,8 +13,8 @@ export const useSettingsStore = defineStore('SettingsStore', {
       state.setting('webinterface', 'show_composer_now_playing')?.value ??
       false,
     show_cover_artwork_in_album_lists: (state) =>
-      state.setting('webinterface', 'show_cover_artwork_in_album_lists')
-        ?.value ?? false,
+      state.setting('artwork', 'show_cover_artwork_in_album_lists')?.value ??
+      false,
     show_filepath_now_playing: (state) =>
       state.setting('webinterface', 'show_filepath_now_playing')?.value ??
       false,
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 06eeae84..12d122c6 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -3,18 +3,18 @@
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
-          <section v-if="$slots.options">
-            <div ref="options" style="height: 1px" />
-            <slot name="options" />
-            <nav class="buttons is-centered mt-4 mb-2">
-              <router-link class="button is-small is-white" :to="position">
-                <mdicon class="icon is-small" :name="icon_name" size="16" />
-              </router-link>
-            </nav>
+          <section v-if="$slots.options" ref="options">
+            <div :class="{ 'is-hidden': hidden }">
+              <slot name="options" />
+            </div>
+            <div class="buttons is-centered">
+              <button class="button is-small" @click="hidden = !hidden">
+                <mdicon class="icon" :name="icon" size="16" />
+              </button>
+            </div>
           </section>
-          <div :class="{ 'is-full-height': $slots.options }">
-            <nav id="top" class="level is-clipped">
-              <!-- Left side -->
+          <div>
+            <nav class="level is-clipped">
               <div class="level-left is-flex-shrink-1">
                 <div
                   class="level-item is-flex-shrink-1 has-text-centered-mobile"
@@ -24,7 +24,6 @@
                   </div>
                 </div>
               </div>
-              <!-- Right side -->
               <div class="level-right has-text-centered-mobile">
                 <slot name="heading-right" />
               </div>
@@ -45,40 +44,13 @@ export default {
   name: 'ContentWithHeading',
   data() {
     return {
-      options_visible: false
+      hidden: true
     }
   },
   computed: {
-    icon_name() {
-      return this.options_visible ? 'chevron-up' : 'chevron-down'
-    },
-    position() {
-      return {
-        hash: this.options_visible ? '#top' : '#app',
-        query: this.$route.query
-      }
-    }
-  },
-  mounted() {
-    if (this.$slots.options) {
-      this.observer = new IntersectionObserver(this.onElementObserved, {
-        rootMargin: '-82px 0px 0px 0px',
-        threshold: 1.0
-      })
-      this.observer.observe(this.$refs.options)
-    }
-  },
-  methods: {
-    onElementObserved(entries) {
-      entries.forEach(({ isIntersecting }) => {
-        this.options_visible = isIntersecting
-      })
-    },
-    visibilityChanged(isVisible) {
-      this.options_visible = isVisible
+    icon() {
+      return this.hidden ? 'chevron-down' : 'chevron-up'
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index 2eb1a058..a2670937 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -6,13 +6,11 @@
           <div class="column is-four-fifths">
             <div class="columns is-flex-direction-row-reverse">
               <div class="column fd-has-cover">
-                <!-- Slot heading right -->
                 <slot name="heading-right" />
               </div>
               <div
                 class="column m-auto is-three-fifths has-text-centered-mobile"
               >
-                <!-- Slot heading left -->
                 <slot name="heading-left" />
               </div>
             </div>
@@ -36,5 +34,3 @@
 </template>
 
 <script></script>
-
-<style></style>