Update dependency globals to v16.5.0

Translated using Weblate (Spanish (Latin America))
Translation: Jellyfin/Jellyfin Web Translate-URL: https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es_419/
2025-12-31 18:52:04 +00:00 · 2025-12-31 04:05:52 +00:00 · 2025-12-31 02:05:52 +00:00 · 2025-12-29 17:05:52 +00:00 · 2025-12-29 15:05:52 +00:00 · 2025-12-29 15:05:52 +00:00
285 changed files with 9350 additions and 5001 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1,5 @@
 *               @jellyfin/web
+# Joshua must review all changes to bump_version
+bump_version    @joshuaboniface
+# Core must approve all changes within the repo config
+.github/        @jellyfin/core
--- a/.github/workflows/__codeql.yml
+++ b/.github/workflows/__codeql.yml
@@ -20,21 +20,21 @@ jobs:

    steps:
      - name: Checkout repository ⬇️
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ inputs.commit }}
          show-progress: false

      - name: Initialize CodeQL 🛠️
-        uses: github/codeql-action/init@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/init@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
        with:
          queries: security-and-quality
          languages: ${{ matrix.language }}

      - name: Autobuild 📦
-        uses: github/codeql-action/autobuild@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/autobuild@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4

      - name: Perform CodeQL Analysis 🧪
-        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/analyze@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
        with:
          category: '/language:${{matrix.language}}'
--- a/.github/workflows/__package.yml
+++ b/.github/workflows/__package.yml
@@ -14,7 +14,7 @@ jobs:

    steps:
      - name: Check out Git repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ inputs.commit || github.sha }}

--- a/.github/workflows/__quality_checks.yml
+++ b/.github/workflows/__quality_checks.yml
@@ -14,13 +14,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ inputs.commit }}
          show-progress: false

      - name: Scan
-        uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
+        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
        with:
          ## Workaround from https://github.com/actions/dependency-review-action/issues/456
          ## TODO: Remove when necessary
@@ -42,7 +42,7 @@ jobs:

    steps:
      - name: Checkout ⬇️
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ inputs.commit }}
          show-progress: false
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -80,7 +80,7 @@ jobs:
    
    steps:
      - name: Check out Git repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ github.event.pull_request.head.sha }}
    
@@ -95,6 +95,6 @@ jobs:
        run: npm ci --no-audit
    
      - name: Run eslint
-        uses: CatChen/eslint-suggestion-action@4dda35decf912ab18ea3e071acec2c6c2eda00b6 # v4.1.18
+        uses: CatChen/eslint-suggestion-action@4ee415529307a8ca0260b4a3775484802523e5af # v4.1.19
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -101,6 +101,8 @@
 - [diegoeche](https://github.com/diegoeche)
 - [Free O'Toole](https://github.com/freeotoole)
 - [TheBosZ](https://github.com/thebosz)
+- [qm3jp](https://github.com/qm3jp)
+- [johnnyg](https://github.com/johnnyg)

 ## Emby Contributors

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "jellyfin-web",
-  "version": "10.11.0",
+  "version": "10.12.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "jellyfin-web",
-      "version": "10.11.0",
+      "version": "10.12.0",
      "license": "GPL-2.0-or-later",
      "dependencies": {
        "@emotion/react": "11.14.0",
@@ -18,7 +18,7 @@
        "@fontsource/noto-sans-sc": "5.2.6",
        "@fontsource/noto-sans-tc": "5.2.6",
        "@jellyfin/libass-wasm": "4.2.3",
-        "@jellyfin/sdk": "0.0.0-unstable.202508300501",
+        "@jellyfin/sdk": "0.0.0-unstable.202512091852",
        "@jellyfin/ux-web": "1.0.0",
        "@mui/icons-material": "6.4.12",
        "@mui/material": "6.4.12",
@@ -40,7 +40,7 @@
        "flv.js": "1.6.2",
        "headroom.js": "0.12.0",
        "history": "5.3.0",
-        "hls.js": "1.6.9",
+        "hls.js": "1.6.13",
        "intersection-observer": "0.12.2",
        "jellyfin-apiclient": "1.11.0",
        "jquery": "3.7.1",
@@ -107,7 +107,7 @@
        "expose-loader": "5.0.1",
        "fast-glob": "3.3.3",
        "fork-ts-checker-webpack-plugin": "9.1.0",
-        "globals": "16.2.0",
+        "globals": "16.5.0",
        "html-loader": "5.1.0",
        "html-webpack-plugin": "5.6.3",
        "jsdom": "26.1.0",
@@ -129,6 +129,7 @@
        "ts-loader": "9.5.2",
        "typescript": "5.8.3",
        "typescript-eslint": "8.35.1",
+        "vite-tsconfig-paths": "5.1.4",
        "vitest": "3.2.4",
        "webpack": "5.99.9",
        "webpack-bundle-analyzer": "4.10.2",
@@ -139,7 +140,7 @@
      },
      "engines": {
        "node": ">=20.0.0",
-        "npm": ">=9.6.4",
+        "npm": ">=9.6.4 <11.0.0",
        "yarn": "YARN NO LONGER USED - use npm instead."
      },
      "optionalDependencies": {
@@ -4129,12 +4130,12 @@
      "license": "LGPL-2.1-or-later AND (FTL OR GPL-2.0-or-later) AND MIT AND MIT-Modern-Variant AND ISC AND NTP AND Zlib AND BSL-1.0"
    },
    "node_modules/@jellyfin/sdk": {
-      "version": "0.0.0-unstable.202508300501",
-      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202508300501.tgz",
-      "integrity": "sha512-7pYdZxIQn/JTPmkEGiYmiGFbJ8S/fgA1EATz+lhOxL4nsCzf7b53DfNcL7eiYsUOFFThmDwJspUt6Y9FnimPPA==",
+      "version": "0.0.0-unstable.202512091852",
+      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202512091852.tgz",
+      "integrity": "sha512-N+QEsrKk4KculkV6KMBb7XpzTLWcXEzqTHbS+b4rov0VYVwR6DIsJkmUzB3hM2YZsrLIHEFKhFRy/r4itkFeHw==",
      "license": "MPL-2.0",
      "peerDependencies": {
-        "axios": "^1.3.4"
+        "axios": "^1.12.0"
      }
    },
    "node_modules/@jellyfin/ux-web": {
@@ -7233,6 +7234,7 @@
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT",
      "peer": true
    },
    "node_modules/atob": {
@@ -7312,14 +7314,14 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.3.tgz",
-      "integrity": "sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
        "proxy-from-env": "^1.1.0"
      }
    },
@@ -8420,6 +8422,7 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
      "peer": true,
      "dependencies": {
        "delayed-stream": "~1.0.0"
@@ -9509,6 +9512,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=0.4.0"
@@ -11962,15 +11966,16 @@
      }
    },
    "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
        "mime-types": "^2.1.12"
      },
      "engines": {
@@ -12304,9 +12309,9 @@
      }
    },
    "node_modules/globals": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
-      "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -12364,6 +12369,13 @@
      "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
      "dev": true
    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/gonzales-pe": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -12620,9 +12632,9 @@
      }
    },
    "node_modules/hls.js": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.9.tgz",
-      "integrity": "sha512-q7qPrri6GRwjcNd7EkFCmhiJ6PBIxeUsdxKbquBkQZpg9jAnp6zSAeN9eEWFlOB09J8JfzAQGoXL5ZEAltjO9g==",
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz",
+      "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==",
      "license": "Apache-2.0"
    },
    "node_modules/hoist-non-react-statics": {
@@ -23182,6 +23194,27 @@
        "node": ">=8"
      }
    },
+    "node_modules/tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tsconfck": "bin/tsconfck.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/tsconfig-paths": {
      "version": "3.15.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -23832,6 +23865,26 @@
        "url": "https://opencollective.com/vitest"
      }
    },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/vite/node_modules/fdir": {
      "version": "6.4.4",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
@@ -27097,9 +27150,9 @@
      "integrity": "sha512-C0OlBxIr9NdeFESMTA/OVDqNSWtog6Mi7wwzwH12xbZpxsMD0RgCupUcIP7zZgcpTNecW3fZq5d6xVo7Q8HEJw=="
    },
    "@jellyfin/sdk": {
-      "version": "0.0.0-unstable.202508300501",
-      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202508300501.tgz",
-      "integrity": "sha512-7pYdZxIQn/JTPmkEGiYmiGFbJ8S/fgA1EATz+lhOxL4nsCzf7b53DfNcL7eiYsUOFFThmDwJspUt6Y9FnimPPA==",
+      "version": "0.0.0-unstable.202512091852",
+      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202512091852.tgz",
+      "integrity": "sha512-N+QEsrKk4KculkV6KMBb7XpzTLWcXEzqTHbS+b4rov0VYVwR6DIsJkmUzB3hM2YZsrLIHEFKhFRy/r4itkFeHw==",
      "requires": {}
    },
    "@jellyfin/ux-web": {
@@ -29097,13 +29150,13 @@
      "dev": true
    },
    "axios": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.3.tgz",
-      "integrity": "sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
      "peer": true,
      "requires": {
        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
        "proxy-from-env": "^1.1.0"
      }
    },
@@ -32390,14 +32443,15 @@
      }
    },
    "form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
      "peer": true,
      "requires": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
        "mime-types": "^2.1.12"
      }
    },
@@ -32636,9 +32690,9 @@
      }
    },
    "globals": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
-      "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
      "dev": true
    },
    "globalthis": {
@@ -32678,6 +32732,12 @@
      "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
      "dev": true
    },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
    "gonzales-pe": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -32859,9 +32919,9 @@
      }
    },
    "hls.js": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.9.tgz",
-      "integrity": "sha512-q7qPrri6GRwjcNd7EkFCmhiJ6PBIxeUsdxKbquBkQZpg9jAnp6zSAeN9eEWFlOB09J8JfzAQGoXL5ZEAltjO9g=="
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz",
+      "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA=="
    },
    "hoist-non-react-statics": {
      "version": "3.3.2",
@@ -40112,6 +40172,13 @@
        }
      }
    },
+    "tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "dev": true,
+      "requires": {}
+    },
    "tsconfig-paths": {
      "version": "3.15.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -40553,6 +40620,17 @@
        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
      }
    },
+    "vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      }
+    },
    "vitest": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jellyfin-web",
-  "version": "10.11.0",
+  "version": "10.12.0",
  "description": "Web interface for Jellyfin",
  "repository": "https://github.com/jellyfin/jellyfin-web",
  "license": "GPL-2.0-or-later",
@@ -44,7 +44,7 @@
    "expose-loader": "5.0.1",
    "fast-glob": "3.3.3",
    "fork-ts-checker-webpack-plugin": "9.1.0",
-    "globals": "16.2.0",
+    "globals": "16.5.0",
    "html-loader": "5.1.0",
    "html-webpack-plugin": "5.6.3",
    "jsdom": "26.1.0",
@@ -66,6 +66,7 @@
    "ts-loader": "9.5.2",
    "typescript": "5.8.3",
    "typescript-eslint": "8.35.1",
+    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack": "5.99.9",
    "webpack-bundle-analyzer": "4.10.2",
@@ -84,7 +85,7 @@
    "@fontsource/noto-sans-sc": "5.2.6",
    "@fontsource/noto-sans-tc": "5.2.6",
    "@jellyfin/libass-wasm": "4.2.3",
-    "@jellyfin/sdk": "0.0.0-unstable.202508300501",
+    "@jellyfin/sdk": "0.0.0-unstable.202512091852",
    "@jellyfin/ux-web": "1.0.0",
    "@mui/icons-material": "6.4.12",
    "@mui/material": "6.4.12",
@@ -106,7 +107,7 @@
    "flv.js": "1.6.2",
    "headroom.js": "0.12.0",
    "history": "5.3.0",
-    "hls.js": "1.6.9",
+    "hls.js": "1.6.13",
    "intersection-observer": "0.12.2",
    "jellyfin-apiclient": "1.11.0",
    "jquery": "3.7.1",
@@ -161,14 +162,14 @@
    "build:check": "tsc --noEmit",
    "build:es-check": "npm run build:production && npm run escheck",
    "escheck": "es-check",
-    "lint": "eslint \"./\"",
+    "lint": "eslint",
    "test": "vitest --watch=false --config vite.config.ts",
    "test:watch": "vitest --config vite.config.ts",
    "stylelint": "stylelint \"src/**/*.{css,scss}\""
  },
  "engines": {
    "node": ">=20.0.0",
-    "npm": ">=9.6.4",
+    "npm": ">=9.6.4 <11.0.0",
    "yarn": "YARN NO LONGER USED - use npm instead."
  }
 }
--- a/src/RootAppRouter.tsx
+++ b/src/RootAppRouter.tsx
@@ -13,12 +13,16 @@ import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
 import { WIZARD_APP_ROUTES } from 'apps/wizard/routes/routes';
 import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
+import { SETTING_KEY as LAYOUT_SETTING_KEY } from 'components/layoutManager';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import appTheme from 'themes/themes';
+import { LayoutMode } from 'constants/layoutMode';
+import browser from 'scripts/browser';
+import appTheme from 'themes';
+import { ThemeStorageManager } from 'themes/themeStorageManager';

-const layoutMode = localStorage.getItem('layout');
-const isExperimentalLayout = layoutMode === 'experimental';
+const layoutMode = browser.tv ? LayoutMode.Tv : localStorage.getItem(LAYOUT_SETTING_KEY);
+const isExperimentalLayout = !layoutMode || layoutMode === LayoutMode.Experimental;

 const router = createHashRouter([
    {
@@ -54,8 +58,7 @@ function RootAppLayout() {
        <ThemeProvider
            theme={appTheme}
            defaultMode='dark'
-            // Disable mui's default saving to local storage
-            storageManager={null}
+            storageManager={ThemeStorageManager}
        >
            <Backdrop />
            <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
--- a/src/apiclient.d.ts
+++ b/src/apiclient.d.ts
@@ -136,6 +136,7 @@ declare module 'jellyfin-apiclient' {
        getInstantMixFromItem(itemId: string, options?: any): Promise<BaseItemDtoQueryResult>;
        getIntros(itemId: string): Promise<BaseItemDtoQueryResult>;
        getItemCounts(userId?: string): Promise<ItemCounts>;
+        /** @deprecated This function returns a URL with a legacy auth parameter.*/
        getItemDownloadUrl(itemId: string): string;
        getItemImageInfos(itemId: string): Promise<ImageInfo[]>;
        getItems(userId: string, options?: any): Promise<BaseItemDtoQueryResult>;
--- a/src/apps/dashboard/components/AppTabs.tsx
+++ b/src/apps/dashboard/components/AppTabs.tsx
@@ -7,7 +7,7 @@ import isEqual from 'lodash-es/isEqual';
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';

-import { EventType } from 'types/eventType';
+import { EventType } from 'constants/eventType';
 import Events, { type Event } from 'utils/events';

 interface AppTabsParams {
--- a/src/apps/dashboard/components/BaseCard.tsx
+++ b/src/apps/dashboard/components/BaseCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -13,7 +13,6 @@ import { Link, To } from 'react-router-dom';

 interface BaseCardProps {
    title?: string;
-    secondaryTitle?: string;
    text?: string;
    image?: string | null;
    icon?: React.ReactNode;
@@ -22,15 +21,30 @@ interface BaseCardProps {
    action?: boolean;
    actionRef?: React.MutableRefObject<HTMLButtonElement | null>;
    onActionClick?: () => void;
+    height?: number;
+    width?: number;
 };

-const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, action, actionRef, onActionClick }: BaseCardProps) => {
+const BaseCard = ({
+    title,
+    text,
+    image,
+    icon,
+    to,
+    onClick,
+    action,
+    actionRef,
+    onActionClick,
+    height,
+    width
+}: BaseCardProps) => {
    return (
        <Card
            sx={{
                display: 'flex',
                flexDirection: 'column',
-                height: 240
+                height: height || 240,
+                width: width
            }}
        >
            <CardActionArea
@@ -62,30 +76,44 @@ const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, actio
                    </Box>
                )}
            </CardActionArea>
-            <CardHeader
-                title={
-                    <Stack direction='row' spacing={1} alignItems='center'>
-                        <Typography sx={{
+            <CardContent
+                sx={{
+                    minHeight: 50,
+                    '&:last-child': {
+                        paddingBottom: 2,
+                        paddingRight: 1
+                    }
+                }}>
+                <Stack flexGrow={1} direction='row'>
+                    <Stack flexGrow={1}>
+                        <Typography gutterBottom sx={{
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}>
                            {title}
                        </Typography>
-                        {secondaryTitle && (
-                            <Typography variant='body2' color='text.secondary'>{secondaryTitle}</Typography>
+                        {text && (
+                            <Typography
+                                variant='body2'
+                                color='text.secondary'
+                                sx={{
+                                    lineBreak: 'anywhere'
+                                }}
+                            >
+                                {text}
+                            </Typography>
                        )}
                    </Stack>
-                }
-                subheader={text}
-                action={
-                    action ? (
-                        <IconButton ref={actionRef} onClick={onActionClick}>
-                            <MoreVertIcon />
-                        </IconButton>
-                    ) : null
-                }
-            />
+                    <Box>
+                        {action ? (
+                            <IconButton ref={actionRef} onClick={onActionClick}>
+                                <MoreVertIcon />
+                            </IconButton>
+                        ) : null}
+                    </Box>
+                </Stack>
+            </CardContent>
        </Card>
    );
 };
--- a/src/apps/dashboard/components/Toast.tsx
+++ b/src/apps/dashboard/components/Toast.tsx
@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
+const Toast = (props: SnackbarProps) => {
+    const onCloseClick = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        props.onClose?.(e, 'clickaway');
+    }, [ props ]);
+
+    const action = (
+        <IconButton
+            size='small'
+            color='inherit'
+            onClick={onCloseClick}
+        >
+            <CloseIcon fontSize='small' />
+        </IconButton>
+    );
+
+    return (
+        <Snackbar
+            autoHideDuration={3300}
+            action={action}
+            { ...props }
+        />
+    );
+};
+
+export default Toast;
--- a/src/apps/dashboard/components/table/TablePage.tsx
+++ b/src/apps/dashboard/components/table/TablePage.tsx
@@ -1,7 +1,8 @@
 import Box from '@mui/material/Box/Box';
 import Stack from '@mui/material/Stack/Stack';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 import Typography from '@mui/material/Typography/Typography';
-import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
+import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions, MaterialReactTable } from 'material-react-table';
 import React from 'react';

 import Page, { type PageProps } from 'components/Page';
@@ -12,7 +13,7 @@ interface TablePageProps<T extends MRT_RowData> extends PageProps {
    table: MRT_TableInstance<T>
 }

-export const DEFAULT_TABLE_OPTIONS = {
+export const DEFAULT_TABLE_OPTIONS: Partial<MRT_TableOptions<MRT_RowData>> = {
    // Enable custom features
    enableColumnPinning: true,
    enableColumnResizing: true,
--- a/src/apps/dashboard/components/widgets/ActivityLogWidget.tsx
+++ b/src/apps/dashboard/components/widgets/ActivityLogWidget.tsx
@@ -39,6 +39,7 @@ const ActivityLogWidget = () => {
                            key={entry.Id}
                            item={entry}
                            displayShortOverview={true}
+                            to='/dashboard/activity?useractivity=true'
                        />
                    ))}
                </List>
--- a/src/apps/dashboard/components/widgets/AlertsLogWidget.tsx
+++ b/src/apps/dashboard/components/widgets/AlertsLogWidget.tsx
@@ -31,6 +31,7 @@ const AlertsLogWidget = () => {
                        key={entry.Id}
                        item={entry}
                        displayShortOverview={false}
+                        to='/dashboard/activity?useractivity=false'
                    />
                ))}
            </List>
--- a/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
+++ b/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
@@ -5,13 +5,14 @@ import MusicNote from '@mui/icons-material/MusicNote';
 import MusicVideo from '@mui/icons-material/MusicVideo';
 import Tv from '@mui/icons-material/Tv';
 import VideoLibrary from '@mui/icons-material/VideoLibrary';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import SvgIcon from '@mui/material/SvgIcon';
 import React, { useMemo } from 'react';

 import { useItemCounts } from 'apps/dashboard/features/metrics/api/useItemCounts';
 import MetricCard, { type MetricCardProps } from 'apps/dashboard/features/metrics/components/MetricCard';
 import globalize from 'lib/globalize';
+import Box from '@mui/material/Box';

 interface MetricDefinition {
    key: keyof ItemCounts
@@ -75,23 +76,27 @@ const ItemCountsWidget = () => {
    }, [ counts, isPending ]);

    return (
-        <Grid
-            container
-            spacing={2}
-            sx={{
-                alignItems: 'stretch',
-                marginTop: 2
-            }}
-        >
-            {cards.map(card => (
-                <Grid
-                    key={card.metrics.map(metric => metric.label).join('-')}
-                    size={{ xs: 12, sm: 6, lg: 4 }}
-                >
-                    <MetricCard {...card} />
-                </Grid>
-            ))}
-        </Grid>
+        <Box>
+            <Grid
+                container
+                spacing={2}
+                sx={{
+                    alignItems: 'stretch'
+                }}
+            >
+                {cards.map(card => (
+                    <Grid
+                        key={card.metrics.map(metric => metric.label).join('-')}
+                        item
+                        xs={12}
+                        sm={6}
+                        lg={4}
+                    >
+                        <MetricCard {...card} />
+                    </Grid>
+                ))}
+            </Grid>
+        </Box>
    );
 };

--- a/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
+++ b/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
@@ -15,9 +15,15 @@ type ServerInfoWidgetProps = {
    onScanLibrariesClick?: () => void;
    onRestartClick?: () => void;
    onShutdownClick?: () => void;
+    isScanning?: boolean;
 };

-const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClick }: ServerInfoWidgetProps) => {
+const ServerInfoWidget = ({
+    onScanLibrariesClick,
+    onRestartClick,
+    onShutdownClick,
+    isScanning
+}: ServerInfoWidgetProps) => {
    const { data: systemInfo, isPending } = useSystemInfo();

    return (
@@ -63,6 +69,7 @@ const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClic
                        sx={{
                            fontWeight: 'bold'
                        }}
+                        disabled={isScanning}
                    >
                        {globalize.translate('ButtonScanAllLibraries')}
                    </Button>
--- a/src/apps/dashboard/constants/helpLinks.ts
+++ b/src/apps/dashboard/constants/helpLinks.ts
@@ -47,5 +47,8 @@ export const HelpLinks = [
            '/dashboard/users/profile'
        ],
        url: 'https://jellyfin.org/docs/general/server/users/'
+    }, {
+        paths: ['/dashboard/backups'],
+        url: 'https://jellyfin.org/docs/general/administration/backup-and-restore/'
    }
 ];
--- a/src/apps/dashboard/controllers/library.html
+++ b/src/apps/dashboard/controllers/library.html
@@ -1,14 +0,0 @@
-<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage librarySectionPage fullWidthContent" data-title="${HeaderLibraries}">
-    <div>
-        <div class="content-primary">
-            <div class="padded-top padded-bottom">
-                <button is="emby-button" type="button" class="raised btnRefresh">
-                    <span>${ButtonScanAllLibraries}</span>
-                </button>
-                <progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
-            </div>
-
-            <div id="divVirtualFolders"></div>
-        </div>
-    </div>
-</div>
--- a/src/apps/dashboard/controllers/library.js
+++ b/src/apps/dashboard/controllers/library.js
@@ -1,383 +0,0 @@
-import escapeHtml from 'escape-html';
-
-import taskButton from 'scripts/taskbutton';
-import loading from 'components/loading/loading';
-import globalize from 'lib/globalize';
-import dom from 'utils/dom';
-import imageHelper from 'utils/image';
-import 'components/cardbuilder/card.scss';
-import 'elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
-import { pageClassOn, pageIdOn } from 'utils/dashboard';
-import confirm from 'components/confirm/confirm';
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
-
-function addVirtualFolder(page) {
-    import('components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
-        new MediaLibraryCreator({
-            collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
-                return !f.hidden;
-            }),
-            refresh: shouldRefreshLibraryAfterChanges(page)
-        }).then(function (hasChanges) {
-            if (hasChanges) {
-                reloadLibrary(page);
-            }
-        });
-    });
-}
-
-function editVirtualFolder(page, virtualFolder) {
-    import('components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
-        new MediaLibraryEditor({
-            refresh: shouldRefreshLibraryAfterChanges(page),
-            library: virtualFolder
-        }).then(function (hasChanges) {
-            if (hasChanges) {
-                reloadLibrary(page);
-            }
-        });
-    });
-}
-
-function deleteVirtualFolder(page, virtualFolder) {
-    let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
-
-    if (virtualFolder.Locations.length) {
-        msg += '<br/><br/>' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '<br/><br/>';
-        msg += virtualFolder.Locations.join('<br/>');
-    }
-
-    confirm({
-        text: msg,
-        title: globalize.translate('HeaderRemoveMediaFolder'),
-        confirmText: globalize.translate('Delete'),
-        primary: 'delete'
-    }).then(function () {
-        const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
-        ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {
-            reloadLibrary(page);
-        });
-    });
-}
-
-function refreshVirtualFolder(page, virtualFolder) {
-    import('components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
-        new RefreshDialog({
-            itemIds: [virtualFolder.ItemId],
-            serverId: ApiClient.serverId(),
-            mode: 'scan'
-        }).show();
-    });
-}
-
-function renameVirtualFolder(page, virtualFolder) {
-    import('components/prompt/prompt').then(({ default: prompt }) => {
-        prompt({
-            label: globalize.translate('LabelNewName'),
-            description: globalize.translate('MessageRenameMediaFolder'),
-            confirmText: globalize.translate('ButtonRename')
-        }).then(function (newName) {
-            if (newName && newName != virtualFolder.Name) {
-                const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
-                ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () {
-                    reloadLibrary(page);
-                });
-            }
-        });
-    });
-}
-
-function showCardMenu(page, elem, virtualFolders) {
-    const card = dom.parentWithClass(elem, 'card');
-    const index = parseInt(card.getAttribute('data-index'), 10);
-    const virtualFolder = virtualFolders[index];
-    const menuItems = [];
-    menuItems.push({
-        name: globalize.translate('EditImages'),
-        id: 'editimages',
-        icon: 'photo'
-    });
-    menuItems.push({
-        name: globalize.translate('ManageLibrary'),
-        id: 'edit',
-        icon: 'folder'
-    });
-    menuItems.push({
-        name: globalize.translate('ButtonRename'),
-        id: 'rename',
-        icon: 'mode_edit'
-    });
-    menuItems.push({
-        name: globalize.translate('ScanLibrary'),
-        id: 'refresh',
-        icon: 'refresh'
-    });
-    menuItems.push({
-        name: globalize.translate('ButtonRemove'),
-        id: 'delete',
-        icon: 'delete'
-    });
-
-    import('components/actionSheet/actionSheet').then((actionsheet) => {
-        actionsheet.show({
-            items: menuItems,
-            positionTo: elem,
-            callback: function (resultId) {
-                switch (resultId) {
-                    case 'edit':
-                        editVirtualFolder(page, virtualFolder);
-                        break;
-
-                    case 'editimages':
-                        editImages(page, virtualFolder);
-                        break;
-
-                    case 'rename':
-                        renameVirtualFolder(page, virtualFolder);
-                        break;
-
-                    case 'delete':
-                        deleteVirtualFolder(page, virtualFolder);
-                        break;
-
-                    case 'refresh':
-                        refreshVirtualFolder(page, virtualFolder);
-                }
-            }
-        });
-    });
-}
-
-function reloadLibrary(page) {
-    loading.show();
-    ApiClient.getVirtualFolders().then(function (result) {
-        reloadVirtualFolders(page, result);
-    });
-}
-
-function shouldRefreshLibraryAfterChanges(page) {
-    return page.id === 'mediaLibraryPage';
-}
-
-function reloadVirtualFolders(page, virtualFolders) {
-    let html = '';
-    virtualFolders.push({
-        Name: globalize.translate('ButtonAddMediaLibrary'),
-        icon: 'add_circle',
-        Locations: [],
-        showType: false,
-        showLocations: false,
-        showMenu: false,
-        showNameWithIcon: false,
-        elementId: 'addLibrary'
-    });
-
-    for (let i = 0; i < virtualFolders.length; i++) {
-        const virtualFolder = virtualFolders[i];
-        html += getVirtualFolderHtml(page, virtualFolder, i);
-    }
-
-    const divVirtualFolders = page.querySelector('#divVirtualFolders');
-    divVirtualFolders.innerHTML = html;
-    divVirtualFolders.classList.add('itemsContainer');
-    divVirtualFolders.classList.add('vertical-wrap');
-    const btnCardMenuElements = divVirtualFolders.querySelectorAll('.btnCardMenu');
-    btnCardMenuElements.forEach(function (btn) {
-        btn.addEventListener('click', function () {
-            showCardMenu(page, btn, virtualFolders);
-        });
-    });
-    divVirtualFolders.querySelector('#addLibrary').addEventListener('click', function () {
-        addVirtualFolder(page);
-    });
-
-    const libraryEditElements = divVirtualFolders.querySelectorAll('.editLibrary');
-    libraryEditElements.forEach(function (btn) {
-        btn.addEventListener('click', function () {
-            const card = dom.parentWithClass(btn, 'card');
-            const index = parseInt(card.getAttribute('data-index'), 10);
-            const virtualFolder = virtualFolders[index];
-
-            if (virtualFolder.ItemId) {
-                editVirtualFolder(page, virtualFolder);
-            }
-        });
-    });
-    loading.hide();
-}
-
-function editImages(page, virtualFolder) {
-    import('components/imageeditor/imageeditor').then((imageEditor) => {
-        imageEditor.show({
-            itemId: virtualFolder.ItemId,
-            serverId: ApiClient.serverId()
-        }).then(function () {
-            reloadLibrary(page);
-        });
-    });
-}
-
-function getLink(text, url) {
-    return globalize.translate(text, '<a is="emby-linkbutton" class="button-link" href="' + url + '" target="_blank" data-autohide="true">', '</a>');
-}
-
-function getCollectionTypeOptions() {
-    return [{
-        name: '',
-        value: ''
-    }, {
-        name: globalize.translate('Movies'),
-        value: 'movies',
-        message: getLink('MovieLibraryHelp', 'https://jellyfin.org/docs/general/server/media/movies')
-    }, {
-        name: globalize.translate('TabMusic'),
-        value: 'music',
-        message: getLink('MusicLibraryHelp', 'https://jellyfin.org/docs/general/server/media/music')
-    }, {
-        name: globalize.translate('Shows'),
-        value: 'tvshows',
-        message: getLink('TvLibraryHelp', 'https://jellyfin.org/docs/general/server/media/shows')
-    }, {
-        name: globalize.translate('Books'),
-        value: 'books',
-        message: getLink('BookLibraryHelp', 'https://jellyfin.org/docs/general/server/media/books')
-    }, {
-        name: globalize.translate('HomeVideosPhotos'),
-        value: 'homevideos'
-    }, {
-        name: globalize.translate('MusicVideos'),
-        value: 'musicvideos'
-    }, {
-        name: globalize.translate('MixedMoviesShows'),
-        value: 'mixed',
-        message: globalize.translate('MessageUnsetContentHelp')
-    }];
-}
-
-function getVirtualFolderHtml(page, virtualFolder, index) {
-    let html = '';
-
-    const elementId = virtualFolder.elementId ? `id="${virtualFolder.elementId}" ` : '';
-    html += '<div ' + elementId + 'class="card backdropCard scalableCard backdropCard-scalable" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
-
-    html += '<div class="cardBox visualCardBox">';
-    html += '<div class="cardScalable visualCardBox-cardScalable">';
-    html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += '<div class="cardContent">';
-    let imgUrl = '';
-
-    if (virtualFolder.PrimaryImageItemId) {
-        imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
-            maxWidth: Math.round(dom.getScreenWidth() * 0.40),
-            type: 'Primary'
-        });
-    }
-
-    let hasCardImageContainer;
-
-    if (imgUrl) {
-        html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : getDefaultBackgroundClass()}" style="cursor:pointer">`;
-        html += `<img src="${imgUrl}" style="width:100%" />`;
-        hasCardImageContainer = true;
-    } else if (!virtualFolder.showNameWithIcon) {
-        html += `<div class="cardImageContainer editLibrary ${getDefaultBackgroundClass()}" style="cursor:pointer;">`;
-        html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '" aria-hidden="true"></span>';
-        hasCardImageContainer = true;
-    }
-
-    if (hasCardImageContainer) {
-        html += '<div class="cardIndicators backdropCardIndicators">';
-        html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && virtualFolder.RefreshStatus !== 'Idle' ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
-        html += '</div>';
-        html += '</div>';
-    }
-
-    if (!imgUrl && virtualFolder.showNameWithIcon) {
-        html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
-        html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '" aria-hidden="true"></span>';
-
-        if (virtualFolder.showNameWithIcon) {
-            html += '<div style="margin:1em 0;position:width:100%;">';
-            html += escapeHtml(virtualFolder.Name);
-            html += '</div>';
-        }
-
-        html += '</h3>';
-    }
-
-    html += '</div>';
-    html += '</div>';
-    html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
-
-    if (virtualFolder.showMenu !== false) {
-        const dirTextAlign = globalize.getIsRTL() ? 'left' : 'right';
-        html += '<div style="text-align:' + dirTextAlign + '; float:' + dirTextAlign + ';padding-top:5px;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
-        html += '</div>';
-    }
-
-    html += "<div class='cardText'>";
-
-    if (virtualFolder.showNameWithIcon) {
-        html += '&nbsp;';
-    } else {
-        html += escapeHtml(virtualFolder.Name);
-    }
-
-    html += '</div>';
-    let typeName = getCollectionTypeOptions().filter(function (t) {
-        return t.value == virtualFolder.CollectionType;
-    })[0];
-    typeName = typeName ? typeName.name : globalize.translate('Other');
-    html += "<div class='cardText cardText-secondary'>";
-
-    if (virtualFolder.showType === false) {
-        html += '&nbsp;';
-    } else {
-        html += typeName;
-    }
-
-    html += '</div>';
-
-    if (virtualFolder.showLocations === false) {
-        html += "<div class='cardText cardText-secondary'>";
-        html += '&nbsp;';
-        html += '</div>';
-    } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
-        html += "<div class='cardText cardText-secondary' dir='ltr' style='text-align:left;'>";
-        html += virtualFolder.Locations[0];
-        html += '</div>';
-    } else {
-        html += "<div class='cardText cardText-secondary'>";
-        html += globalize.translate('NumLocationsValue', virtualFolder.Locations.length);
-        html += '</div>';
-    }
-
-    html += '</div>';
-    html += '</div>';
-    html += '</div>';
-    return html;
-}
-
-pageClassOn('pageshow', 'mediaLibraryPage', function () {
-    reloadLibrary(this);
-});
-pageIdOn('pageshow', 'mediaLibraryPage', function () {
-    const page = this;
-    taskButton({
-        mode: 'on',
-        progressElem: page.querySelector('.refreshProgress'),
-        taskKey: 'RefreshLibrary',
-        button: page.querySelector('.btnRefresh')
-    });
-});
-pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
-    const page = this;
-    taskButton({
-        mode: 'off',
-        progressElem: page.querySelector('.refreshProgress'),
-        taskKey: 'RefreshLibrary',
-        button: page.querySelector('.btnRefresh')
-    });
-});
-
--- a/src/apps/dashboard/controllers/livetvstatus.html
+++ b/src/apps/dashboard/controllers/livetvstatus.html
@@ -1,40 +0,0 @@
-<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage" data-title="${LiveTV}">
-    <div>
-        <div class="content-primary">
-            <div class="verticalSection verticalSection-extrabottompadding">
-                <div class="verticalSection verticalSection-extrabottompadding">
-                    <div class="sectionTitleContainer sectionTitleContainer-cards">
-                        <h2 class="sectionTitle sectionTitle-cards">
-                            <span>${HeaderTunerDevices}</span>
-                        </h2>
-                        <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
-                            <span class="material-icons add" aria-hidden="true"></span>
-                        </button>
-                    </div>
-                    <div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
-                </div>
-            </div>
-
-            <div class="readOnlyContent">
-                <div class="verticalSection">
-                    <div class="sectionTitleContainer">
-                        <h2 class="sectionTitle">${HeaderGuideProviders}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${Add}">
-                            <span class="material-icons add" aria-hidden="true"></span>
-                        </button>
-                    </div>
-
-                    <div class="providerList">
-                    </div>
-
-                    <div>
-                        <button is="emby-button" type="button" class="raised btnRefresh block button-cancel">
-                            <span>${ButtonRefreshGuideData}</span>
-                        </button>
-                        <progress max="100" min="0" style="width: 100%;" class="refreshGuideProgress"></progress>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
--- a/src/apps/dashboard/controllers/livetvstatus.js
+++ b/src/apps/dashboard/controllers/livetvstatus.js
@@ -1,338 +0,0 @@
-import 'jquery';
-
-import globalize from 'lib/globalize';
-import taskButton from 'scripts/taskbutton';
-import dom from 'utils/dom';
-import layoutManager from 'components/layoutManager';
-import loading from 'components/loading/loading';
-import browser from 'scripts/browser';
-import 'components/listview/listview.scss';
-import 'styles/flexstyles.scss';
-import 'elements/emby-itemscontainer/emby-itemscontainer';
-import 'components/cardbuilder/card.scss';
-import 'material-design-icons-iconfont';
-import 'elements/emby-button/emby-button';
-import Dashboard from 'utils/dashboard';
-import confirm from 'components/confirm/confirm';
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
-
-const enableFocusTransform = !browser.slow && !browser.edge;
-
-function getDeviceHtml(device) {
-    const padderClass = 'cardPadder-backdrop';
-    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
-    const cardBoxCssClass = 'cardBox visualCardBox';
-    let html = '';
-
-    // TODO move card creation code to Card component
-
-    if (layoutManager.tv) {
-        cssClass += ' show-focus';
-
-        if (enableFocusTransform) {
-            cssClass += ' show-animation';
-        }
-    }
-
-    html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
-    html += '<div class="' + cardBoxCssClass + '">';
-    html += '<div class="cardScalable visualCardBox-cardScalable">';
-    html += '<div class="' + padderClass + '"></div>';
-    html += '<div class="cardContent searchImage">';
-    html += `<div class="cardImageContainer coveredImage ${getDefaultBackgroundClass()}"><span class="cardImageIcon material-icons dvr" aria-hidden="true"></span></div>`;
-    html += '</div>';
-    html += '</div>';
-    html += '<div class="cardFooter visualCardBox-cardFooter">';
-    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
-    html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
-    html += '<div class="cardText cardText-secondary">';
-    html += device.Url || '&nbsp;';
-    html += '</div>';
-    html += '</div>';
-    html += '</div>';
-    html += '</div>';
-    return html;
-}
-
-function renderDevices(page, devices) {
-    page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
-}
-
-function deleteDevice(page, id) {
-    const message = globalize.translate('MessageConfirmDeleteTunerDevice');
-
-    confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
-        loading.show();
-        ApiClient.ajax({
-            type: 'DELETE',
-            url: ApiClient.getUrl('LiveTv/TunerHosts', {
-                Id: id
-            })
-        }).then(function () {
-            reload(page);
-        });
-    });
-}
-
-function reload(page) {
-    loading.show();
-    ApiClient.getNamedConfiguration('livetv').then(function (config) {
-        renderDevices(page, config.TunerHosts);
-        renderProviders(page, config.ListingProviders);
-    });
-    loading.hide();
-}
-
-function submitAddDeviceForm(page) {
-    page.querySelector('.dlgAddDevice').close();
-    loading.show();
-    ApiClient.ajax({
-        type: 'POST',
-        url: ApiClient.getUrl('LiveTv/TunerHosts'),
-        data: JSON.stringify({
-            Type: page.querySelector('#selectTunerDeviceType').value,
-            Url: page.querySelector('#txtDevicePath').value
-        }),
-        contentType: 'application/json'
-    }).then(function () {
-        reload(page);
-    }, function () {
-        Dashboard.alert({
-            message: globalize.translate('ErrorAddingTunerDevice')
-        });
-    });
-}
-
-function renderProviders(page, providers) {
-    let html = '';
-
-    if (providers.length) {
-        html += '<div class="paperList">';
-
-        for (let i = 0, length = providers.length; i < length; i++) {
-            const provider = providers[i];
-            html += '<div class="listItem">';
-            html += '<span class="listItemIcon material-icons dvr" aria-hidden="true"></span>';
-            html += '<div class="listItemBody two-line">';
-            html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
-            html += '<h3 class="listItemBodyText">';
-            html += getProviderName(provider.Type);
-            html += '</h3>';
-            html += '<div class="listItemBodyText secondary">';
-            html += provider.Path || provider.ListingsId || '';
-            html += '</div>';
-            html += '</a>';
-            html += '</div>';
-            html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert" aria-hidden="true"></span></button>';
-            html += '</div>';
-        }
-
-        html += '</div>';
-    }
-
-    const elem = page.querySelector('.providerList');
-    elem.innerHTML = html;
-    if (elem.querySelector('.btnOptions')) {
-        const btnOptionElements = elem.querySelectorAll('.btnOptions');
-        btnOptionElements.forEach(function (btn) {
-            btn.addEventListener('click', function () {
-                const id = this.getAttribute('data-id');
-                showProviderOptions(page, id, btn);
-            });
-        });
-    }
-}
-
-function showProviderOptions(page, providerId, button) {
-    const items = [];
-    items.push({
-        name: globalize.translate('Delete'),
-        id: 'delete'
-    });
-    items.push({
-        name: globalize.translate('MapChannels'),
-        id: 'map'
-    });
-
-    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
-        actionsheet.show({
-            items: items,
-            positionTo: button
-        }).then(function (id) {
-            switch (id) {
-                case 'delete':
-                    deleteProvider(page, providerId);
-                    break;
-
-                case 'map':
-                    mapChannels(page, providerId);
-            }
-        });
-    });
-}
-
-function mapChannels(page, providerId) {
-    import('components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
-        new ChannelMapper({
-            serverId: ApiClient.serverInfo().Id,
-            providerId: providerId
-        }).show();
-    });
-}
-
-function deleteProvider(page, id) {
-    const message = globalize.translate('MessageConfirmDeleteGuideProvider');
-
-    confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
-        loading.show();
-        ApiClient.ajax({
-            type: 'DELETE',
-            url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                Id: id
-            })
-        }).then(function () {
-            reload(page);
-        }, function () {
-            reload(page);
-        });
-    });
-}
-
-function getTunerName(providerId) {
-    switch (providerId.toLowerCase()) {
-        case 'm3u':
-            return 'M3U';
-        case 'hdhomerun':
-            return 'HDHomeRun';
-        case 'hauppauge':
-            return 'Hauppauge';
-        case 'satip':
-            return 'DVB';
-        default:
-            return 'Unknown';
-    }
-}
-
-function getProviderName(providerId) {
-    switch (providerId.toLowerCase()) {
-        case 'schedulesdirect':
-            return 'Schedules Direct';
-        case 'xmltv':
-            return 'XMLTV';
-        default:
-            return 'Unknown';
-    }
-}
-
-function getProviderConfigurationUrl(providerId) {
-    switch (providerId.toLowerCase()) {
-        case 'xmltv':
-            return '#/dashboard/livetv/guide?type=xmltv';
-        case 'schedulesdirect':
-            return '#/dashboard/livetv/guide?type=schedulesdirect';
-    }
-}
-
-function addProvider(button) {
-    const menuItems = [];
-    menuItems.push({
-        name: 'Schedules Direct',
-        id: 'SchedulesDirect'
-    });
-    menuItems.push({
-        name: 'XMLTV',
-        id: 'xmltv'
-    });
-
-    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
-        actionsheet.show({
-            items: menuItems,
-            positionTo: button,
-            callback: function (id) {
-                Dashboard.navigate(getProviderConfigurationUrl(id));
-            }
-        });
-    });
-}
-
-function addDevice() {
-    Dashboard.navigate('dashboard/livetv/tuner');
-}
-
-function showDeviceMenu(button, tunerDeviceId) {
-    const items = [];
-    items.push({
-        name: globalize.translate('Delete'),
-        id: 'delete'
-    });
-    items.push({
-        name: globalize.translate('Edit'),
-        id: 'edit'
-    });
-
-    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
-        actionsheet.show({
-            items: items,
-            positionTo: button
-        }).then(function (id) {
-            switch (id) {
-                case 'delete':
-                    deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
-                    break;
-
-                case 'edit':
-                    Dashboard.navigate('dashboard/livetv/tuner?id=' + tunerDeviceId);
-            }
-        });
-    });
-}
-
-function onDevicesListClick(e) {
-    const card = dom.parentWithClass(e.target, 'card');
-
-    if (card) {
-        const id = card.getAttribute('data-id');
-        const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
-
-        if (btnCardOptions) {
-            showDeviceMenu(btnCardOptions, id);
-        } else {
-            Dashboard.navigate('dashboard/livetv/tuner?id=' + id);
-        }
-    }
-}
-
-$(document).on('pageinit', '#liveTvStatusPage', function () {
-    const page = this;
-    page.querySelector('.btnAddDevice').addEventListener('click', function () {
-        addDevice();
-    });
-    if (page.querySelector('.formAddDevice')) {
-        // NOTE: unused?
-        page.querySelector('.formAddDevice').addEventListener('submit', function (e) {
-            e.preventDefault();
-            submitAddDeviceForm(page);
-        });
-    }
-    page.querySelector('.btnAddProvider').addEventListener('click', function () {
-        addProvider(this);
-    });
-    page.querySelector('.devicesList').addEventListener('click', onDevicesListClick);
-}).on('pageshow', '#liveTvStatusPage', function () {
-    const page = this;
-    reload(page);
-    taskButton({
-        mode: 'on',
-        progressElem: page.querySelector('.refreshGuideProgress'),
-        taskKey: 'RefreshGuide',
-        button: page.querySelector('.btnRefresh')
-    });
-}).on('pagehide', '#liveTvStatusPage', function () {
-    const page = this;
-    taskButton({
-        mode: 'off',
-        progressElem: page.querySelector('.refreshGuideProgress'),
-        taskKey: 'RefreshGuide',
-        button: page.querySelector('.btnRefresh')
-    });
-});
--- a/src/apps/dashboard/features/activity/components/ActivityListItem.tsx
+++ b/src/apps/dashboard/features/activity/components/ActivityListItem.tsx
@@ -4,7 +4,6 @@ import Notifications from '@mui/icons-material/Notifications';
 import Avatar from '@mui/material/Avatar';
 import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import formatRelative from 'date-fns/formatRelative';
@@ -12,13 +11,15 @@ import { getLocale } from 'utils/dateFnsLocale';
 import Stack from '@mui/material/Stack';
 import getLogLevelColor from '../utils/getLogLevelColor';
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+import ListItemLink from 'components/ListItemLink';

 type ActivityListItemProps = {
    item: ActivityLogEntry;
    displayShortOverview: boolean;
+    to: string;
 };

-const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps) => {
+const ActivityListItem = ({ item, displayShortOverview, to }: ActivityListItemProps) => {
    const relativeDate = useMemo(() => {
        if (item.Date) {
            return formatRelative(Date.parse(item.Date), Date.now(), { locale: getLocale() });
@@ -29,7 +30,7 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)

    return (
        <ListItem disablePadding>
-            <ListItemButton>
+            <ListItemLink to={to}>
                <ListItemAvatar>
                    <Avatar sx={{ bgcolor: getLogLevelColor(item.Severity || LogLevel.Information) + '.main' }}>
                        <Notifications sx={{ color: '#fff' }} />
@@ -37,14 +38,28 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)
                </ListItemAvatar>

                <ListItemText
-                    primary={<Typography>{item.Name}</Typography>}
+                    primary={<Typography sx={{ whiteSpace: 'pre-wrap' }}>{item.Name}</Typography>}
                    secondary={(
                        <Stack>
-                            <Typography variant='body1' color='text.secondary'>
+                            <Typography
+                                sx={{
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden'
+                                }}
+                                variant='body1'
+                                color='text.secondary'
+                            >
                                {relativeDate}
                            </Typography>
                            {displayShortOverview && (
-                                <Typography variant='body1' color='text.secondary'>
+                                <Typography
+                                    sx={{
+                                        textOverflow: 'ellipsis',
+                                        overflow: 'hidden'
+                                    }}
+                                    variant='body1'
+                                    color='text.secondary'
+                                >
                                    {item.ShortOverview}
                                </Typography>
                            )}
@@ -52,7 +67,7 @@ const ActivityListItem = ({ item, displayShortOverview }: ActivityListItemProps)
                    )}
                    disableTypography
                />
-            </ListItemButton>
+            </ListItemLink>
        </ListItem>
    );
 };
--- a/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
+++ b/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
@@ -7,7 +7,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Box from '@mui/material/Box';
 import globalize from 'lib/globalize';
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FunctionComponent, useCallback, useState } from 'react';
 import Stack from '@mui/material/Stack';
 import FormGroup from '@mui/material/FormGroup';
 import FormControl from '@mui/material/FormControl';
@@ -16,7 +16,7 @@ import Checkbox from '@mui/material/Checkbox';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import IconButton from '@mui/material/IconButton';
 import { copy } from 'scripts/clipboard';
-import toast from 'components/toast/toast';
+import Toast from 'apps/dashboard/components/Toast';

 type IProps = {
    backup: BackupManifestDto;
@@ -25,10 +25,16 @@ type IProps = {
 };

 const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }: IProps) => {
+    const [ isCopiedToastOpen, setIsCopiedToastOpen ] = useState(false);
+
+    const handleToastClose = useCallback(() => {
+        setIsCopiedToastOpen(false);
+    }, []);
+
    const copyPath = useCallback(async () => {
        if (backup.Path) {
            await copy(backup.Path);
-            toast({ text: globalize.translate('Copied') });
+            setIsCopiedToastOpen(true);
        }
    }, [ backup.Path ]);

@@ -39,6 +45,11 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
            maxWidth={'sm'}
            fullWidth
        >
+            <Toast
+                open={isCopiedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('Copied')}
+            />
            <DialogTitle>
                {backup.DateCreated}
            </DialogTitle>
--- a/src/apps/dashboard/features/libraries/api/useRemoveVirtualFolder.ts
+++ b/src/apps/dashboard/features/libraries/api/useRemoveVirtualFolder.ts
@@ -0,0 +1,21 @@
+import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
+import { LibraryStructureApiRemoveVirtualFolderRequest } from '@jellyfin/sdk/lib/generated-client/api/library-structure-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+export const useRemoveVirtualFolder = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: LibraryStructureApiRemoveVirtualFolderRequest) => (
+            getLibraryStructureApi(api!)
+                .removeVirtualFolder(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ 'VirtualFolders' ]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/libraries/api/useRenameVirtualFolder.ts
+++ b/src/apps/dashboard/features/libraries/api/useRenameVirtualFolder.ts
@@ -0,0 +1,21 @@
+import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
+import { LibraryStructureApiRenameVirtualFolderRequest } from '@jellyfin/sdk/lib/generated-client/api/library-structure-api';
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+
+export const useRenameVirtualFolder = () => {
+    const { api } = useApi();
+    return useMutation({
+        mutationFn: (params: LibraryStructureApiRenameVirtualFolderRequest) => (
+            getLibraryStructureApi(api!)
+                .renameVirtualFolder(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ 'VirtualFolders' ]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/libraries/api/useVirtualFolders.ts
+++ b/src/apps/dashboard/features/libraries/api/useVirtualFolders.ts
@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+import { getLibraryStructureApi } from '@jellyfin/sdk/lib/utils/api/library-structure-api';
+
+const fetchVirtualFolders = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getLibraryStructureApi(api).getVirtualFolders(options);
+
+    return response.data;
+};
+
+export const useVirtualFolders = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'VirtualFolders' ],
+        queryFn: ({ signal }) => fetchVirtualFolders(api!, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/libraries/components/LibraryCard.tsx
+++ b/src/apps/dashboard/features/libraries/components/LibraryCard.tsx
@@ -0,0 +1,237 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import type { VirtualFolderInfo } from '@jellyfin/sdk/lib/generated-client/models/virtual-folder-info';
+import BaseCard from 'apps/dashboard/components/BaseCard';
+import getCollectionTypeOptions from '../utils/collectionTypeOptions';
+import globalize from 'lib/globalize';
+import Icon from '@mui/material/Icon';
+import { getLibraryIcon } from 'utils/image';
+import MediaLibraryEditor from 'components/mediaLibraryEditor/mediaLibraryEditor';
+import { queryClient } from 'utils/query/queryClient';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Folder from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import EditIcon from '@mui/icons-material/Edit';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ListItemText from '@mui/material/ListItemText';
+import imageeditor from 'components/imageeditor/imageeditor';
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import InputDialog from 'components/InputDialog';
+import { useRenameVirtualFolder } from '../api/useRenameVirtualFolder';
+import RefreshDialog from 'components/refreshdialog/refreshdialog';
+import ConfirmDialog from 'components/ConfirmDialog';
+import { useRemoveVirtualFolder } from '../api/useRemoveVirtualFolder';
+import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
+import { useApi } from 'hooks/useApi';
+import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
+import dom from 'utils/dom';
+
+type LibraryCardProps = {
+    virtualFolder: VirtualFolderInfo;
+};
+
+const LibraryCard = ({ virtualFolder }: LibraryCardProps) => {
+    const { api } = useApi();
+    const actionRef = useRef<HTMLButtonElement | null>(null);
+    const [ anchorEl, setAnchorEl ] = useState<HTMLElement | null>(null);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const [ isRenameLibraryDialogOpen, setIsRenameLibraryDialogOpen ] = useState(false);
+    const [ isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen ] = useState(false);
+    const renameVirtualFolder = useRenameVirtualFolder();
+    const removeVirtualFolder = useRemoveVirtualFolder();
+
+    const imageUrl = useMemo(() => {
+        if (virtualFolder.PrimaryImageItemId && virtualFolder.ItemId && api) {
+            return getImageApi(api)
+                .getItemImageUrlById(virtualFolder.ItemId, ImageType.Primary, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.40)
+                });
+        }
+    }, [ api, virtualFolder ]);
+
+    const typeName = getCollectionTypeOptions().filter(function (t) {
+        return t.value == virtualFolder.CollectionType;
+    })[0]?.name || globalize.translate('Other');
+
+    const openRenameDialog = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+        setIsRenameLibraryDialogOpen(true);
+    }, []);
+
+    const hideRenameLibraryDialog = useCallback(() => {
+        setIsRenameLibraryDialogOpen(false);
+    }, []);
+
+    const onMenuClose = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    const onActionClick = useCallback(() => {
+        setAnchorEl(actionRef.current);
+        setIsMenuOpen(true);
+    }, []);
+
+    const renameLibrary = useCallback((newName: string) => {
+        if (virtualFolder.Name) {
+            renameVirtualFolder.mutate({
+                refreshLibrary: true,
+                newName: newName,
+                name: virtualFolder.Name
+            }, {
+                onSettled: () => {
+                    hideRenameLibraryDialog();
+                }
+            });
+        }
+    }, [ renameVirtualFolder, virtualFolder, hideRenameLibraryDialog ]);
+
+    const showRefreshDialog = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+
+        void new RefreshDialog({
+            itemIds: [ virtualFolder.ItemId ],
+            serverId: ServerConnections.currentApiClient()?.serverId(),
+            mode: 'scan'
+        }).show();
+    }, [ virtualFolder ]);
+
+    const showMediaLibraryEditor = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+
+        const mediaLibraryEditor = new MediaLibraryEditor({
+            library: virtualFolder
+        }) as Promise<boolean>;
+
+        void mediaLibraryEditor.then((hasChanges: boolean) => {
+            if (hasChanges) {
+                void queryClient.invalidateQueries({
+                    queryKey: ['VirtualFolders']
+                });
+            }
+        });
+    }, [ virtualFolder ]);
+
+    const showImageEditor = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+
+        void imageeditor.show({
+            itemId: virtualFolder.ItemId,
+            serverId: ServerConnections.currentApiClient()?.serverId()
+        }).then(() => {
+            void queryClient.invalidateQueries({
+                queryKey: ['VirtualFolders']
+            });
+        }).catch(() => {
+            /* pop up closed */
+        });
+    }, [ virtualFolder ]);
+
+    const showDeleteLibraryDialog = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+        setIsConfirmDeleteDialogOpen(true);
+    }, []);
+
+    const onCancelDeleteLibrary = useCallback(() => {
+        setIsConfirmDeleteDialogOpen(false);
+    }, []);
+
+    const onConfirmDeleteLibrary = useCallback(() => {
+        if (virtualFolder.Name) {
+            removeVirtualFolder.mutate({
+                name: virtualFolder.Name,
+                refreshLibrary: true
+            }, {
+                onSettled: () => {
+                    setIsConfirmDeleteDialogOpen(false);
+                }
+            });
+        }
+    }, [ virtualFolder, removeVirtualFolder ]);
+
+    return (
+        <>
+            <InputDialog
+                title={globalize.translate('ButtonRename')}
+                open={isRenameLibraryDialogOpen}
+                onClose={hideRenameLibraryDialog}
+                label={globalize.translate('LabelNewName')}
+                helperText={globalize.translate('MessageRenameMediaFolder')}
+                initialText={virtualFolder.Name || ''}
+                confirmButtonText={globalize.translate('ButtonRename')}
+                onConfirm={renameLibrary}
+            />
+
+            <ConfirmDialog
+                open={isConfirmDeleteDialogOpen}
+                title={globalize.translate('HeaderRemoveMediaFolder')}
+                text={
+                    globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder') + '\n\n'
+                    + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '\n\n'
+                    + virtualFolder.Locations?.join('\n')
+                }
+                confirmButtonText={globalize.translate('Delete')}
+                confirmButtonColor='error'
+                onConfirm={onConfirmDeleteLibrary}
+                onCancel={onCancelDeleteLibrary}
+            />
+
+            <BaseCard
+                title={virtualFolder.Name || ''}
+                text={typeName}
+                image={imageUrl}
+                icon={<Icon sx={{ fontSize: 70 }}>{getLibraryIcon(virtualFolder.CollectionType)}</Icon>}
+                action={true}
+                actionRef={actionRef}
+                onActionClick={onActionClick}
+                onClick={showMediaLibraryEditor}
+                height={260}
+            />
+            <Menu
+                anchorEl={anchorEl}
+                open={isMenuOpen}
+                onClose={onMenuClose}
+            >
+                <MenuItem onClick={showImageEditor}>
+                    <ListItemIcon>
+                        <ImageIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('EditImages')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={showMediaLibraryEditor}>
+                    <ListItemIcon>
+                        <Folder />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('ManageLibrary')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={openRenameDialog}>
+                    <ListItemIcon>
+                        <EditIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('ButtonRename')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={showRefreshDialog}>
+                    <ListItemIcon>
+                        <RefreshIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('ScanLibrary')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={showDeleteLibraryDialog}>
+                    <ListItemIcon>
+                        <DeleteIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('ButtonRemove')}</ListItemText>
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};
+
+export default LibraryCard;
--- a/src/apps/dashboard/features/libraries/utils/collectionTypeOptions.ts
+++ b/src/apps/dashboard/features/libraries/utils/collectionTypeOptions.ts
@@ -0,0 +1,31 @@
+import globalize from 'lib/globalize';
+
+const getCollectionTypeOptions = () => {
+    return [{
+        name: '',
+        value: ''
+    }, {
+        name: globalize.translate('Movies'),
+        value: 'movies'
+    }, {
+        name: globalize.translate('TabMusic'),
+        value: 'music'
+    }, {
+        name: globalize.translate('Shows'),
+        value: 'tvshows'
+    }, {
+        name: globalize.translate('Books'),
+        value: 'books'
+    }, {
+        name: globalize.translate('HomeVideosPhotos'),
+        value: 'homevideos'
+    }, {
+        name: globalize.translate('MusicVideos'),
+        value: 'musicvideos'
+    }, {
+        name: globalize.translate('MixedMoviesShows'),
+        value: 'mixed'
+    }];
+};
+
+export default getCollectionTypeOptions;
--- a/src/apps/dashboard/features/livetv/api/useDeleteProvider.ts
+++ b/src/apps/dashboard/features/livetv/api/useDeleteProvider.ts
@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
+import { LiveTvApiDeleteListingProviderRequest } from '@jellyfin/sdk/lib/generated-client/api/live-tv-api';
+
+export const useDeleteProvider = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: LiveTvApiDeleteListingProviderRequest) => (
+            getLiveTvApi(api!)
+                .deleteListingProvider(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ 'NamedConfiguration', 'livetv' ]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/livetv/api/useDeleteTuner.ts
+++ b/src/apps/dashboard/features/livetv/api/useDeleteTuner.ts
@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
+import { LiveTvApiDeleteTunerHostRequest } from '@jellyfin/sdk/lib/generated-client/api/live-tv-api';
+
+export const useDeleteTuner = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: LiveTvApiDeleteTunerHostRequest) => (
+            getLiveTvApi(api!)
+                .deleteTunerHost(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ 'NamedConfiguration', 'livetv' ]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/livetv/components/Provider.tsx
+++ b/src/apps/dashboard/features/livetv/components/Provider.tsx
@@ -0,0 +1,138 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ListingsProviderInfo } from '@jellyfin/sdk/lib/generated-client/models/listings-provider-info';
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemLink from 'components/ListItemLink';
+import DvrIcon from '@mui/icons-material/Dvr';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import getProviderConfigurationUrl from '../utils/getProviderConfigurationUrl';
+import ListItemText from '@mui/material/ListItemText';
+import getProviderName from '../utils/getProviderName';
+import IconButton from '@mui/material/IconButton';
+import ConfirmDialog from 'components/ConfirmDialog';
+import globalize from 'lib/globalize';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ChannelMapper from 'components/channelMapper/channelMapper';
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import { useDeleteProvider } from '../api/useDeleteProvider';
+
+interface ProviderProps {
+    provider: ListingsProviderInfo
+}
+
+const Provider = ({ provider }: ProviderProps) => {
+    const [ isDeleteProviderDialogOpen, setIsDeleteProviderDialogOpen ] = useState(false);
+    const actionsRef = useRef<HTMLButtonElement | null>(null);
+    const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const deleteProvider = useDeleteProvider();
+
+    const showChannelMapper = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+        void new ChannelMapper({
+            serverId: ServerConnections.currentApiClient()?.serverId(),
+            providerId: provider.Id
+        }).show();
+    }, [ provider ]);
+
+    const showContextMenu = useCallback(() => {
+        setAnchorEl(actionsRef.current);
+        setIsMenuOpen(true);
+    }, []);
+
+    const showDeleteDialog = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+        setIsDeleteProviderDialogOpen(true);
+    }, []);
+
+    const onDeleteProviderDialogCancel = useCallback(() => {
+        setIsDeleteProviderDialogOpen(false);
+    }, []);
+
+    const onMenuClose = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    const onConfirmDelete = useCallback(() => {
+        if (provider.Id) {
+            deleteProvider.mutate({
+                id: provider.Id
+            }, {
+                onSettled: () => {
+                    setIsDeleteProviderDialogOpen(false);
+                }
+            });
+        }
+    }, [ deleteProvider, provider ]);
+
+    return (
+        <>
+            <ConfirmDialog
+                open={isDeleteProviderDialogOpen}
+                title={globalize.translate('HeaderDeleteProvider')}
+                text={globalize.translate('MessageConfirmDeleteGuideProvider')}
+                onCancel={onDeleteProviderDialogCancel}
+                onConfirm={onConfirmDelete}
+                confirmButtonText={globalize.translate('Delete')}
+                confirmButtonColor='error'
+            />
+            <ListItem
+                disablePadding key={provider.Id}
+                secondaryAction={
+                    <IconButton ref={actionsRef} onClick={showContextMenu}>
+                        <MoreVertIcon />
+                    </IconButton>
+                }
+            >
+                <ListItemLink to={getProviderConfigurationUrl(provider.Type || '') + '&id=' + provider.Id}>
+                    <ListItemAvatar>
+                        <Avatar sx={{ bgcolor: 'primary.main' }}>
+                            <DvrIcon sx={{ color: '#fff' }} />
+                        </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText
+                        primary={getProviderName(provider.Type)}
+                        secondary={provider.Path || provider.ListingsId}
+                        slotProps={{
+                            primary: {
+                                variant: 'h3'
+                            },
+                            secondary: {
+                                variant: 'body1'
+                            }
+                        }}
+                    />
+                </ListItemLink>
+            </ListItem>
+
+            <Menu
+                anchorEl={anchorEl}
+                open={isMenuOpen}
+                onClose={onMenuClose}
+            >
+                <MenuItem onClick={showChannelMapper}>
+                    <ListItemIcon>
+                        <LocationSearchingIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('MapChannels')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={showDeleteDialog}>
+                    <ListItemIcon>
+                        <DeleteIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('Delete')}</ListItemText>
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};
+
+export default Provider;
--- a/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx
+++ b/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx
@@ -0,0 +1,109 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { TunerHostInfo } from '@jellyfin/sdk/lib/generated-client/models/tuner-host-info';
+import BaseCard from 'apps/dashboard/components/BaseCard';
+import DvrIcon from '@mui/icons-material/Dvr';
+import getTunerName from '../utils/getTunerName';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import ListItemText from '@mui/material/ListItemText';
+import globalize from 'lib/globalize';
+import { useNavigate } from 'react-router-dom';
+import ConfirmDialog from 'components/ConfirmDialog';
+import { useDeleteTuner } from '../api/useDeleteTuner';
+
+interface TunerDeviceCardProps {
+    tunerHost: TunerHostInfo;
+}
+
+const TunerDeviceCard = ({ tunerHost }: TunerDeviceCardProps) => {
+    const navigate = useNavigate();
+    const actionRef = useRef<HTMLButtonElement | null>(null);
+    const [ anchorEl, setAnchorEl ] = useState<HTMLElement | null>(null);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const [ isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen ] = useState(false);
+    const deleteTuner = useDeleteTuner();
+
+    const navigateToEditPage = useCallback(() => {
+        navigate(`/dashboard/livetv/tuner?id=${tunerHost.Id}`);
+    }, [ navigate, tunerHost ]);
+
+    const onDelete = useCallback(() => {
+        if (tunerHost.Id) {
+            deleteTuner.mutate({
+                id: tunerHost.Id
+            }, {
+                onSettled: () => {
+                    setIsConfirmDeleteDialogOpen(false);
+                }
+            });
+        }
+    }, [ deleteTuner, tunerHost ]);
+
+    const showDeleteDialog = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+        setIsConfirmDeleteDialogOpen(true);
+    }, []);
+
+    const onDeleteDialogClose = useCallback(() => {
+        setIsConfirmDeleteDialogOpen(false);
+    }, []);
+
+    const onActionClick = useCallback(() => {
+        setAnchorEl(actionRef.current);
+        setIsMenuOpen(true);
+    }, []);
+
+    const onMenuClose = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    return (
+        <>
+            <ConfirmDialog
+                open={isConfirmDeleteDialogOpen}
+                title={globalize.translate('HeaderDeleteDevice')}
+                text={globalize.translate('MessageConfirmDeleteTunerDevice')}
+                onCancel={onDeleteDialogClose}
+                onConfirm={onDelete}
+                confirmButtonColor='error'
+                confirmButtonText={globalize.translate('Delete')}
+            />
+
+            <BaseCard
+                title={tunerHost.FriendlyName || getTunerName(tunerHost.Type) || ''}
+                text={tunerHost.Url || ''}
+                icon={<DvrIcon sx={{ fontSize: 70 }} />}
+                action={true}
+                actionRef={actionRef}
+                onActionClick={onActionClick}
+                onClick={navigateToEditPage}
+            />
+
+            <Menu
+                anchorEl={anchorEl}
+                open={isMenuOpen}
+                onClose={onMenuClose}
+            >
+                <MenuItem onClick={navigateToEditPage}>
+                    <ListItemIcon>
+                        <EditIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('Edit')}</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={showDeleteDialog}>
+                    <ListItemIcon>
+                        <DeleteIcon />
+                    </ListItemIcon>
+                    <ListItemText>{globalize.translate('Delete')}</ListItemText>
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};
+
+export default TunerDeviceCard;
--- a/src/apps/dashboard/features/livetv/utils/getProviderConfigurationUrl.ts
+++ b/src/apps/dashboard/features/livetv/utils/getProviderConfigurationUrl.ts
@@ -0,0 +1,10 @@
+const getProviderConfigurationUrl = (providerId: string) => {
+    switch (providerId?.toLowerCase()) {
+        case 'xmltv':
+            return '/dashboard/livetv/guide?type=xmltv';
+        case 'schedulesdirect':
+            return '/dashboard/livetv/guide?type=schedulesdirect';
+    }
+};
+
+export default getProviderConfigurationUrl;
--- a/src/apps/dashboard/features/livetv/utils/getProviderName.ts
+++ b/src/apps/dashboard/features/livetv/utils/getProviderName.ts
@@ -0,0 +1,12 @@
+const getProviderName = (providerId: string | null | undefined) => {
+    switch (providerId?.toLowerCase()) {
+        case 'schedulesdirect':
+            return 'Schedules Direct';
+        case 'xmltv':
+            return 'XMLTV';
+        default:
+            return 'Unknown';
+    }
+};
+
+export default getProviderName;
--- a/src/apps/dashboard/features/livetv/utils/getTunerName.ts
+++ b/src/apps/dashboard/features/livetv/utils/getTunerName.ts
@@ -0,0 +1,16 @@
+const getTunerName = (providerId: string | null | undefined) => {
+    switch (providerId?.toLowerCase()) {
+        case 'm3u':
+            return 'M3U';
+        case 'hdhomerun':
+            return 'HDHomeRun';
+        case 'hauppauge':
+            return 'Hauppauge';
+        case 'satip':
+            return 'DVB';
+        default:
+            return 'Unknown';
+    }
+};
+
+export default getTunerName;
--- a/src/apps/dashboard/features/logs/api/useServerLog.ts
+++ b/src/apps/dashboard/features/logs/api/useServerLog.ts
@@ -12,7 +12,13 @@ const fetchServerLog = async (
    const response = await getSystemApi(api).getLogFile({ name }, options);

    // FIXME: TypeScript SDK thinks it is returning a File but in reality it is a string
-    return response.data as never as string;
+    const data = response.data as never as string | object;
+
+    if (typeof data === 'object') {
+        return JSON.stringify(data, null, 2);
+    } else {
+        return data;
+    }
 };
 export const useServerLog = (name: string) => {
    const { api } = useApi();
--- a/src/apps/dashboard/features/tasks/components/TaskProgress.tsx
+++ b/src/apps/dashboard/features/tasks/components/TaskProgress.tsx
@@ -8,7 +8,15 @@ const TaskProgress: FunctionComponent<TaskProps> = ({ task }: TaskProps) => {
    const progress = task.CurrentProgressPercentage;

    return (
-        <Box sx={{ display: 'flex', alignItems: 'center', height: '1.2rem', mr: 2 }}>
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                height: '1.2rem',
+                mr: 2,
+                minWidth: '170px'
+            }}
+        >
            {progress != null ? (
                <>
                    <Box sx={{ width: '100%', mr: 1 }}>
--- a/src/apps/dashboard/features/users/api/useAuthProviders.ts
+++ b/src/apps/dashboard/features/users/api/useAuthProviders.ts
@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getSessionApi } from '@jellyfin/sdk/lib/utils/api/session-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchAuthProviders = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getSessionApi(api).getAuthProviders(options);
+
+    return response.data;
+};
+
+export const useAuthProviders = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'AuthProviders' ],
+        queryFn: ({ signal }) => fetchAuthProviders(api!, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/useChannels.ts
+++ b/src/apps/dashboard/features/users/api/useChannels.ts
@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getChannelsApi } from '@jellyfin/sdk/lib/utils/api/channels-api';
+import { ChannelsApiGetChannelsRequest } from '@jellyfin/sdk/lib/generated-client/api/channels-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchChannels = async (api: Api, params?: ChannelsApiGetChannelsRequest, options?: AxiosRequestConfig) => {
+    const response = await getChannelsApi(api).getChannels(params, options);
+
+    return response.data;
+};
+
+export const useChannels = (params?: ChannelsApiGetChannelsRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'Channels' ],
+        queryFn: ({ signal }) => fetchChannels(api!, params, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/useCreateUser.ts
+++ b/src/apps/dashboard/features/users/api/useCreateUser.ts
@@ -0,0 +1,15 @@
+import { UserApiCreateUserByNameRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+
+export const useCreateUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiCreateUserByNameRequest) => (
+            getUserApi(api!)
+                .createUserByName(params)
+        )
+    });
+};
--- a/src/apps/dashboard/features/users/api/useDeleteUser.ts
+++ b/src/apps/dashboard/features/users/api/useDeleteUser.ts
@@ -0,0 +1,22 @@
+import { UserApiDeleteUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { QUERY_KEY } from 'hooks/useUsers';
+import { queryClient } from 'utils/query/queryClient';
+
+export const useDeleteUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiDeleteUserRequest) => (
+            getUserApi(api!)
+                .deleteUser(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/users/api/useLibraryMediaFolders.ts
+++ b/src/apps/dashboard/features/users/api/useLibraryMediaFolders.ts
@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { LibraryApiGetMediaFoldersRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchLibraryMediaFolders = async (api: Api, params?: LibraryApiGetMediaFoldersRequest, options?: AxiosRequestConfig) => {
+    const response = await getLibraryApi(api).getMediaFolders(params, options);
+
+    return response.data;
+};
+
+export const useLibraryMediaFolders = (params?: LibraryApiGetMediaFoldersRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['LibraryMediaFolders'],
+        queryFn: ({ signal }) => fetchLibraryMediaFolders(api!, params, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/useNetworkConfig.ts
+++ b/src/apps/dashboard/features/users/api/useNetworkConfig.ts
@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import type { AxiosRequestConfig } from 'axios';
+import type { NetworkConfiguration } from '@jellyfin/sdk/lib/generated-client/models/network-configuration';
+
+const fetchNetworkConfig = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getConfigurationApi(api).getNamedConfiguration({ key: 'network' }, options);
+
+    return response.data as NetworkConfiguration;
+};
+
+export const useNetworkConfig = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'NetConfig' ],
+        queryFn: ({ signal }) => fetchNetworkConfig(api!, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/useParentalRatings.ts
+++ b/src/apps/dashboard/features/users/api/useParentalRatings.ts
@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchParentalRatings = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getLocalizationApi(api).getParentalRatings(options);
+
+    return response.data;
+};
+
+export const useParentalRatings = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['ParentalRatings'],
+        queryFn: ({ signal }) => fetchParentalRatings(api!, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/usePasswordResetProviders.ts
+++ b/src/apps/dashboard/features/users/api/usePasswordResetProviders.ts
@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getSessionApi } from '@jellyfin/sdk/lib/utils/api/session-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchPasswordResetProviders = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getSessionApi(api).getPasswordResetProviders(options);
+
+    return response.data;
+};
+
+export const usePasswordResetProviders = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'PasswordResetProviders' ],
+        queryFn: ({ signal }) => fetchPasswordResetProviders(api!, { signal }),
+        enabled: !!api
+    });
+};
--- a/src/apps/dashboard/features/users/api/useUpdateUser.ts
+++ b/src/apps/dashboard/features/users/api/useUpdateUser.ts
@@ -0,0 +1,22 @@
+import { UserApiUpdateUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useUser';
+
+export const useUpdateUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiUpdateUserRequest) => (
+            getUserApi(api!)
+                .updateUser(params)
+        ),
+        onSuccess: (_, params) => {
+            void queryClient.invalidateQueries({
+                queryKey: [QUERY_KEY, params.userId]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/users/api/useUpdateUserPolicy.ts
+++ b/src/apps/dashboard/features/users/api/useUpdateUserPolicy.ts
@@ -0,0 +1,23 @@
+import { UserApiUpdateUserPolicyRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useUser';
+
+export const useUpdateUserPolicy = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiUpdateUserPolicyRequest) => (
+
+            getUserApi(api!)
+                .updateUserPolicy(params)
+        ),
+        onSuccess: (_, params) => {
+            void queryClient.invalidateQueries({
+                queryKey: [QUERY_KEY, params.userId]
+            });
+        }
+    });
+};
--- a/src/apps/dashboard/features/users/api/useUser.ts
+++ b/src/apps/dashboard/features/users/api/useUser.ts
@@ -0,0 +1,24 @@
+import { Api } from '@jellyfin/sdk';
+import { UserApiGetUserByIdRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+export const QUERY_KEY = 'User';
+
+const fetchUser = async (api: Api, params: UserApiGetUserByIdRequest, options?: AxiosRequestConfig) => {
+    const response = await getUserApi(api).getUserById(params, options);
+
+    return response.data;
+};
+
+export const useUser = (params?: UserApiGetUserByIdRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ QUERY_KEY, params?.userId ],
+        queryFn: ({ signal }) => fetchUser(api!, params!, { signal }),
+        enabled: !!api && !!params
+    });
+};
--- a/src/apps/dashboard/routes/_asyncRoutes.ts
+++ b/src/apps/dashboard/routes/_asyncRoutes.ts
@@ -9,9 +9,11 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
    { path: 'devices', type: AppType.Dashboard },
    { path: 'settings', type: AppType.Dashboard },
    { path: 'keys', type: AppType.Dashboard },
+    { path: 'libraries', type: AppType.Dashboard },
    { path: 'libraries/display', type: AppType.Dashboard },
    { path: 'libraries/metadata', type: AppType.Dashboard },
    { path: 'libraries/nfo', type: AppType.Dashboard },
+    { path: 'livetv', type: AppType.Dashboard },
    { path: 'livetv/recordings', type: AppType.Dashboard },
    { path: 'logs', type: AppType.Dashboard },
    { path: 'logs/:file', page: 'logs/file', type: AppType.Dashboard },
--- a/src/apps/dashboard/routes/_legacyRoutes.ts
+++ b/src/apps/dashboard/routes/_legacyRoutes.ts
@@ -9,13 +9,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
            controller: 'networking',
            view: 'networking.html'
        }
-    }, {
-        path: 'libraries',
-        pageProps: {
-            appType: AppType.Dashboard,
-            controller: 'library',
-            view: 'library.html'
-        }
    }, {
        path: 'livetv/guide',
        pageProps: {
@@ -23,13 +16,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
            controller: 'livetvguideprovider',
            view: 'livetvguideprovider.html'
        }
-    }, {
-        path: 'livetv',
-        pageProps: {
-            appType: AppType.Dashboard,
-            controller: 'livetvstatus',
-            view: 'livetvstatus.html'
-        }
    }, {
        path: 'livetv/tuner',
        pageProps: {
--- a/src/apps/dashboard/routes/activity/index.tsx
+++ b/src/apps/dashboard/routes/activity/index.tsx
@@ -2,9 +2,10 @@ import parseISO from 'date-fns/parseISO';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+import { useTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';

 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -53,6 +54,8 @@ export const Component = () => {

    const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();

+    const theme = useTheme();
+
    const UserCell = getUserCell(users);

    const activityParams = useMemo(() => ({
@@ -156,8 +159,15 @@ export const Component = () => {
        }
    }, [ activityView, searchParams, setSearchParams ]);

+    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
+    // https://github.com/KevinVandy/material-react-table/issues/1429
+    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
+        baseBackgroundColor: theme.palette.background.paper
+    }), [ theme ]);
+
    const table = useMaterialReactTable({
        ...DEFAULT_TABLE_OPTIONS,
+        mrtTheme,

        columns,
        data: logEntries,
--- a/src/apps/dashboard/routes/backups/index.tsx
+++ b/src/apps/dashboard/routes/backups/index.tsx
@@ -102,7 +102,7 @@ export const Component = () => {
                    }).catch(() => {
                        // Server is still down
                    });
-            }, 5000);
+            }, 45000);

            return () => {
                clearInterval(serverCheckInterval);
--- a/src/apps/dashboard/routes/devices/index.tsx
+++ b/src/apps/dashboard/routes/devices/index.tsx
@@ -4,9 +4,10 @@ import Edit from '@mui/icons-material/Edit';
 import Box from '@mui/material/Box/Box';
 import Button from '@mui/material/Button/Button';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip/Tooltip';
 import parseISO from 'date-fns/parseISO';
-import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
 import React, { useCallback, useMemo, useState } from 'react';

 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
@@ -41,6 +42,7 @@ export const Component = () => {
        data?.Items || []
    ), [ data ]);
    const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
+    const theme = useTheme();

    const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState(false);
    const [ isDeleteAllConfirmOpen, setIsDeleteAllConfirmOpen ] = useState(false);
@@ -137,8 +139,15 @@ export const Component = () => {
        }
    ], [ UserCell, userNames ]);

+    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
+    // https://github.com/KevinVandy/material-react-table/issues/1429
+    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
+        baseBackgroundColor: theme.palette.background.paper
+    }), [ theme ]);
+
    const mrTable = useMaterialReactTable({
        ...DEFAULT_TABLE_OPTIONS,
+        mrtTheme,

        columns,
        data: devices,
@@ -184,16 +193,25 @@ export const Component = () => {
        positionActionsColumn: 'last',
        displayColumnDefOptions: {
            'mrt-row-actions': {
-                header: ''
+                header: '',
+                size: 100
            }
        },
        renderRowActions: ({ row, table }) => {
            const isDeletable = api && row.original.Id && api.deviceInfo.id === row.original.Id;
            return (
-                <Box sx={{ display: 'flex', gap: 1 }}>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        gap: 1,
+                        '&&': {
+                            backgroundColor: 'transparent !important'
+                        }
+                    }}
+                >
                    <Tooltip title={globalize.translate('Edit')}>
                        <IconButton
-                        // eslint-disable-next-line react/jsx-no-bind
+                            // eslint-disable-next-line react/jsx-no-bind
                            onClick={() => table.setEditingRow(row)}
                        >
                            <Edit />
--- a/src/apps/dashboard/routes/index.tsx
+++ b/src/apps/dashboard/routes/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Box from '@mui/material/Box';
@@ -16,6 +16,7 @@ import RunningTasksWidget from '../components/widgets/RunningTasksWidget';
 import DevicesWidget from '../components/widgets/DevicesWidget';
 import { useStartTask } from '../features/tasks/api/useStartTask';
 import ItemCountsWidget from '../components/widgets/ItemCountsWidget';
+import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';

 export const Component = () => {
    const [ isRestartConfirmDialogOpen, setIsRestartConfirmDialogOpen ] = useState(false);
@@ -26,6 +27,10 @@ export const Component = () => {

    const { data: tasks } = useLiveTasks({ isHidden: false });

+    const librariesTask = useMemo(() => (
+        tasks?.find((value) => value.Key === 'RefreshLibrary')
+    ), [ tasks ]);
+
    const promptRestart = useCallback(() => {
        setIsRestartConfirmDialogOpen(true);
    }, []);
@@ -94,6 +99,7 @@ export const Component = () => {
                                onScanLibrariesClick={onScanLibraries}
                                onRestartClick={promptRestart}
                                onShutdownClick={promptShutdown}
+                                isScanning={librariesTask?.State !== TaskState.Idle}
                            />
                            <ItemCountsWidget />
                            <RunningTasksWidget tasks={tasks} />
--- a/src/apps/dashboard/routes/keys/index.tsx
+++ b/src/apps/dashboard/routes/keys/index.tsx
@@ -2,31 +2,34 @@ import type { AuthenticationInfo } from '@jellyfin/sdk/lib/generated-client/mode
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import parseISO from 'date-fns/parseISO';
-import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
-import React, { useCallback, useMemo } from 'react';
+import { type MRT_ColumnDef, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
+import React, { useCallback, useMemo, useState } from 'react';

 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
 import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/table/TablePage';
 import { useApiKeys } from 'apps/dashboard/features/keys/api/useApiKeys';
 import { useRevokeKey } from 'apps/dashboard/features/keys/api/useRevokeKey';
 import { useCreateKey } from 'apps/dashboard/features/keys/api/useCreateKey';
-import confirm from 'components/confirm/confirm';
-import prompt from 'components/prompt/prompt';
-import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
+import InputDialog from 'components/InputDialog';
+import ConfirmDialog from 'components/ConfirmDialog';

 export const Component = () => {
-    const { api } = useApi();
+    const [ isCreateApiKeyPromptOpen, setIsCreateApiKeyPromptOpen ] = useState(false);
+    const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState(false);
+    const [ apiKeyToDelete, setApiKeyToDelete ] = useState('');
    const { data, isLoading } = useApiKeys();
    const keys = useMemo(() => (
        data?.Items || []
    ), [ data ]);
    const revokeKey = useRevokeKey();
    const createKey = useCreateKey();
+    const theme = useTheme();

    const columns = useMemo<MRT_ColumnDef<AuthenticationInfo>[]>(() => [
        {
@@ -49,8 +52,15 @@ export const Component = () => {
        }
    ], []);

+    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
+    // https://github.com/KevinVandy/material-react-table/issues/1429
+    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
+        baseBackgroundColor: theme.palette.background.paper
+    }), [ theme ]);
+
    const table = useMaterialReactTable({
        ...DEFAULT_TABLE_OPTIONS,
+        mrtTheme,

        columns,
        data: keys,
@@ -96,41 +106,72 @@ export const Component = () => {
    });

    const onRevokeKey = useCallback((accessToken: string) => {
-        if (!api) return;
-
-        confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
-            revokeKey.mutate({
-                key: accessToken
-            });
-        }).catch(err => {
-            console.error('[apikeys] failed to show confirmation dialog', err);
-        });
-    }, [api, revokeKey]);
+        setApiKeyToDelete(accessToken);
+        setIsConfirmDeleteOpen(true);
+    }, []);

    const showNewKeyPopup = useCallback(() => {
-        if (!api) return;
+        setIsCreateApiKeyPromptOpen(true);
+    }, []);

-        prompt({
-            title: globalize.translate('HeaderNewApiKey'),
-            label: globalize.translate('LabelAppName'),
-            description: globalize.translate('LabelAppNameExample')
-        }).then((value) => {
-            createKey.mutate({
-                app: value
-            });
-        }).catch(() => {
-            // popup closed
+    const onCreateApiKeyPromptClose = useCallback(() => {
+        setIsCreateApiKeyPromptOpen(false);
+    }, []);
+
+    const onConfirmDelete = useCallback(() => {
+        revokeKey.mutate({
+            key: apiKeyToDelete
+        }, {
+            onSettled: () => {
+                setApiKeyToDelete('');
+                setIsConfirmDeleteOpen(false);
+            }
        });
-    }, [api, createKey]);
+    }, [ revokeKey, apiKeyToDelete ]);
+
+    const onConfirmDeleteCancel = useCallback(() => {
+        setApiKeyToDelete('');
+        setIsConfirmDeleteOpen(false);
+    }, []);
+
+    const onConfirmCreate = useCallback((name: string) => {
+        createKey.mutate({
+            app: name
+        }, {
+            onSettled: () => {
+                setIsCreateApiKeyPromptOpen(false);
+            }
+        });
+    }, [ createKey ]);

    return (
-        <TablePage
-            id='apiKeysPage'
-            title={globalize.translate('HeaderApiKeys')}
-            subtitle={globalize.translate('HeaderApiKeysHelp')}
-            className='mainAnimatedPage type-interior'
-            table={table}
-        />
+        <>
+            <ConfirmDialog
+                open={isConfirmDeleteOpen}
+                title={globalize.translate('HeaderConfirmRevokeApiKey')}
+                text={globalize.translate('MessageConfirmRevokeApiKey')}
+                confirmButtonColor='error'
+                confirmButtonText={globalize.translate('Delete')}
+                onConfirm={onConfirmDelete}
+                onCancel={onConfirmDeleteCancel}
+            />
+            <InputDialog
+                open={isCreateApiKeyPromptOpen}
+                title={globalize.translate('HeaderNewApiKey')}
+                label={globalize.translate('LabelAppName')}
+                helperText={globalize.translate('LabelAppNameExample')}
+                confirmButtonText={globalize.translate('Create')}
+                onConfirm={onConfirmCreate}
+                onClose={onCreateApiKeyPromptClose}
+            />
+            <TablePage
+                id='apiKeysPage'
+                title={globalize.translate('HeaderApiKeys')}
+                subtitle={globalize.translate('HeaderApiKeysHelp')}
+                className='mainAnimatedPage type-interior'
+                table={table}
+            />
+        </>
    );
 };

--- a/src/apps/dashboard/routes/libraries/index.tsx
+++ b/src/apps/dashboard/routes/libraries/index.tsx
@@ -0,0 +1,108 @@
+import React, { useCallback, useMemo } from 'react';
+import Page from 'components/Page';
+import globalize from 'lib/globalize';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { useVirtualFolders } from 'apps/dashboard/features/libraries/api/useVirtualFolders';
+import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
+import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask';
+import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
+import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
+import Grid from '@mui/material/Grid';
+import LibraryCard from 'apps/dashboard/features/libraries/components/LibraryCard';
+import Loading from 'components/loading/LoadingComponent';
+import MediaLibraryCreator from 'components/mediaLibraryCreator/mediaLibraryCreator';
+import getCollectionTypeOptions from 'apps/dashboard/features/libraries/utils/collectionTypeOptions';
+import { queryClient } from 'utils/query/queryClient';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import Add from '@mui/icons-material/Add';
+
+export const Component = () => {
+    const { data: virtualFolders, isPending: isVirtualFoldersPending } = useVirtualFolders();
+    const startTask = useStartTask();
+    const { data: tasks, isPending: isLiveTasksPending } = useLiveTasks({ isHidden: false });
+
+    const librariesTask = useMemo(() => (
+        tasks?.find((value) => value.Key === 'RefreshLibrary')
+    ), [ tasks ]);
+
+    const showMediaLibraryCreator = useCallback(() => {
+        const mediaLibraryCreator = new MediaLibraryCreator({
+            collectionTypeOptions: getCollectionTypeOptions(),
+            refresh: true
+        }) as Promise<boolean>;
+
+        void mediaLibraryCreator.then((hasChanges: boolean) => {
+            if (hasChanges) {
+                void queryClient.invalidateQueries({
+                    queryKey: ['VirtualFolders']
+                });
+            }
+        });
+    }, []);
+
+    const onScanLibraries = useCallback(() => {
+        if (librariesTask?.Id) {
+            startTask.mutate({
+                taskId: librariesTask.Id
+            });
+        }
+    }, [ startTask, librariesTask ]);
+
+    if (isVirtualFoldersPending || isLiveTasksPending) return <Loading />;
+
+    return (
+        <Page
+            id='mediaLibraryPage'
+            title={globalize.translate('HeaderLibraries')}
+            className='mainAnimatedPage type-interior'
+        >
+            <Box className='content-primary'>
+                <Stack spacing={3} mt={2}>
+                    <Stack direction='row' alignItems={'center'} spacing={1.5}>
+                        <Button
+                            startIcon={<Add />}
+                            onClick={showMediaLibraryCreator}
+                        >
+                            {globalize.translate('ButtonAddMediaLibrary')}
+                        </Button>
+                        <Button
+                            onClick={onScanLibraries}
+                            startIcon={<RefreshIcon />}
+                            loading={librariesTask && librariesTask.State !== TaskState.Idle}
+                            loadingPosition='start'
+                            variant='outlined'
+                        >
+                            {globalize.translate('ButtonScanAllLibraries')}
+                        </Button>
+                        {(librariesTask && librariesTask.State == TaskState.Running) && (
+                            <TaskProgress task={librariesTask} />
+                        )}
+                    </Stack>
+
+                    <Box>
+                        <Grid container spacing={2}>
+                            {virtualFolders?.map(virtualFolder => (
+                                <Grid
+                                    key={virtualFolder?.ItemId}
+                                    item
+                                    xs={12}
+                                    sm={6}
+                                    md={3}
+                                    lg={2.4}
+                                >
+                                    <LibraryCard
+                                        virtualFolder={virtualFolder}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </Box>
+                </Stack>
+            </Box>
+        </Page>
+    );
+};
+
+Component.displayName = 'LibrariesPage';
--- a/src/apps/dashboard/routes/livetv/index.tsx
+++ b/src/apps/dashboard/routes/livetv/index.tsx
@@ -0,0 +1,179 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Page from 'components/Page';
+import { useNamedConfiguration } from 'hooks/useNamedConfiguration';
+import type { LiveTvOptions } from '@jellyfin/sdk/lib/generated-client/models/live-tv-options';
+import globalize from 'lib/globalize';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Loading from 'components/loading/LoadingComponent';
+import TunerDeviceCard from 'apps/dashboard/features/livetv/components/TunerDeviceCard';
+import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
+import Button from '@mui/material/Button';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import AddIcon from '@mui/icons-material/Add';
+import { Link, useNavigate } from 'react-router-dom';
+import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask';
+import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
+import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import Alert from '@mui/material/Alert';
+import List from '@mui/material/List';
+import Provider from 'apps/dashboard/features/livetv/components/Provider';
+import Grid from '@mui/material/Grid';
+
+const CONFIG_KEY = 'livetv';
+
+export const Component = () => {
+    const navigate = useNavigate();
+    const {
+        data: config,
+        isPending: isConfigPending,
+        isError: isConfigError
+    } = useNamedConfiguration<LiveTvOptions>(CONFIG_KEY);
+    const {
+        data: tasks,
+        isPending: isTasksPending,
+        isError: isTasksError
+    } = useLiveTasks({ isHidden: false });
+    const providerButtonRef = useRef<HTMLButtonElement | null>(null);
+    const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const startTask = useStartTask();
+
+    const navigateToSchedulesDirect = useCallback(() => {
+        navigate('/dashboard/livetv/guide?type=schedulesdirect');
+    }, [ navigate ]);
+
+    const navigateToXMLTV = useCallback(() => {
+        navigate('/dashboard/livetv/guide?type=xmltv');
+    }, [ navigate ]);
+
+    const showProviderMenu = useCallback(() => {
+        setAnchorEl(providerButtonRef.current);
+        setIsMenuOpen(true);
+    }, []);
+
+    const onMenuClose = useCallback(() => {
+        setAnchorEl(null);
+        setIsMenuOpen(false);
+    }, []);
+
+    const refreshGuideTask = useMemo(() => (
+        tasks?.find((value) => value.Key === 'RefreshGuide')
+    ), [ tasks ]);
+
+    const refreshGuideData = useCallback(() => {
+        if (refreshGuideTask?.Id) {
+            startTask.mutate({
+                taskId: refreshGuideTask.Id
+            });
+        }
+    }, [ startTask, refreshGuideTask ]);
+
+    if (isConfigPending || isTasksPending) return <Loading />;
+
+    return (
+        <Page
+            id='liveTvStatusPage'
+            title={globalize.translate('LiveTV')}
+            className='mainAnimatedPage type-interior'
+        >
+            <Box className='content-primary'>
+                {(isConfigError || isTasksError) ? (
+                    <Alert severity='error'>{globalize.translate('HeaderError')}</Alert>
+                ) : (
+                    <Stack spacing={3}>
+                        <Typography variant='h2'>{globalize.translate('HeaderTunerDevices')}</Typography>
+
+                        <Button
+                            sx={{ alignSelf: 'flex-start' }}
+                            startIcon={<AddIcon />}
+                            component={Link}
+                            to='/dashboard/livetv/tuner'
+                        >
+                            {globalize.translate('ButtonAddTunerDevice')}
+                        </Button>
+
+                        <Box>
+                            <Grid container spacing={2}>
+                                {config.TunerHosts?.map(tunerHost => (
+                                    <Grid
+                                        key={tunerHost.Id}
+                                        item
+                                        xs={12}
+                                        sm={6}
+                                        md={3}
+                                        lg={2.4}
+                                    >
+                                        <TunerDeviceCard
+                                            key={tunerHost.Id}
+                                            tunerHost={tunerHost}
+                                        />
+                                    </Grid>
+                                ))}
+                            </Grid>
+                        </Box>
+
+                        <Typography variant='h2'>{globalize.translate('HeaderGuideProviders')}</Typography>
+
+                        <Stack sx={{ alignSelf: 'flex-start' }} spacing={2}>
+                            <Stack direction='row' spacing={1.5}>
+                                <Button
+                                    sx={{ alignSelf: 'flex-start' }}
+                                    startIcon={<AddIcon />}
+                                    onClick={showProviderMenu}
+                                    ref={providerButtonRef}
+                                >
+                                    {globalize.translate('ButtonAddProvider')}
+                                </Button>
+                                <Button
+                                    sx={{ alignSelf: 'flex-start' }}
+                                    startIcon={<RefreshIcon />}
+                                    variant='outlined'
+                                    onClick={refreshGuideData}
+                                    loading={refreshGuideTask && refreshGuideTask.State === TaskState.Running}
+                                    loadingPosition='start'
+                                >
+                                    {globalize.translate('ButtonRefreshGuideData')}
+                                </Button>
+                            </Stack>
+
+                            {(refreshGuideTask && refreshGuideTask.State === TaskState.Running) && (
+                                <TaskProgress task={refreshGuideTask} />
+                            )}
+                        </Stack>
+
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={isMenuOpen}
+                            onClose={onMenuClose}
+                        >
+                            <MenuItem onClick={navigateToSchedulesDirect}>
+                                <ListItemText>Schedules Direct</ListItemText>
+                            </MenuItem>
+                            <MenuItem onClick={navigateToXMLTV}>
+                                <ListItemText>XMLTV</ListItemText>
+                            </MenuItem>
+                        </Menu>
+
+                        {(config.ListingProviders && config.ListingProviders?.length > 0) && (
+                            <List sx={{ backgroundColor: 'background.paper' }}>
+                                {config.ListingProviders?.map(provider => (
+                                    <Provider
+                                        key={provider.Id}
+                                        provider={provider}
+                                    />
+                                ))}
+                            </List>
+                        )}
+                    </Stack>
+                )}
+            </Box>
+        </Page>
+    );
+};
+
+Component.displayName = 'LiveTvPage';
--- a/src/apps/dashboard/routes/logs/file.tsx
+++ b/src/apps/dashboard/routes/logs/file.tsx
@@ -1,6 +1,6 @@
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useServerLog } from 'apps/dashboard/features/logs/api/useServerLog';
 import Alert from '@mui/material/Alert';
@@ -13,8 +13,8 @@ import Typography from '@mui/material/Typography';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import FileDownload from '@mui/icons-material/FileDownload';
 import globalize from 'lib/globalize';
-import toast from 'components/toast/toast';
 import { copy } from 'scripts/clipboard';
+import Toast from 'apps/dashboard/components/Toast';

 export const Component = () => {
    const { file: fileName } = useParams();
@@ -24,13 +24,18 @@ export const Component = () => {
        data: log,
        refetch
    } = useServerLog(fileName ?? '');
+    const [ isCopiedToastOpen, setIsCopiedToastOpen ] = useState(false);

    const retry = useCallback(() => refetch(), [refetch]);

+    const handleToastClose = useCallback(() => {
+        setIsCopiedToastOpen(false);
+    }, []);
+
    const copyToClipboard = useCallback(async () => {
        if (log) {
            await copy(log);
-            toast({ text: globalize.translate('CopyLogSuccess') });
+            setIsCopiedToastOpen(true);
        }
    }, [log]);

@@ -52,7 +57,12 @@ export const Component = () => {
            title={fileName}
            className='mainAnimatedPage type-interior'
        >
-            <Container className='content-primary'>
+            <Toast
+                open={isCopiedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('CopyLogSuccess')}
+            />
+            <Container className='content-primary' maxWidth={false}>
                <Box>
                    <Typography variant='h1'>{fileName}</Typography>

@@ -96,7 +106,14 @@ export const Component = () => {

                            <Paper sx={{ mt: 2 }}>
                                <code>
-                                    <pre style={{ overflow:'auto', margin: 0, padding: '16px' }}>{log}</pre>
+                                    <pre style={{
+                                        overflow:'auto',
+                                        margin: 0,
+                                        padding: '16px',
+                                        whiteSpace: 'pre-wrap'
+                                    }}>
+                                        {log}
+                                    </pre>
                                </code>
                            </Paper>
                        </>
--- a/src/apps/dashboard/routes/playback/transcoding.tsx
+++ b/src/apps/dashboard/routes/playback/transcoding.tsx
@@ -471,19 +471,21 @@ export const Component = () => {

                            {(hardwareAccelType === 'none' || isHwaSelected) && (
                                <>
-                                    <FormControl>
-                                        <FormControlLabel
-                                            label={globalize.translate('EnableTonemapping')}
-                                            control={
-                                                <Checkbox
-                                                    name='EnableTonemapping'
-                                                    checked={config.EnableTonemapping}
-                                                    onChange={onCheckboxChange}
-                                                />
-                                            }
-                                        />
-                                        <FormHelperText>{globalize.translate(isHwaSelected ? 'AllowTonemappingHelp' : 'AllowTonemappingSoftwareHelp')}</FormHelperText>
-                                    </FormControl>
+                                    {isHwaSelected && (
+                                        <FormControl>
+                                            <FormControlLabel
+                                                label={globalize.translate('EnableTonemapping')}
+                                                control={
+                                                    <Checkbox
+                                                        name='EnableTonemapping'
+                                                        checked={config.EnableTonemapping}
+                                                        onChange={onCheckboxChange}
+                                                    />
+                                                }
+                                            />
+                                            <FormHelperText>{globalize.translate('AllowTonemappingHelp')}</FormHelperText>
+                                        </FormControl>
+                                    )}

                                    <TextField
                                        name='TonemappingAlgorithm'
--- a/src/apps/dashboard/routes/tasks/task.tsx
+++ b/src/apps/dashboard/routes/tasks/task.tsx
@@ -7,10 +7,11 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import AddIcon from '@mui/icons-material/Add';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import Loading from 'components/loading/LoadingComponent';
-import { MRT_ColumnDef, MRT_Table, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, MRT_Table, type MRT_Theme, useMaterialReactTable } from 'material-react-table';
 import type { TaskTriggerInfo } from '@jellyfin/sdk/lib/generated-client/models/task-trigger-info';
 import globalize from '../../../../lib/globalize';
 import { useTask } from 'apps/dashboard/features/tasks/api/useTask';
@@ -26,6 +27,7 @@ export const Component = () => {
    const [ isAddTriggerDialogOpen, setIsAddTriggerDialogOpen ] = useState(false);
    const [ isRemoveConfirmOpen, setIsRemoveConfirmOpen ] = useState(false);
    const [ pendingDeleteTrigger, setPendingDeleteTrigger ] = useState<TaskTriggerInfo | null>(null);
+    const theme = useTheme();

    const onCloseRemoveConfirmDialog = useCallback(() => {
        setPendingDeleteTrigger(null);
@@ -80,7 +82,15 @@ export const Component = () => {
        }
    ], []);

+    // NOTE: We need to provide a custom theme due to a MRT bug causing the initial theme to always be used
+    // https://github.com/KevinVandy/material-react-table/issues/1429
+    const mrtTheme = useMemo<Partial<MRT_Theme>>(() => ({
+        baseBackgroundColor: theme.palette.background.paper
+    }), [ theme ]);
+
    const table = useMaterialReactTable({
+        mrtTheme,
+
        columns,
        data: task?.Triggers || [],

--- a/src/apps/dashboard/routes/users/access.tsx
+++ b/src/apps/dashboard/routes/users/access.tsx
@@ -4,13 +4,13 @@ import { useSearchParams } from 'react-router-dom';

 import loading from '../../../../components/loading/loading';
 import globalize from '../../../../lib/globalize';
-import toast from '../../../../components/toast/toast';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
+import Toast from 'apps/dashboard/components/Toast';

 type ItemsArr = {
    Name?: string | null;
@@ -23,6 +23,7 @@ type ItemsArr = {
 const UserLibraryAccess = () => {
    const [ searchParams ] = useSearchParams();
    const userId = searchParams.get('userId');
+    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
    const [ userName, setUserName ] = useState('');
    const [channelsItems, setChannelsItems] = useState<ItemsArr[]>([]);
    const [mediaFoldersItems, setMediaFoldersItems] = useState<ItemsArr[]>([]);
@@ -31,6 +32,10 @@ const UserLibraryAccess = () => {

    const element = useRef<HTMLDivElement>(null);

+    const handleToastClose = useCallback(() => {
+        setIsSettingsSavedToastOpen(false);
+    }, []);
+
    const triggerChange = (select: HTMLInputElement) => {
        const evt = new Event('change', { bubbles: false, cancelable: true });
        select.dispatchEvent(evt);
@@ -220,7 +225,7 @@ const UserLibraryAccess = () => {

        const onSaveComplete = () => {
            loading.hide();
-            toast(globalize.translate('SettingsSaved'));
+            setIsSettingsSavedToastOpen(true);
        };

        (page.querySelector('.chkEnableAllDevices') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
@@ -243,6 +248,11 @@ const UserLibraryAccess = () => {
            id='userLibraryAccessPage'
            className='mainAnimatedPage type-interior'
        >
+            <Toast
+                open={isSettingsSavedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('SettingsSaved')}
+            />
            <div ref={element} className='content-primary'>
                <div className='verticalSection'>
                    <SectionTitleContainer
--- a/src/apps/dashboard/routes/users/add.tsx
+++ b/src/apps/dashboard/routes/users/add.tsx
@@ -1,21 +1,21 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto, CreateUserByName } from '@jellyfin/sdk/lib/generated-client';
 import React, { useCallback, useEffect, useState, useRef } from 'react';

-import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
-import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Input from '../../../../elements/emby-input/Input';
 import Button from '../../../../elements/emby-button/Button';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
+import Toast from 'apps/dashboard/components/Toast';

-type UserInput = {
-    Name?: string;
-    Password?: string;
-};
+import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
+import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
+import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
+import { useCreateUser } from 'apps/dashboard/features/users/api/useCreateUser';
+import { useNavigate } from 'react-router-dom';

 type ItemsArr = {
    Name?: string | null;
@@ -23,10 +23,21 @@ type ItemsArr = {
 };

 const UserNew = () => {
+    const navigate = useNavigate();
    const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
    const [ mediaFoldersItems, setMediaFoldersItems ] = useState<ItemsArr[]>([]);
+    const [ isErrorToastOpen, setIsErrorToastOpen ] = useState(false);
    const element = useRef<HTMLDivElement>(null);

+    const handleToastClose = useCallback(() => {
+        setIsErrorToastOpen(false);
+    }, []);
+    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders();
+    const { data: channels, isSuccess: isChannelsSuccess } = useChannels();
+
+    const createUser = useCreateUser();
+    const updateUserPolicy = useUpdateUserPolicy();
+
    const getItemsResult = (items: BaseItemDto[]) => {
        return items.map(item =>
            ({
@@ -44,9 +55,7 @@ const UserNew = () => {
            return;
        }

-        const mediaFolders = getItemsResult(result);
-
-        setMediaFoldersItems(mediaFolders);
+        setMediaFoldersItems(getItemsResult(result));

        const folderAccess = page.querySelector('.folderAccess') as HTMLDivElement;
        folderAccess.dispatchEvent(new CustomEvent('create'));
@@ -62,15 +71,15 @@ const UserNew = () => {
            return;
        }

-        const channels = getItemsResult(result);
+        const channelItems = getItemsResult(result);

-        setChannelsItems(channels);
+        setChannelsItems(channelItems);

        const channelAccess = page.querySelector('.channelAccess') as HTMLDivElement;
        channelAccess.dispatchEvent(new CustomEvent('create'));

        const channelAccessContainer = page.querySelector('.channelAccessContainer') as HTMLDivElement;
-        channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
+        channelItems.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');

        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked = false;
    }, []);
@@ -82,22 +91,26 @@ const UserNew = () => {
            console.error('Unexpected null reference');
            return;
        }
+        if (!mediaFolders?.Items) {
+            console.error('[add] mediaFolders not available');
+            return;
+        }
+        if (!channels?.Items) {
+            console.error('[add] channels not available');
+            return;
+        }

-        (page.querySelector('#txtUsername') as HTMLInputElement).value = '';
-        (page.querySelector('#txtPassword') as HTMLInputElement).value = '';
+        loadMediaFolders(mediaFolders?.Items);
+        loadChannels(channels?.Items);
+        loading.hide();
+    }, [loadChannels, loadMediaFolders, mediaFolders, channels]);
+
+    useEffect(() => {
        loading.show();
-        const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
-            IsHidden: false
-        }));
-        const promiseChannels = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
-        Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
-            loadMediaFolders(responses[0].Items);
-            loadChannels(responses[1].Items);
-            loading.hide();
-        }).catch(err => {
-            console.error('[usernew] failed to load data', err);
-        });
-    }, [loadChannels, loadMediaFolders]);
+        if (isMediaFoldersSuccess && isChannelsSuccess) {
+            loadUser();
+        }
+    }, [loadUser, isMediaFoldersSuccess, isChannelsSuccess]);

    useEffect(() => {
        const page = element.current;
@@ -107,51 +120,54 @@ const UserNew = () => {
            return;
        }

-        loadUser();
-
        const saveUser = () => {
-            const userInput: UserInput = {};
-            userInput.Name = (page.querySelector('#txtUsername') as HTMLInputElement).value.trim();
-            userInput.Password = (page.querySelector('#txtPassword') as HTMLInputElement).value;
+            const userInput: CreateUserByName = {
+                Name: (page.querySelector('#txtUsername') as HTMLInputElement).value,
+                Password: (page.querySelector('#txtPassword') as HTMLInputElement).value
+            };
+            createUser.mutate({ createUserByName: userInput }, {
+                onSuccess: (response) => {
+                    const user = response.data;

-            window.ApiClient.createUser(userInput).then(function (user) {
-                if (!user.Id || !user.Policy) {
-                    throw new Error('Unexpected null user id or policy');
-                }
+                    if (!user.Id || !user.Policy) {
+                        throw new Error('Unexpected null user id or policy');
+                    }

-                user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
-                user.Policy.EnabledFolders = [];
+                    user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
+                    user.Policy.EnabledFolders = [];

-                if (!user.Policy.EnableAllFolders) {
-                    user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
-                        return i.checked;
-                    }).map(function (i) {
-                        return i.getAttribute('data-id');
-                    });
-                }
-
-                user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
-                user.Policy.EnabledChannels = [];
-
-                if (!user.Policy.EnableAllChannels) {
-                    user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
-                        return i.checked;
-                    }).map(function (i) {
-                        return i.getAttribute('data-id');
-                    });
-                }
-
-                window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-                    Dashboard.navigate('/dashboard/users/profile?userId=' + user.Id)
-                        .catch(err => {
-                            console.error('[usernew] failed to navigate to edit user page', err);
+                    if (!user.Policy.EnableAllFolders) {
+                        user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
+                            return i.checked;
+                        }).map(function (i) {
+                            return i.getAttribute('data-id');
                        });
-                }).catch(err => {
-                    console.error('[usernew] failed to update user policy', err);
-                });
-            }, function () {
-                toast(globalize.translate('ErrorDefault'));
-                loading.hide();
+                    }
+
+                    user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
+                    user.Policy.EnabledChannels = [];
+
+                    if (!user.Policy.EnableAllChannels) {
+                        user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
+                            return i.checked;
+                        }).map(function (i) {
+                            return i.getAttribute('data-id');
+                        });
+                    }
+
+                    updateUserPolicy.mutate({
+                        userId: user.Id,
+                        userPolicy: user.Policy
+                    }, {
+                        onSuccess: () => {
+                            navigate(`/dashboard/users/profile?userId=${user.Id}`);
+                        },
+                        onError: () => {
+                            console.error('[usernew] failed to update user policy');
+                            setIsErrorToastOpen(true);
+                        }
+                    });
+                }
            });
        };

@@ -163,28 +179,43 @@ const UserNew = () => {
            return false;
        };

-        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
+        const enableAllChannelsChange = function (this: HTMLInputElement) {
            const channelAccessListContainer = page.querySelector('.channelAccessListContainer') as HTMLDivElement;
            this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide');
-        });
+        };

-        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
+        const enableAllFoldersChange = function (this: HTMLInputElement) {
            const folderAccessListContainer = page.querySelector('.folderAccessListContainer') as HTMLDivElement;
            this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide');
-        });
+        };

-        (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-
-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
+        const onCancelClick = () => {
            window.history.back();
-        });
-    }, [loadUser]);
+        };
+
+        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', enableAllChannelsChange);
+        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', enableAllFoldersChange);
+        (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onCancelClick);
+
+        return () => {
+            (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).removeEventListener('change', enableAllChannelsChange);
+            (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).removeEventListener('change', enableAllFoldersChange);
+            (page.querySelector('.newUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
+            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onCancelClick);
+        };
+    }, [loadUser, createUser, updateUserPolicy, navigate]);

    return (
        <Page
            id='newUserPage'
            className='mainAnimatedPage type-interior'
        >
+            <Toast
+                open={isErrorToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('ErrorDefault')}
+            />
            <div ref={element} className='content-primary'>
                <div className='verticalSection'>
                    <SectionTitleContainer
--- a/src/apps/dashboard/routes/users/index.tsx
+++ b/src/apps/dashboard/routes/users/index.tsx
@@ -1,10 +1,5 @@
-import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { useEffect, useState, useRef } from 'react';
-
-import Dashboard from '../../../../utils/dashboard';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import globalize from '../../../../lib/globalize';
-import loading from '../../../../components/loading/loading';
-import dom from '../../../../utils/dom';
 import confirm from '../../../../components/confirm/confirm';
 import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
@@ -14,6 +9,12 @@ import '../../../../components/cardbuilder/card.scss';
 import '../../../../components/indicators/indicators.scss';
 import '../../../../styles/flexstyles.scss';
 import Page from '../../../../components/Page';
+import { useLocation, useNavigate } from 'react-router-dom';
+import Toast from 'apps/dashboard/components/Toast';
+import { useUsers } from 'hooks/useUsers';
+import Loading from 'components/loading/LoadingComponent';
+import { useDeleteUser } from 'apps/dashboard/features/users/api/useDeleteUser';
+import dom from 'utils/dom';

 type MenuEntry = {
    name?: string;
@@ -22,30 +23,30 @@ type MenuEntry = {
 };

 const UserProfiles = () => {
-    const [ users, setUsers ] = useState<UserDto[]>([]);
-
+    const location = useLocation();
+    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
    const element = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const { data: users, isPending } = useUsers();
+    const deleteUser = useDeleteUser();

-    const loadData = () => {
-        loading.show();
-        window.ApiClient.getUsers().then(function (result) {
-            setUsers(result);
-            loading.hide();
-        }).catch(err => {
-            console.error('[userprofiles] failed to fetch users', err);
-        });
-    };
+    const handleToastClose = useCallback(() => {
+        setIsSettingsSavedToastOpen(false);
+    }, []);

    useEffect(() => {
        const page = element.current;

+        if (location.state?.openSavedToast) {
+            setIsSettingsSavedToastOpen(true);
+            window.history.replaceState({}, '');
+        }
+
        if (!page) {
            console.error('Unexpected null reference');
            return;
        }

-        loadData();
-
        const showUserMenu = (elem: HTMLElement) => {
            const card = dom.parentWithClass(elem, 'card');
            const userId = card?.getAttribute('data-userid');
@@ -86,28 +87,19 @@ const UserProfiles = () => {
                    callback: function (id: string) {
                        switch (id) {
                            case 'open':
-                                Dashboard.navigate('/dashboard/users/profile?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to user edit page', err);
-                                    });
+                                navigate(`/dashboard/users/profile?userId=${userId}`);
                                break;

                            case 'access':
-                                Dashboard.navigate('/dashboard/users/access?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to user library page', err);
-                                    });
+                                navigate(`/dashboard/users/access?userId=${userId}`);
                                break;

                            case 'parentalcontrol':
-                                Dashboard.navigate('/dashboard/users/parentalcontrol?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to parental control page', err);
-                                    });
+                                navigate(`/dashboard/users/parentalcontrol?userId=${userId}`);
                                break;

                            case 'delete':
-                                deleteUser(userId, username);
+                                confirmDeleteUser(userId, username);
                        }
                    }
                }).catch(() => {
@@ -118,7 +110,7 @@ const UserProfiles = () => {
            });
        };

-        const deleteUser = (id: string, username?: string | null) => {
+        const confirmDeleteUser = (id: string, username?: string | null) => {
            const title = username ? globalize.translate('DeleteName', username) : globalize.translate('DeleteUser');
            const text = globalize.translate('DeleteUserConfirmation');

@@ -128,32 +120,38 @@ const UserProfiles = () => {
                confirmText: globalize.translate('Delete'),
                primary: 'delete'
            }).then(function () {
-                loading.show();
-                window.ApiClient.deleteUser(id).then(function () {
-                    loadData();
-                }).catch(err => {
-                    console.error('[userprofiles] failed to delete user', err);
+                deleteUser.mutate({
+                    userId: id
                });
            }).catch(() => {
                // confirm dialog closed
            });
        };

-        page.addEventListener('click', function (e) {
+        const onPageClick = function (e: MouseEvent) {
            const btnUserMenu = dom.parentWithClass(e.target as HTMLElement, 'btnUserMenu');

            if (btnUserMenu) {
                showUserMenu(btnUserMenu);
            }
-        });
+        };

-        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
-            Dashboard.navigate('/dashboard/users/add')
-                .catch(err => {
-                    console.error('[userprofiles] failed to navigate to new user page', err);
-                });
-        });
-    }, []);
+        const onAddUserClick = function() {
+            navigate('/dashboard/users/add');
+        };
+
+        page.addEventListener('click', onPageClick);
+        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', onAddUserClick);
+
+        return () => {
+            page.removeEventListener('click', onPageClick);
+            (page.querySelector('#btnAddUser') as HTMLButtonElement).removeEventListener('click', onAddUserClick);
+        };
+    }, [navigate, deleteUser, location.state?.openSavedToast]);
+
+    if (isPending) {
+        return <Loading />;
+    }

    return (
        <Page
@@ -161,6 +159,11 @@ const UserProfiles = () => {
            className='mainAnimatedPage type-interior userProfilesPage fullWidthContent'
            title={globalize.translate('HeaderUsers')}
        >
+            <Toast
+                open={isSettingsSavedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('SettingsSaved')}
+            />
            <div ref={element} className='content-primary'>
                <div className='verticalSection'>
                    <SectionTitleContainer
@@ -174,7 +177,7 @@ const UserProfiles = () => {
                </div>

                <div className='localUsers itemsContainer vertical-wrap'>
-                    {users.map(user => {
+                    {users?.map(user => {
                        return <UserCardBox key={user.Id} user={user} />;
                    })}
                </div>
--- a/src/apps/dashboard/routes/users/parentalcontrol.tsx
+++ b/src/apps/dashboard/routes/users/parentalcontrol.tsx
@@ -12,12 +12,12 @@ import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
-import toast from '../../../../components/toast/toast';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
 import prompt from '../../../../components/prompt/prompt';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
+import Toast from 'apps/dashboard/components/Toast';

 type NamedItem = {
    name: string;
@@ -30,6 +30,7 @@ type UnratedNamedItem = NamedItem & {

 function handleSaveUser(
    page: HTMLDivElement,
+    parentalRatingsRef: React.MutableRefObject<ParentalRating[]>,
    getSchedulesFromPage: () => AccessSchedule[],
    getAllowedTagsFromPage: () => string[],
    getBlockedTagsFromPage: () => string[],
@@ -42,8 +43,12 @@ function handleSaveUser(
            throw new Error('Unexpected null user id or policy');
        }

-        const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
-        userPolicy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
+        const parentalRatingIndex = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
+        const parentalRating = parentalRatingsRef.current[parentalRatingIndex] as ParentalRating;
+        const score = parentalRating?.RatingScore?.score;
+        const subScore = parentalRating?.RatingScore?.subScore;
+        userPolicy.MaxParentalRating = Number.isNaN(score) ? null : score;
+        userPolicy.MaxParentalSubRating = Number.isNaN(subScore) ? null : subScore;
        userPolicy.BlockUnratedItems = Array.prototype.filter
            .call(page.querySelectorAll('.chkUnratedItem'), i => i.checked)
            .map(i => i.getAttribute('data-itemtype'));
@@ -69,33 +74,14 @@ const UserParentalControl = () => {
    const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
    const [ allowedTags, setAllowedTags ] = useState<string[]>([]);
    const [ blockedTags, setBlockedTags ] = useState<string[]>([]);
+    const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
    const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);

    const element = useRef<HTMLDivElement>(null);
+    const parentalRatingsRef = useRef<ParentalRating[]>([]);

-    const populateRatings = useCallback((allParentalRatings: ParentalRating[]) => {
-        let rating;
-        const ratings: ParentalRating[] = [];
-
-        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
-            rating = allParentalRatings[i];
-
-            if (ratings.length) {
-                const lastRating = ratings[ratings.length - 1];
-
-                if (lastRating.Value === rating.Value) {
-                    lastRating.Name += '/' + rating.Name;
-                    continue;
-                }
-            }
-
-            ratings.push({
-                Name: rating.Name,
-                Value: rating.Value
-            });
-        }
-
-        setParentalRatings(ratings);
+    const handleToastClose = useCallback(() => {
+        setIsSettingsSavedToastOpen(false);
    }, []);

    const loadUnratedItems = useCallback((user: UserDto) => {
@@ -161,16 +147,52 @@ const UserParentalControl = () => {

        setAllowedTags(user.Policy?.AllowedTags || []);
        setBlockedTags(user.Policy?.BlockedTags || []);
-        populateRatings(allParentalRatings);

-        let ratingValue = '';
-        allParentalRatings.forEach(rating => {
-            if (rating.Value != null && user.Policy?.MaxParentalRating != null && user.Policy.MaxParentalRating >= rating.Value) {
-                ratingValue = `${rating.Value}`;
+        // Build the grouped ratings array
+        const ratings: ParentalRating[] = [];
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+            const rating = allParentalRatings[i];
+
+            if (ratings.length) {
+                const lastRating = ratings[ratings.length - 1];
+
+                if (lastRating.RatingScore?.score === rating.RatingScore?.score && lastRating.RatingScore?.subScore == rating.RatingScore?.subScore) {
+                    lastRating.Name += '/' + rating.Name;
+                    continue;
+                }
            }
-        });

-        setMaxParentalRating(ratingValue);
+            ratings.push(rating);
+        }
+        setParentalRatings(ratings);
+        parentalRatingsRef.current = ratings;
+
+        // Find matching rating - first try exact match with score and subscore
+        let ratingIndex = '';
+        const userMaxRating = user.Policy?.MaxParentalRating;
+        const userMaxSubRating = user.Policy?.MaxParentalSubRating;
+
+        if (userMaxRating != null) {
+            // First try to find exact match with both score and subscore
+            ratings.forEach((rating, index) => {
+                if (rating.RatingScore?.score === userMaxRating
+                    && rating.RatingScore?.subScore === userMaxSubRating) {
+                    ratingIndex = `${index}`;
+                }
+            });
+
+            // If no exact match found, fallback to score-only match
+            if (!ratingIndex) {
+                ratings.forEach((rating, index) => {
+                    if (rating.RatingScore?.score != null
+                        && rating.RatingScore.score <= userMaxRating) {
+                        ratingIndex = `${index}`;
+                    }
+                });
+            }
+        }
+
+        setMaxParentalRating(ratingIndex);

        if (user.Policy?.IsAdministrator) {
            (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
@@ -179,7 +201,7 @@ const UserParentalControl = () => {
        }
        setAccessSchedules(user.Policy?.AccessSchedules || []);
        loading.hide();
-    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems, populateRatings]);
+    }, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems]);

    const loadData = useCallback(() => {
        if (!userId) {
@@ -283,10 +305,10 @@ const UserParentalControl = () => {

        const onSaveComplete = () => {
            loading.hide();
-            toast(globalize.translate('SettingsSaved'));
+            setIsSettingsSavedToastOpen(true);
        };

-        const saveUser = handleSaveUser(page, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
+        const saveUser = handleSaveUser(page, parentalRatingsRef, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);

        const onSubmit = (e: Event) => {
            if (!userId) {
@@ -342,11 +364,11 @@ const UserParentalControl = () => {
    const optionMaxParentalRating = () => {
        let content = '';
        content += '<option value=\'\'></option>';
-        for (const rating of parentalRatings) {
-            if (rating.Value != null) {
-                content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+        parentalRatings.forEach((rating, index) => {
+            if (rating.RatingScore != null) {
+                content += `<option value='${index}'>${escapeHTML(rating.Name)}</option>`;
            }
-        }
+        });
        return content;
    };

@@ -370,6 +392,11 @@ const UserParentalControl = () => {
            id='userParentalControlPage'
            className='mainAnimatedPage type-interior'
        >
+            <Toast
+                open={isSettingsSavedToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('SettingsSaved')}
+            />
            <div ref={element} className='content-primary'>
                <div className='verticalSection'>
                    <SectionTitleContainer
--- a/src/apps/dashboard/routes/users/password.tsx
+++ b/src/apps/dashboard/routes/users/password.tsx
@@ -1,37 +1,21 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { useSearchParams } from 'react-router-dom';

 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Page from '../../../../components/Page';
-import loading from '../../../../components/loading/loading';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import Loading from 'components/loading/LoadingComponent';

 const UserPassword = () => {
    const [ searchParams ] = useSearchParams();
    const userId = searchParams.get('userId');
-    const [ userName, setUserName ] = useState('');
+    const { data: user, isPending } = useUser(userId ? { userId: userId } : undefined);

-    const loadUser = useCallback(() => {
-        if (!userId) {
-            console.error('[userpassword] missing user id');
-            return;
-        }
-
-        loading.show();
-        window.ApiClient.getUser(userId).then(function (user) {
-            if (!user.Name) {
-                throw new Error('Unexpected null user.Name');
-            }
-            setUserName(user.Name);
-            loading.hide();
-        }).catch(err => {
-            console.error('[userpassword] failed to fetch user', err);
-        });
-    }, [userId]);
-    useEffect(() => {
-        loadUser();
-    }, [loadUser]);
+    if (isPending || !user) {
+        return <Loading />;
+    }

    return (
        <Page
@@ -41,13 +25,13 @@ const UserPassword = () => {
            <div className='content-primary'>
                <div className='verticalSection'>
                    <SectionTitleContainer
-                        title={userName}
+                        title={user?.Name || undefined}
                    />
                </div>
                <SectionTabs activeTab='userpassword'/>
                <div className='readOnlyContent'>
                    <UserPasswordForm
-                        userId={userId}
+                        user={user}
                    />
                </div>
            </div>
--- a/src/apps/dashboard/routes/users/profile.tsx
+++ b/src/apps/dashboard/routes/users/profile.tsx
@@ -1,9 +1,8 @@
 import type { BaseItemDto, NameIdPair, SyncPlayUserAccessType, UserDto } from '@jellyfin/sdk/lib/generated-client';
 import escapeHTML from 'escape-html';
 import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';

-import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import Button from '../../../../elements/emby-button/Button';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -12,9 +11,16 @@ import Input from '../../../../elements/emby-input/Input';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
-import toast from '../../../../components/toast/toast';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import { useAuthProviders } from 'apps/dashboard/features/users/api/useAuthProviders';
+import { usePasswordResetProviders } from 'apps/dashboard/features/users/api/usePasswordResetProviders';
+import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
+import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
+import { useUpdateUser } from 'apps/dashboard/features/users/api/useUpdateUser';
+import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
+import { useNetworkConfig } from 'apps/dashboard/features/users/api/useNetworkConfig';

 type ResetProvider = BaseItemDto & {
    checkedAttribute: string
@@ -25,27 +31,26 @@ const getCheckedElementDataIds = (elements: NodeListOf<Element>) => (
        .map(e => e.getAttribute('data-id'))
 );

-function onSaveComplete() {
-    Dashboard.navigate('/dashboard/users')
-        .catch(err => {
-            console.error('[useredit] failed to navigate to user profile', err);
-        });
-    loading.hide();
-    toast(globalize.translate('SettingsSaved'));
-}
-
 const UserEdit = () => {
+    const navigate = useNavigate();
    const [ searchParams ] = useSearchParams();
    const userId = searchParams.get('userId');
-    const [ userDto, setUserDto ] = useState<UserDto>();
    const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ResetProvider[]>([]);
-    const [ authProviders, setAuthProviders ] = useState<NameIdPair[]>([]);
-    const [ passwordResetProviders, setPasswordResetProviders ] = useState<NameIdPair[]>([]);
    const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);

    const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
    const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');

+    const { data: userDto, isSuccess: isUserSuccess } = useUser(userId ? { userId: userId } : undefined);
+    const { data: authProviders, isSuccess: isAuthProvidersSuccess } = useAuthProviders();
+    const { data: passwordResetProviders, isSuccess: isPasswordResetProvidersSuccess } = usePasswordResetProviders();
+    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders({ isHidden: false });
+    const { data: channels, isSuccess: isChannelsSuccess } = useChannels({ supportsMediaDeletion: true });
+    const { data: netConfig, isSuccess: isNetConfigSuccess } = useNetworkConfig();
+
+    const updateUser = useUpdateUser();
+    const updateUserPolicy = useUpdateUserPolicy();
+
    const element = useRef<HTMLDivElement>(null);

    const triggerChange = (select: HTMLInputElement) => {
@@ -53,17 +58,10 @@ const UserEdit = () => {
        select.dispatchEvent(evt);
    };

-    const getUser = () => {
-        if (!userId) throw new Error('missing user id');
-        return window.ApiClient.getUser(userId);
-    };
-
    const loadAuthProviders = useCallback((page: HTMLDivElement, user: UserDto, providers: NameIdPair[]) => {
        const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider') as HTMLDivElement;
        fldSelectLoginProvider.classList.toggle('hide', providers.length <= 1);

-        setAuthProviders(providers);
-
        const currentProviderId = user.Policy?.AuthenticationProviderId || '';
        setAuthenticationProviderId(currentProviderId);
    }, []);
@@ -72,30 +70,26 @@ const UserEdit = () => {
        const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider') as HTMLDivElement;
        fldSelectPasswordResetProvider.classList.toggle('hide', providers.length <= 1);

-        setPasswordResetProviders(providers);
-
        const currentProviderId = user.Policy?.PasswordResetProviderId || '';
        setPasswordResetProviderId(currentProviderId);
    }, []);

-    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, mediaFolders: BaseItemDto[]) => {
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', {
-            SupportsMediaDeletion: true
-        })).then(function (channelsResult) {
-            let isChecked;
-            let checkedAttribute;
-            const itemsArr: ResetProvider[] = [];
+    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, folders: BaseItemDto[]) => {
+        let isChecked;
+        let checkedAttribute;
+        const itemsArr: ResetProvider[] = [];

-            for (const mediaFolder of mediaFolders) {
-                isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
-                checkedAttribute = isChecked ? ' checked="checked"' : '';
-                itemsArr.push({
-                    ...mediaFolder,
-                    checkedAttribute: checkedAttribute
-                });
-            }
+        for (const mediaFolder of folders) {
+            isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
+            checkedAttribute = isChecked ? ' checked="checked"' : '';
+            itemsArr.push({
+                ...mediaFolder,
+                checkedAttribute: checkedAttribute
+            });
+        }

-            for (const channel of channelsResult.Items) {
+        if (channels?.Items) {
+            for (const channel of channels.Items) {
                isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(channel.Id || '') != -1;
                checkedAttribute = isChecked ? ' checked="checked"' : '';
                itemsArr.push({
@@ -103,16 +97,66 @@ const UserEdit = () => {
                    checkedAttribute: checkedAttribute
                });
            }
+        }

-            setDeleteFoldersAccess(itemsArr);
+        setDeleteFoldersAccess(itemsArr);

-            const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
-            chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
-            triggerChange(chkEnableDeleteAllFolders);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch channels', err);
-        });
-    }, []);
+        const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
+        chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
+        triggerChange(chkEnableDeleteAllFolders);
+    }, [channels]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isAuthProvidersSuccess && authProviders != null) {
+            loadAuthProviders(page, userDto, authProviders);
+        }
+    }, [authProviders, isAuthProvidersSuccess, userDto, loadAuthProviders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isPasswordResetProvidersSuccess && passwordResetProviders != null) {
+            loadPasswordResetProviders(page, userDto, passwordResetProviders);
+        }
+    }, [passwordResetProviders, isPasswordResetProvidersSuccess, userDto, loadPasswordResetProviders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isMediaFoldersSuccess && isChannelsSuccess && mediaFolders?.Items != null) {
+            loadDeleteFolders(page, userDto, mediaFolders.Items);
+        }
+    }, [userDto, mediaFolders, isMediaFoldersSuccess, isChannelsSuccess, channels, loadDeleteFolders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (netConfig && isNetConfigSuccess) {
+            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !netConfig.EnableRemoteAccess);
+        }
+    }, [netConfig, isNetConfigSuccess]);

    const loadUser = useCallback((user: UserDto) => {
        const page = element.current;
@@ -122,24 +166,6 @@ const UserEdit = () => {
            return;
        }

-        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
-            loadAuthProviders(page, user, providers);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch auth providers', err);
-        });
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) {
-            loadPasswordResetProviders(page, user, providers);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch password reset providers', err);
-        });
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
-            IsHidden: false
-        })).then(function (folders) {
-            loadDeleteFolders(page, user, folders.Items);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch media folders', err);
-        });
-
        const disabledUserBanner = page.querySelector('.disabledUserBanner') as HTMLDivElement;
        disabledUserBanner.classList.toggle('hide', !user.Policy?.IsDisabled);

@@ -149,7 +175,6 @@ const UserEdit = () => {

        void libraryMenu.then(menu => menu.setTitle(user.Name));

-        setUserDto(user);
        (page.querySelector('#txtUserName') as HTMLInputElement).value = user.Name || '';
        (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = !!user.Policy?.IsAdministrator;
        (page.querySelector('.chkDisabled') as HTMLInputElement).checked = !!user.Policy?.IsDisabled;
@@ -173,16 +198,22 @@ const UserEdit = () => {
        (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = String(user.Policy?.MaxActiveSessions) || '0';
        (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = String(user.Policy?.SyncPlayAccess);
        loading.hide();
-    }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
+    }, [ libraryMenu ]);

    const loadData = useCallback(() => {
+        if (!userDto) {
+            console.error('[profile] No user available');
+            return;
+        }
        loading.show();
-        getUser().then(function (user) {
-            loadUser(user);
-        }).catch(err => {
-            console.error('[useredit] failed to load data', err);
-        });
-    }, [loadUser]);
+        loadUser(userDto);
+    }, [userDto, loadUser]);
+
+    useEffect(() => {
+        if (isUserSuccess) {
+            loadData();
+        }
+    }, [loadData, isUserSuccess]);

    useEffect(() => {
        const page = element.current;
@@ -192,8 +223,6 @@ const UserEdit = () => {
            return;
        }

-        loadData();
-
        const saveUser = (user: UserDto) => {
            if (!user.Id || !user.Policy) {
                throw new Error('Unexpected null user id or policy');
@@ -225,50 +254,58 @@ const UserEdit = () => {
            user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : getCheckedElementDataIds(page.querySelectorAll('.chkFolder'));
            user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;

-            window.ApiClient.updateUser(user).then(() => (
-                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' })
-            )).then(() => {
-                onSaveComplete();
-            }).catch(err => {
-                console.error('[useredit] failed to update user', err);
+            updateUser.mutate({ userId: user.Id, userDto: user }, {
+                onSuccess: () => {
+                    if (user.Id) {
+                        updateUserPolicy.mutate({
+                            userId: user.Id,
+                            userPolicy: user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' }
+                        }, {
+                            onSuccess: () => {
+                                loading.hide();
+                                navigate('/dashboard/users', {
+                                    state: { openSavedToast: true }
+                                });
+                            }
+                        });
+                    }
+                }
            });
        };

        const onSubmit = (e: Event) => {
            loading.show();
-            getUser().then(function (result) {
-                saveUser(result);
-            }).catch(err => {
-                console.error('[useredit] failed to fetch user', err);
-            });
+            if (userDto) {
+                saveUser(userDto);
+            }
            e.preventDefault();
            e.stopPropagation();
            return false;
        };

+        const onBtnCancelClick = () => {
+            window.history.back();
+        };
+
        (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
            (page.querySelector('.deleteAccess') as HTMLDivElement).classList.toggle('hide', this.checked);
        });

-        window.ApiClient.getNamedConfiguration('network').then(function (config) {
-            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !config.EnableRemoteAccess);
-        }).catch(err => {
-            console.error('[useredit] failed to load network config', err);
-        });
-
        (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onBtnCancelClick);

-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
-            window.history.back();
-        });
-    }, [loadData]);
+        return () => {
+            (page.querySelector('.editUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
+            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onBtnCancelClick);
+        };
+    }, [loadData, updateUser, userDto, updateUserPolicy, navigate]);

-    const optionLoginProvider = authProviders.map((provider) => {
+    const optionLoginProvider = authProviders?.map((provider) => {
        const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
    });

-    const optionPasswordResetProvider = passwordResetProviders.map((provider) => {
+    const optionPasswordResetProvider = passwordResetProviders?.map((provider) => {
        const selected = provider.Id === passwordResetProviderId || passwordResetProviders.length < 2 ? ' selected' : '';
        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
    });
--- a/src/apps/experimental/AppOverrides.scss
+++ b/src/apps/experimental/AppOverrides.scss
@@ -27,7 +27,18 @@ $mui-bp-xl: 1536px;
    padding-top: 3.25rem !important;
 }

-// Fix backdrop position on mobile item details page
-.layout-mobile .itemBackdrop {
-    margin-top: 0 !important;
+.layout-mobile {
+    .itemBackdrop {
+        // Fix backdrop position on mobile item details page
+        margin-top: 0 !important;
+
+        // Add a subtle gradient over the backdrop to ensure the app bar buttons are visible
+        &::before {
+            display: block;
+            content: "";
+            height: 100%;
+            width: 100%;
+            background: linear-gradient(180deg, rgba(32, 32, 32, 0.6) 0%, rgba(32, 32, 32, 0.2) 4rem, rgba(0, 0, 0, 0) 50%);
+        }
+    }
 }
--- a/src/apps/experimental/components/AppToolbar/RemotePlayButton.tsx
+++ b/src/apps/experimental/components/AppToolbar/RemotePlayButton.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Cast from '@mui/icons-material/Cast';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 import Tooltip from '@mui/material/Tooltip';

 import { playbackManager } from 'components/playback/playbackmanager';
@@ -15,7 +15,6 @@ import RemotePlayMenu, { ID } from './menus/RemotePlayMenu';
 import RemotePlayActiveMenu, { ID as ACTIVE_ID } from './menus/RemotePlayActiveMenu';

 const RemotePlayButton = () => {
-    const theme = useTheme();
    const [ playerInfo, setPlayerInfo ] = useState(playbackManager.getPlayerInfo());

    const updatePlayerInfo = useCallback(() => {
@@ -70,9 +69,10 @@ const RemotePlayButton = () => {
                            aria-haspopup='true'
                            onClick={onRemotePlayActiveButtonClick}
                            color='inherit'
-                            sx={{
-                                color: theme.palette.primary.main
-                            }}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            sx={(theme) => ({
+                                color: theme.vars.palette.primary.main
+                            })}
                        >
                            {playerInfo.deviceName || playerInfo.name}
                        </Button>
--- a/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx
+++ b/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx
@@ -3,6 +3,7 @@ import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collec
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import Favorite from '@mui/icons-material/Favorite';
 import Button from '@mui/material/Button/Button';
+import Icon from '@mui/material/Icon';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -15,6 +16,7 @@ import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import useCurrentTab from 'hooks/useCurrentTab';
 import { useUserViews } from 'hooks/useUserViews';
+import { useWebConfig } from 'hooks/useWebConfig';
 import globalize from 'lib/globalize';

 import UserViewsMenu from './UserViewsMenu';
@@ -56,14 +58,19 @@ const UserViewNav = () => {
    const libraryId = searchParams.get('topParentId') || searchParams.get('parentId');
    const collectionType = searchParams.get('collectionType');
    const { activeTab } = useCurrentTab();
+    const webConfig = useWebConfig();

    const isExtraLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('xl'));
    const isLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('lg'));
    const maxViews = useMemo(() => {
-        if (isExtraLargeScreen) return MAX_USER_VIEWS_XL;
-        if (isLargeScreen) return MAX_USER_VIEWS_LG;
-        return MAX_USER_VIEWS_MD;
-    }, [ isExtraLargeScreen, isLargeScreen ]);
+        let _maxViews = MAX_USER_VIEWS_MD;
+        if (isExtraLargeScreen) _maxViews = MAX_USER_VIEWS_XL;
+        else if (isLargeScreen) _maxViews = MAX_USER_VIEWS_LG;
+
+        const customLinks = (webConfig.menuLinks || []).length;
+
+        return _maxViews - customLinks;
+    }, [ isExtraLargeScreen, isLargeScreen, webConfig.menuLinks ]);

    const { user } = useApi();
    const {
@@ -108,6 +115,21 @@ const UserViewNav = () => {
                {globalize.translate(MetaView.Favorites.Name)}
            </Button>

+            {webConfig.menuLinks?.map(link => (
+                <Button
+                    key={link.name}
+                    variant='text'
+                    color='inherit'
+                    startIcon={<Icon>{link.icon || 'link'}</Icon>}
+                    component='a'
+                    href={link.url}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    {link.name}
+                </Button>
+            ))}
+
            {primaryViews?.map(view => (
                <Button
                    key={view.Id}
--- a/src/apps/experimental/components/library/ItemsView.tsx
+++ b/src/apps/experimental/components/library/ItemsView.tsx
@@ -9,6 +9,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import classNames from 'classnames';
 import React, { type FC, useCallback } from 'react';

+import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useGetItemsViewByType } from 'hooks/useFetchItems';
@@ -99,7 +100,7 @@ const ItemsView: FC<ItemsViewProps> = ({

        if (viewType === LibraryTab.Songs) {
            listOptions.showParentTitle = true;
-            listOptions.action = 'playallfromhere';
+            listOptions.action = ItemAction.PlayAllFromHere;
            listOptions.smallIcon = true;
            listOptions.showArtist = true;
            listOptions.addToListButton = true;
--- a/src/apps/experimental/components/library/ProgramsSectionView.tsx
+++ b/src/apps/experimental/components/library/ProgramsSectionView.tsx
@@ -1,14 +1,16 @@
 import React, { type FC } from 'react';
-import { useApi } from 'hooks/useApi';
-import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
-import { appRouter } from 'components/router/appRouter';
-import globalize from 'lib/globalize';
-import Loading from 'components/loading/LoadingComponent';
+
 import NoItemsMessage from 'components/common/NoItemsMessage';
 import SectionContainer from 'components/common/SectionContainer';
-import { CardShape } from 'utils/card';
+import Loading from 'components/loading/LoadingComponent';
+import { appRouter } from 'components/router/appRouter';
+import { ItemAction } from 'constants/itemAction';
+import { useApi } from 'hooks/useApi';
+import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
+import globalize from 'lib/globalize';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
+import { CardShape } from 'utils/card';

 interface ProgramsSectionViewProps {
    parentId: ParentId;
@@ -92,7 +94,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
                        showChannelName: false,
                        cardLayout: true,
                        centerText: false,
-                        action: 'edit',
+                        action: ItemAction.Edit,
                        cardFooterAside: 'none',
                        preferThumb: true,
                        coverImage: true,
--- a/src/apps/experimental/components/library/filter/FilterButton.tsx
+++ b/src/apps/experimental/components/library/filter/FilterButton.tsx
@@ -2,8 +2,6 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import React, { FC, useCallback } from 'react';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import FilterAlt from '@mui/icons-material/FilterAlt';
-import Clear from '@mui/icons-material/Clear';
-
 import Button from '@mui/material/Button';
 import Popover from '@mui/material/Popover';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
@@ -112,16 +110,6 @@ const FilterButton: FC<FilterButtonProps> = ({
        setAnchorEl(event.currentTarget);
    }, []);

-    const handleResetFiltersClick = useCallback(() => {
-        if (hasFilters) {
-            setLibraryViewSettings((prevState) => ({
-                ...prevState,
-                StartIndex: 0,
-                Filters: {}
-            }));
-        }
-    }, [hasFilters, setLibraryViewSettings]);
-
    const handleClose = useCallback(() => {
        setAnchorEl(null);
    }, []);
@@ -459,19 +447,6 @@ const FilterButton: FC<FilterButtonProps> = ({
                        </AccordionDetails>
                    </Accordion>
                )}
-                <Button
-                    disabled={!hasFilters}
-                    title={globalize.translate('ResetFilters')}
-                    aria-describedby={id}
-                    onClick={handleResetFiltersClick}
-                    fullWidth={true}
-                    startIcon={<Clear />}
-                    sx={{
-                        justifyContent: 'right'
-                    }}
-                >
-                    {globalize.translate('ResetFilters')}
-                </Button>
            </Popover>
        </>
    );
--- a/src/apps/experimental/features/details/components/buttons/PlayOrResumeButton.tsx
+++ b/src/apps/experimental/features/details/components/buttons/PlayOrResumeButton.tsx
@@ -4,6 +4,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { useQueryClient } from '@tanstack/react-query';

+import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { getChannelQuery } from 'hooks/api/liveTvHooks/useGetChannel';
 import globalize from 'lib/globalize';
@@ -76,7 +77,7 @@ const PlayOrResumeButton: FC<PlayOrResumeButtonProps> = ({
    return (
        <IconButton
            className='button-flat btnPlayOrResume'
-            data-action={isResumable ? 'resume' : 'play'}
+            data-action={isResumable ? ItemAction.Resume : ItemAction.Play}
            title={
                isResumable ?
                    globalize.translate('ButtonResume') :
--- a/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
@@ -12,6 +12,7 @@ import React, { Fragment } from 'react';

 import { appHost } from 'components/apphost';
 import { AppFeature } from 'constants/appFeature';
+import { LayoutMode } from 'constants/layoutMode';
 import { useApi } from 'hooks/useApi';
 import { useThemes } from 'hooks/useThemes';
 import globalize from 'lib/globalize';
@@ -45,11 +46,10 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                        onChange={onChange}
                        value={values.layout}
                    >
-                        <MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
-                        <MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
-                        <MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
-                        <MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
-                        <MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
+                        <MenuItem value={LayoutMode.Auto}>{globalize.translate('Auto')}</MenuItem>
+                        <MenuItem value={LayoutMode.Desktop}>{globalize.translate('Desktop')}</MenuItem>
+                        <MenuItem value={LayoutMode.Mobile}>{globalize.translate('Mobile')}</MenuItem>
+                        <MenuItem value={LayoutMode.Tv}>{globalize.translate('TV')}</MenuItem>
                    </Select>
                    <FormHelperText component={Stack} id='display-settings-layout-description'>
                        <span>{globalize.translate('DisplayModeHelp')}</span>
@@ -169,6 +169,30 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                </Fragment>
            ) }

+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-slideshow-interval-description'
+                    value={values.slideshowInterval}
+                    label={globalize.translate('LabelSlideshowInterval')}
+                    name='slideshowInterval'
+                    onChange={onChange}
+                    slotProps={{
+                        htmlInput: {
+                            inputMode: 'numeric',
+                            max: '3600',
+                            min: '1',
+                            pattern: '[0-9]',
+                            required: true,
+                            step: '1',
+                            type: 'number'
+                        }
+                    }}
+                />
+                <FormHelperText id='display-settings-slideshow-interval-description'>
+                    {globalize.translate('LabelSlideshowIntervalHelp')}
+                </FormHelperText>
+            </FormControl>
+
            <FormControl fullWidth>
                <FormControlLabel
                    aria-describedby='display-settings-faster-animations-description'
--- a/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
+++ b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
@@ -10,6 +10,9 @@ import themeManager from 'scripts/themeManager';
 import { currentSettings, UserSettings } from 'scripts/settings/userSettings';

 import type { DisplaySettingsValues } from '../types/displaySettingsValues';
+import { useThemes } from 'hooks/useThemes';
+import { Theme } from 'types/webConfig';
+import { FALLBACK_THEME_ID } from 'hooks/useUserTheme';

 interface UseDisplaySettingsParams {
    userId?: string | null;
@@ -20,6 +23,7 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
    const [userSettings, setUserSettings] = useState<UserSettings>();
    const [displaySettings, setDisplaySettings] = useState<DisplaySettingsValues>();
    const { __legacyApiClient__, user: currentUser } = useApi();
+    const { defaultTheme } = useThemes();

    useEffect(() => {
        if (!userId || !currentUser || !__legacyApiClient__) {
@@ -29,7 +33,7 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
        setLoading(true);

        void (async () => {
-            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId });
+            const loadedSettings = await loadDisplaySettings({ api: __legacyApiClient__, currentUser, userId, defaultTheme });

            setDisplaySettings(loadedSettings.displaySettings);
            setUserSettings(loadedSettings.userSettings);
@@ -62,15 +66,17 @@ export function useDisplaySettings({ userId }: UseDisplaySettingsParams) {
 }

 interface LoadDisplaySettingsParams {
-    currentUser: UserDto;
-    userId?: string;
-    api: ApiClient;
+    currentUser: UserDto
+    userId?: string
+    api: ApiClient
+    defaultTheme?: Theme
 }

 async function loadDisplaySettings({
    currentUser,
    userId,
-    api
+    api,
+    defaultTheme
 }: LoadDisplaySettingsParams) {
    const settings = (!userId || userId === currentUser?.Id) ? currentSettings : new UserSettings();
    const user = (!userId || userId === currentUser?.Id) ? currentUser : await api.getUser(userId);
@@ -78,8 +84,8 @@ async function loadDisplaySettings({
    await settings.setUserInfo(userId, api);

    const displaySettings = {
-        customCss: settings.customCss(),
-        dashboardTheme: settings.dashboardTheme() || 'auto',
+        customCss: settings.customCss() || '',
+        dashboardTheme: settings.dashboardTheme() || defaultTheme?.id || FALLBACK_THEME_ID,
        dateTimeLocale: settings.dateTimeLocale() || 'auto',
        disableCustomCss: Boolean(settings.disableCustomCss()),
        displayMissingEpisodes: user?.Configuration?.DisplayMissingEpisodes ?? false,
@@ -97,7 +103,8 @@ async function loadDisplaySettings({
        maxDaysForNextUp: settings.maxDaysForNextUp(),
        screensaver: settings.screensaver() || 'none',
        screensaverInterval: settings.backdropScreensaverInterval(),
-        theme: settings.theme()
+        slideshowInterval: settings.slideshowInterval(),
+        theme: settings.theme() || defaultTheme?.id || FALLBACK_THEME_ID
    };

    return {
@@ -125,7 +132,7 @@ async function saveDisplaySettings({
        userSettings.language(normalizeValue(newDisplaySettings.language));
    }
    userSettings.customCss(normalizeValue(newDisplaySettings.customCss));
-    userSettings.dashboardTheme(normalizeValue(newDisplaySettings.dashboardTheme));
+    userSettings.dashboardTheme(newDisplaySettings.dashboardTheme);
    userSettings.dateTimeLocale(normalizeValue(newDisplaySettings.dateTimeLocale));
    userSettings.disableCustomCss(newDisplaySettings.disableCustomCss);
    userSettings.enableBlurhash(newDisplaySettings.enableBlurHash);
--- a/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
+++ b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
@@ -18,5 +18,6 @@ export interface DisplaySettingsValues {
    maxDaysForNextUp: number;
    screensaver: string;
    screensaverInterval: number;
+    slideshowInterval: number;
    theme: string;
 }
--- a/src/apps/experimental/routes/home.tsx
+++ b/src/apps/experimental/routes/home.tsx
@@ -5,7 +5,7 @@ import globalize from '../../../lib/globalize';
 import { clearBackdrop } from '../../../components/backdrop/backdrop';
 import layoutManager from '../../../components/layoutManager';
 import Page from '../../../components/Page';
-import { EventType } from 'types/eventType';
+import { EventType } from 'constants/eventType';
 import Events from 'utils/events';

 import '../../../elements/emby-tabs/emby-tabs';
--- a/src/apps/experimental/routes/movies/index.tsx
+++ b/src/apps/experimental/routes/movies/index.tsx
@@ -11,6 +11,7 @@ import { MovieSuggestionsSectionsView } from 'types/sections';
 const moviesTabContent: LibraryTabContent = {
    viewType: LibraryTab.Movies,
    collectionType: CollectionType.Movies,
+    isBtnPlayAllEnabled: true,
    isBtnShuffleEnabled: true,
    itemType: [BaseItemKind.Movie]
 };
@@ -20,7 +21,6 @@ const collectionsTabContent: LibraryTabContent = {
    collectionType: CollectionType.Movies,
    isBtnFilterEnabled: false,
    isBtnNewCollectionEnabled: true,
-    isAlphabetPickerEnabled: false,
    itemType: [BaseItemKind.BoxSet],
    noItemsMessage: 'MessageNoCollectionsAvailable'
 };
--- a/src/apps/experimental/routes/video/index.tsx
+++ b/src/apps/experimental/routes/video/index.tsx
@@ -6,7 +6,7 @@ import RemotePlayButton from 'apps/experimental/components/AppToolbar/RemotePlay
 import SyncPlayButton from 'apps/experimental/components/AppToolbar/SyncPlayButton';
 import AppToolbar from 'components/toolbar/AppToolbar';
 import ViewManagerPage from 'components/viewManager/ViewManagerPage';
-import { EventType } from 'types/eventType';
+import { EventType } from 'constants/eventType';
 import Events, { type Event } from 'utils/events';

 /**
--- a/src/apps/stable/features/playback/constants/subtitleStylingOption.ts
+++ b/src/apps/stable/features/playback/constants/subtitleStylingOption.ts
@@ -0,0 +1,13 @@
+/**
+ * Options specifying if the player's native subtitle (cue) element should be used, a custom element (div), or allow
+ * Jellyfin to choose automatically based on known browser support. Some browsers do not properly apply CSS styling to
+ * the native subtitle element.
+ */
+export const SubtitleStylingOption = {
+    Auto: 'Auto',
+    Custom: 'Custom',
+    Native: 'Native'
+} as const;
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type SubtitleStylingOption = typeof SubtitleStylingOption[keyof typeof SubtitleStylingOption];
--- a/src/apps/stable/features/playback/utils/mediaSessionSubscriber.ts
+++ b/src/apps/stable/features/playback/utils/mediaSessionSubscriber.ts
@@ -51,19 +51,20 @@ class MediaSessionSubscriber extends PlaybackSubscriber {
    }

    private bindNavigatorSession() {
-        /* eslint-disable compat/compat */
-        navigator.mediaSession.setActionHandler('pause', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('play', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('stop', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('previoustrack', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('nexttrack', this.onMediaSessionAction.bind(this));
-        navigator.mediaSession.setActionHandler('seekto', this.onMediaSessionAction.bind(this));
+        const actions: MediaSessionAction[] = ['pause', 'play', 'previoustrack', 'nexttrack', 'stop', 'seekto'];
+
        // iOS will only show next/prev track controls or seek controls
-        if (!browser.iOS) {
-            navigator.mediaSession.setActionHandler('seekbackward', this.onMediaSessionAction.bind(this));
-            navigator.mediaSession.setActionHandler('seekforward', this.onMediaSessionAction.bind(this));
+        if (!browser.iOS) actions.push('seekbackward', 'seekforward');
+
+        for (const action of actions) {
+            try {
+                /* eslint-disable-next-line compat/compat */
+                navigator.mediaSession.setActionHandler(action, this.onMediaSessionAction.bind(this));
+            } catch (err) {
+                // NOTE: Some legacy (TV) browsers lack support for the stop and seekto actions
+                console.warn(`[MediaSessionSubscriber] Failed to add "${action}" action handler`, err);
+            }
        }
-        /* eslint-enable compat/compat */
    }

    private onMediaSessionAction(details: MediaSessionActionDetails) {
--- a/src/apps/stable/features/playback/utils/playbackSubscriber.ts
+++ b/src/apps/stable/features/playback/utils/playbackSubscriber.ts
@@ -78,12 +78,14 @@ export abstract class PlaybackSubscriber {
    constructor(
        protected readonly playbackManager: PlaybackManager
    ) {
+        // Bind player events before invoking any player change handlers
+        Events.on(playbackManager, PlaybackManagerEvent.PlayerChange, this.bindPlayerEvents.bind(this));
+
        Object.entries(this.playbackManagerEvents).forEach(([event, handler]) => {
            if (handler) Events.on(playbackManager, event, handler);
        });

        this.bindPlayerEvents();
-        Events.on(playbackManager, PlaybackManagerEvent.PlayerChange, this.bindPlayerEvents.bind(this));
    }

    private bindPlayerEvents() {
--- a/src/apps/stable/features/playback/utils/subtitleStyles.ts
+++ b/src/apps/stable/features/playback/utils/subtitleStyles.ts
@@ -0,0 +1,43 @@
+import { SubtitleStylingOption } from 'apps/stable/features/playback/constants/subtitleStylingOption';
+import browser from 'scripts/browser';
+import type { UserSettings } from 'scripts/settings/userSettings';
+
+// TODO: This type override should be removed when userSettings are properly typed
+interface SubtitleAppearanceSettings {
+    subtitleStyling: SubtitleStylingOption
+}
+
+export function useCustomSubtitles(userSettings: UserSettings) {
+    const subtitleAppearance = userSettings.getSubtitleAppearanceSettings() as SubtitleAppearanceSettings;
+    switch (subtitleAppearance.subtitleStyling) {
+        case SubtitleStylingOption.Native:
+            return false;
+        case SubtitleStylingOption.Custom:
+            return true;
+        default:
+            // after a system update, ps4 isn't showing anything when creating a track element dynamically
+            // going to have to do it ourselves
+            if (browser.ps4) {
+                return true;
+            }
+
+            // Tizen 5 doesn't support displaying secondary subtitles
+            if ((browser.tizenVersion && browser.tizenVersion >= 5) || browser.web0s) {
+                return true;
+            }
+
+            if (browser.edge) {
+                return true;
+            }
+
+            // font-size styling does not seem to work natively in firefox. Switching to custom subtitles element for firefox.
+            if (browser.firefox) {
+                return true;
+            }
+
+            // iOS/macOS global caption settings are causing huge font-size and margins
+            if (browser.safari) return true;
+
+            return false;
+    }
+}
--- a/src/apps/stable/routes/user/userprofile.tsx
+++ b/src/apps/stable/routes/user/userprofile.tsx
@@ -1,23 +1,25 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
-import React, { FunctionComponent, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import React, { FunctionComponent, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';

 import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import { appHost } from '../../../../components/apphost';
 import confirm from '../../../../components/confirm/confirm';
-import Button from '../../../../elements/emby-button/Button';
-import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
-import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
-import Page from '../../../../components/Page';
-import { AppFeature } from 'constants/appFeature';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import loading from 'components/loading/loading';
+import { queryClient } from 'utils/query/queryClient';
+import UserPasswordForm from 'components/dashboard/users/UserPasswordForm';
+import Page from 'components/Page';
+import Loading from 'components/loading/LoadingComponent';
+import Button from 'elements/emby-button/Button';

 const UserProfile: FunctionComponent = () => {
    const [ searchParams ] = useSearchParams();
    const userId = searchParams.get('userId');
-    const [ userName, setUserName ] = useState('');
+    const { data: user, isPending: isUserPending } = useUser(userId ? { userId: userId } : undefined);
    const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);

    const element = useRef<HTMLDivElement>(null);
@@ -30,50 +32,38 @@ const UserProfile: FunctionComponent = () => {
            return;
        }

-        if (!userId) {
-            console.error('[userprofile] missing user id');
-            return;
+        if (!user?.Name || !user?.Id) {
+            throw new Error('Unexpected null user name or id');
        }

-        loading.show();
-        window.ApiClient.getUser(userId).then(function (user) {
-            if (!user.Name || !user.Id) {
-                throw new Error('Unexpected null user name or id');
-            }
+        void libraryMenu.then(menu => menu.setTitle(user.Name));

-            setUserName(user.Name);
-            void libraryMenu.then(menu => menu.setTitle(user.Name));
-
-            let imageUrl = 'assets/img/avatar.png';
-            if (user.PrimaryImageTag) {
-                imageUrl = window.ApiClient.getUserImageUrl(user.Id, {
-                    tag: user.PrimaryImageTag,
-                    type: 'Primary'
-                });
-            }
-            const userImage = (page.querySelector('#image') as HTMLDivElement);
-            userImage.style.backgroundImage = 'url(' + imageUrl + ')';
-
-            Dashboard.getCurrentUser().then(function (loggedInUser: UserDto) {
-                if (!user.Policy) {
-                    throw new Error('Unexpected null user.Policy');
-                }
-
-                if (user.PrimaryImageTag) {
-                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
-                } else if (appHost.supports(AppFeature.FileInput) && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
-                }
-            }).catch(err => {
-                console.error('[userprofile] failed to get current user', err);
+        let imageUrl = 'assets/img/avatar.png';
+        if (user.PrimaryImageTag) {
+            imageUrl = window.ApiClient.getUserImageUrl(user.Id, {
+                tag: user.PrimaryImageTag,
+                type: 'Primary'
            });
-            loading.hide();
+        }
+        const userImage = (page.querySelector('#image') as HTMLDivElement);
+        userImage.style.backgroundImage = 'url(' + imageUrl + ')';
+
+        Dashboard.getCurrentUser().then(function (loggedInUser: UserDto) {
+            if (!user.Policy) {
+                throw new Error('Unexpected null user.Policy');
+            }
+
+            if (user.PrimaryImageTag) {
+                (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
+                (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
+            } else if (appHost.supports('fileinput') && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
+                (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
+            }
        }).catch(err => {
-            console.error('[userprofile] failed to load data', err);
+            console.error('[userprofile] failed to get current user', err);
        });
-    }, [userId]);
+    }, [user, libraryMenu]);

    useEffect(() => {
        const page = element.current;
@@ -125,7 +115,9 @@ const UserProfile: FunctionComponent = () => {
                userImage.style.backgroundImage = 'url(' + reader.result + ')';
                window.ApiClient.uploadUserImage(userId, ImageType.Primary, file).then(function () {
                    loading.hide();
-                    reloadUser();
+                    void queryClient.invalidateQueries({
+                        queryKey: ['User']
+                    });
                }).catch(err => {
                    console.error('[userprofile] failed to upload image', err);
                });
@@ -134,7 +126,7 @@ const UserProfile: FunctionComponent = () => {
            reader.readAsDataURL(file);
        };

-        (page.querySelector('#btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
+        const onDeleteImageClick = function () {
            if (!userId) {
                console.error('[userprofile] missing user id');
                return;
@@ -147,25 +139,41 @@ const UserProfile: FunctionComponent = () => {
                loading.show();
                window.ApiClient.deleteUserImage(userId, ImageType.Primary).then(function () {
                    loading.hide();
-                    reloadUser();
+                    void queryClient.invalidateQueries({
+                        queryKey: ['User']
+                    });
                }).catch(err => {
                    console.error('[userprofile] failed to delete image', err);
                });
            }).catch(() => {
                // confirm dialog closed
            });
-        });
+        };

-        (page.querySelector('#btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
+        const addImageClick = function () {
            const uploadImage = page.querySelector('#uploadImage') as HTMLInputElement;
            uploadImage.value = '';
            uploadImage.click();
-        });
+        };

-        (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', function (evt: Event) {
-            setFiles(evt);
-        });
-    }, [reloadUser, userId]);
+        const onUploadImage = (e: Event) => {
+            setFiles(e);
+        };
+
+        (page.querySelector('#btnDeleteImage') as HTMLButtonElement).addEventListener('click', onDeleteImageClick);
+        (page.querySelector('#btnAddImage') as HTMLButtonElement).addEventListener('click', addImageClick);
+        (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', onUploadImage);
+
+        return () => {
+            (page.querySelector('#btnDeleteImage') as HTMLButtonElement).removeEventListener('click', onDeleteImageClick);
+            (page.querySelector('#btnAddImage') as HTMLButtonElement).removeEventListener('click', addImageClick);
+            (page.querySelector('#uploadImage') as HTMLInputElement).removeEventListener('change', onUploadImage);
+        };
+    }, [reloadUser, user, userId]);
+
+    if (isUserPending || !user) {
+        return <Loading />;
+    }

    return (
        <Page
@@ -195,7 +203,7 @@ const UserProfile: FunctionComponent = () => {
                    </div>
                    <div style={{ verticalAlign: 'top', margin: '1em 2em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <h2 className='username' style={{ margin: 0, fontSize: 'xx-large' }}>
-                            {userName}
+                            {user?.Name}
                        </h2>
                        <br />
                        <Button
@@ -213,7 +221,7 @@ const UserProfile: FunctionComponent = () => {
                    </div>
                </div>
                <UserPasswordForm
-                    userId={userId}
+                    user={user}
                />
            </div>
        </Page>
--- a/src/apps/wizard/controllers/library.js
+++ b/src/apps/wizard/controllers/library.js
@@ -354,7 +354,7 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
        html += '</div>';
    } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
        html += "<div class='cardText cardText-secondary' dir='ltr' style='text-align:left;'>";
-        html += virtualFolder.Locations[0];
+        html += escapeHtml(virtualFolder.Locations[0]);
        html += '</div>';
    } else {
        html += "<div class='cardText cardText-secondary'>";
--- a/src/assets/img/devices/titanos.svg
+++ b/src/assets/img/devices/titanos.svg
@@ -0,0 +1,12 @@
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<script xmlns="" />
+	<path
+		d="M0.0146346 0.593029L0.764804 3.57722C0.809995 3.75303 0.945568 3.88826 1.12633 3.92432L14.765 6.91753C15.1897 7.01219 15.5106 7.37733 15.5377 7.81459L16.6585 23.9031C16.6675 24.0158 16.7127 24.1195 16.7895 24.2006L17.133 24.5567C17.2233 24.6514 17.3454 24.7055 17.4764 24.7055C17.6075 24.7055 17.7295 24.6514 17.8199 24.5567L18.1633 24.2006C18.2401 24.1195 18.2853 24.0158 18.2944 23.9031L19.4151 7.81459C19.4467 7.38184 19.7631 7.01219 20.1879 6.91753L33.8265 3.92432C34.0027 3.88375 34.1428 3.75303 34.188 3.57722L34.9382 0.593029C34.9789 0.430747 34.9382 0.268465 34.8162 0.146753C34.6987 0.0250412 34.536 -0.0245451 34.3733 0.0115177L17.6843 3.66738C17.5442 3.69893 17.3996 3.69893 17.2595 3.66738L0.579521 0.0160255C0.543368 0.00250199 0.511735 0.00250199 0.475582 0.00250199C0.349047 0.00250199 0.227032 0.0520882 0.13665 0.146753C0.0191537 0.268465 -0.0260373 0.430747 0.0146346 0.593029Z"
+		fill="#fff" />
+	<path
+		d="M23.0349 32.301L23.8257 32.0936C23.9658 32.0576 24.0743 31.9494 24.0969 31.8096L27.7528 14.0397C27.8116 13.7062 28.0692 13.4357 28.4036 13.3545L31.7567 12.5476C31.8878 12.5161 31.9872 12.4169 32.0188 12.2862L32.8142 9.11267C32.8458 8.99095 32.8142 8.86474 32.7193 8.77458C32.6515 8.70696 32.5611 8.6709 32.4708 8.6709C32.4436 8.6709 32.412 8.6709 32.3849 8.67991L24.3319 10.6228C24.1782 10.6589 24.0698 10.7896 24.0607 10.9429L22.5965 31.9268C22.5875 32.0395 22.6327 32.1477 22.7231 32.2244C22.8089 32.2965 22.9264 32.3235 23.0394 32.2965L23.0349 32.301Z"
+		fill="#fff" />
+	<path
+		d="M10.996 10.6274L2.94297 8.68455C2.91586 8.67554 2.88422 8.67554 2.85711 8.67554C2.76221 8.67554 2.67635 8.7116 2.60856 8.77922C2.51818 8.86937 2.48654 8.99109 2.51366 9.11731L3.30902 12.2908C3.34065 12.4216 3.44007 12.5207 3.57113 12.5523L6.92429 13.3592C7.25871 13.4403 7.51629 13.7108 7.57504 14.0489L11.231 31.8053C11.2581 31.9495 11.362 32.0622 11.4976 32.0938L12.2975 32.3011C12.406 32.3282 12.5189 32.3011 12.6048 32.2245C12.6907 32.1524 12.7404 32.0442 12.7313 31.927L11.2671 10.943C11.2581 10.7852 11.1451 10.659 10.996 10.6229V10.6274Z"
+		fill="#fff" />
+</svg>
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -32,7 +32,7 @@ const ConfirmDialog: FC<ConfirmDialogProps> = ({
            {title}
        </DialogTitle>
        <DialogContent>
-            <DialogContentText>
+            <DialogContentText sx={{ whiteSpace: 'pre-wrap' }}>
                {text}
            </DialogContentText>
        </DialogContent>
--- a/src/components/InputDialog.tsx
+++ b/src/components/InputDialog.tsx
@@ -11,13 +11,24 @@ import Stack from '@mui/material/Stack';
 interface InputDialogProps extends DialogProps {
    title: string;
    label: string;
+    helperText?: string;
+    initialText?: string;
    confirmButtonText?: string;
    onClose: () => void;
    onConfirm: (text: string) => void;
 };

-const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm }: InputDialogProps) => {
-    const [ text, setText ] = useState('');
+const InputDialog = ({
+    open,
+    title,
+    label,
+    helperText,
+    initialText,
+    onClose,
+    confirmButtonText,
+    onConfirm
+}: InputDialogProps) => {
+    const [ text, setText ] = useState(initialText || '');

    const onTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value);
@@ -37,7 +48,7 @@ const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm
        >
            {title && (
                <DialogTitle>
-                    {title}
+                    {title || ''}
                </DialogTitle>
            )}
            <DialogContent>
@@ -45,6 +56,7 @@ const InputDialog = ({ open, title, label, onClose, confirmButtonText, onConfirm
                    <TextField
                        label={label}
                        value={text}
+                        helperText={helperText}
                        onChange={onTextChange}
                        variant='standard'
                    />
--- a/src/components/UserAvatar.tsx
+++ b/src/components/UserAvatar.tsx
@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
 import Avatar from '@mui/material/Avatar';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';

 import { useApi } from 'hooks/useApi';

@@ -11,7 +11,6 @@ interface UserAvatarProps {

 const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
    const { api } = useApi();
-    const theme = useTheme();

    return user ? (
        <Avatar
@@ -21,12 +20,13 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
                    `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
                    undefined
            }
-            sx={{
+            // eslint-disable-next-line react/jsx-no-bind
+            sx={(theme) => ({
                bgcolor: api && user.Id && user.PrimaryImageTag ?
-                    theme.palette.background.paper :
-                    theme.palette.primary.dark,
+                    theme.vars.palette.background.paper :
+                    theme.vars.palette.primary.dark,
                color: 'inherit'
-            }}
+            })}
        />
    ) : null;
 };
--- a/src/components/alert.js
+++ b/src/components/alert.js
@@ -1,27 +1,12 @@
 import { appRouter } from './router/appRouter';
-import browser from '../scripts/browser';
 import dialog from './dialog/dialog';
 import globalize from '../lib/globalize';

 export default async function (text, title) {
-    // Modals seem to be blocked on Web OS and Tizen 2.x
-    const canUseNativeAlert = !!(
-        !browser.web0s
-        && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8))
-        && browser.tv
-        && window.alert
-    );
-
    const options = typeof text === 'string' ? { title, text } : text;

    await appRouter.ready();

-    if (canUseNativeAlert) {
-        alert((options.text || '').replaceAll('<br/>', '\n'));
-
-        return Promise.resolve();
-    }
-
    options.buttons = [
        {
            name: globalize.translate('ButtonGotIt'),
--- a/src/components/apphost.js
+++ b/src/components/apphost.js
@@ -6,12 +6,14 @@ import * as webSettings from '../scripts/settings/webSettings';
 import globalize from '../lib/globalize';
 import profileBuilder from '../scripts/browserDeviceProfile';
 import { AppFeature } from 'constants/appFeature';
+import { LayoutMode } from 'constants/layoutMode';

 const appName = 'Jellyfin Web';

 const BrowserName = {
    tizen: 'Samsung Smart TV',
    web0s: 'LG Smart TV',
+    titanos: 'Titan OS',
    operaTv: 'Opera TV',
    xboxOne: 'Xbox One',
    ps4: 'Sony PS4',
@@ -180,7 +182,7 @@ function supportsFullscreen() {
 }

 function getDefaultLayout() {
-    return 'desktop';
+    return LayoutMode.Experimental;
 }

 function supportsHtmlMediaAutoplay() {
@@ -370,7 +372,7 @@ export const appHost = {

        return getDefaultLayout();
    },
-    getDeviceProfile: getDeviceProfile,
+    getDeviceProfile,
    init: function () {
        if (window.NativeShell) {
            return window.NativeShell.AppHost.init();
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -12,9 +12,7 @@ function enableAnimation() {
 }

 function enableRotation() {
-    return !browser.tv
-            // Causes high cpu usage
-            && !browser.firefox;
+    return !browser.tv;
 }

 class Backdrop {
@@ -236,7 +234,7 @@ export function setBackdropImages(images) {
    currentRotationIndex = -1;

    if (images.length > 1 && enableRotation()) {
-        rotationInterval = setInterval(onRotationInterval, 24000);
+        rotationInterval = setInterval(onRotationInterval, 10000);
    }

    onRotationInterval();
--- a/src/components/cardbuilder/Card/CardBox.tsx
+++ b/src/components/cardbuilder/Card/CardBox.tsx
@@ -1,17 +1,18 @@
 import React, { type FC } from 'react';
+
 import layoutManager from 'components/layoutManager';
+import { ItemAction } from 'constants/itemAction';
+import { CardShape } from 'utils/card';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { CardOptions } from 'types/cardOptions';

 import CardOverlayButtons from './CardOverlayButtons';
 import CardHoverMenu from './CardHoverMenu';
 import CardOuterFooter from './CardOuterFooter';
 import CardContent from './CardContent';
-import { CardShape } from 'utils/card';
-
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { CardOptions } from 'types/cardOptions';

 interface CardBoxProps {
-    action: string;
+    action: ItemAction;
    item: ItemDto;
    cardOptions: CardOptions;
    className: string;
--- a/src/components/cardbuilder/Card/CardHoverMenu.tsx
+++ b/src/components/cardbuilder/Card/CardHoverMenu.tsx
@@ -2,12 +2,14 @@ import React, { type FC } from 'react';
 import Box from '@mui/material/Box';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import classNames from 'classnames';
+
 import { appRouter } from 'components/router/appRouter';
 import itemHelper from 'components/itemHelper';
 import { playbackManager } from 'components/playback/playbackmanager';
-
+import { ItemAction } from 'constants/itemAction';
 import PlayedButton from 'elements/emby-playstatebutton/PlayedButton';
 import FavoriteButton from 'elements/emby-ratingbutton/FavoriteButton';
+
 import PlayArrowIconButton from '../../common/PlayArrowIconButton';
 import MoreVertIconButton from '../../common/MoreVertIconButton';

@@ -15,7 +17,7 @@ import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';

 interface CardHoverMenuProps {
-    action: string,
+    action: ItemAction,
    item: ItemDto;
    cardOptions: CardOptions;
 }
@@ -29,7 +31,7 @@ const CardHoverMenu: FC<CardHoverMenuProps> = ({
        parentId: cardOptions.parentId
    });
    const btnCssClass =
-		'paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction';
+        'paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction';

    const centerPlayButtonClass = classNames(
        btnCssClass,
@@ -51,7 +53,7 @@ const CardHoverMenu: FC<CardHoverMenuProps> = ({
            {playbackManager.canPlay(item) && (
                <PlayArrowIconButton
                    className={centerPlayButtonClass}
-                    action='play'
+                    action={ItemAction.Play}
                    title='Play'
                />
            )}
--- a/src/components/cardbuilder/Card/CardOverlayButtons.tsx
+++ b/src/components/cardbuilder/Card/CardOverlayButtons.tsx
@@ -2,15 +2,17 @@ import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location
 import React, { type FC } from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import classNames from 'classnames';
-import { appRouter } from 'components/router/appRouter';
-import PlayArrowIconButton from '../../common/PlayArrowIconButton';
-import MoreVertIconButton from '../../common/MoreVertIconButton';

+import { appRouter } from 'components/router/appRouter';
+import { ItemAction } from 'constants/itemAction';
 import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';

+import PlayArrowIconButton from '../../common/PlayArrowIconButton';
+import MoreVertIconButton from '../../common/MoreVertIconButton';
+
 const sholudShowOverlayPlayButton = (
    overlayPlayButton: boolean | undefined,
    item: ItemDto
@@ -78,7 +80,7 @@ const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
            {cardOptions.centerPlayButton && (
                <PlayArrowIconButton
                    className={centerPlayButtonClass}
-                    action='play'
+                    action={ItemAction.Play}
                    title='Play'
                />
            )}
@@ -87,7 +89,7 @@ const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
                {sholudShowOverlayPlayButton(overlayPlayButton, item) && (
                    <PlayArrowIconButton
                        className={btnCssClass}
-                        action='play'
+                        action={ItemAction.Play}
                        title='Play'
                    />
                )}
--- a/src/components/cardbuilder/Card/CardText.tsx
+++ b/src/components/cardbuilder/Card/CardText.tsx
@@ -1,5 +1,8 @@
 import React, { type FC } from 'react';
 import Box from '@mui/material/Box';
+
+import { ensureArray } from 'utils/array';
+
 import type { TextLine } from './cardHelper';

 interface CardTextProps {
@@ -7,27 +10,33 @@ interface CardTextProps {
    textLine: TextLine;
 }

+const SEPARATOR = ' / ';
+
 const CardText: FC<CardTextProps> = ({ className, textLine }) => {
    const { title, titleAction } = textLine;
-    // eslint-disable-next-line sonarjs/function-return-type
-    const renderCardText = () => {
-        if (titleAction) {
-            return (
-                <a
-                    className='itemAction textActionButton'
-                    href={titleAction.url}
-                    title={titleAction.title}
-                    {...titleAction.dataAttributes}
-                >
-                    {titleAction.title}
-                </a>
-            );
-        } else {
-            return title;
-        }
-    };

-    return <Box className={className}>{renderCardText()}</Box>;
+    return (
+        <Box className={className}>
+            {titleAction ? (
+                ensureArray(titleAction).map((action, i, arr) => (
+                    <>
+                        <a
+                            className='itemAction textActionButton'
+                            href={action.url}
+                            title={action.title}
+                            {...action.dataAttributes}
+                        >
+                            {action.title}
+                        </a>
+                        {/* If there are more items, add the separator */}
+                        {(i < arr.length - 1) && SEPARATOR}
+                    </>
+                ))
+            ) : (
+                ensureArray(title).join(SEPARATOR)
+            )}
+        </Box>
+    );
 };

 export default CardText;
--- a/src/components/cardbuilder/Card/cardHelper.ts
+++ b/src/components/cardbuilder/Card/cardHelper.ts
@@ -1,4 +1,5 @@
 import { Api } from '@jellyfin/sdk';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import type { BaseItemPerson } from '@jellyfin/sdk/lib/generated-client/models/base-item-person';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
@@ -6,12 +7,14 @@ import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 import { appRouter } from 'components/router/appRouter';
 import layoutManager from 'components/layoutManager';
 import itemHelper from 'components/itemHelper';
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import datetime from 'scripts/datetime';
 import { isUsingLiveTvNaming } from '../cardBuilderUtils';
 import { getDataAttributes } from 'utils/items';
 import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
+import { ensureArray } from 'utils/array';

 import type { NullableNumber, NullableString } from 'types/base/common/shared/types';
 import type { ItemDto } from 'types/base/models/item-dto';
@@ -65,8 +68,8 @@ interface TextAction {
 }

 export interface TextLine {
-    title?: NullableString;
-    titleAction?: TextAction;
+    title?: NullableString | string[];
+    titleAction?: TextAction | TextAction[];
 }

 export function getTextActionButton(
@@ -86,7 +89,7 @@ export function getTextActionButton(

    const dataAttributes = getDataAttributes(
        {
-            action: 'link',
+            action: ItemAction.Link,
            itemServerId: serverId ?? item.ServerId,
            itemId: item.Id,
            itemChannelId: item.ChannelId,
@@ -210,9 +213,25 @@ function getParentTitle(
    item: ItemDto
 ) {
    if (isOuterFooter && item.AlbumArtists?.length) {
-        (item.AlbumArtists[0] as ItemDto).Type = ItemKind.MusicArtist;
-        (item.AlbumArtists[0] as ItemDto).IsFolder = true;
-        return getTextActionButton(item.AlbumArtists[0], null, serverId);
+        return item.AlbumArtists
+            .map(artist => {
+                const artistItem: ItemDto = {
+                    ...artist,
+                    Type: BaseItemKind.MusicArtist,
+                    IsFolder: true
+                };
+                return getTextActionButton(artistItem, null, serverId);
+            })
+            .reduce((acc, line) => ({
+                title: [
+                    ...ensureArray(acc.title),
+                    ...ensureArray(line.title)
+                ],
+                titleAction: [
+                    ...ensureArray(acc.titleAction),
+                    ...ensureArray(line.titleAction)
+                ]
+            }), {});
    } else {
        return {
            title: isUsingLiveTvNaming(item.Type) ?
--- a/src/components/cardbuilder/Card/useCard.ts
+++ b/src/components/cardbuilder/Card/useCard.ts
@@ -1,17 +1,19 @@
 import classNames from 'classnames';
+
+import layoutManager from 'components/layoutManager';
+import { ItemAction } from 'constants/itemAction';
+import { ItemKind } from 'types/base/models/item-kind';
+import { ItemMediaKind } from 'types/base/models/item-media-kind';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { CardOptions } from 'types/cardOptions';
+import { CardShape } from 'utils/card';
+import { getDataAttributes } from 'utils/items';
+
 import useCardImageUrl from './useCardImageUrl';
 import {
    resolveAction,
    resolveMixedShapeByAspectRatio
 } from '../cardBuilderUtils';
-import { getDataAttributes } from 'utils/items';
-import { CardShape } from 'utils/card';
-import layoutManager from 'components/layoutManager';
-
-import { ItemKind } from 'types/base/models/item-kind';
-import { ItemMediaKind } from 'types/base/models/item-media-kind';
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { CardOptions } from 'types/cardOptions';

 interface UseCardProps {
    item: ItemDto;
@@ -20,7 +22,7 @@ interface UseCardProps {

 function useCard({ item, cardOptions }: UseCardProps) {
    const action = resolveAction({
-        defaultAction: cardOptions.action ?? 'link',
+        defaultAction: cardOptions.action ?? ItemAction.Link,
        isFolder: item.IsFolder ?? false,
        isPhoto: item.MediaType === ItemMediaKind.Photo
    });
--- a/Show More
+++ b/Show More