diff --git a/internal/graph/schema.resolvers.go b/internal/graph/schema.resolvers.go
index 1e02aba8..244f087f 100644
--- a/internal/graph/schema.resolvers.go
+++ b/internal/graph/schema.resolvers.go
@@ -31,7 +31,8 @@ func (r *clusterResolver) Partitions(ctx context.Context, obj *schema.Cluster) (
 
 // StartTime is the resolver for the startTime field.
 func (r *jobResolver) StartTime(ctx context.Context, obj *schema.Job) (*time.Time, error) {
-	panic(fmt.Errorf("not implemented: StartTime - startTime"))
+	timestamp := time.Unix(obj.StartTime, 0)
+	return &timestamp, nil
 }
 
 // Tags is the resolver for the tags field.
diff --git a/internal/metricdata/cc-metric-store.go b/internal/metricdata/cc-metric-store.go
index 557e1d25..b76ed5b4 100644
--- a/internal/metricdata/cc-metric-store.go
+++ b/internal/metricdata/cc-metric-store.go
@@ -850,7 +850,7 @@ func (ccms *CCMetricStore) LoadNodeListData(
 	if len(nodes) > page.ItemsPerPage {
 		start := (page.Page - 1) * page.ItemsPerPage
 		end := start + page.ItemsPerPage
-		if end > len(nodes) {
+		if end >= len(nodes) {
 			end = len(nodes)
 			hasNextPage = false
 		} else {
diff --git a/internal/metricdata/prometheus.go b/internal/metricdata/prometheus.go
index fa497649..e0add3a7 100644
--- a/internal/metricdata/prometheus.go
+++ b/internal/metricdata/prometheus.go
@@ -539,7 +539,7 @@ func (pdb *PrometheusDataRepository) LoadNodeListData(
 	if len(nodes) > page.ItemsPerPage {
 		start := (page.Page - 1) * page.ItemsPerPage
 		end := start + page.ItemsPerPage
-		if end > len(nodes) {
+		if end >= len(nodes) {
 			end = len(nodes)
 			hasNextPage = false
 		} else {
diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index 0b31f401..51e358d9 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -9,32 +9,31 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@rollup/plugin-replace": "^5.0.7",
-        "@sveltestrap/sveltestrap": "^6.2.7",
-        "@urql/svelte": "^4.2.2",
-        "chart.js": "^4.4.6",
-        "date-fns": "^2.30.0",
-        "graphql": "^16.9.0",
-        "mathjs": "^12.4.3",
-        "svelte-chartjs": "^3.1.5",
-        "uplot": "^1.6.31",
-        "wonka": "^6.3.4"
+        "@rollup/plugin-replace": "^6.0.2",
+        "@sveltestrap/sveltestrap": "^7.1.0",
+        "@urql/svelte": "^4.2.3",
+        "chart.js": "^4.4.9",
+        "date-fns": "^4.1.0",
+        "graphql": "^16.11.0",
+        "mathjs": "^14.5.2",
+        "uplot": "^1.6.32",
+        "wonka": "^6.3.5"
       },
       "devDependencies": {
-        "@rollup/plugin-commonjs": "^25.0.8",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
         "@rollup/plugin-terser": "^0.4.4",
         "@timohausmann/quadtree-js": "^1.2.6",
-        "rollup": "^4.27.4",
+        "rollup": "^4.41.1",
         "rollup-plugin-css-only": "^4.5.2",
         "rollup-plugin-svelte": "^7.2.2",
-        "svelte": "^4.2.19"
+        "svelte": "^5.33.14"
       }
     },
     "node_modules/@0no-co/graphql.web": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.0.11.tgz",
-      "integrity": "sha512-xuSJ9WXwTmtngWkbdEoopMo6F8NLtjy84UNAMsAr5C3/2SgAL/dEU10TMqTIsipqPQ8HA/7WzeqQ9DEQxSvPPA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.1.2.tgz",
+      "integrity": "sha512-N2NGsU5FLBhT8NZ+3l2YrzZSHITjNXNuDhC4iDiikv0IujaJ0Xc6xIxQZ/Ek3Cb+rgPjnLHYyJm11tInuJn+cw==",
       "license": "MIT",
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
@@ -59,21 +58,18 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -146,21 +142,22 @@
       }
     },
     "node_modules/@rollup/plugin-commonjs": {
-      "version": "25.0.8",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz",
-      "integrity": "sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==",
+      "version": "28.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.3.tgz",
+      "integrity": "sha512-pyltgilam1QPdn+Zd9gaCfOLcnjMEJ9gV+bTw6/r73INdvzf1ah9zLIJBm+kW7R6IUFIQ1YO+VqZtYxZNWFPEQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
         "commondir": "^1.0.1",
         "estree-walker": "^2.0.2",
-        "glob": "^8.0.3",
+        "fdir": "^6.2.0",
         "is-reference": "1.2.1",
-        "magic-string": "^0.30.3"
+        "magic-string": "^0.30.3",
+        "picomatch": "^4.0.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0 || 14 >= 14.17"
       },
       "peerDependencies": {
         "rollup": "^2.68.0||^3.0.0||^4.0.0"
@@ -172,9 +169,9 @@
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
-      "integrity": "sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==",
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.1.tgz",
+      "integrity": "sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -197,9 +194,9 @@
       }
     },
     "node_modules/@rollup/plugin-replace": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.7.tgz",
-      "integrity": "sha512-PqxSfuorkHz/SPpyngLyg5GCEkOcee9M1bkxiVDr41Pd61mqP1PLOoDPbpl44SB2mQGKwV/In74gqQmGITOhEQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.2.tgz",
+      "integrity": "sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==",
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
@@ -241,9 +238,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
-      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -263,9 +260,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.27.4.tgz",
-      "integrity": "sha512-2Y3JT6f5MrQkICUyRVCw4oa0sutfAsgaSsb0Lmmy1Wi2y7X5vT9Euqw4gOsCyy0YfKURBg35nhUKZS4mDcfULw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.1.tgz",
+      "integrity": "sha512-NELNvyEWZ6R9QMkiytB4/L4zSEaBC03KIXEghptLGLZWJ6VPrL63ooZQCOnlx36aQPGhzuOMwDerC1Eb2VmrLw==",
       "cpu": [
         "arm"
       ],
@@ -277,9 +274,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.27.4.tgz",
-      "integrity": "sha512-wzKRQXISyi9UdCVRqEd0H4cMpzvHYt1f/C3CoIjES6cG++RHKhrBj2+29nPF0IB5kpy9MS71vs07fvrNGAl/iA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.1.tgz",
+      "integrity": "sha512-DXdQe1BJ6TK47ukAoZLehRHhfKnKg9BjnQYUu9gzhI8Mwa1d2fzxA1aw2JixHVl403bwp1+/o/NhhHtxWJBgEA==",
       "cpu": [
         "arm64"
       ],
@@ -291,9 +288,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.4.tgz",
-      "integrity": "sha512-PlNiRQapift4LNS8DPUHuDX/IdXiLjf8mc5vdEmUR0fF/pyy2qWwzdLjB+iZquGr8LuN4LnUoSEvKRwjSVYz3Q==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.1.tgz",
+      "integrity": "sha512-5afxvwszzdulsU2w8JKWwY8/sJOLPzf0e1bFuvcW5h9zsEg+RQAojdW0ux2zyYAz7R8HvvzKCjLNJhVq965U7w==",
       "cpu": [
         "arm64"
       ],
@@ -305,9 +302,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.27.4.tgz",
-      "integrity": "sha512-o9bH2dbdgBDJaXWJCDTNDYa171ACUdzpxSZt+u/AAeQ20Nk5x+IhA+zsGmrQtpkLiumRJEYef68gcpn2ooXhSQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.1.tgz",
+      "integrity": "sha512-egpJACny8QOdHNNMZKf8xY0Is6gIMz+tuqXlusxquWu3F833DcMwmGM7WlvCO9sB3OsPjdC4U0wHw5FabzCGZg==",
       "cpu": [
         "x64"
       ],
@@ -319,9 +316,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.27.4.tgz",
-      "integrity": "sha512-NBI2/i2hT9Q+HySSHTBh52da7isru4aAAo6qC3I7QFVsuhxi2gM8t/EI9EVcILiHLj1vfi+VGGPaLOUENn7pmw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.1.tgz",
+      "integrity": "sha512-DBVMZH5vbjgRk3r0OzgjS38z+atlupJ7xfKIDJdZZL6sM6wjfDNo64aowcLPKIx7LMQi8vybB56uh1Ftck/Atg==",
       "cpu": [
         "arm64"
       ],
@@ -333,9 +330,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.27.4.tgz",
-      "integrity": "sha512-wYcC5ycW2zvqtDYrE7deary2P2UFmSh85PUpAx+dwTCO9uw3sgzD6Gv9n5X4vLaQKsrfTSZZ7Z7uynQozPVvWA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.1.tgz",
+      "integrity": "sha512-3FkydeohozEskBxNWEIbPfOE0aqQgB6ttTkJ159uWOFn42VLyfAiyD9UK5mhu+ItWzft60DycIN1Xdgiy8o/SA==",
       "cpu": [
         "x64"
       ],
@@ -347,9 +344,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.27.4.tgz",
-      "integrity": "sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.1.tgz",
+      "integrity": "sha512-wC53ZNDgt0pqx5xCAgNunkTzFE8GTgdZ9EwYGVcg+jEjJdZGtq9xPjDnFgfFozQI/Xm1mh+D9YlYtl+ueswNEg==",
       "cpu": [
         "arm"
       ],
@@ -361,9 +358,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.4.tgz",
-      "integrity": "sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.1.tgz",
+      "integrity": "sha512-jwKCca1gbZkZLhLRtsrka5N8sFAaxrGz/7wRJ8Wwvq3jug7toO21vWlViihG85ei7uJTpzbXZRcORotE+xyrLA==",
       "cpu": [
         "arm"
       ],
@@ -375,9 +372,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.4.tgz",
-      "integrity": "sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.1.tgz",
+      "integrity": "sha512-g0UBcNknsmmNQ8V2d/zD2P7WWfJKU0F1nu0k5pW4rvdb+BIqMm8ToluW/eeRmxCared5dD76lS04uL4UaNgpNA==",
       "cpu": [
         "arm64"
       ],
@@ -389,9 +386,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.27.4.tgz",
-      "integrity": "sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.1.tgz",
+      "integrity": "sha512-XZpeGB5TKEZWzIrj7sXr+BEaSgo/ma/kCgrZgL0oo5qdB1JlTzIYQKel/RmhT6vMAvOdM2teYlAaOGJpJ9lahg==",
       "cpu": [
         "arm64"
       ],
@@ -402,10 +399,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.1.tgz",
+      "integrity": "sha512-bkCfDJ4qzWfFRCNt5RVV4DOw6KEgFTUZi2r2RuYhGWC8WhCA8lCAJhDeAmrM/fdiAH54m0mA0Vk2FGRPyzI+tw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.27.4.tgz",
-      "integrity": "sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.1.tgz",
+      "integrity": "sha512-3mr3Xm+gvMX+/8EKogIZSIEF0WUu0HL9di+YWlJpO8CQBnoLAEL/roTCxuLncEdgcfJcvA4UMOf+2dnjl4Ut1A==",
       "cpu": [
         "ppc64"
       ],
@@ -417,9 +428,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.27.4.tgz",
-      "integrity": "sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.1.tgz",
+      "integrity": "sha512-3rwCIh6MQ1LGrvKJitQjZFuQnT2wxfU+ivhNBzmxXTXPllewOF7JR1s2vMX/tWtUYFgphygxjqMl76q4aMotGw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.1.tgz",
+      "integrity": "sha512-LdIUOb3gvfmpkgFZuccNa2uYiqtgZAz3PTzjuM5bH3nvuy9ty6RGc/Q0+HDFrHrizJGVpjnTZ1yS5TNNjFlklw==",
       "cpu": [
         "riscv64"
       ],
@@ -431,9 +456,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.27.4.tgz",
-      "integrity": "sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.1.tgz",
+      "integrity": "sha512-oIE6M8WC9ma6xYqjvPhzZYk6NbobIURvP/lEbh7FWplcMO6gn7MM2yHKA1eC/GvYwzNKK/1LYgqzdkZ8YFxR8g==",
       "cpu": [
         "s390x"
       ],
@@ -445,9 +470,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.4.tgz",
-      "integrity": "sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.1.tgz",
+      "integrity": "sha512-cWBOvayNvA+SyeQMp79BHPK8ws6sHSsYnK5zDcsC3Hsxr1dgTABKjMnMslPq1DvZIp6uO7kIWhiGwaTdR4Og9A==",
       "cpu": [
         "x64"
       ],
@@ -459,9 +484,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.4.tgz",
-      "integrity": "sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.1.tgz",
+      "integrity": "sha512-y5CbN44M+pUCdGDlZFzGGBSKCA4A/J2ZH4edTYSSxFg7ce1Xt3GtydbVKWLlzL+INfFIZAEg1ZV6hh9+QQf9YQ==",
       "cpu": [
         "x64"
       ],
@@ -473,9 +498,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.27.4.tgz",
-      "integrity": "sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.1.tgz",
+      "integrity": "sha512-lZkCxIrjlJlMt1dLO/FbpZbzt6J/A8p4DnqzSa4PWqPEUUUnzXLeki/iyPLfV0BmHItlYgHUqJe+3KiyydmiNQ==",
       "cpu": [
         "arm64"
       ],
@@ -487,9 +512,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.4.tgz",
-      "integrity": "sha512-KtwEJOaHAVJlxV92rNYiG9JQwQAdhBlrjNRp7P9L8Cb4Rer3in+0A+IPhJC9y68WAi9H0sX4AiG2NTsVlmqJeQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.1.tgz",
+      "integrity": "sha512-+psFT9+pIh2iuGsxFYYa/LhS5MFKmuivRsx9iPJWNSGbh2XVEjk90fmpUEjCnILPEPJnikAU6SFDiEUyOv90Pg==",
       "cpu": [
         "ia32"
       ],
@@ -501,9 +526,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.27.4.tgz",
-      "integrity": "sha512-3j4jx1TppORdTAoBJRd+/wJRGCPC0ETWkXOecJ6PPZLj6SptXkrXcNqdj0oclbKML6FkQltdz7bBA3rUSirZug==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.1.tgz",
+      "integrity": "sha512-Wq2zpapRYLfi4aKxf2Xff0tN+7slj2d4R87WEzqw7ZLsVvO5zwYCIuEGSZYiK41+GlwUo1HiR+GdkLEJnCKTCw==",
       "cpu": [
         "x64"
       ],
@@ -514,10 +539,19 @@
         "win32"
       ]
     },
+    "node_modules/@sveltejs/acorn-typescript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+      "integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8.9.0"
+      }
+    },
     "node_modules/@sveltestrap/sveltestrap": {
-      "version": "6.2.7",
-      "resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-6.2.7.tgz",
-      "integrity": "sha512-WwLLfAFUb42BGuRrf3Vbct30bQMzlEMMipN/MfxhjuLTmLQeW9muVJfPyvjtWS+mY+RjkSCoHvAp/ZobP1NLlQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-7.1.0.tgz",
+      "integrity": "sha512-TpIx25kqLV+z+VD3yfqYayOI1IaCeWFbT0uqM6NfA4vQgDs9PjFwmjkU4YEAlV/ngs9e7xPmaRWE7lkrg4Miow==",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.8"
@@ -534,9 +568,9 @@
       "license": "MIT"
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
     "node_modules/@types/resolve": {
@@ -547,9 +581,9 @@
       "license": "MIT"
     },
     "node_modules/@urql/core": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/@urql/core/-/core-5.0.8.tgz",
-      "integrity": "sha512-1GOnUw7/a9bzkcM0+U8U5MmxW2A7FE5YquuEmcJzTtW5tIs2EoS4F2ITpuKBjRBbyRjZgO860nWFPo1m4JImGA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@urql/core/-/core-5.1.1.tgz",
+      "integrity": "sha512-aGh024z5v2oINGD/In6rAtVKTm4VmQ2TxKQBAtk2ZSME5dunZFcjltw4p5ENQg+5CBhZ3FHMzl0Oa+rwqiWqlg==",
       "license": "MIT",
       "dependencies": {
         "@0no-co/graphql.web": "^1.0.5",
@@ -557,12 +591,12 @@
       }
     },
     "node_modules/@urql/svelte": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@urql/svelte/-/svelte-4.2.2.tgz",
-      "integrity": "sha512-6ntLGsWcnNtaMZVmFpePfFTSpYxYpznCAqnuvLDjt7Oa7YqHcFiyPnz7IIsiPD9VE6hZSi0+RwmRk5BMba/teQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@urql/svelte/-/svelte-4.2.3.tgz",
+      "integrity": "sha512-v3eArfymhdjaM5VQFp3QZxq9veYPadmDfX7ueid/kD4DlRplIycPakJ2FrKigh46SXa5mWqJ3QWuWyRKVu61sw==",
       "license": "MIT",
       "dependencies": {
-        "@urql/core": "^5.0.0",
+        "@urql/core": "^5.1.1",
         "wonka": "^6.3.2"
       },
       "peerDependencies": {
@@ -571,9 +605,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -600,23 +634,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -625,9 +642,9 @@
       "license": "MIT"
     },
     "node_modules/chart.js": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
-      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
+      "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
       "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
@@ -636,26 +653,13 @@
         "pnpm": ">=8"
       }
     },
-    "node_modules/code-red": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.10.0",
-        "estree-walker": "^3.0.3",
-        "periscopic": "^3.1.0"
-      }
-    },
-    "node_modules/code-red/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/commander": {
@@ -685,39 +689,20 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "license": "MIT",
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/decimal.js": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz",
+      "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
       "license": "MIT"
     },
     "node_modules/deepmerge": {
@@ -736,32 +721,55 @@
       "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
       "license": "MIT"
     },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "license": "MIT"
+    },
+    "node_modules/esrap": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.7.tgz",
+      "integrity": "sha512-0ZxW6guTF/AeKeKi7he93lmgv7Hx7giD1tBrOeVqkqsZGQJd2/kfnL7LdIsr9FT/AtkBK9XeDTov+gxprBqdEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/fdir": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
+      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fraction.js": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.4.tgz",
-      "integrity": "sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.2.2.tgz",
+      "integrity": "sha512-uXBDv5knpYmv/2gLzWQ5mBHGBRk9wcKTeWu6GLTUEQfjCxO09uM/mHDrojlL+Q1mVGIIFo149Gba7od1XPgSzQ==",
       "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": ">= 12"
       },
       "funding": {
-        "type": "patreon",
+        "type": "github",
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -787,31 +795,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/graphql": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
-      "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
+      "version": "16.11.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz",
+      "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==",
       "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
@@ -830,29 +817,10 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/is-core-module": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -895,29 +863,29 @@
       "license": "MIT"
     },
     "node_modules/magic-string": {
-      "version": "0.30.14",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
-      "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/mathjs": {
-      "version": "12.4.3",
-      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.4.3.tgz",
-      "integrity": "sha512-oHdGPDbp7gO873xxG90RLq36IuicuKvbpr/bBG5g9c8Obm/VsKVrK9uoRZZHUodohzlnmCEqfDzbR3LH6m+aAQ==",
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-14.5.2.tgz",
+      "integrity": "sha512-51U6hp7j4M4Rj+l+q2KbmXAV9EhQVQzUdw1wE67RnUkKKq5ibxdrl9Ky2YkSUEIc2+VU8/IsThZNu6QSHUoyTA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@babel/runtime": "^7.24.4",
-        "complex.js": "^2.1.1",
+        "@babel/runtime": "^7.26.10",
+        "complex.js": "^2.2.5",
         "decimal.js": "^10.4.3",
         "escape-latex": "^1.2.0",
-        "fraction.js": "4.3.4",
+        "fraction.js": "^5.2.1",
         "javascript-natural-sort": "^0.7.1",
         "seedrandom": "^3.0.5",
         "tiny-emitter": "^2.1.0",
-        "typed-function": "^4.1.1"
+        "typed-function": "^4.2.1"
       },
       "bin": {
         "mathjs": "bin/cli.js"
@@ -926,35 +894,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "license": "CC0-1.0"
-    },
-    "node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -962,35 +901,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/periscopic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "is-reference": "^3.0.0"
-      }
-    },
-    "node_modules/periscopic/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
-    "node_modules/periscopic/node_modules/is-reference": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
-      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.6"
-      }
-    },
     "node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
@@ -1013,34 +923,31 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.13.0",
+        "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
       "bin": {
         "resolve": "bin/resolve"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/resolve.exports": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz",
-      "integrity": "sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+      "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1048,13 +955,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.27.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz",
-      "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
+      "integrity": "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.6"
+        "@types/estree": "1.0.7"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1064,24 +971,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.27.4",
-        "@rollup/rollup-android-arm64": "4.27.4",
-        "@rollup/rollup-darwin-arm64": "4.27.4",
-        "@rollup/rollup-darwin-x64": "4.27.4",
-        "@rollup/rollup-freebsd-arm64": "4.27.4",
-        "@rollup/rollup-freebsd-x64": "4.27.4",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.27.4",
-        "@rollup/rollup-linux-arm-musleabihf": "4.27.4",
-        "@rollup/rollup-linux-arm64-gnu": "4.27.4",
-        "@rollup/rollup-linux-arm64-musl": "4.27.4",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4",
-        "@rollup/rollup-linux-riscv64-gnu": "4.27.4",
-        "@rollup/rollup-linux-s390x-gnu": "4.27.4",
-        "@rollup/rollup-linux-x64-gnu": "4.27.4",
-        "@rollup/rollup-linux-x64-musl": "4.27.4",
-        "@rollup/rollup-win32-arm64-msvc": "4.27.4",
-        "@rollup/rollup-win32-ia32-msvc": "4.27.4",
-        "@rollup/rollup-win32-x64-msvc": "4.27.4",
+        "@rollup/rollup-android-arm-eabi": "4.41.1",
+        "@rollup/rollup-android-arm64": "4.41.1",
+        "@rollup/rollup-darwin-arm64": "4.41.1",
+        "@rollup/rollup-darwin-x64": "4.41.1",
+        "@rollup/rollup-freebsd-arm64": "4.41.1",
+        "@rollup/rollup-freebsd-x64": "4.41.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.41.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.41.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.41.1",
+        "@rollup/rollup-linux-arm64-musl": "4.41.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.41.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.41.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-musl": "4.41.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.41.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.41.1",
+        "@rollup/rollup-win32-x64-msvc": "4.41.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -1146,6 +1055,13 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/rollup/node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1200,15 +1116,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -1234,47 +1141,28 @@
       }
     },
     "node_modules/svelte": {
-      "version": "4.2.19",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
-      "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
+      "version": "5.33.14",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.14.tgz",
+      "integrity": "sha512-kRlbhIlMTijbFmVDQFDeKXPLlX1/ovXwV0I162wRqQhRcygaqDIcu1d/Ese3H2uI+yt3uT8E7ndgDthQv5v5BA==",
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.9.0",
-        "aria-query": "^5.3.0",
-        "axobject-query": "^4.0.0",
-        "code-red": "^1.0.3",
-        "css-tree": "^2.3.1",
-        "estree-walker": "^3.0.3",
-        "is-reference": "^3.0.1",
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@sveltejs/acorn-typescript": "^1.0.5",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.6",
+        "is-reference": "^3.0.3",
         "locate-character": "^3.0.0",
-        "magic-string": "^0.30.4",
-        "periscopic": "^3.1.0"
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
       },
       "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/svelte-chartjs": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/svelte-chartjs/-/svelte-chartjs-3.1.5.tgz",
-      "integrity": "sha512-ka2zh7v5FiwfAX1oMflZ0HkNkgjHjFqANgRyC+vNYXfxtx2ku68Zo+2KgbKeBH2nS1ThDqkIACPzGxy4T0UaoA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "chart.js": "^3.5.0 || ^4.0.0",
-        "svelte": "^4.0.0"
-      }
-    },
-    "node_modules/svelte/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
+        "node": ">=18"
       }
     },
     "node_modules/svelte/node_modules/is-reference": {
@@ -1287,14 +1175,14 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.36.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
-      "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.41.0.tgz",
+      "integrity": "sha512-H406eLPXpZbAX14+B8psIuvIr8+3c+2hkuYzpMkoE0ij+NdsVATbA78vb8neA/eqrj7rywa2pIkdmWRsXW6wmw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
+        "acorn": "^8.14.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -1321,23 +1209,22 @@
       }
     },
     "node_modules/uplot": {
-      "version": "1.6.31",
-      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.31.tgz",
-      "integrity": "sha512-sQZqSwVCbJGnFB4IQjQYopzj5CoTZJ4Br1fG/xdONimqgHmsacvCjNesdGDypNKFbrhLGIeshYhy89FxPF+H+w==",
+      "version": "1.6.32",
+      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.32.tgz",
+      "integrity": "sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==",
       "license": "MIT"
     },
     "node_modules/wonka": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.4.tgz",
-      "integrity": "sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.5.tgz",
+      "integrity": "sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==",
       "license": "MIT"
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
-      "license": "ISC"
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "license": "MIT"
     }
   }
 }
diff --git a/web/frontend/package.json b/web/frontend/package.json
index 389ffe6a..b10e2718 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -7,25 +7,24 @@
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@timohausmann/quadtree-js": "^1.2.6",
-    "rollup": "^4.27.4",
+    "rollup": "^4.41.1",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-svelte": "^7.2.2",
-    "svelte": "^4.2.19"
+    "svelte": "^5.33.14"
   },
   "dependencies": {
-    "@rollup/plugin-replace": "^5.0.7",
-    "@sveltestrap/sveltestrap": "^6.2.7",
-    "@urql/svelte": "^4.2.2",
-    "chart.js": "^4.4.6",
-    "date-fns": "^2.30.0",
-    "graphql": "^16.9.0",
-    "mathjs": "^12.4.3",
-    "svelte-chartjs": "^3.1.5",
-    "uplot": "^1.6.31",
-    "wonka": "^6.3.4"
+    "@rollup/plugin-replace": "^6.0.2",
+    "@sveltestrap/sveltestrap": "^7.1.0",
+    "@urql/svelte": "^4.2.3",
+    "chart.js": "^4.4.9",
+    "date-fns": "^4.1.0",
+    "graphql": "^16.11.0",
+    "mathjs": "^14.5.2",
+    "uplot": "^1.6.32",
+    "wonka": "^6.3.5"
   }
 }
diff --git a/web/frontend/rollup.config.mjs b/web/frontend/rollup.config.mjs
index 0e151054..a7b47327 100644
--- a/web/frontend/rollup.config.mjs
+++ b/web/frontend/rollup.config.mjs
@@ -6,13 +6,20 @@ import terser from '@rollup/plugin-terser';
 import css from 'rollup-plugin-css-only';
 
 const production = !process.env.ROLLUP_WATCH;
-// const production = false
 
 const plugins = [
     svelte({
         compilerOptions: {
-            // enable run-time checks when not in production
-            dev: !production
+            // Enable run-time checks when not in production
+            dev: !production,
+            // Enable Svelte 5-specific features
+            hydratable: true, // If using server-side rendering
+            immutable: true, // Optimize updates for immutable data
+            // As of sveltestrap 7.1.0, filtered warnings would appear for imported sveltestrap components
+            warningFilter: (warning) => (
+                warning.code !== 'element_invalid_self_closing_tag' &&
+                warning.code !== 'a11y_interactive_supports_focus'
+            )
         }
     }),
 
@@ -23,7 +30,7 @@ const plugins = [
     // https://github.com/rollup/plugins/tree/master/packages/commonjs
     resolve({
         browser: true,
-        dedupe: ['svelte']
+        dedupe: ['svelte', '@sveltejs/kit'] // Ensure deduplication for Svelte 5
     }),
     commonjs(),
 
@@ -32,8 +39,10 @@ const plugins = [
     production && terser(),
 
     replace({
-        "process.env.NODE_ENV": JSON.stringify("development"),
-        preventAssignment: true
+        preventAssignment: true,
+        values: {
+            "process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),
+        }
     })
 ];
 
diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 8b327a25..83c67545 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -37,14 +37,12 @@
   import ScatterPlot from "./generic/plots/Scatter.svelte";
   import RooflineHeatmap from "./generic/plots/RooflineHeatmap.svelte";
 
-  const { query: initq } = init();
-
-  export let filterPresets;
+  /* Svelte 5 Props */
+  let { filterPresets } = $props();
 
   // By default, look at the jobs of the last 6 hours:
   if (filterPresets?.startTime == null) {
     if (filterPresets == null) filterPresets = {};
-
     let now = new Date(Date.now());
     let hourAgo = new Date(now);
     hourAgo.setHours(hourAgo.getHours() - 6);
@@ -54,27 +52,10 @@
     };
   }
 
-  let cluster;
-  let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
-  let jobFilters = [];
-  let rooflineMaxY;
-  let colWidth1, colWidth2;
-  let numBins = 50;
-  let maxY = -1;
-
-  const initialized = getContext("initialized");
-  const globalMetrics = getContext("globalMetrics");
+  /* Const Init */
+  const { query: initq } = init();
+  const client = getContextClient();
   const ccconfig = getContext("cc-config");
-
-  let metricsInHistograms = ccconfig.analysis_view_histogramMetrics,
-    metricsInScatterplots = ccconfig.analysis_view_scatterPlotMetrics;
-
-  $: metrics = [
-    ...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()]),
-  ];
-
-  $: clusterName = cluster?.name ? cluster.name : cluster;
-
   const sortOptions = [
     { key: "totalWalltime", label: "Walltime" },
     { key: "totalNodeHours", label: "Node Hours" },
@@ -86,7 +67,22 @@
     { key: "project", label: "Project ID" },
   ];
 
-  let sortSelection =
+  /* Var Init */
+  let metricUnits = {};
+  let metricScopes = {};
+  let numBins = 50;
+
+  /* State Init */
+  let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
+  let cluster = $state(filterPresets?.cluster);
+  let rooflineMaxY = $state(0);
+  let maxY = $state(-1);
+  let colWidth1 = $state(0);
+  let colWidth2 = $state(0);
+  let jobFilters = $state([]);
+  let metricsInHistograms = $state(ccconfig.analysis_view_histogramMetrics)
+  let metricsInScatterplots = $state(ccconfig.analysis_view_scatterPlotMetrics)
+  let sortSelection = $state(
     sortOptions.find(
       (option) =>
         option.key ==
@@ -94,17 +90,20 @@
     ) ||
     sortOptions.find(
       (option) => option.key == ccconfig.analysis_view_selectedTopCategory,
-    );
-  let groupSelection =
-    groupOptions.find(
-      (option) =>
-        option.key ==
-        ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`],
-    ) ||
-    groupOptions.find(
-      (option) => option.key == ccconfig.analysis_view_selectedTopEntity,
-    );
+    )
+  );
+  let groupSelection = $state(
+      groupOptions.find(
+        (option) =>
+          option.key ==
+          ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`],
+      ) ||
+      groupOptions.find(
+        (option) => option.key == ccconfig.analysis_view_selectedTopEntity,
+      )
+  );
 
+  /* Init Function */
   getContext("on-init")(({ data }) => {
     if (data != null) {
       cluster = data.clusters.find((c) => c.name == filterPresets.cluster);
@@ -121,120 +120,145 @@
     }
   });
 
-  const client = getContextClient();
+  /* Derived Vars */
+  const clusterName = $derived(cluster?.name ? cluster.name : cluster);
+  const availableMetrics = $derived(loadAvailable($initq?.data?.globalMetrics, clusterName));
+  const metrics = $derived(
+    [...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()])]
+  );
 
-  $: statsQuery = queryStore({
-    client: client,
-    query: gql`
-      query ($jobFilters: [JobFilter!]!) {
-        stats: jobsStatistics(filter: $jobFilters) {
-          totalJobs
-          shortJobs
-          totalWalltime
-          totalNodeHours
-          totalCoreHours
-          totalAccHours
-          histDuration {
-            count
-            value
-          }
-          histNumCores {
-            count
-            value
+  let statsQuery = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+        query ($jobFilters: [JobFilter!]!) {
+          stats: jobsStatistics(filter: $jobFilters) {
+            totalJobs
+            shortJobs
+            totalWalltime
+            totalNodeHours
+            totalCoreHours
+            totalAccHours
+            histDuration {
+              count
+              value
+            }
+            histNumCores {
+              count
+              value
+            }
           }
         }
-      }
-    `,
-    variables: { jobFilters },
-  });
+      `,
+      variables: { jobFilters },
+    })
+  );
 
-  $: topQuery = queryStore({
-    client: client,
-    query: gql`
-      query (
-        $jobFilters: [JobFilter!]!
-        $paging: PageRequest!
-        $sortBy: SortByAggregate!
-        $groupBy: Aggregate!
-      ) {
-        topList: jobsStatistics(
-          filter: $jobFilters
-          page: $paging
-          sortBy: $sortBy
-          groupBy: $groupBy
+  let topQuery = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+        query (
+          $jobFilters: [JobFilter!]!
+          $paging: PageRequest!
+          $sortBy: SortByAggregate!
+          $groupBy: Aggregate!
         ) {
-          id
-          name
-          totalWalltime
-          totalNodeHours
-          totalCoreHours
-          totalAccHours
+          topList: jobsStatistics(
+            filter: $jobFilters
+            page: $paging
+            sortBy: $sortBy
+            groupBy: $groupBy
+          ) {
+            id
+            name
+            totalWalltime
+            totalNodeHours
+            totalCoreHours
+            totalAccHours
+          }
         }
-      }
-    `,
-    variables: {
-      jobFilters,
-      paging: { itemsPerPage: 10, page: 1 },
-      sortBy: sortSelection.key.toUpperCase(),
-      groupBy: groupSelection.key.toUpperCase(),
-    },
-  });
+      `,
+      variables: {
+        jobFilters,
+        paging: { itemsPerPage: 10, page: 1 },
+        sortBy: sortSelection.key.toUpperCase(),
+        groupBy: groupSelection.key.toUpperCase(),
+      },
+    })
+  );
 
   // Note: Different footprints than those saved in DB per Job -> Caused by Legacy Naming
-  $: footprintsQuery = queryStore({
-    client: client,
-    query: gql`
-      query ($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
-        footprints: jobsFootprints(filter: $jobFilters, metrics: $metrics) {
-          timeWeights {
-            nodeHours
-            accHours
-            coreHours
-          }
-          metrics {
-            metric
-            data
+  let footprintsQuery = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+        query ($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
+          footprints: jobsFootprints(filter: $jobFilters, metrics: $metrics) {
+            timeWeights {
+              nodeHours
+              accHours
+              coreHours
+            }
+            metrics {
+              metric
+              data
+            }
           }
         }
-      }
-    `,
-    variables: { jobFilters, metrics },
-  });
+      `,
+      variables: { jobFilters, metrics },
+    })
+  );
 
-  $: rooflineQuery = queryStore({
-    client: client,
-    query: gql`
-      query (
-        $jobFilters: [JobFilter!]!
-        $rows: Int!
-        $cols: Int!
-        $minX: Float!
-        $minY: Float!
-        $maxX: Float!
-        $maxY: Float!
-      ) {
-        rooflineHeatmap(
-          filter: $jobFilters
-          rows: $rows
-          cols: $cols
-          minX: $minX
-          minY: $minY
-          maxX: $maxX
-          maxY: $maxY
-        )
-      }
-    `,
-    variables: {
-      jobFilters,
-      rows: 50,
-      cols: 50,
-      minX: 0.01,
-      minY: 1,
-      maxX: 1000,
-      maxY,
-    },
+  let rooflineQuery = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+        query (
+          $jobFilters: [JobFilter!]!
+          $rows: Int!
+          $cols: Int!
+          $minX: Float!
+          $minY: Float!
+          $maxX: Float!
+          $maxY: Float!
+        ) {
+          rooflineHeatmap(
+            filter: $jobFilters
+            rows: $rows
+            cols: $cols
+            minX: $minX
+            minY: $minY
+            maxX: $maxX
+            maxY: $maxY
+          )
+        }
+      `,
+      variables: {
+        jobFilters,
+        rows: 50,
+        cols: 50,
+        minX: 0.01,
+        minY: 1,
+        maxX: 1000,
+        maxY,
+      },
+    })
+  );
+
+  /* Reactive Effects */
+  $effect(() => {
+    loadUnitsAndScopes(availableMetrics.length, availableMetrics);
+  });
+  $effect(() => {
+    updateEntityConfiguration(groupSelection.key);
+  });
+  $effect(() => {
+    updateCategoryConfiguration(sortSelection.key);
   });
 
+  /* Functions */
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
       client: client,
@@ -287,22 +311,26 @@
     }
   }
 
-  let availableMetrics = [];
-  let metricUnits = {};
-  let metricScopes = {};
-  function loadMetrics(isInitialized) {
-    if (!isInitialized) return
-    availableMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster.name))]
-    for (let sm of availableMetrics) {
-      metricUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
-      metricScopes[sm.name] = sm?.scope
+  function loadAvailable(globals, name) {
+    const availableMetrics = new Set();
+    if (globals && globals.length > 0) {
+      for (let gm of globals) {
+        if (gm.availability.find((av) => av.cluster == name)) {
+          availableMetrics.add({name: gm.name, scope: gm.scope, unit: gm.unit});
+        };
+      }
     }
-  }
+    return [...availableMetrics]
+  };
 
-  $: loadMetrics($initialized)
-  $: updateEntityConfiguration(groupSelection.key);
-  $: updateCategoryConfiguration(sortSelection.key);
+  function loadUnitsAndScopes(length, available) {
+    for (let am of available) {
+      metricUnits[am.name] = (am?.unit?.prefix ? am.unit.prefix : "") + (am?.unit?.base ? am.unit.base : "")
+      metricScopes[am.name] = am?.scope
+    }
+  }
 
+  /* On Mount */
   onMount(() => filterComponent.updateFilters());
 </script>
 
@@ -329,7 +357,7 @@
       {filterPresets}
       disableClusterSelection={true}
       startTimeQuickSelect={true}
-      on:update-filters={({ detail }) => {
+      applyFilters={(detail) => {
         jobFilters = detail.filters;
       }}
     />
@@ -392,6 +420,7 @@
             <Card body color="danger">{$topQuery.error.message}</Card>
           {:else}
             <Pie
+              canvasId={`pie-${groupSelection.key}`}
               size={colWidth1}
               sliceLabel={sortSelection.label}
               quantities={$topQuery.data.topList.map(
diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index cf3e058e..24735421 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -5,6 +5,7 @@
     - `username String`: Empty string if auth. is disabled, otherwise the username as string
     - `authlevel Number`: The current users authentication level
     - `clusters [String]`: List of cluster names
+    - `subClusters [String]`: List of subCluster names
     - `roles [Number]`: Enum containing available roles
  -->
 
@@ -23,24 +24,21 @@
   import NavbarLinks from "./header/NavbarLinks.svelte";
   import NavbarTools from "./header/NavbarTools.svelte";
 
-  export let username;
-  export let authlevel;
-  export let clusters;
-  export let subClusters;
-  export let roles;
-
-  let isOpen = false;
-  let screenSize;
+  /* Svelte 5 Props */
+  let { username, authlevel, clusters, subClusters, roles } = $props();
 
+  /* Const Init */
   const jobsTitle = new Map();
   jobsTitle.set(2, "Job Search");
   jobsTitle.set(3, "Managed Jobs");
   jobsTitle.set(4, "Jobs");
   jobsTitle.set(5, "Jobs");
+
   const usersTitle = new Map();
   usersTitle.set(3, "Managed Users");
   usersTitle.set(4, "Users");
   usersTitle.set(5, "Users");
+
   const projectsTitle = new Map();
   projectsTitle.set(3, "Managed Projects");
   projectsTitle.set(4, "Projects");
@@ -120,29 +118,41 @@
       menu: "Info",
     },
   ];
+
+  /* State Init */
+  let isOpen = $state(false);
+  let screenSize = $state(0);
+
+  /* Derived Vars */
+  let showMax = $derived(screenSize >= 1500);
+  let showMid = $derived(screenSize < 1500 && screenSize >= 1300);
+  let showSml = $derived(screenSize < 1300 && screenSize >= 768);
+  let showBrg = $derived(screenSize < 768);
 </script>
 
 <svelte:window bind:innerWidth={screenSize} />
+
 <Navbar color="light" light expand="md" fixed="top">
   <NavbarBrand href="/">
     <img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
   </NavbarBrand>
-  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+  <NavbarToggler onclick={() => (isOpen = !isOpen)} />
   <Collapse
     style="justify-content: space-between"
     {isOpen}
     navbar
     expand="md"
-    on:update={({ detail }) => (isOpen = detail.isOpen)}
+    onupdate={({ detail }) => (isOpen = detail.isOpen)}
   >
     <Nav navbar>
-      {#if screenSize > 1500 || screenSize < 768}
+      {#if showMax || showBrg}
         <NavbarLinks
           {clusters}
           {subClusters}
           links={views.filter((item) => item.requiredRole <= authlevel)}
         />
-      {:else if screenSize > 1300}
+
+      {:else if showMid}
         <NavbarLinks
           {clusters}
           {subClusters}
@@ -169,7 +179,8 @@
             </DropdownMenu>
           </Dropdown>
         {/if}
-      {:else}
+
+      {:else if showSml}
         <NavbarLinks
           {clusters}
           {subClusters}
@@ -228,8 +239,11 @@
             </DropdownMenu>
           </Dropdown>
         {/if}
+
+      {:else}
+          <span>Error: Unknown Window Size!</span>
       {/if}
     </Nav>
     <NavbarTools {username} {authlevel} {roles} {screenSize} />
   </Collapse>
-</Navbar>
+</Navbar>
\ No newline at end of file
diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 92d8bb2e..427c9ae1 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -56,8 +56,8 @@
     selectedScopes = [],
     plots = {};
 
-  let availableMetrics = new Set(),
-    missingMetrics = [],
+  let totalMetrics = 0;
+  let missingMetrics = [],
     missingHosts = [],
     somethingMissing = false;
 
@@ -294,7 +294,7 @@
       {#if $initq?.data}
         <Col xs="auto">
             <Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary">
-              Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
+              Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
             </Button>
         </Col>
       {/if}
@@ -428,12 +428,16 @@
 
 {#if $initq?.data}
   <MetricSelection
+    bind:isOpen={isMetricsSelectionOpen}
+    bind:totalMetrics
+    presetMetrics={selectedMetrics}
     cluster={$initq.data.job.cluster}
     subCluster={$initq.data.job.subCluster}
     configName="job_view_selectedMetrics"
-    bind:metrics={selectedMetrics}
-    bind:isOpen={isMetricsSelectionOpen}
-    bind:allMetrics={availableMetrics}
+    preInitialized
+    applyMetrics={(newMetrics) => 
+      selectedMetrics = [...newMetrics]
+    }
   />
 {/if}
 
diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte
index 1e7f96d0..312c7262 100644
--- a/web/frontend/src/Jobs.root.svelte
+++ b/web/frontend/src/Jobs.root.svelte
@@ -8,7 +8,7 @@
  -->
  
  <script>
-  import { onMount, getContext } from "svelte";
+  import { untrack, onMount, getContext } from "svelte";
   import {
     Row,
     Col,
@@ -27,43 +27,59 @@
   import Sorting from "./generic/select/SortSelection.svelte";
   import MetricSelection from "./generic/select/MetricSelection.svelte";
 
-  const { query: initq } = init();
+  /* Svelte 5 Props */
+  let { filterPresets, authlevel, roles } = $props();
 
+  /* Const Init */
+  const { query: initq } = init();
   const ccconfig = getContext("cc-config");
+  const presetProject = filterPresets?.project ? filterPresets.project : ""
 
-  export let filterPresets = {};
-  export let authlevel;
-  export let roles;
-
-  let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
-  let filterBuffer = [];
-  let selectedJobs = [];
-  let jobList,
-      jobCompare,
-    matchedListJobs,
-    matchedCompareJobs = null;
-  let sorting = { field: "startTime", type: "col", order: "DESC" },
-    isSortingOpen = false,
-    isMetricsSelectionOpen = false;
-  let metrics = filterPresets.cluster
+  /* State Init */
+  let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
+  let selectedJobs = $state([]);
+  let filterBuffer = $state([]);
+  let jobList = $state(null);
+  let jobCompare = $state(null);
+  let matchedListJobs = $state(0);
+  let matchedCompareJobs = $state(0);
+  let isSortingOpen = $state(false);
+  let showCompare = $state(false);
+  let isMetricsSelectionOpen = $state(false);
+  let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
+  let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
+  let metrics = $state(filterPresets.cluster
     ? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] ||
       ccconfig.plot_list_selectedMetrics
-    : ccconfig.plot_list_selectedMetrics;
-  let showFootprint = filterPresets.cluster
+    : ccconfig.plot_list_selectedMetrics
+  );
+  let showFootprint = $state(filterPresets.cluster
     ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
-    : !!ccconfig.plot_list_showFootprint;
-  let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
-  let presetProject = filterPresets?.project ? filterPresets.project : ""
-  let showCompare = false;
+    : !!ccconfig.plot_list_showFootprint
+  );
+
+  /* Functions */
+  function resetJobSelection() {
+    if (filterComponent && selectedJobs.length === 0) {
+      filterComponent.updateFilters({ dbId: [] });
+    };
+  };
 
+  /* Reactive Effects */
+  $effect(() => {
+    // Reactive : Trigger Effect
+    selectedJobs.length
+    untrack(() => {
+      // Unreactive : Apply Reset w/o starting infinite loop
+      resetJobSelection()
+    });
+	});
+
+  /* On Mount */
   // The filterPresets are handled by the Filters component,
   // so we need to wait for it to be ready before we can start a query.
   // This is also why JobList component starts out with a paused query.
   onMount(() => filterComponent.updateFilters());
-
-  $: if (filterComponent && selectedJobs.length == 0) {
-    filterComponent.updateFilters({dbId: []})
-  }
 </script>
 
 <!-- ROW1: Status-->
@@ -85,25 +101,25 @@
 <Row cols={{ xs: 1, md: 2, lg: 5}} class="mb-3">
   <Col lg="2" class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button outline color="primary" on:click={() => (isSortingOpen = true)} disabled={showCompare}>
+      <Button outline color="primary" onclick={() => (isSortingOpen = true)} disabled={showCompare}>
         <Icon name="sort-up" /> Sorting
       </Button>
       <Button
         outline
         color="primary"
-        on:click={() => (isMetricsSelectionOpen = true)}
+        onclick={() => (isMetricsSelectionOpen = true)}
       >
         <Icon name="graph-up" /> Metrics
       </Button>
     </ButtonGroup>
   </Col>
-  <Col lg="4" class="mb-1 mb-lg-0">
+  <Col lg="5" class="mb-1 mb-lg-0">
     <Filters
-      showFilter={!showCompare}
+      bind:this={filterComponent}
       {filterPresets}
+      showFilter={!showCompare}
       matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
-      bind:this={filterComponent}
-      on:update-filters={({ detail }) => {
+      applyFilters={(detail) => {
         selectedCluster = detail.filters[0]?.cluster
           ? detail.filters[0].cluster.eq
           : null;
@@ -122,29 +138,31 @@
         {presetProject}
         bind:authlevel
         bind:roles
-        on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
+        setFilter={(filter) => filterComponent.updateFilters(filter)}
       />
     {/if}
   </Col>
-  <Col lg="2" class="mb-1 mb-lg-0">
+  <Col lg="3" class="mb-1 mb-lg-0 d-inline-flex align-items-start justify-content-end ">
     {#if !showCompare}
-      <Refresher on:refresh={() => {
+      <Refresher presetClass="w-auto" onRefresh={() => {
           jobList.refreshJobs()
           jobList.refreshAllMetrics()
       }} />
     {/if}
-  </Col>
-  <Col lg="2" class="mb-2 mb-lg-0">
-    <ButtonGroup class="w-100">
-      <Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} on:click={() => {
+    <div class="mx-1"></div>
+    <ButtonGroup class="w-50">
+      <Button color="primary" disabled={(matchedListJobs >= 500 && !(selectedJobs.length != 0)) || $initq.fetching} onclick={() => {
         if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true)
         showCompare = !showCompare
       }} >
         {showCompare ? 'Return to List' : 
-        'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)}
+           matchedListJobs >= 500 && selectedJobs.length == 0
+            ? 'Compare Disabled'
+            : 'Compare' + (selectedJobs.length != 0 ? ` ${selectedJobs.length} ` : ' ') + 'Jobs'
+        }
       </Button>
       {#if !showCompare && selectedJobs.length != 0}
-        <Button color="warning" on:click={() => {
+        <Button class="w-auto" color="warning" onclick={() => {
           selectedJobs = [] // Only empty array, filters handled by reactive reset
         }}>
         Clear
@@ -181,10 +199,13 @@
 <Sorting bind:sorting bind:isOpen={isSortingOpen}/>
 
 <MetricSelection
-  bind:cluster={selectedCluster}
-  configName="plot_list_selectedMetrics"
-  bind:metrics
-  bind:isOpen={isMetricsSelectionOpen}
-  bind:showFootprint
-  footprintSelect
+    bind:isOpen={isMetricsSelectionOpen}
+    bind:showFootprint
+    presetMetrics={metrics}
+    cluster={selectedCluster}
+    configName="plot_list_selectedMetrics"
+    footprintSelect
+    applyMetrics={(newMetrics) => 
+      metrics = [...newMetrics]
+    }
 />
diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte
index ef57e277..bcebd141 100644
--- a/web/frontend/src/List.root.svelte
+++ b/web/frontend/src/List.root.svelte
@@ -31,10 +31,8 @@
   } from "./generic/utils.js";
   import Filters from "./generic/Filters.svelte";
 
-  const {} = init();
-
-  export let type;
-  export let filterPresets;
+  /* Svelte 5 Props */
+  let { type, filterPresets } = $props();
 
   // By default, look at the jobs of the last 30 days:
   if (filterPresets?.startTime == null) {
@@ -51,50 +49,64 @@
     "Invalid list type provided!",
   );
 
-  let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
-  let jobFilters = [];
-  let nameFilter = "";
-  let sorting = { field: "totalJobs", direction: "down" };
-
+  /* Const Init */
+  const {} = init();
   const client = getContextClient();
-  $: stats = queryStore({
-    client: client,
-    query: gql`
-            query($jobFilters: [JobFilter!]!) {
-            rows: jobsStatistics(filter: $jobFilters, groupBy: ${type}) {
-                id
-                name
-                totalJobs
-                totalWalltime
-                totalCoreHours
-                totalAccHours
-            }
-        }`,
-    variables: { jobFilters },
-  });
-
-  function changeSorting(event, field) {
-    let target = event.target;
-    while (target.tagName != "BUTTON") target = target.parentElement;
-
-    let direction = target.children[0].className.includes("up") ? "down" : "up";
-    target.children[0].className = `bi-sort-numeric-${direction}`;
-    sorting = { field, direction };
+
+  /* State Init*/
+  let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
+  let jobFilters = $state([]);
+  let nameFilter = $state("");
+  let sorting = $state({ field: "totalJobs", direction: "down" });
+
+  /* Derived Vars */
+  let stats = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+              query($jobFilters: [JobFilter!]!) {
+              rows: jobsStatistics(filter: $jobFilters, groupBy: ${type}) {
+                  id
+                  name
+                  totalJobs
+                  totalWalltime
+                  totalCoreHours
+                  totalAccHours
+              }
+          }`,
+      variables: { jobFilters },
+    })
+  );
+
+  /* Functions */
+  function changeSorting(field) {
+    sorting = { field, direction: sorting?.direction == "down" ? "up" : "down" };
   }
 
   function sort(stats, sorting, nameFilter) {
-    const cmp =
-      sorting.field == "id"
-        ? sorting.direction == "up"
-          ? (a, b) => a.id < b.id
-          : (a, b) => a.id > b.id
-        : sorting.direction == "up"
-          ? (a, b) => a[sorting.field] - b[sorting.field]
-          : (a, b) => b[sorting.field] - a[sorting.field];
-
-    return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
+    const idCmp = sorting.direction == "up"
+      ? (a, b) => b.id.localeCompare(a.id)
+      : (a, b) => a.id.localeCompare(b.id)
+
+    // Force empty or undefined strings to the end of the list
+    const nameCmp = sorting.direction == "up"
+      ? (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (b.name.localeCompare(a.name)))
+      : (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (a.name.localeCompare(b.name)))
+
+    const intCmp = sorting.direction == "up"
+      ? (a, b) => a[sorting.field] - b[sorting.field]
+      : (a, b) => b[sorting.field] - a[sorting.field];
+
+    if (sorting.field == "id") {
+      return stats.filter((u) => u.id.includes(nameFilter)).sort(idCmp)
+    } else if (sorting.field == "name") {
+      return stats.filter((u) => u.id.includes(nameFilter)).sort(nameCmp)
+    } else {
+      return stats.filter((u) => u.id.includes(nameFilter)).sort(intCmp)
+    }
   }
 
+  /* On Mount */
   onMount(() => filterComponent.updateFilters());
 </script>
 
@@ -119,7 +131,7 @@
       {filterPresets}
       startTimeQuickSelect={true}
       menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
-      on:update-filters={({ detail }) => {
+      applyFilters={(detail) => {
         jobFilters = detail.filters;
       }}
     />
@@ -137,9 +149,14 @@
         <Button
           color={sorting.field == "id" ? "primary" : "light"}
           size="sm"
-          on:click={(e) => changeSorting(e, "id")}
+          onclick={() => changeSorting("id")}
         >
-          <Icon name="sort-numeric-down" />
+          {#if sorting?.field == "id"}
+            <!-- Note on Icon-Name: Arrow-indicator always down, only alpha-indicator switches -->
+            <Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} />
+          {:else}
+            <Icon name="three-dots-vertical" />
+          {/if}
         </Button>
       </th>
       {#if type == "USER"}
@@ -148,9 +165,13 @@
           <Button
             color={sorting.field == "name" ? "primary" : "light"}
             size="sm"
-            on:click={(e) => changeSorting(e, "name")}
+            onclick={() => changeSorting("name")}
           >
-            <Icon name="sort-numeric-down" />
+            {#if sorting?.field == "name"}
+              <Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} />
+            {:else}
+              <Icon name="three-dots-vertical" />
+            {/if}
           </Button>
         </th>
       {/if}
@@ -159,9 +180,14 @@
         <Button
           color={sorting.field == "totalJobs" ? "primary" : "light"}
           size="sm"
-          on:click={(e) => changeSorting(e, "totalJobs")}
+          onclick={() => changeSorting("totalJobs")}
         >
-          <Icon name="sort-numeric-down" />
+          {#if sorting?.field == "totalJobs"}
+            <!-- Note on Icon-Name: Arrow-indicator always down, only numeric-indicator switches -->
+            <Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
+          {:else}
+            <Icon name="three-dots-vertical" />
+          {/if}
         </Button>
       </th>
       <th scope="col">
@@ -169,9 +195,13 @@
         <Button
           color={sorting.field == "totalWalltime" ? "primary" : "light"}
           size="sm"
-          on:click={(e) => changeSorting(e, "totalWalltime")}
+          onclick={() => changeSorting("totalWalltime")}
         >
-          <Icon name="sort-numeric-down" />
+          {#if sorting?.field == "totalWalltime"}
+            <Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
+          {:else}
+            <Icon name="three-dots-vertical" />
+          {/if}
         </Button>
       </th>
       <th scope="col">
@@ -179,9 +209,13 @@
         <Button
           color={sorting.field == "totalCoreHours" ? "primary" : "light"}
           size="sm"
-          on:click={(e) => changeSorting(e, "totalCoreHours")}
+          onclick={() => changeSorting("totalCoreHours")}
         >
-          <Icon name="sort-numeric-down" />
+          {#if sorting?.field == "totalCoreHours"}
+            <Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
+          {:else}
+            <Icon name="three-dots-vertical" />
+          {/if}
         </Button>
       </th>
       <th scope="col">
@@ -189,9 +223,13 @@
         <Button
           color={sorting.field == "totalAccHours" ? "primary" : "light"}
           size="sm"
-          on:click={(e) => changeSorting(e, "totalAccHours")}
+          onclick={() => changeSorting("totalAccHours")}
         >
-          <Icon name="sort-numeric-down" />
+          {#if sorting?.field == "totalAccHours"}
+            <Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
+          {:else}
+            <Icon name="three-dots-vertical" />
+          {/if}
         </Button>
       </th>
     </tr>
diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 60ab4048..ff6946ac 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -172,7 +172,7 @@
     <!-- Refresh Col-->
     <Col class="mt-2 mt-lg-0">
       <Refresher
-        on:refresh={() => {
+        onRefresh={() => {
           const diff = Date.now() - to;
           from = new Date(from.getTime() + diff);
           to = new Date(to.getTime() + diff);
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 86170d17..1bd3c07a 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -42,15 +42,14 @@
   import Refresher from "./generic/helper/Refresher.svelte";
   import HistogramSelection from "./generic/select/HistogramSelection.svelte";
 
+  /* Svelte 5 Props */
+  let { cluster } = $props();
+
+  /* Const Init */
   const { query: initq } = init();
   const ccconfig = getContext("cc-config");
-
-  export let cluster;
-
-  let plotWidths = [];
-  let colWidth;
-  let from = new Date(Date.now() - 5 * 60 * 1000),
-    to = new Date(Date.now());
+  const client = getContextClient();
+  const paging = { itemsPerPage: 10, page: 1 }; // Top 10
   const topOptions = [
     { key: "totalJobs", label: "Jobs" },
     { key: "totalNodes", label: "Nodes" },
@@ -58,7 +57,26 @@
     { key: "totalAccs", label: "Accelerators" },
   ];
 
-  let topProjectSelection =
+  /* State Init */
+  let from = $state(new Date(Date.now() - 5 * 60 * 1000));
+  let to = $state(new Date(Date.now()));
+  let isHistogramSelectionOpen = $state(false);
+  let colWidth = $state(0);
+  let plotWidths = $state([]);
+  // Bar Gauges
+  let allocatedNodes = $state({});
+  let flopRate = $state({});
+  let flopRateUnitPrefix = $state({});
+  let flopRateUnitBase = $state({});
+  let memBwRate = $state({});
+  let memBwRateUnitPrefix = $state({});
+  let memBwRateUnitBase = $state({});
+
+  let selectedHistograms = $state(cluster
+    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
+    : ccconfig['user_view_histogramMetrics'] || []);
+
+  let topProjectSelection = $state(
     topOptions.find(
       (option) =>
         option.key ==
@@ -66,8 +84,10 @@
     ) ||
     topOptions.find(
       (option) => option.key == ccconfig.status_view_selectedTopProjectCategory,
-    );
-  let topUserSelection =
+    )
+  );
+
+  let topUserSelection = $state(
     topOptions.find(
       (option) =>
         option.key ==
@@ -75,16 +95,12 @@
     ) ||
     topOptions.find(
       (option) => option.key == ccconfig.status_view_selectedTopUserCategory,
-    );
+    )
+  );
 
-  let isHistogramSelectionOpen = false;
-  $: selectedHistograms = cluster
-    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
-    : ccconfig['user_view_histogramMetrics'] || [];
-
-  const client = getContextClient();
+  /* Derived */
   // Note: nodeMetrics are requested on configured $timestep resolution
-  $: mainQuery = queryStore({
+  const mainQuery = $derived(queryStore({
     client: client,
     query: gql`
       query (
@@ -162,10 +178,9 @@
       filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
       selectedHistograms: selectedHistograms,
     },
-  });
+  }));
 
-  const paging = { itemsPerPage: 10, page: 1 }; // Top 10
-  $: topUserQuery = queryStore({
+  const topUserQuery = $derived(queryStore({
     client: client,
     query: gql`
       query (
@@ -193,9 +208,9 @@
       paging,
       sortBy: topUserSelection.key.toUpperCase(),
     },
-  });
+  }));
 
-  $: topProjectQuery = queryStore({
+  const topProjectQuery = $derived(queryStore({
     client: client,
     query: gql`
       query (
@@ -222,8 +237,46 @@
       paging,
       sortBy: topProjectSelection.key.toUpperCase(),
     },
+  }));
+
+  /* Effects */
+  $effect(() => {
+    if ($initq.data && $mainQuery.data) {
+      let subClusters = $initq.data.clusters.find(
+        (c) => c.name == cluster,
+      ).subClusters;
+      for (let subCluster of subClusters) {
+        allocatedNodes[subCluster.name] =
+          $mainQuery.data.allocatedNodes.find(
+            ({ name }) => name == subCluster.name,
+          )?.count || 0;
+        flopRate[subCluster.name] =
+          Math.floor(
+            sumUp($mainQuery.data.nodeMetrics, subCluster.name, "flops_any") *
+              100,
+          ) / 100;
+        flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix;
+        flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base;
+        memBwRate[subCluster.name] =
+          Math.floor(
+            sumUp($mainQuery.data.nodeMetrics, subCluster.name, "mem_bw") * 100,
+          ) / 100;
+        memBwRateUnitPrefix[subCluster.name] =
+          subCluster.memoryBandwidth.unit.prefix;
+        memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base;
+      }
+    }
+  });
+
+  $effect(() => {
+    updateTopUserConfiguration(topUserSelection.key);
   });
 
+  $effect(() => {
+    updateTopProjectConfiguration(topProjectSelection.key);
+  });
+
+  /* Const Functions */
   const sumUp = (data, subcluster, metric) =>
     data.reduce(
       (sum, node) =>
@@ -239,39 +292,6 @@
       0,
     );
 
-  let allocatedNodes = {},
-    flopRate = {},
-    flopRateUnitPrefix = {},
-    flopRateUnitBase = {},
-    memBwRate = {},
-    memBwRateUnitPrefix = {},
-    memBwRateUnitBase = {};
-  $: if ($initq.data && $mainQuery.data) {
-    let subClusters = $initq.data.clusters.find(
-      (c) => c.name == cluster,
-    ).subClusters;
-    for (let subCluster of subClusters) {
-      allocatedNodes[subCluster.name] =
-        $mainQuery.data.allocatedNodes.find(
-          ({ name }) => name == subCluster.name,
-        )?.count || 0;
-      flopRate[subCluster.name] =
-        Math.floor(
-          sumUp($mainQuery.data.nodeMetrics, subCluster.name, "flops_any") *
-            100,
-        ) / 100;
-      flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix;
-      flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base;
-      memBwRate[subCluster.name] =
-        Math.floor(
-          sumUp($mainQuery.data.nodeMetrics, subCluster.name, "mem_bw") * 100,
-        ) / 100;
-      memBwRateUnitPrefix[subCluster.name] =
-        subCluster.memoryBandwidth.unit.prefix;
-      memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base;
-    }
-  }
-
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
       client: client,
@@ -284,20 +304,17 @@
     });
   };
 
+  /* Functions */
   function updateTopUserConfiguration(select) {
     if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
       updateConfigurationMutation({
         name: `status_view_selectedTopUserCategory:${cluster}`,
         value: JSON.stringify(select),
       }).subscribe((res) => {
-        if (res.fetching === false && !res.error) {
-          // console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
-        } else if (res.fetching === false && res.error) {
+        if (res.fetching === false && res.error) {
           throw res.error;
         }
       });
-    } else {
-      // console.log('No Mutation Required: Top User')
     }
   }
 
@@ -309,19 +326,12 @@
         name: `status_view_selectedTopProjectCategory:${cluster}`,
         value: JSON.stringify(select),
       }).subscribe((res) => {
-        if (res.fetching === false && !res.error) {
-          // console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
-        } else if (res.fetching === false && res.error) {
+        if (res.fetching === false && res.error) {
           throw res.error;
         }
       });
-    } else {
-      // console.log('No Mutation Required: Top Project')
     }
   }
-
-  $: updateTopUserConfiguration(topUserSelection.key);
-  $: updateTopProjectConfiguration(topProjectSelection.key);
 </script>
 
 <!-- Loading indicator & Refresh -->
@@ -334,7 +344,7 @@
     <Button
       outline
       color="secondary"
-      on:click={() => (isHistogramSelectionOpen = true)}
+      onclick={() => (isHistogramSelectionOpen = true)}
     >
       <Icon name="bar-chart-line" /> Select Histograms
     </Button>
@@ -342,7 +352,7 @@
   <Col class="mt-2 mt-md-0">
     <Refresher
       initially={120}
-      on:refresh={() => {
+      onRefresh={() => {
         from = new Date(Date.now() - 5 * 60 * 1000);
         to = new Date(Date.now());
       }}
@@ -483,6 +493,7 @@
             <Card body color="danger">{$topUserQuery.error.message}</Card>
           {:else}
             <Pie
+              canvasId="hpcpie-users"
               size={colWidth}
               sliceLabel={topUserSelection.label}
               quantities={$topUserQuery.data.topUser.map(
@@ -550,6 +561,7 @@
           <Card body color="danger">{$topProjectQuery.error.message}</Card>
         {:else}
           <Pie
+            canvasId="hpcpie-projects"
             size={colWidth}
             sliceLabel={topProjectSelection.label}
             quantities={$topProjectQuery.data.topProjects.map(
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index 1589cac2..9c12aeda 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -28,72 +28,74 @@
   import TimeSelection from "./generic/select/TimeSelection.svelte";
   import Refresher from "./generic/helper/Refresher.svelte";
 
-  export let displayType;
-  export let cluster = null;
-  export let subCluster = null;
-  export let from = null;
-  export let to = null;
-
-  const { query: initq } = init();
-
-  console.assert(
-    displayType == "OVERVIEW" || displayType == "LIST",
-    "Invalid nodes displayType provided!",
-  );
+  /*
+    Note 1: "Sorting" as use-case ignored for now, probably default to alphanumerical on hostnames of cluster (handled in frontend at the moment)
+    Note 2: Add Idle State Filter (== No allocated Jobs) [Frontend?] : Cannot be handled by CCMS, requires secondary job query and refiltering of visible nodes
+  */
 
-  if (from == null || to == null) {
-    to = new Date(Date.now());
-    from = new Date(to.getTime());
-    from.setHours(from.getHours() - 12);
-  }
+  /* Scelte 5 Props */
+  let {
+    displayType,
+    cluster = null,
+    subCluster = null,
+    fromPreset = null,
+    toPreset = null,
+  } = $props();
 
-  const initialized = getContext("initialized");
+  /* Const Init */
+  const { query: initq } = init();
+  const displayNodeOverview = (displayType === 'OVERVIEW');
   const ccconfig = getContext("cc-config");
+  const initialized = getContext("initialized");
   const globalMetrics = getContext("globalMetrics");
-  const displayNodeOverview = (displayType === 'OVERVIEW')
-
   const resampleConfig = getContext("resampling") || null;
+
   const resampleResolutions = resampleConfig ? [...resampleConfig.resolutions] : [];
   const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
-  let selectedResolution = resampleConfig ? resampleDefault : 0;
-
-  let hostnameFilter = "";
-  let pendingHostnameFilter = "";
-  let selectedMetric = ccconfig.system_view_selectedMetric || "";
-  let selectedMetrics = (
+  const nowDate = new Date(Date.now());
+
+  /* State Init */
+  let to = $state(toPreset || new Date(Date.now()));
+  let from = $state(fromPreset || new Date(nowDate.setHours(nowDate.getHours() - 12)));
+  let selectedResolution = $state(resampleConfig ? resampleDefault : 0);
+  let hostnameFilter = $state("");
+  let pendingHostnameFilter = $state("");
+  let isMetricsSelectionOpen = $state(false);
+  let selectedMetric = $state(ccconfig.system_view_selectedMetric || "");
+  let selectedMetrics = $state((
     ccconfig[`node_list_selectedMetrics:${cluster}:${subCluster}`] ||
     ccconfig[`node_list_selectedMetrics:${cluster}`]
-  ) || [ccconfig.system_view_selectedMetric];
-  let isMetricsSelectionOpen = false;
-
-  /*
-    Note 1: "Sorting" as use-case ignored for now, probably default to alphanumerical on hostnames of cluster (handled in frontend at the moment)
-    Note 2: Add Idle State Filter (== No allocated Jobs) [Frontend?] : Cannot be handled by CCMS, requires secondary job query and refiltering of visible nodes
-  */
-
-  let systemMetrics = [];
-  let systemUnits = {};
-
-  function loadMetrics(isInitialized) {
-    if (!isInitialized) return
-    systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
-    for (let sm of systemMetrics) {
-      systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
-    }
-    if (!selectedMetric) selectedMetric = systemMetrics[0].name
-  }
-
-  $: loadMetrics($initialized)
-
-  $: if (displayNodeOverview) {
-    selectedMetrics = [selectedMetric]
-  }
-
-  $: { // Wait after input for some time to prevent too many requests
-    setTimeout(function () {
+  ) || [ccconfig.system_view_selectedMetric]);
+
+  /* Derived States */
+  const systemMetrics = $derived($initialized ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []);
+  const presetSystemUnits = $derived(loadUnits(systemMetrics));
+
+  /* Effects */
+  $effect(() => {
+    // OnMount: Ping Var, without this, OVERVIEW metric select is empty (reason tbd) 
+    systemMetrics
+  });
+
+  /* Functions */
+  function loadUnits(systemMetrics) {
+    let pendingUnits = {};
+    if (systemMetrics.length > 0) {
+      for (let sm of systemMetrics) {
+        pendingUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
+      };
+    };
+    return {...pendingUnits};
+  };
+
+  // Wait after input for some time to prevent too many requests
+  let timeoutId = null;
+  function updateHostnameFilter() {
+    if (timeoutId != null) clearTimeout(timeoutId);
+    timeoutId = setTimeout(function () {
       hostnameFilter = pendingHostnameFilter;
     }, 500);
-  }
+  };
 </script>
 
 <!-- ROW1: Tools-->
@@ -108,7 +110,7 @@
           <Button
             outline
             color="primary"
-            on:click={() => (isMetricsSelectionOpen = true)}
+            onclick={() => (isMetricsSelectionOpen = true)}
           >
             {selectedMetrics.length} selected
           </Button>
@@ -139,6 +141,7 @@
           placeholder="Filter hostname ..."
           type="text"
           bind:value={pendingHostnameFilter}
+          oninput={updateHostnameFilter}
         />
       </InputGroup>
     </Col>
@@ -153,26 +156,28 @@
           <InputGroupText><Icon name="graph-up" /></InputGroupText>
           <InputGroupText>Metric</InputGroupText>
           <Input type="select" bind:value={selectedMetric}>
-            {#each systemMetrics as metric}
+            {#each systemMetrics as metric (metric.name)}
               <option value={metric.name}
-                >{metric.name} {systemUnits[metric.name] ? "("+systemUnits[metric.name]+")" : ""}</option
+                >{metric.name} {presetSystemUnits[metric.name] ? "("+presetSystemUnits[metric.name]+")" : ""}</option
               >
+            {:else}
+              <option disabled>No available options</option>
             {/each}
           </Input>
         </InputGroup>
       </Col>
     {/if}
-    <!-- Refresh Col-->
-    <Col class="mt-2 mt-lg-0">
-      <Refresher
-        on:refresh={() => {
-          const diff = Date.now() - to;
-          from = new Date(from.getTime() + diff);
-          to = new Date(to.getTime() + diff);
-        }}
-      />
-    </Col>
   {/if}
+  <!-- Refresh Col-->
+  <Col class="mt-2 mt-lg-0">
+    <Refresher
+      onRefresh={() => {
+        const diff = Date.now() - to;
+        from = new Date(from.getTime() + diff);
+        to = new Date(to.getTime() + diff);
+      }}
+    />
+  </Col>
 </Row>
 
 <!-- ROW2: Content-->
@@ -185,20 +190,22 @@
 {:else}
   {#if displayNodeOverview}
     <!-- ROW2-1: Node Overview (Grid Included)-->
-    <NodeOverview {cluster} {subCluster} {ccconfig} {selectedMetrics} {from} {to} {hostnameFilter}/>
+    <NodeOverview {cluster} {ccconfig} {selectedMetric} {from} {to} {hostnameFilter}/>
   {:else}
     <!-- ROW2-2: Node List (Grid Included)-->
-    <NodeList {cluster} {subCluster} {ccconfig} {selectedMetrics} {selectedResolution} {hostnameFilter} {from} {to} {systemUnits}/>
+    <NodeList {cluster} {subCluster} {ccconfig} {selectedMetrics} {selectedResolution} {hostnameFilter} {from} {to} {presetSystemUnits}/>
   {/if}
 {/if}
 
-<MetricSelection
-  {cluster}
-  {subCluster}
-  configName="node_list_selectedMetrics"
-  metrics={selectedMetrics}
-  bind:isOpen={isMetricsSelectionOpen}
-  on:update-metrics={({ detail }) => {
-    selectedMetrics = [...detail]
-  }}
-/>
+{#if !displayNodeOverview}
+  <MetricSelection
+    bind:isOpen={isMetricsSelectionOpen}
+    presetMetrics={selectedMetrics}
+    {cluster}
+    {subCluster}
+    configName="node_list_selectedMetrics"
+    applyMetrics={(newMetrics) => 
+      selectedMetrics = [...newMetrics]
+    }
+  />
+{/if}
diff --git a/web/frontend/src/Tags.root.svelte b/web/frontend/src/Tags.root.svelte
index 03311b45..e1be6a9d 100644
--- a/web/frontend/src/Tags.root.svelte
+++ b/web/frontend/src/Tags.root.svelte
@@ -24,15 +24,22 @@
     init,
   } from "./generic/utils.js";
 
-  export let username;
-  export let isAdmin;
-  export let tagmap;
+  /* Svelte 5 Props */
+  let {
+    username,
+    isAdmin,
+    presetTagmap,
+  } = $props();
 
+  /* Const Init */
   const {} = init();
   const client = getContextClient();
 
-  let pendingChange = "none";
+  /* State Init */
+  let pendingChange = $state("none");
+  let tagmap = $state(presetTagmap)
 
+  /* Functions */
   const removeTagMutation = ({ tagIds }) => {
     return mutationStore({
       client: client,
@@ -96,7 +103,7 @@
                 <Button
                   size="sm"
                   color="danger"
-                  on:click={() => removeTag(tag, tagType)}
+                  onclick={() => removeTag(tag, tagType)}
                 >
                   <Icon name="x" />
                 </Button>
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 0fad6ccf..7250399a 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -42,71 +42,90 @@
   import TextFilter from "./generic/helper/TextFilter.svelte"
   import Refresher from "./generic/helper/Refresher.svelte";
 
-  const { query: initq } = init();
+  /* Svelte 5 Props */
+  let { user, filterPresets } = $props();
 
+  /* Const Init */
+  const { query: initq } = init();
   const ccconfig = getContext("cc-config");
+  const client = getContextClient();
+  const durationBinOptions = ["1m","10m","1h","6h","12h"];
+  const metricBinOptions = [10, 20, 50, 100];
 
-  export let user;
-  export let filterPresets;
-
-  let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
-  let jobList;
-  let jobFilters = [];
-  let matchedListJobs = 0;
-  let sorting = { field: "startTime", type: "col", order: "DESC" },
-    isSortingOpen = false;
-  let metrics = ccconfig.plot_list_selectedMetrics,
-    isMetricsSelectionOpen = false;
-  let isHistogramSelectionOpen = false;
-  let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
-  let showFootprint = filterPresets.cluster
+  /* State Init */
+  // List & Control Vars
+  let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
+  let jobFilters = $state([]);
+  let jobList = $state(null);
+  let matchedListJobs = $state(0);
+  let isSortingOpen = $state(false);
+  let isMetricsSelectionOpen = $state(false);
+  let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
+  let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
+  let metrics = $state(filterPresets.cluster
+    ? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] ||
+      ccconfig.plot_list_selectedMetrics
+    : ccconfig.plot_list_selectedMetrics
+  );
+  let showFootprint = $state(filterPresets.cluster
     ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
-    : !!ccconfig.plot_list_showFootprint;
-  
-  let numDurationBins = "1h";
-  let numMetricBins = 10;
-  let durationBinOptions = ["1m","10m","1h","6h","12h"];
-  let metricBinOptions = [10, 20, 50, 100];
+    : !!ccconfig.plot_list_showFootprint
+  );
 
-  $: selectedHistograms = selectedCluster
-    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
-    : ccconfig['user_view_histogramMetrics'] || [];
+  // Histogram Vars
+  let isHistogramSelectionOpen = $state(false);
+  let numDurationBins = $state("1h");
+  let numMetricBins = $state(10);
 
-  const client = getContextClient();
-  $: stats = queryStore({
-    client: client,
-    query: gql`
-      query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
-        jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
-          totalJobs
-          shortJobs
-          totalWalltime
-          totalCoreHours
-          histDuration {
-            count
-            value
-          }
-          histNumNodes {
-            count
-            value
-          }
-          histMetrics {
-            metric
-            unit
-            stat
-            data {
-              min
-              max
+  // Compare Vars (TODO)
+  // let jobCompare = $state(null);
+  // let showCompare = $state(false);
+  // let selectedJobs = $state([]);
+  // let filterBuffer = $state([]);
+  // let matchedCompareJobs = $state(0);
+
+  /* Derived Vars */
+  let selectedHistograms = $derived(selectedCluster
+  ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
+  : ccconfig['user_view_histogramMetrics'] || []);
+
+  let stats = $derived(
+    queryStore({
+      client: client,
+      query: gql`
+        query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
+          jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
+            totalJobs
+            shortJobs
+            totalWalltime
+            totalCoreHours
+            histDuration {
+              count
+              value
+            }
+            histNumNodes {
               count
-              bin
+              value
+            }
+            histMetrics {
+              metric
+              unit
+              stat
+              data {
+                min
+                max
+                count
+                bin
+              }
             }
           }
         }
-      }
-    `,
-    variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
-  });
+      `,
+      variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
+    })
+  );
 
+  /* On Mount */
   onMount(() => filterComponent.updateFilters());
 </script>
 
@@ -129,13 +148,13 @@
 <Row cols={{ xs: 1, md: 2, lg: 6}} class="mb-3">
   <Col class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
+      <Button outline color="primary" onclick={() => (isSortingOpen = true)}>
         <Icon name="sort-up" /> Sorting
       </Button>
       <Button
         outline
         color="primary"
-        on:click={() => (isMetricsSelectionOpen = true)}
+        onclick={() => (isMetricsSelectionOpen = true)}
       >
         <Icon name="graph-up" /> Metrics
       </Button>
@@ -143,11 +162,11 @@
   </Col>
   <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
+      bind:this={filterComponent}
       {filterPresets}
       matchedJobs={matchedListJobs}
       startTimeQuickSelect={true}
-      bind:this={filterComponent}
-      on:update-filters={({ detail }) => {
+      applyFilters={(detail) => {
         jobFilters = [...detail.filters, { user: { eq: user.username } }];
         selectedCluster = jobFilters[0]?.cluster
           ? jobFilters[0].cluster.eq
@@ -173,11 +192,11 @@
   </Col>
   <Col class="mb-2 mb-lg-0">
     <TextFilter
-      on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
+      setFilter={(filter) => filterComponent.updateFilters(filter)}
     />
   </Col>
   <Col class="mb-1 mb-lg-0">
-    <Refresher on:refresh={() => {
+    <Refresher onRefresh={() => {
       jobList.refreshJobs()
       jobList.refreshAllMetrics()
     }} />
@@ -269,7 +288,7 @@
       outline
       color="secondary"
       class="w-100"
-      on:click={() => (isHistogramSelectionOpen = true)}
+      onclick={() => (isHistogramSelectionOpen = true)}
     >
       <Icon name="bar-chart-line" /> Select Histograms
     </Button>
@@ -347,12 +366,15 @@
 <Sorting bind:sorting bind:isOpen={isSortingOpen} />
 
 <MetricSelection
-  bind:cluster={selectedCluster}
-  configName="plot_list_selectedMetrics"
-  bind:metrics
-  bind:isOpen={isMetricsSelectionOpen}
-  bind:showFootprint
-  footprintSelect
+    bind:isOpen={isMetricsSelectionOpen}
+    bind:showFootprint
+    presetMetrics={metrics}
+    cluster={selectedCluster}
+    configName="plot_list_selectedMetrics"
+    applyMetrics={(newMetrics) => 
+      metrics = [...newMetrics]
+    }
+    footprintSelect
 />
 
 <HistogramSelection
diff --git a/web/frontend/src/analysis.entrypoint.js b/web/frontend/src/analysis.entrypoint.js
index 07c63f53..97e47395 100644
--- a/web/frontend/src/analysis.entrypoint.js
+++ b/web/frontend/src/analysis.entrypoint.js
@@ -1,9 +1,10 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Analysis from './Analysis.root.svelte'
 
 filterPresets.cluster = cluster
 
-new Analysis({
+mount(Analysis, {
     target: document.getElementById('svelte-app'),
     props: {
         filterPresets: filterPresets,
diff --git a/web/frontend/src/config.entrypoint.js b/web/frontend/src/config.entrypoint.js
index d2949f26..f9d8e45a 100644
--- a/web/frontend/src/config.entrypoint.js
+++ b/web/frontend/src/config.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Config from './Config.root.svelte'
 
-new Config({
+mount(Config, {
     target: document.getElementById('svelte-app'),
     props: {
         isAdmin: isAdmin,
diff --git a/web/frontend/src/config/admin/AddUser.svelte b/web/frontend/src/config/admin/AddUser.svelte
index 6c20d7ac..6ca5c62c 100644
--- a/web/frontend/src/config/admin/AddUser.svelte
+++ b/web/frontend/src/config/admin/AddUser.svelte
@@ -59,6 +59,7 @@
     method="post"
     action="/config/users/"
     class="card-body"
+    autocomplete="off"
     on:submit|preventDefault={handleUserSubmit}
   >
     <CardTitle class="mb-3">Create User</CardTitle>
@@ -70,6 +71,7 @@
         id="username"
         name="username"
         aria-describedby="usernameHelp"
+        autocomplete="username"
       />
       <div id="usernameHelp" class="form-text">Must be unique.</div>
     </div>
@@ -81,6 +83,7 @@
         id="password"
         name="password"
         aria-describedby="passwordHelp"
+        autocomplete="new-password"
       />
       <div id="passwordHelp" class="form-text">
         Only API users are allowed to have a blank password. Users with a blank
@@ -109,6 +112,7 @@
         id="name"
         name="name"
         aria-describedby="nameHelp"
+        autocomplete="name"
       />
       <div id="nameHelp" class="form-text">Optional, can be blank.</div>
     </div>
@@ -120,6 +124,7 @@
         id="email"
         name="email"
         aria-describedby="emailHelp"
+        autocomplete="email"
       />
       <div id="emailHelp" class="form-text">Optional, can be blank.</div>
     </div>
@@ -153,13 +158,13 @@
       {/each}
     </div>
     <p style="display: flex; align-items: center;">
-      <Button type="submit" color="primary">Submit</Button>
-      {#if displayMessage}<div style="margin-left: 1.5em;">
-          <b
-            ><code style="color: {message.color};" out:fade>{message.msg}</code
-            ></b
-          >
-        </div>{/if}
+      <Button type="submit" color="primary" style="margin-right: 1.5em;">Submit</Button>
+      {#if displayMessage}
+        <b
+          ><code style="color: {message.color};" out:fade>{message.msg}</code
+          ></b
+        >
+      {/if}
     </p>
   </form>
 </Card>
diff --git a/web/frontend/src/config/admin/EditProject.svelte b/web/frontend/src/config/admin/EditProject.svelte
index 3c87d467..0623f12e 100644
--- a/web/frontend/src/config/admin/EditProject.svelte
+++ b/web/frontend/src/config/admin/EditProject.svelte
@@ -114,13 +114,13 @@
         class="btn btn-primary"
         type="button"
         id="add-project-button"
-        on:click|preventDefault={handleAddProject}>Add</button
+        on:click|preventDefault={() => handleAddProject()}>Add</button
       >
       <button
         class="btn btn-danger"
         type="button"
         id="remove-project-button"
-        on:click|preventDefault={handleRemoveProject}>Remove</button
+        on:click|preventDefault={() => handleRemoveProject()}>Remove</button
       >
     </div>
     <p>
diff --git a/web/frontend/src/config/admin/EditRole.svelte b/web/frontend/src/config/admin/EditRole.svelte
index b8d12bdf..c351ab90 100644
--- a/web/frontend/src/config/admin/EditRole.svelte
+++ b/web/frontend/src/config/admin/EditRole.svelte
@@ -119,13 +119,13 @@
         class="btn btn-primary"
         type="button"
         id="add-role-button"
-        on:click|preventDefault={handleAddRole}>Add</button
+        on:click|preventDefault={() => handleAddRole()}>Add</button
       >
       <button
         class="btn btn-danger"
         type="button"
         id="remove-role-button"
-        on:click|preventDefault={handleRemoveRole}>Remove</button
+        on:click|preventDefault={() =>handleRemoveRole()}>Remove</button
       >
     </div>
     <p>
diff --git a/web/frontend/src/config/admin/NoticeEdit.svelte b/web/frontend/src/config/admin/NoticeEdit.svelte
index 325800bc..497f4e35 100644
--- a/web/frontend/src/config/admin/NoticeEdit.svelte
+++ b/web/frontend/src/config/admin/NoticeEdit.svelte
@@ -63,7 +63,7 @@
           class="btn btn-primary"
           type="button"
           id="edit-notice-button"
-          on:click|preventDefault={handleEditNotice}>Edit Notice</button
+          on:click|preventDefault={() => handleEditNotice()}>Edit Notice</button
         >
       </div>
       <p>
diff --git a/web/frontend/src/config/admin/Options.svelte b/web/frontend/src/config/admin/Options.svelte
index 38088346..aa762de9 100644
--- a/web/frontend/src/config/admin/Options.svelte
+++ b/web/frontend/src/config/admin/Options.svelte
@@ -33,7 +33,7 @@
         type="checkbox"
         id="scramble-names-checkbox"
         style="margin-right: 1em;"
-        on:click={handleScramble}
+        on:click={() => handleScramble()}
         bind:checked={scrambled}
       />
       Active?
diff --git a/web/frontend/src/config/admin/ShowUsers.svelte b/web/frontend/src/config/admin/ShowUsers.svelte
index d4988e89..25da2fb7 100644
--- a/web/frontend/src/config/admin/ShowUsers.svelte
+++ b/web/frontend/src/config/admin/ShowUsers.svelte
@@ -53,11 +53,11 @@
       <Button
         color="secondary"
         size="sm"
-        on:click={reloadUserList}
+        on:click={() => reloadUserList()}
         style="float: right;">Reload</Button
       >
     </p>
-    <div style="width: 100%; max-height: 500px; overflow-y: scroll;">
+    <div style="width: 100%; max-height: 725px; overflow-y: scroll;">
       <Table hover>
         <thead>
           <tr>
@@ -77,7 +77,7 @@
               <td
                 ><button
                   class="btn btn-danger del-user"
-                  on:click={deleteUser(user.username)}>Delete</button
+                  on:click={() => deleteUser(user.username)}>Delete</button
                 ></td
               >
             </tr>
diff --git a/web/frontend/src/config/admin/ShowUsersRow.svelte b/web/frontend/src/config/admin/ShowUsersRow.svelte
index 25c3710b..a30dc79b 100644
--- a/web/frontend/src/config/admin/ShowUsersRow.svelte
+++ b/web/frontend/src/config/admin/ShowUsersRow.svelte
@@ -30,7 +30,7 @@
 <td><code>{user?.roles ? user.roles.join(", ") : "No Roles"}</code></td>
 <td>
   {#if !jwt}
-    <Button color="success" on:click={getUserJwt(user.username)}
+    <Button color="success" on:click={() => getUserJwt(user.username)}
       >Gen. JWT</Button
     >
   {:else}
diff --git a/web/frontend/src/config/support/SupportOptions.svelte b/web/frontend/src/config/support/SupportOptions.svelte
index 7d9ce036..88541e07 100644
--- a/web/frontend/src/config/support/SupportOptions.svelte
+++ b/web/frontend/src/config/support/SupportOptions.svelte
@@ -3,7 +3,7 @@
  -->
 
 <script>
-  import { Row, Col, Card, CardTitle, Button} from "@sveltestrap/sveltestrap";
+  import { Row, Col, Card, CardTitle, CardBody, Button} from "@sveltestrap/sveltestrap";
   import { fade } from "svelte/transition";
 
   export let config;
@@ -42,48 +42,45 @@
 <Row cols={1} class="p-2 g-2">
   <Col>
     <Card class="h-100">
-      <form
-        id="node-paging-form"
-        method="post"
-        action="/frontend/configuration/"
-        class="card-body"
-        on:submit|preventDefault={() =>
-          handleSettingSubmit("#node-paging-form", "npag")}
-      >
-        <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
-        <CardTitle
-          style="margin-bottom: 1em; display: flex; align-items: center;"
-        >
-          <div>Node List Paging Type</div>
-          {#if displayMessage && message.target == "npag"}<div
-              style="margin-left: auto; font-size: 0.9em;"
+      <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
+      <CardTitle class="m-3 d-flex align-items-center">
+        <div>Node List Paging Type</div>
+        {#if displayMessage && message.target == "npag"}<div
+            style="margin-left: auto; font-size: 0.9em;"
+          >
+            <code style="color: {message.color};" out:fade
+              >Update: {message.msg}</code
             >
-              <code style="color: {message.color};" out:fade
-                >Update: {message.msg}</code
-              >
-            </div>{/if}
-        </CardTitle>
-        <input type="hidden" name="key" value="node_list_usePaging" />
-        <div class="mb-3">
-          <div>
-            {#if config?.node_list_usePaging}
-              <input type="radio" id="nodes-true-checked" name="value" value="true" checked />
-            {:else}
-              <input type="radio" id="nodes-true" name="value" value="true" />
-            {/if}
-            <label for="true">Paging with selectable count of nodes.</label>
+          </div>{/if}
+      </CardTitle>
+      <CardBody>
+        <form
+          id="node-paging-form"
+          method="post"
+          action="/frontend/configuration/"
+          on:submit|preventDefault={() => handleSettingSubmit("#node-paging-form", "npag")}>
+          <input type="hidden" name="key" value="node_list_usePaging" />
+          <div class="mb-3">
+            <div>
+              {#if config?.node_list_usePaging}
+                <input type="radio" id="nodes-true-checked" name="value" value="true" checked />
+              {:else}
+                <input type="radio" id="nodes-true" name="value" value="true" />
+              {/if}
+              <label for="nodes-true">Paging with selectable count of nodes.</label>
+            </div>
+            <div>
+              {#if config?.node_list_usePaging}
+                <input type="radio" id="nodes-false" name="value" value="false" />
+              {:else}
+                <input type="radio" id="nodes-false-checked" name="value" value="false" checked />
+              {/if}
+              <label for="nodes-false">Continuous scroll iteratively adding 10 nodes.</label>
+            </div>
           </div>
-          <div>
-            {#if config?.node_list_usePaging}
-              <input type="radio" id="nodes-false" name="value" value="false" />
-            {:else}
-              <input type="radio" id="nodes-false-checked" name="value" value="false" checked />
-            {/if}
-            <label for="false">Continuous scroll iteratively adding 10 nodes.</label>
-          </div>
-        </div>
-        <Button color="primary" type="submit">Submit</Button>
-      </form>
+          <Button color="primary" type="submit">Submit</Button>
+        </form>
+      </CardBody>
     </Card>
   </Col>
 </Row>
\ No newline at end of file
diff --git a/web/frontend/src/config/user/PlotRenderOptions.svelte b/web/frontend/src/config/user/PlotRenderOptions.svelte
index 8a3a9485..f2ac0aab 100644
--- a/web/frontend/src/config/user/PlotRenderOptions.svelte
+++ b/web/frontend/src/config/user/PlotRenderOptions.svelte
@@ -156,17 +156,17 @@
           <div class="mb-3">
             <div>
               {#if config.plot_general_colorBackground}
-                <input type="radio" id="true-checked" name="value" value="true" checked />
+                <input type="radio" id="colb-true-checked" name="value" value="true" checked />
               {:else}
-                <input type="radio" id="true" name="value" value="true" />
+                <input type="radio" id="colb-true" name="value" value="true" />
               {/if}
               <label for="true">Yes</label>
             </div>
             <div>
               {#if config.plot_general_colorBackground}
-                <input type="radio" id="false" name="value" value="false" />
+                <input type="radio" id="colb-false" name="value" value="false" />
               {:else}
-                <input type="radio" id="false-checked" name="value" value="false" checked />
+                <input type="radio" id="colb-false-checked" name="value" value="false" checked />
               {/if}
               <label for="false">No</label>
             </div>
diff --git a/web/frontend/src/config/user/UserOptions.svelte b/web/frontend/src/config/user/UserOptions.svelte
index 0cdbe9f5..0affaf8d 100644
--- a/web/frontend/src/config/user/UserOptions.svelte
+++ b/web/frontend/src/config/user/UserOptions.svelte
@@ -109,7 +109,7 @@
         <input type="hidden" name="key" value="job_list_usePaging" />
         <div class="mb-3">
           <div>
-            {#if config.job_list_usePaging}
+            {#if config?.job_list_usePaging}
               <input type="radio" id="true-checked" name="value" value="true" checked />
             {:else}
               <input type="radio" id="true" name="value" value="true" />
@@ -117,7 +117,7 @@
             <label for="true">Paging with selectable count of jobs.</label>
           </div>
           <div>
-            {#if config.job_list_usePaging}
+            {#if config?.job_list_usePaging}
               <input type="radio" id="false" name="value" value="false" />
             {:else}
               <input type="radio" id="false-checked" name="value" value="false" checked />
@@ -137,7 +137,7 @@
             <CardBody>
                 <CardTitle>Generate JWT</CardTitle>
                 {#if jwt}
-                    <Button color="secondary" on:click={clipJwt()}>
+                    <Button color="secondary" on:click={() => clipJwt()}>
                         Copy JWT to Clipboard
                     </Button>
                     <p class="mt-2">
@@ -149,7 +149,7 @@
                         </p>
                     {/if}
                 {:else}
-                    <Button color="success" on:click={getUserJwt(username)}>
+                    <Button color="success" on:click={() => getUserJwt(username)}>
                         Generate JWT for '{username}'
                     </Button>
                     <p class="mt-2">
diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte
index ee7f3272..c7b49fdd 100644
--- a/web/frontend/src/generic/Filters.svelte
+++ b/web/frontend/src/generic/Filters.svelte
@@ -16,7 +16,6 @@
  -->
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import {
     DropdownItem,
     DropdownMenu,
@@ -26,78 +25,77 @@
     ButtonDropdown,
     Icon,
   } from "@sveltestrap/sveltestrap";
-  import Tag from "./helper/Tag.svelte";
   import Info from "./filters/InfoBox.svelte";
   import Cluster from "./filters/Cluster.svelte";
   import JobStates, { allJobStates } from "./filters/JobStates.svelte";
-  import StartTime from "./filters/StartTime.svelte";
-  import Tags from "./filters/Tags.svelte";
+  import StartTime, { startTimeSelectOptions } from "./filters/StartTime.svelte";
   import Duration from "./filters/Duration.svelte";
-  import Energy from "./filters/Energy.svelte";
+  import Tags from "./filters/Tags.svelte";
+  import Tag from "./helper/Tag.svelte";
   import Resources from "./filters/Resources.svelte";
+  import Energy from "./filters/Energy.svelte";
   import Statistics from "./filters/Stats.svelte";
 
-  const dispatch = createEventDispatcher();
-
-  export let menuText = null;
-  export let filterPresets = {};
-  export let disableClusterSelection = false;
-  export let startTimeQuickSelect = false;
-  export let matchedJobs = -2;
-  export let showFilter = true;
-
-  const startTimeSelectOptions = [
-    { range: "", rangeLabel: "No Selection"},
-    { range: "last6h", rangeLabel: "Last 6hrs"},
-    { range: "last24h", rangeLabel: "Last 24hrs"},
-    { range: "last7d", rangeLabel: "Last 7 days"},
-    { range: "last30d", rangeLabel: "Last 30 days"}
-  ];
-
+  /* Svelte 5 Props */
+  let {  
+    menuText = null,
+    filterPresets = {},
+    disableClusterSelection = false,
+    startTimeQuickSelect = false,
+    matchedJobs = -2,
+    showFilter = true,
+    applyFilters
+  } = $props();
+
+  /* Const Init */
   const nodeMatchLabels = {
     eq: "",
     contains: " Contains",
   }
-
   const filterReset = {
+    // Direct Filters
+    dbId: [],
+    jobId: "",
+    jobIdMatch: "eq",
+    arrayJobId: null,
+    jobName: "",
+    // View Filters
+    project: "",
     projectMatch: "contains",
+    user: "",
     userMatch: "contains",
-    jobIdMatch: "eq",
-    nodeMatch: "eq",
-
+    // Filter Modals
     cluster: null,
     partition: null,
     states: allJobStates,
     startTime: { from: null, to: null, range: ""},
-    tags: [],
     duration: {
       lessThan: null,
       moreThan: null,
       from: null,
       to: null,
     },
-    dbId: [],
-    jobId: "",
-    arrayJobId: null,
-    user: "",
-    project: "",
-    jobName: "",
-
-    node: null,
-    energy: { from: null, to: null },
+    tags: [],
     numNodes: { from: null, to: null },
     numHWThreads: { from: null, to: null },
     numAccelerators: { from: null, to: null },
-
+    node: null,
+    nodeMatch: "eq",
+    energy: { from: null, to: null },
     stats: [],
   };
 
-  let filters = {
+  /* State Init */
+  let filters = $state({
+    dbId: filterPresets.dbId || [],
+    jobId: filterPresets.jobId || "",
+    jobIdMatch: filterPresets.jobIdMatch || "eq",
+    arrayJobId: filterPresets.arrayJobId || null,
+    jobName: filterPresets.jobName || "",
+    project: filterPresets.project || "",
     projectMatch: filterPresets.projectMatch || "contains",
+    user: filterPresets.user || "",
     userMatch: filterPresets.userMatch || "contains",
-    jobIdMatch: filterPresets.jobIdMatch || "eq",
-    nodeMatch: filterPresets.nodeMatch || "eq",
-
     cluster: filterPresets.cluster || null,
     partition: filterPresets.partition || null,
     states:
@@ -105,41 +103,33 @@
         ? [filterPresets.state].flat()
         : allJobStates,
     startTime: filterPresets.startTime || { from: null, to: null, range: ""},
-    tags: filterPresets.tags || [],
     duration: filterPresets.duration || {
       lessThan: null,
       moreThan: null,
       from: null,
       to: null,
     },
-    dbId: filterPresets.dbId || [],
-    jobId: filterPresets.jobId || "",
-    arrayJobId: filterPresets.arrayJobId || null,
-    user: filterPresets.user || "",
-    project: filterPresets.project || "",
-    jobName: filterPresets.jobName || "",
-
-    node: filterPresets.node || null,
-    energy: filterPresets.energy || { from: null, to: null },
+    tags: filterPresets.tags || [],
     numNodes: filterPresets.numNodes || { from: null, to: null },
     numHWThreads: filterPresets.numHWThreads || { from: null, to: null },
     numAccelerators: filterPresets.numAccelerators || { from: null, to: null },
-
+    node: filterPresets.node || null,
+    nodeMatch: filterPresets.nodeMatch || "eq",
+    energy: filterPresets.energy || { from: null, to: null },
     stats: filterPresets.stats || [],
-  };
-
-  let isClusterOpen = false,
-    isJobStatesOpen = false,
-    isStartTimeOpen = false,
-    isTagsOpen = false,
-    isDurationOpen = false,
-    isEnergyOpen = false,
-    isResourcesOpen = false,
-    isStatsOpen = false,
-    isNodesModified = false,
-    isHwthreadsModified = false,
-    isAccsModified = false;
-
+  });
+
+  /* Opened States */
+  let isClusterOpen = $state(false)
+  let isJobStatesOpen = $state(false)
+  let isStartTimeOpen = $state(false)
+  let isDurationOpen = $state(false)
+  let isTagsOpen = $state(false)
+  let isResourcesOpen = $state(false)
+  let isEnergyOpen = $state(false)
+  let isStatsOpen = $state(false)
+
+  /* Functions */
   // Can be called from the outside to trigger a 'update' event from this component.
   // 'force' option empties existing filters and then applies only 'additionalFilters'
   export function updateFilters(additionalFilters = null, force = false) {
@@ -153,10 +143,20 @@
     }
     // Construct New Filter
     let items = [];
+    if (filters.dbId.length != 0)
+      items.push({ dbId: filters.dbId });
+    if (filters.jobId)
+      items.push({ jobId: { [filters.jobIdMatch]: filters.jobId } });
+    if (filters.arrayJobId != null)
+      items.push({ arrayJobId: filters.arrayJobId });
+    if (filters.jobName) items.push({ jobName: { contains: filters.jobName } });
+    if (filters.project)
+      items.push({ project: { [filters.projectMatch]: filters.project } });
+    if (filters.user)
+      items.push({ user: { [filters.userMatch]: filters.user } });
     if (filters.cluster) items.push({ cluster: { eq: filters.cluster } });
-    if (filters.node) items.push({ node: { [filters.nodeMatch]: filters.node } });
     if (filters.partition) items.push({ partition: { eq: filters.partition } });
-    if (filters.states.length != allJobStates.length)
+    if (filters.states.length != allJobStates?.length)
       items.push({ state: filters.states });
     if (filters.startTime.from || filters.startTime.to)
       items.push({
@@ -166,7 +166,6 @@
       items.push({
         startTime: { range: filters.startTime.range },
       });
-    if (filters.tags.length != 0) items.push({ tags: filters.tags });
     if (filters.duration.from || filters.duration.to)
       items.push({
         duration: { from: filters.duration.from, to: filters.duration.to },
@@ -175,21 +174,11 @@
       items.push({ duration: { from: 0, to: filters.duration.lessThan } });
     if (filters.duration.moreThan)
       items.push({ duration: { from: filters.duration.moreThan, to: 604800 } }); // 7 days to include special jobs with long runtimes
-    if (filters.energy.from || filters.energy.to)
-      items.push({
-        energy: { from: filters.energy.from, to: filters.energy.to },
-      });
-    if (filters.dbId.length != 0)
-      items.push({ dbId: filters.dbId });
-    if (filters.jobId)
-      items.push({ jobId: { [filters.jobIdMatch]: filters.jobId } });
-    if (filters.arrayJobId != null)
-      items.push({ arrayJobId: filters.arrayJobId });
+    if (filters.tags.length != 0) items.push({ tags: filters.tags });
     if (filters.numNodes.from != null || filters.numNodes.to != null) {
       items.push({
         numNodes: { from: filters.numNodes.from, to: filters.numNodes.to },
       });
-      isNodesModified = true;
     }
     if (filters.numHWThreads.from != null || filters.numHWThreads.to != null) {
       items.push({
@@ -198,7 +187,6 @@
           to: filters.numHWThreads.to,
         },
       });
-      isHwthreadsModified = true;
     }
     if (filters.numAccelerators.from != null || filters.numAccelerators.to != null) {
       items.push({
@@ -207,17 +195,16 @@
           to: filters.numAccelerators.to,
         },
       });
-      isAccsModified = true;
     }
-    if (filters.user)
-      items.push({ user: { [filters.userMatch]: filters.user } });
-    if (filters.project)
-      items.push({ project: { [filters.projectMatch]: filters.project } });
-    if (filters.jobName) items.push({ jobName: { contains: filters.jobName } });
+    if (filters.node) items.push({ node: { [filters.nodeMatch]: filters.node } });
+    if (filters.energy.from || filters.energy.to)
+      items.push({
+        energy: { from: filters.energy.from, to: filters.energy.to },
+      });
     if (filters.stats.length != 0)
       items.push({ metricStats: filters.stats.map((st) => { return { metricName: st.field, range: { from: st.from, to: st.to }} }) });
 
-    dispatch("update-filters", { filters: items });
+    applyFilters({ filters: items });
     changeURL();
     return items;
   }
@@ -226,20 +213,7 @@
     const dateToUnixEpoch = (rfc3339) => Math.floor(Date.parse(rfc3339) / 1000);
     let opts = [];
 
-    if (filters.cluster) opts.push(`cluster=${filters.cluster}`);
-    if (filters.node) opts.push(`node=${filters.node}`);
-    if (filters.node && filters.nodeMatch != "eq") // "eq" is default-case
-      opts.push(`nodeMatch=${filters.nodeMatch}`);
-    if (filters.partition) opts.push(`partition=${filters.partition}`);
-    if (filters.states.length != allJobStates.length)
-      for (let state of filters.states) opts.push(`state=${state}`);
-    if (filters.startTime.from && filters.startTime.to)
-      opts.push(
-        `startTime=${dateToUnixEpoch(filters.startTime.from)}-${dateToUnixEpoch(filters.startTime.to)}`,
-      );
-    if (filters.startTime.range) {
-        opts.push(`startTime=${filters.startTime.range}`)
-    }
+    // Direct Filters
     if (filters.dbId.length != 0) {
       for (let dbi of filters.dbId) {
         opts.push(`dbId=${dbi}`);
@@ -254,39 +228,56 @@
       }
     if (filters.jobIdMatch != "eq")
       opts.push(`jobIdMatch=${filters.jobIdMatch}`); // "eq" is default-case
-    for (let tag of filters.tags) opts.push(`tag=${tag}`);
+    if (filters.arrayJobId) opts.push(`arrayJobId=${filters.arrayJobId}`);
+    if (filters.jobName) opts.push(`jobName=${filters.jobName}`);
+    // View Filters
+    if (filters.project) opts.push(`project=${filters.project}`);
+    if (filters.project && filters.projectMatch != "contains") // "contains" is default-case
+     opts.push(`projectMatch=${filters.projectMatch}`);
+    if (filters.user.length != 0)
+      if (filters.userMatch != "in") {
+        opts.push(`user=${filters.user}`);
+      } else {
+        for (let singleUser of filters.user) opts.push(`user=${singleUser}`);
+      }
+    if (filters.userMatch != "contains") // "contains" is default-case
+      opts.push(`userMatch=${filters.userMatch}`);
+    // Filter Modals
+    if (filters.cluster) opts.push(`cluster=${filters.cluster}`);
+    if (filters.partition) opts.push(`partition=${filters.partition}`);
+    if (filters.states.length != allJobStates?.length)
+      for (let state of filters.states) opts.push(`state=${state}`);
+    if (filters.startTime.from && filters.startTime.to)
+      opts.push(
+        `startTime=${dateToUnixEpoch(filters.startTime.from)}-${dateToUnixEpoch(filters.startTime.to)}`,
+      );
+    if (filters.startTime.range) {
+        opts.push(`startTime=${filters.startTime.range}`)
+    }
     if (filters.duration.from && filters.duration.to)
       opts.push(`duration=${filters.duration.from}-${filters.duration.to}`);
     if (filters.duration.lessThan)
       opts.push(`duration=0-${filters.duration.lessThan}`);
     if (filters.duration.moreThan)
       opts.push(`duration=${filters.duration.moreThan}-604800`);
-    if (filters.energy.from && filters.energy.to)
-      opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
+    if (filters.tags.length != 0)
+      for (let tag of filters.tags) opts.push(`tag=${tag}`);
     if (filters.numNodes.from && filters.numNodes.to)
       opts.push(`numNodes=${filters.numNodes.from}-${filters.numNodes.to}`);
     if (filters.numHWThreads.from && filters.numHWThreads.to)
       opts.push(`numHWThreads=${filters.numHWThreads.from}-${filters.numHWThreads.to}`);
     if (filters.numAccelerators.from && filters.numAccelerators.to)
       opts.push(`numAccelerators=${filters.numAccelerators.from}-${filters.numAccelerators.to}`);
-    if (filters.user.length != 0)
-      if (filters.userMatch != "in") {
-        opts.push(`user=${filters.user}`);
-      } else {
-        for (let singleUser of filters.user) opts.push(`user=${singleUser}`);
-      }
-    if (filters.userMatch != "contains") // "contains" is default-case
-      opts.push(`userMatch=${filters.userMatch}`);
-    if (filters.project) opts.push(`project=${filters.project}`);
-    if (filters.project && filters.projectMatch != "contains") // "contains" is default-case
-     opts.push(`projectMatch=${filters.projectMatch}`);
-    if (filters.jobName) opts.push(`jobName=${filters.jobName}`);
-    if (filters.arrayJobId) opts.push(`arrayJobId=${filters.arrayJobId}`);
+    if (filters.node) opts.push(`node=${filters.node}`);
+    if (filters.node && filters.nodeMatch != "eq") // "eq" is default-case
+      opts.push(`nodeMatch=${filters.nodeMatch}`);
+    if (filters.energy.from && filters.energy.to)
+      opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
     if (filters.stats.length != 0)
       for (let stat of filters.stats) {
           opts.push(`stat=${stat.field}-${stat.from}-${stat.to}`);
       }
-    
+    // Build && Return
     if (opts.length == 0 && window.location.search.length <= 1) return;
     let newurl = `${window.location.pathname}?${opts.join("&")}`;
     window.history.replaceState(null, "", newurl);
@@ -296,7 +287,7 @@
 <!-- Dropdown-Button -->
 <ButtonGroup>
   {#if showFilter}
-    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
+    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style={(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}>
       <DropdownToggle outline caret color="success">
         <Icon name="sliders" />
         Filters
@@ -307,36 +298,36 @@
           <DropdownItem disabled>{menuText}</DropdownItem>
           <DropdownItem divider />
         {/if}
-        <DropdownItem on:click={() => (isClusterOpen = true)}>
+        <DropdownItem onclick={() => (isClusterOpen = true)}>
           <Icon name="cpu" /> Cluster/Partition
         </DropdownItem>
-        <DropdownItem on:click={() => (isJobStatesOpen = true)}>
+        <DropdownItem onclick={() => (isJobStatesOpen = true)}>
           <Icon name="gear-fill" /> Job States
         </DropdownItem>
-        <DropdownItem on:click={() => (isStartTimeOpen = true)}>
+        <DropdownItem onclick={() => (isStartTimeOpen = true)}>
           <Icon name="calendar-range" /> Start Time
         </DropdownItem>
-        <DropdownItem on:click={() => (isDurationOpen = true)}>
+        <DropdownItem onclick={() => (isDurationOpen = true)}>
           <Icon name="stopwatch" /> Duration
         </DropdownItem>
-        <DropdownItem on:click={() => (isTagsOpen = true)}>
+        <DropdownItem onclick={() => (isTagsOpen = true)}>
           <Icon name="tags" /> Tags
         </DropdownItem>
-        <DropdownItem on:click={() => (isResourcesOpen = true)}>
+        <DropdownItem onclick={() => (isResourcesOpen = true)}>
           <Icon name="hdd-stack" /> Resources
         </DropdownItem>
-        <DropdownItem on:click={() => (isEnergyOpen = true)}>
+        <DropdownItem onclick={() => (isEnergyOpen = true)}>
           <Icon name="lightning-charge-fill" /> Energy
         </DropdownItem>
-        <DropdownItem on:click={() => (isStatsOpen = true)}>
-          <Icon name="bar-chart" on:click={() => (isStatsOpen = true)} /> Statistics
+        <DropdownItem onclick={() => (isStatsOpen = true)}>
+          <Icon name="bar-chart" onclick={() => (isStatsOpen = true)} /> Statistics
         </DropdownItem>
         {#if startTimeQuickSelect}
           <DropdownItem divider />
           <DropdownItem disabled>Start Time Quick Selection</DropdownItem>
           {#each startTimeSelectOptions.filter((stso) => stso.range !== "") as { rangeLabel, range }}
             <DropdownItem
-              on:click={() => {
+              onclick={() => {
                 filters.startTime.from = null
                 filters.startTime.to = null
                 filters.startTime.range = range;
@@ -353,7 +344,7 @@
   {/if}
 
   {#if matchedJobs >= -1}
-    <Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
+    <Button class="mb-1" style="margin-right: 0.25rem;" disabled outline>
       {matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
     </Button>
   {/if}
@@ -362,7 +353,7 @@
 {#if showFilter}
   <!-- SELECTED FILTER PILLS -->
   {#if filters.cluster}
-    <Info icon="cpu" on:click={() => (isClusterOpen = true)}>
+    <Info icon="cpu" onclick={() => (isClusterOpen = true)}>
       {filters.cluster}
       {#if filters.partition}
         ({filters.partition})
@@ -370,14 +361,14 @@
     </Info>
   {/if}
 
-  {#if filters.states.length != allJobStates.length}
-    <Info icon="gear-fill" on:click={() => (isJobStatesOpen = true)}>
+  {#if filters.states.length != allJobStates?.length}
+    <Info icon="gear-fill" onclick={() => (isJobStatesOpen = true)}>
       {filters.states.join(", ")}
     </Info>
   {/if}
 
   {#if filters.startTime.from || filters.startTime.to}
-    <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
+    <Info icon="calendar-range" onclick={() => (isStartTimeOpen = true)}>
       {new Date(filters.startTime.from).toLocaleString()} - {new Date(
         filters.startTime.to,
       ).toLocaleString()}
@@ -385,13 +376,13 @@
   {/if}
 
   {#if filters.startTime.range}
-    <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
+    <Info icon="calendar-range" onclick={() => (isStartTimeOpen = true)}>
       {startTimeSelectOptions.find((stso) => stso.range === filters.startTime.range).rangeLabel }
     </Info>
   {/if}
 
   {#if filters.duration.from || filters.duration.to}
-    <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
+    <Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
       {Math.floor(filters.duration.from / 3600)}h:{Math.floor(
         (filters.duration.from % 3600) / 60,
       )}m -
@@ -402,7 +393,7 @@
   {/if}
 
   {#if filters.duration.lessThan}
-    <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
+    <Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
       Duration less than {Math.floor(
         filters.duration.lessThan / 3600,
       )}h:{Math.floor((filters.duration.lessThan % 3600) / 60)}m
@@ -410,7 +401,7 @@
   {/if}
 
   {#if filters.duration.moreThan}
-    <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
+    <Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
       Duration more than {Math.floor(
         filters.duration.moreThan / 3600,
       )}h:{Math.floor((filters.duration.moreThan % 3600) / 60)}m
@@ -418,47 +409,45 @@
   {/if}
 
   {#if filters.tags.length != 0}
-    <Info icon="tags" on:click={() => (isTagsOpen = true)}>
+    <Info icon="tags" onclick={() => (isTagsOpen = true)}>
       {#each filters.tags as tagId}
-        {#key tagId}
-          <Tag id={tagId} clickable={false} />
-        {/key}
+        <Tag id={tagId} clickable={false} />
       {/each}
     </Info>
   {/if}
 
-  {#if filters.numNodes.from != null || filters.numNodes.to != null || filters.numHWThreads.from != null || filters.numHWThreads.to != null || filters.numAccelerators.from != null || filters.numAccelerators.to != null}
-    <Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
-      {#if isNodesModified}
+  {#if filters.numNodes.from != null || filters.numNodes.to != null}
+    <Info icon="hdd-stack" onclick={() => (isResourcesOpen = true)}>
         Nodes: {filters.numNodes.from} - {filters.numNodes.to}
-      {/if}
-      {#if isNodesModified && isHwthreadsModified},
-      {/if}
-      {#if isHwthreadsModified}
+    </Info>
+  {/if}
+
+  {#if filters.numHWThreads.from != null || filters.numHWThreads.to != null}
+    <Info icon="cpu" onclick={() => (isResourcesOpen = true)}>
         HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to}
-      {/if}
-      {#if (isNodesModified || isHwthreadsModified) && isAccsModified},
-      {/if}
-      {#if isAccsModified}
+    </Info>
+  {/if}
+
+  {#if filters.numAccelerators.from != null || filters.numAccelerators.to != null}
+    <Info icon="gpu-card" onclick={() => (isResourcesOpen = true)}>
         Accelerators: {filters.numAccelerators.from} - {filters.numAccelerators.to}
-      {/if}
     </Info>
   {/if}
 
   {#if filters.node != null}
-    <Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
+    <Info icon="hdd-stack" onclick={() => (isResourcesOpen = true)}>
       Node{nodeMatchLabels[filters.nodeMatch]}: {filters.node}
     </Info>
   {/if}
 
   {#if filters.energy.from || filters.energy.to}
-    <Info icon="lightning-charge-fill" on:click={() => (isEnergyOpen = true)}>
+    <Info icon="lightning-charge-fill" onclick={() => (isEnergyOpen = true)}>
       Total Energy: {filters.energy.from} - {filters.energy.to}
     </Info>
   {/if}
 
   {#if filters.stats.length > 0}
-    <Info icon="bar-chart" on:click={() => (isStatsOpen = true)}>
+    <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
       {filters.stats
         .map((stat) => `${stat.field}: ${stat.from} - ${stat.to}`)
         .join(", ")}
@@ -467,68 +456,61 @@
 {/if}
 
 <Cluster
-  {disableClusterSelection}
   bind:isOpen={isClusterOpen}
-  bind:cluster={filters.cluster}
-  bind:partition={filters.partition}
-  on:set-filter={() => updateFilters()}
+  presetCluster={filters.cluster}
+  presetPartition={filters.partition}
+  {disableClusterSelection}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <JobStates
   bind:isOpen={isJobStatesOpen}
-  bind:states={filters.states}
-  on:set-filter={() => updateFilters()}
+  presetStates={filters.states}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <StartTime
   bind:isOpen={isStartTimeOpen}
-  bind:from={filters.startTime.from}
-  bind:to={filters.startTime.to}
-  bind:range={filters.startTime.range}
-  {startTimeSelectOptions}
-  on:set-filter={() => updateFilters()}
+  presetStartTime={filters.startTime}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <Duration
   bind:isOpen={isDurationOpen}
-  bind:lessThan={filters.duration.lessThan}
-  bind:moreThan={filters.duration.moreThan}
-  bind:from={filters.duration.from}
-  bind:to={filters.duration.to}
-  on:set-filter={() => updateFilters()}
+  presetDuration={filters.duration}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <Tags
   bind:isOpen={isTagsOpen}
-  bind:tags={filters.tags}
-  on:set-filter={() => updateFilters()}
+  presetTags={filters.tags}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <Resources
-  cluster={filters.cluster}
   bind:isOpen={isResourcesOpen}
-  bind:numNodes={filters.numNodes}
-  bind:numHWThreads={filters.numHWThreads}
-  bind:numAccelerators={filters.numAccelerators}
-  bind:namedNode={filters.node}
-  bind:nodeMatch={filters.nodeMatch}
-  bind:isNodesModified
-  bind:isHwthreadsModified
-  bind:isAccsModified
-  on:set-filter={() => updateFilters()}
+  activeCluster={filters.cluster}
+  presetNumNodes={filters.numNodes}
+  presetNumHWThreads={filters.numHWThreads}
+  presetNumAccelerators={filters.numAccelerators}
+  presetNamedNode={filters.node}
+  presetNodeMatch={filters.nodeMatch}
+  setFilter={(filter) => updateFilters(filter)}
+/>
+
+<Energy
+  bind:isOpen={isEnergyOpen}
+  presetEnergy={filters.energy}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
 <Statistics
   bind:isOpen={isStatsOpen}
-  bind:stats={filters.stats}
-  on:set-filter={() => updateFilters()}
+  presetStats={filters.stats}
+  setFilter={(filter) => updateFilters(filter)}
 />
 
-<Energy
-  bind:isOpen={isEnergyOpen}
-  bind:energy={filters.energy}
-  on:set-filter={() => updateFilters()}
-/>
+
 
 <style>
   :global(.cc-dropdown-on-hover:hover .dropdown-menu) {
diff --git a/web/frontend/src/generic/JobCompare.svelte b/web/frontend/src/generic/JobCompare.svelte
index 484972df..2920eea6 100644
--- a/web/frontend/src/generic/JobCompare.svelte
+++ b/web/frontend/src/generic/JobCompare.svelte
@@ -133,6 +133,7 @@
     }
     compareTableSorting = { ...compareTableSorting };
 
+    let pendingCompareData;
     if (key == 'resources') {
       let longField = "";
       switch (field) {
@@ -148,12 +149,13 @@
         default:
           console.log("Unknown Res Field", field)
       } 
-      compareTableData = compareTableData.sort((j1, j2) => {
+
+      pendingCompareData = compareTableData.sort((j1, j2) => {
         if (j1[longField] == null || j2[longField] == null) return -1;
         return s.dir != "up" ? j1[longField] - j2[longField] : j2[longField] - j1[longField];
       });
     } else if (key == 'meta') {
-      compareTableData = compareTableData.sort((j1, j2) => {
+      pendingCompareData = compareTableData.sort((j1, j2) => {
         if (j1[field] == null || j2[field] == null) return -1;
         if (field == 'cluster') {
           let c1 = `${j1.cluster} (${j1.subCluster})`
@@ -164,13 +166,15 @@
         }
       });
     } else {
-      compareTableData = compareTableData.sort((j1, j2) => {
+      pendingCompareData = compareTableData.sort((j1, j2) => {
         let s1 = j1.stats.find((m) => m.name == key)?.data;
         let s2 = j2.stats.find((m) => m.name == key)?.data;
         if (s1 == null || s2 == null) return -1;
         return s.dir != "up" ? s1[field] - s2[field] : s2[field] - s1[field];
       });
     }
+
+    compareTableData = [...pendingCompareData]
   }
 
   function jobs2uplot(jobs, metrics) {
diff --git a/web/frontend/src/generic/JobList.svelte b/web/frontend/src/generic/JobList.svelte
index d1cb97f5..be239d04 100644
--- a/web/frontend/src/generic/JobList.svelte
+++ b/web/frontend/src/generic/JobList.svelte
@@ -113,11 +113,6 @@
     variables: { paging, sorting, filter },
   });
 
-  $: if (!usePaging && sorting) {
-    // console.log('Reset Paging ...')
-    paging = { itemsPerPage: 10, page: 1 }
-  };
-
   let jobs = [];
   $: if ($initialized && $jobsStore.data) {
     if (usePaging) {
@@ -143,10 +138,20 @@
     }
   }
 
+  $: if (!usePaging && (sorting || filter)) {
+    // Continous Scroll: Reset list and paging if parameters change: Existing entries will not match new selections
+    jobs = [];
+    paging = { itemsPerPage: 10, page: 1 };
+  }
+
   $: matchedListJobs = $jobsStore.data != null ? $jobsStore.data.jobs.count : -1;
 
   // Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
   export function refreshJobs() {
+    if (!usePaging) {
+      jobs = []; // Empty Joblist before refresh, prevents infinite buildup
+      paging = { itemsPerPage: 10, page: 1 };
+    }
     jobsStore = queryStore({
       client: client,
       query: query,
@@ -285,7 +290,7 @@
             </td>
           </tr>
         {:else}
-          {#each jobs as job (job)}
+          {#each jobs as job (job.id)}
             <JobListRow bind:triggerMetricRefresh {job} {metrics} {plotWidth} {showFootprint} previousSelect={selectedJobs.includes(job.id)}
               on:select-job={({detail}) => selectedJobs = [...selectedJobs, detail]}
               on:unselect-job={({detail}) => selectedJobs = selectedJobs.filter(item => item !== detail)}
@@ -316,7 +321,7 @@
     {itemsPerPage}
     itemText="Jobs"
     totalItems={matchedListJobs}
-    on:update-paging={({ detail }) => {
+    updatePaging={(detail) => {
       if (detail.itemsPerPage != itemsPerPage) {
         updateConfiguration(detail.itemsPerPage.toString(), detail.page);
       } else {
diff --git a/web/frontend/src/generic/PlotGrid.svelte b/web/frontend/src/generic/PlotGrid.svelte
index 5152e0d5..c3244092 100644
--- a/web/frontend/src/generic/PlotGrid.svelte
+++ b/web/frontend/src/generic/PlotGrid.svelte
@@ -14,6 +14,17 @@
 
     export let itemsPerRow
     export let items
+
+    /* Migtation Notes 
+    * Requirements
+    * - Parent Components must be already Migrated
+    * - TODO: Job.root.svelte, Node.root.svelte
+    * 
+    * How-To
+    * - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)
+    * - Pass new snippet as argument/prop to here
+    * - @render snippet in items-loop with argument == item
+    */
 </script>
 
 <Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
diff --git a/web/frontend/src/generic/PlotTable.svelte b/web/frontend/src/generic/PlotTable.svelte
deleted file mode 100644
index 4bc06941..00000000
--- a/web/frontend/src/generic/PlotTable.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<!-- 
-    @component Organized display of plots as table
-
-    Properties:
-    - `itemsPerRow Number`: Elements to render per row
-    - `items [Any]`: List of plot components to render
-    - `padding Number`: Padding between plot elements
-    - `renderFor String`:   If 'job', filter disabled metrics
- -->
-
-<script>
-    export let itemsPerRow
-    export let items
-    export let padding = 10
-    export let renderFor
-
-    let rows = []
-    let tableWidth = 0
-    const isPlaceholder = x => x._is_placeholder === true
-
-    function tile(items, itemsPerRow) {
-        const rows = []
-        for (let ri = 0; ri < items.length; ri += itemsPerRow) {
-            const row = []
-            for (let ci = 0; ci < itemsPerRow; ci += 1) {
-                if (ri + ci < items.length)
-                    row.push(items[ri + ci])
-                else
-                    row.push({ _is_placeholder: true, ri, ci })
-            }
-            rows.push(row)
-        }
-
-        return rows
-    }
-
-
-    $: if (renderFor === 'job') {
-        rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
-    } else {
-        rows = tile(items, itemsPerRow)
-    }
-
-    $: plotWidth = (tableWidth / itemsPerRow) - (padding * itemsPerRow)
-</script>
-
-<table bind:clientWidth={tableWidth} style="width: 100%; table-layout: fixed;">
-    {#each rows as row}
-        <tr>
-            {#each row as item (item)}
-                <td style="vertical-align:top;"> <!-- For Aligning Notice Cards -->
-                    {#if !isPlaceholder(item) && plotWidth > 0}
-                        <slot item={item} width={plotWidth}></slot>
-                    {/if}
-                </td>
-            {/each}
-        </tr>
-    {/each}
-</table>
diff --git a/web/frontend/src/generic/filters/Cluster.svelte b/web/frontend/src/generic/filters/Cluster.svelte
index f8865824..894ce0cd 100644
--- a/web/frontend/src/generic/filters/Cluster.svelte
+++ b/web/frontend/src/generic/filters/Cluster.svelte
@@ -13,7 +13,7 @@
  -->
 
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext } from "svelte";
   import {
     Button,
     ListGroup,
@@ -24,18 +24,23 @@
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
 
-  const clusters = getContext("clusters"),
-    initialized = getContext("initialized"),
-    dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetCluster = "",
+    presetPartition = "",
+    disableClusterSelection = false,
+    setFilter
+  } = $props();
+
+  /* State Init */
+  let pendingCluster = $state(presetCluster);
+  let pendingPartition = $state(presetPartition);
+
+  /* Derived Vars */
+  const clusters = $derived(getContext("clusters"));
+  const initialized = $derived(getContext("initialized"));
 
-  export let disableClusterSelection = false;
-  export let isModified = false;
-  export let isOpen = false;
-  export let cluster = null;
-  export let partition = null;
-  let pendingCluster = cluster,
-    pendingPartition = partition;
-  $: isModified = pendingCluster != cluster || pendingPartition != partition;
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -45,13 +50,13 @@
       <h4>Cluster</h4>
       {#if disableClusterSelection}
         <Button color="info" class="w-100 mb-2" disabled><b>Info: Cluster Selection Disabled in This View</b></Button>
-        <Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {cluster}</b></Button>
+        <Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {presetCluster}</b></Button>
       {:else}
         <ListGroup>
           <ListGroupItem
             disabled={disableClusterSelection}
             active={pendingCluster == null}
-            on:click={() => ((pendingCluster = null), (pendingPartition = null))}
+            onclick={() => ((pendingCluster = null), (pendingPartition = null))}
           >
             Any Cluster
           </ListGroupItem>
@@ -59,7 +64,7 @@
             <ListGroupItem
               disabled={disableClusterSelection}
               active={pendingCluster == cluster.name}
-              on:click={() => (
+              onclick={() => (
                 (pendingCluster = cluster.name), (pendingPartition = null)
               )}
             >
@@ -75,14 +80,14 @@
       <ListGroup>
         <ListGroupItem
           active={pendingPartition == null}
-          on:click={() => (pendingPartition = null)}
+          onclick={() => (pendingPartition = null)}
         >
           Any Partition
         </ListGroupItem>
-        {#each clusters.find((c) => c.name == pendingCluster).partitions as partition}
+        {#each clusters?.find((c) => c.name == pendingCluster)?.partitions as partition}
           <ListGroupItem
             active={pendingPartition == partition}
-            on:click={() => (pendingPartition = partition)}
+            onclick={() => (pendingPartition = partition)}
           >
             {partition}
           </ListGroupItem>
@@ -93,22 +98,22 @@
   <ModalFooter>
     <Button
       color="primary"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        cluster = pendingCluster;
-        partition = pendingPartition;
-        dispatch("set-filter", { cluster, partition });
+        setFilter({ cluster: pendingCluster, partition: pendingPartition });
       }}>Close & Apply</Button
     >
-    <Button
-      color="danger"
-      on:click={() => {
-        isOpen = false;
-        cluster = pendingCluster = null;
-        partition = pendingPartition = null;
-        dispatch("set-filter", { cluster, partition });
-      }}>Reset</Button
-    >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    {#if !disableClusterSelection}
+      <Button
+        color="danger"
+        onclick={() => {
+          isOpen = false;
+          pendingCluster = null;
+          pendingPartition = null;
+          setFilter({ cluster: pendingCluster, partition: pendingPartition})
+        }}>Reset</Button
+      >
+    {/if}
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/Duration.svelte b/web/frontend/src/generic/filters/Duration.svelte
index 6a22b988..75f2e801 100644
--- a/web/frontend/src/generic/filters/Duration.svelte
+++ b/web/frontend/src/generic/filters/Duration.svelte
@@ -13,7 +13,6 @@
  -->
  
  <script>
-  import { createEventDispatcher } from "svelte";
   import {
     Row,
     Col,
@@ -24,61 +23,81 @@
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetDuration ={lessThan: null, moreThan: null, from: null, to: null},
+    setFilter
+  } = $props();
 
-  export let isOpen = false;
-  export let lessThan = null;
-  export let moreThan = null;
-  export let from = null;
-  export let to = null;
+  /* State Init */
+  let pendingDuration = $state(presetDuration);
+  let lessState = $state(secsToHoursAndMins(presetDuration?.lessThan));
+  let moreState = $state(secsToHoursAndMins(presetDuration?.moreThan));
+  let fromState = $state(secsToHoursAndMins(presetDuration?.from));
+  let toState = $state(secsToHoursAndMins(presetDuration?.to));
 
-  let pendingLessThan, pendingMoreThan, pendingFrom, pendingTo;
-  let lessDisabled = false,
-    moreDisabled = false,
-    betweenDisabled = false;
+  /* Derived Init */
+  const lessDisabled = $derived(
+    moreState.hours !== 0 ||
+    moreState.mins !== 0 ||
+    fromState.hours !== 0 ||
+    fromState.mins !== 0 ||
+    toState.hours !== 0 ||
+    toState.mins !== 0
+  );
 
-  function reset() {
-    pendingLessThan =
-      lessThan == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(lessThan);
-    pendingMoreThan =
-      moreThan == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(moreThan);
-    pendingFrom =
-      from == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(from);
-    pendingTo = to == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(to);
-  }
+  const moreDisabled = $derived(
+    lessState.hours !== 0 ||
+    lessState.mins !== 0 ||
+    fromState.hours !== 0 ||
+    fromState.mins !== 0 ||
+    toState.hours !== 0 ||
+    toState.mins !== 0
+  );
 
-  reset();
+  const betweenDisabled = $derived(
+    moreState.hours !== 0 ||
+    moreState.mins !== 0 ||
+    lessState.hours !== 0 ||
+    lessState.mins !== 0
+  )
 
-  function secsToHoursAndMins(duration) {
-    const hours = Math.floor(duration / 3600);
-    duration -= hours * 3600;
-    const mins = Math.floor(duration / 60);
-    return { hours, mins };
-  }
+  /* Functions */
+  function resetPending() {
+    pendingDuration = {
+      lessThan: null,
+      moreThan: null,
+      from: null,
+      to: null
+    }
+  };
 
-  function hoursAndMinsToSecs({ hours, mins }) {
-    return hours * 3600 + mins * 60;
+  function resetStates() {
+    lessState = { hours: 0, mins: 0 }
+    moreState = { hours: 0, mins: 0 }
+    fromState = { hours: 0, mins: 0 }
+    toState = { hours: 0, mins: 0 }
+  };
+
+  function secsToHoursAndMins(seconds) {
+    if (seconds) {
+      const hours = Math.floor(seconds / 3600);
+      seconds -= hours * 3600;
+      const mins = Math.floor(seconds / 60);
+      return { hours, mins };
+    } else {
+      return { hours: 0, mins: 0 }
+    }
   }
 
-  $: lessDisabled =
-    pendingMoreThan.hours !== 0 ||
-    pendingMoreThan.mins !== 0 ||
-    pendingFrom.hours !== 0 ||
-    pendingFrom.mins !== 0 ||
-    pendingTo.hours !== 0 ||
-    pendingTo.mins !== 0;
-  $: moreDisabled =
-    pendingLessThan.hours !== 0 ||
-    pendingLessThan.mins !== 0 ||
-    pendingFrom.hours !== 0 ||
-    pendingFrom.mins !== 0 ||
-    pendingTo.hours !== 0 ||
-    pendingTo.mins !== 0;
-  $: betweenDisabled =
-    pendingMoreThan.hours !== 0 ||
-    pendingMoreThan.mins !== 0 ||
-    pendingLessThan.hours !== 0 ||
-    pendingLessThan.mins !== 0;
+  function hoursAndMinsToSecs(hoursAndMins) {
+    if (hoursAndMins) {
+      return hoursAndMins.hours * 3600 + hoursAndMins.mins * 60;
+    } else {
+      return 0
+    }
+  }
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -92,7 +111,7 @@
             type="number"
             min="0"
             class="form-control"
-            bind:value={pendingMoreThan.hours}
+            bind:value={moreState.hours}
             disabled={moreDisabled}
           />
           <div class="input-group-append">
@@ -107,7 +126,7 @@
             min="0"
             max="59"
             class="form-control"
-            bind:value={pendingMoreThan.mins}
+            bind:value={moreState.mins}
             disabled={moreDisabled}
           />
           <div class="input-group-append">
@@ -126,7 +145,7 @@
             type="number"
             min="0"
             class="form-control"
-            bind:value={pendingLessThan.hours}
+            bind:value={lessState.hours}
             disabled={lessDisabled}
           />
           <div class="input-group-append">
@@ -141,7 +160,7 @@
             min="0"
             max="59"
             class="form-control"
-            bind:value={pendingLessThan.mins}
+            bind:value={lessState.mins}
             disabled={lessDisabled}
           />
           <div class="input-group-append">
@@ -160,7 +179,7 @@
             type="number"
             min="0"
             class="form-control"
-            bind:value={pendingFrom.hours}
+            bind:value={fromState.hours}
             disabled={betweenDisabled}
           />
           <div class="input-group-append">
@@ -175,7 +194,7 @@
             min="0"
             max="59"
             class="form-control"
-            bind:value={pendingFrom.mins}
+            bind:value={fromState.mins}
             disabled={betweenDisabled}
           />
           <div class="input-group-append">
@@ -192,7 +211,7 @@
             type="number"
             min="0"
             class="form-control"
-            bind:value={pendingTo.hours}
+            bind:value={toState.hours}
             disabled={betweenDisabled}
           />
           <div class="input-group-append">
@@ -207,7 +226,7 @@
             min="0"
             max="59"
             class="form-control"
-            bind:value={pendingTo.mins}
+            bind:value={toState.mins}
             disabled={betweenDisabled}
           />
           <div class="input-group-append">
@@ -220,39 +239,32 @@
   <ModalFooter>
     <Button
       color="primary"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        lessThan = hoursAndMinsToSecs(pendingLessThan);
-        moreThan = hoursAndMinsToSecs(pendingMoreThan);
-        from = hoursAndMinsToSecs(pendingFrom);
-        to = hoursAndMinsToSecs(pendingTo);
-        dispatch("set-filter", { lessThan, moreThan, from, to });
+        pendingDuration.lessThan = hoursAndMinsToSecs(lessState);
+        pendingDuration.moreThan = hoursAndMinsToSecs(moreState);
+        pendingDuration.from = hoursAndMinsToSecs(fromState);
+        pendingDuration.to = hoursAndMinsToSecs(toState);
+        setFilter({duration: pendingDuration});
       }}
     >
       Close & Apply
     </Button>
     <Button
       color="warning"
-      on:click={() => {
-        lessThan = null;
-        moreThan = null;
-        from = null;
-        to = null;
-        reset();
+      onclick={() => {
+        resetStates();
       }}>Reset Values</Button
     >
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        lessThan = null;
-        moreThan = null;
-        from = null;
-        to = null;
-        reset();
-        dispatch("set-filter", { lessThan, moreThan, from, to });
+        resetStates();
+        resetPending();
+        setFilter({duration: pendingDuration});
       }}>Reset Filter</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/Energy.svelte b/web/frontend/src/generic/filters/Energy.svelte
index 9dd6dd8a..536510b1 100644
--- a/web/frontend/src/generic/filters/Energy.svelte
+++ b/web/frontend/src/generic/filters/Energy.svelte
@@ -10,7 +10,6 @@
  -->
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import {
     Button,
     Modal,
@@ -20,49 +19,49 @@
   } from "@sveltestrap/sveltestrap";
   import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetEnergy= {from: null, to: null},
+    setFilter,
+  } = $props();
 
-  const energyMaximum = 1000.0;
+  /* State Init */
+  let energyState = $state(presetEnergy);
 
-  export let isOpen = false;
-  export let energy= {from: null, to: null};
-
-  function resetRanges() {
-      energy.from = null
-      energy.to = null
-  }
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
   <ModalHeader>Filter based on energy</ModalHeader>
   <ModalBody>
-    <h4>Total Job Energy (kWh)</h4>
-    <DoubleRangeSlider
-      on:change={({ detail }) => (
-        (energy.from = detail[0]), (energy.to = detail[1])
-      )}
-      min={0.0}
-      max={energyMaximum}
-      firstSlider={energy?.from ? energy.from : 0.0}
-      secondSlider={energy?.to ? energy.to : energyMaximum}
-      inputFieldFrom={energy?.from ? energy.from : null}
-      inputFieldTo={energy?.to ? energy.to : null}
-    />
+    <div class="mb-3">
+      <div class="mb-0"><b>Total Job Energy (kWh)</b></div>
+      <DoubleRangeSlider
+        changeRange={(detail) => {
+          energyState.from = detail[0];
+          energyState.to = detail[1];
+        }}
+        sliderMin={0.0}
+        sliderMax={1000.0}
+        fromPreset={energyState?.from? energyState.from : 0.0}
+        toPreset={energyState?.to? energyState.to : 1000.0}
+      />
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button
       color="primary"
       on:click={() => {
         isOpen = false;
-        dispatch("set-filter", { energy });
+        setFilter({ energy: energyState });
       }}>Close & Apply</Button
     >
     <Button
       color="danger"
       on:click={() => {
         isOpen = false;
-        resetRanges();
-        dispatch("set-filter", { energy });
+        energyState = {from: null, to: null};
+        setFilter({ energy: energyState });
       }}>Reset</Button
     >
     <Button on:click={() => (isOpen = false)}>Close</Button>
diff --git a/web/frontend/src/generic/filters/InfoBox.svelte b/web/frontend/src/generic/filters/InfoBox.svelte
index ebd3526f..ea9eb3f2 100644
--- a/web/frontend/src/generic/filters/InfoBox.svelte
+++ b/web/frontend/src/generic/filters/InfoBox.svelte
@@ -4,16 +4,22 @@
     Properties:
     - `icon String`: Sveltestrap icon name
     - `modified Bool?`: Optional if filter is modified [Default: false]
+    - `onclick Fn()`: Opens Modal on click
+    - `children Fn()?`: Internal prop, Svelte 5 version of <slot/>
  -->
  
  <script>
   import { Button, Icon } from "@sveltestrap/sveltestrap";
-
-  export let icon;
-  export let modified = false;
+  /* Svelte 5 Props */
+  let { icon, modified, onclick, children } = $props();
 </script>
 
-<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} on:click>
+<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} {onclick}>
   <Icon name={icon} />
-  <slot />
+  {#if children}
+    <!-- Note: Ignore '@' Error in IDE -->
+    {@render children()}
+  {:else}
+    <span>No content found</span>
+  {/if}
 </Button>
diff --git a/web/frontend/src/generic/filters/JobStates.svelte b/web/frontend/src/generic/filters/JobStates.svelte
index d903abce..0e32885e 100644
--- a/web/frontend/src/generic/filters/JobStates.svelte
+++ b/web/frontend/src/generic/filters/JobStates.svelte
@@ -13,7 +13,7 @@
     - `const allJobStates [String]`: List of all available job states used in cc-backend
  -->
 
-<script context="module">
+<script module>
   export const allJobStates = [
     "running",
     "completed",
@@ -27,7 +27,8 @@
 </script>
 
 <script>
-  import { createEventDispatcher } from "svelte";
+  /* Note: Ignore VSCode reported 'A component can only have one instance-level <script> element' error */
+  
   import {
     Button,
     ListGroup,
@@ -38,16 +39,16 @@
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetStates = [...allJobStates],
+    setFilter
+  } = $props();
 
-  export let isModified = false;
-  export let isOpen = false;
-  export let states = [...allJobStates];
+  /* State Init */
+  let pendingStates = $state([...presetStates]);
 
-  let pendingStates = [...states];
-  $: isModified =
-    states.length != pendingStates.length ||
-    !states.every((state) => pendingStates.includes(state));
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -71,28 +72,25 @@
     <Button
       color="primary"
       disabled={pendingStates.length == 0}
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        states = [...pendingStates];
-        dispatch("set-filter", { states });
+        setFilter({ states: [...pendingStates] });
       }}>Close & Apply</Button
     >
     <Button
       color="warning"
-      on:click={() => {
-        states = [...allJobStates];
+      onclick={() => {
         pendingStates = [];
       }}>Deselect All</Button
     >
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        states = [...allJobStates];
         pendingStates = [...allJobStates];
-        dispatch("set-filter", { states });
+        setFilter({ states: [...pendingStates] });
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/Resources.svelte b/web/frontend/src/generic/filters/Resources.svelte
index 443dda77..02925d43 100644
--- a/web/frontend/src/generic/filters/Resources.svelte
+++ b/web/frontend/src/generic/filters/Resources.svelte
@@ -2,14 +2,11 @@
     @component Filter sub-component for selecting job resources
 
     Properties:
-    - `cluster Object?`: The currently selected cluster config [Default: null]
     - `isOpen Bool?`: Is this filter component opened [Default: false]
+    - `activeCluster String?`: The currently selected cluster name [Default: null]
     - `numNodes Object?`: The currently selected numNodes filter [Default: {from:null, to:null}]
     - `numHWThreads Object?`: The currently selected numHWThreads filter [Default: {from:null, to:null}]
     - `numAccelerators Object?`: The currently selected numAccelerators filter [Default: {from:null, to:null}]
-    - `isNodesModified Bool?`: Is the node filter modified [Default: false]
-    - `isHwthreadsModified Bool?`: Is the Hwthreads filter modified [Default: false]
-    - `isAccsModified Bool?`: Is the Accelerator filter modified [Default: false]
     - `namedNode String?`: The currently selected single named node (= hostname) [Default: null]
 
     Events:
@@ -17,7 +14,7 @@
  -->
  
  <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext } from "svelte";
   import {
     Button,
     Modal,
@@ -28,27 +25,19 @@
   } from "@sveltestrap/sveltestrap";
   import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
 
-  const clusters = getContext("clusters"),
-    initialized = getContext("initialized"),
-    dispatch = createEventDispatcher();
-
-  export let cluster = null;
-  export let isOpen = false;
-  export let numNodes = { from: null, to: null };
-  export let numHWThreads = { from: null, to: null };
-  export let numAccelerators = { from: null, to: null };
-  export let isNodesModified = false;
-  export let isHwthreadsModified = false;
-  export let isAccsModified = false;
-  export let namedNode = null;
-  export let nodeMatch = "eq"
-
-  let pendingNumNodes = numNodes,
-    pendingNumHWThreads = numHWThreads,
-    pendingNumAccelerators = numAccelerators,
-    pendingNamedNode = namedNode,
-    pendingNodeMatch = nodeMatch;
+  /* Svelte 5 Props*/
+  let {
+    isOpen = $bindable(false),
+    activeCluster = null,
+    presetNumNodes = { from: null, to: null },
+    presetNumHWThreads = { from: null, to: null },
+    presetNumAccelerators = { from: null, to: null },
+    presetNamedNode = null,
+    presetNodeMatch = "eq",
+    setFilter
+  } = $props()
 
+  /* Const Init */
   const nodeMatchLabels = {
     eq: "Equal To",
     contains: "Contains",
@@ -85,75 +74,133 @@
       0,
     );
 
-  let minNumNodes = 1,
-    maxNumNodes = 0,
-    minNumHWThreads = 1,
-    maxNumHWThreads = 0,
-    minNumAccelerators = 0,
-    maxNumAccelerators = 0;
-  $: {
+  /* State Init*/
+  // Counts
+  let minNumNodes = $state(1);
+  let maxNumNodes = $state(0);
+  let maxNumHWThreads = $state(0);
+  let maxNumAccelerators = $state(0);
+  // Pending
+  let pendingNumNodes = $state(presetNumNodes);
+  let pendingNumHWThreads = $state(presetNumHWThreads);
+  let pendingNumAccelerators = $state(presetNumAccelerators);
+  let pendingNamedNode = $state(presetNamedNode);
+  let pendingNodeMatch = $state(presetNodeMatch);
+  // Changable States
+  let nodesState = $state(presetNumNodes);
+  let threadState = $state(presetNumHWThreads);
+  let accState = $state(presetNumAccelerators);
+
+  /* Derived States */
+  const clusters = $derived(getContext("clusters"));
+  const initialized = $derived(getContext("initialized"));
+  // Is Selection Active
+  const nodesActive = $derived(!(JSON.stringify(nodesState) === JSON.stringify({ from: 1, to: maxNumNodes })));
+  const threadActive = $derived(!(JSON.stringify(threadState) === JSON.stringify({ from: 1, to: maxNumHWThreads })));
+  const accActive = $derived(!(JSON.stringify(accState) === JSON.stringify({ from: 0, to: maxNumAccelerators })));
+  // Block Apply if null
+  const disableApply = $derived(
+    nodesState.from === null || nodesState.to === null ||
+    threadState.from === null || threadState.to === null ||
+    accState.from === null || accState.to === null
+  );
+
+  /* Reactive Effects | Svelte 5 onMount */
+  $effect(() => {
     if ($initialized) {
-      if (cluster != null) {
-        const { subClusters } = clusters.find((c) => c.name == cluster);
-        const { filterRanges } = header.clusters.find((c) => c.name == cluster);
+      // 'hClusters' defined in templates/base.tmpl
+      if (activeCluster != null) {
+        const { filterRanges } = hClusters.find((c) => c.name == activeCluster);
         minNumNodes = filterRanges.numNodes.from;
         maxNumNodes = filterRanges.numNodes.to;
+      } else if (clusters.length > 0) {
+        for (let hc of hClusters) {
+          const { filterRanges } = hc;
+          minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
+          maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
+        };
+      };
+    };
+  });
+  
+  $effect(() => {
+    if ($initialized) {
+      // 'hClusters' defined in templates/base.tmpl
+      if (activeCluster != null) {
+        const { subClusters } = clusters.find((c) => c.name == activeCluster);
         maxNumAccelerators = findMaxNumAccels([{ subClusters }]);
         maxNumHWThreads = findMaxNumHWThreadsPerNode([{ subClusters }]);
       } else if (clusters.length > 0) {
-        const { filterRanges } = header.clusters[0];
-        minNumNodes = filterRanges.numNodes.from;
-        maxNumNodes = filterRanges.numNodes.to;
         maxNumAccelerators = findMaxNumAccels(clusters);
         maxNumHWThreads = findMaxNumHWThreadsPerNode(clusters);
-        for (let cluster of header.clusters) {
-          const { filterRanges } = cluster;
-          minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
-          maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
-        }
       }
     }
-  }
+  });
 
-  $: {
+  $effect(() => {
     if (
-      isOpen &&
       $initialized &&
       pendingNumNodes.from == null &&
       pendingNumNodes.to == null
     ) {
-      pendingNumNodes = { from: 0, to: maxNumNodes };
+      nodesState = { from: 1, to: maxNumNodes };
     }
-  }
+  });
 
-  $: {
+  $effect(() => {
     if (
-      isOpen &&
       $initialized &&
-      ((pendingNumHWThreads.from == null && pendingNumHWThreads.to == null) ||
-        isHwthreadsModified == false)
+      pendingNumHWThreads.from == null && 
+      pendingNumHWThreads.to == null 
     ) {
-      pendingNumHWThreads = { from: 0, to: maxNumHWThreads };
+      threadState = { from: 1, to: maxNumHWThreads };
     }
-  }
+  });
 
-  $: if (maxNumAccelerators != null && maxNumAccelerators > 1) {
+  $effect(() => {
     if (
-      isOpen &&
       $initialized &&
       pendingNumAccelerators.from == null &&
       pendingNumAccelerators.to == null
     ) {
-      pendingNumAccelerators = { from: 0, to: maxNumAccelerators };
+      accState = { from: 0, to: maxNumAccelerators };
     }
-  }
+  });
+
+  /* Functions */
+  function setResources() {
+    if (nodesActive) {
+      pendingNumNodes = {...nodesState};
+    } else {
+      pendingNumNodes = { from: null, to: null };
+    };
+    if (threadActive) {
+      pendingNumHWThreads = {...threadState};
+    } else {
+      pendingNumHWThreads = { from: null, to: null };
+    };
+    if (accActive) {
+      pendingNumAccelerators = {...accState};
+    } else {
+      pendingNumAccelerators = { from: null, to: null };
+    };
+  };
+
+  function resetResources() {
+    pendingNumNodes = { from: null, to: null };
+    pendingNumHWThreads = { from: null, to: null };
+    pendingNumAccelerators = { from: null, to: null };
+    pendingNamedNode = null;
+    pendingNodeMatch = "eq";
+  };
+
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
   <ModalHeader>Select number of utilized Resources</ModalHeader>
   <ModalBody>
-    <h6>Named Node</h6>
-    <div class="d-flex">
+    <div><b>Named Node</b></div>
+    <div class="d-flex mb-3">
       <Input type="text" class="w-75" bind:value={pendingNamedNode} />
       <div class="mx-1"></div>
       <Input type="select" class="w-25" bind:value={pendingNodeMatch}>
@@ -164,82 +211,63 @@
         {/each}
         </Input>
     </div>
-    <h6 style="margin-top: 1rem;">Number of Nodes</h6>
-    <DoubleRangeSlider
-      on:change={({ detail }) => {
-        pendingNumNodes = { from: detail[0], to: detail[1] };
-        isNodesModified = true;
-      }}
-      min={minNumNodes}
-      max={maxNumNodes}
-      firstSlider={pendingNumNodes.from}
-      secondSlider={pendingNumNodes.to}
-      inputFieldFrom={pendingNumNodes.from}
-      inputFieldTo={pendingNumNodes.to}
-    />
-    <h6 style="margin-top: 1rem;">
-      Number of HWThreads (Use for Single-Node Jobs)
-    </h6>
-    <DoubleRangeSlider
-      on:change={({ detail }) => {
-        pendingNumHWThreads = { from: detail[0], to: detail[1] };
-        isHwthreadsModified = true;
-      }}
-      min={minNumHWThreads}
-      max={maxNumHWThreads}
-      firstSlider={pendingNumHWThreads.from}
-      secondSlider={pendingNumHWThreads.to}
-      inputFieldFrom={pendingNumHWThreads.from}
-      inputFieldTo={pendingNumHWThreads.to}
-    />
-    {#if maxNumAccelerators != null && maxNumAccelerators > 1}
-      <h6 style="margin-top: 1rem;">Number of Accelerators</h6>
+
+    <div class="mb-3">
+      <div class="mb-0"><b>Number of Nodes</b></div>
       <DoubleRangeSlider
-        on:change={({ detail }) => {
-          pendingNumAccelerators = { from: detail[0], to: detail[1] };
-          isAccsModified = true;
+        changeRange={(detail) => {
+          nodesState.from = detail[0];
+          nodesState.to = detail[1];
         }}
-        min={minNumAccelerators}
-        max={maxNumAccelerators}
-        firstSlider={pendingNumAccelerators.from}
-        secondSlider={pendingNumAccelerators.to}
-        inputFieldFrom={pendingNumAccelerators.from}
-        inputFieldTo={pendingNumAccelerators.to}
+        sliderMin={minNumNodes}
+        sliderMax={maxNumNodes}
+        fromPreset={nodesState.from}
+        toPreset={nodesState.to}
       />
+    </div>
+
+    <div class="mb-3">
+      <div class="mb-0"><b>Number of HWThreads</b> (Use for Single-Node Jobs)</div>
+      <DoubleRangeSlider
+        changeRange={(detail) => {
+          threadState.from = detail[0];
+          threadState.to = detail[1];
+        }}
+        sliderMin={1}
+        sliderMax={maxNumHWThreads}
+        fromPreset={threadState.from}
+        toPreset={threadState.to}
+      />
+    </div>
+    {#if maxNumAccelerators != null && maxNumAccelerators > 1}
+      <div>
+        <div class="mb-0"><b>Number of Accelerators</b></div>
+        <DoubleRangeSlider
+          changeRange={(detail) => {
+            accState.from = detail[0];
+            accState.to = detail[1];
+          }}
+          sliderMin={0}
+          sliderMax={maxNumAccelerators}
+          fromPreset={accState.from}
+          toPreset={accState.to}
+        />
+      </div>
     {/if}
   </ModalBody>
   <ModalFooter>
     <Button
       color="primary"
-      disabled={pendingNumNodes.from == null || pendingNumNodes.to == null}
-      on:click={() => {
+      disabled={disableApply}
+      onclick={() => {
         isOpen = false;
-        pendingNumNodes = isNodesModified
-          ? pendingNumNodes
-          : { from: null, to: null };
-        pendingNumHWThreads = isHwthreadsModified
-          ? pendingNumHWThreads
-          : { from: null, to: null };
-        pendingNumAccelerators = isAccsModified
-          ? pendingNumAccelerators
-          : { from: null, to: null };
-        numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to };
-        numHWThreads = {
-          from: pendingNumHWThreads.from,
-          to: pendingNumHWThreads.to,
-        };
-        numAccelerators = {
-          from: pendingNumAccelerators.from,
-          to: pendingNumAccelerators.to,
-        };
-        namedNode = pendingNamedNode;
-        nodeMatch = pendingNodeMatch;
-        dispatch("set-filter", {
-          numNodes,
-          numHWThreads,
-          numAccelerators,
-          namedNode,
-          nodeMatch
+        setResources();
+        setFilter({
+          numNodes: pendingNumNodes,
+          numHWThreads: pendingNumHWThreads,
+          numAccelerators: pendingNumAccelerators,
+          node: pendingNamedNode,
+          nodeMatch: pendingNodeMatch
         });
       }}
     >
@@ -247,36 +275,18 @@
     </Button>
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        pendingNumNodes = { from: null, to: null };
-        pendingNumHWThreads = { from: null, to: null };
-        pendingNumAccelerators = { from: null, to: null };
-        pendingNamedNode = null;
-        pendingNodeMatch = null;
-        numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to };
-        numHWThreads = {
-          from: pendingNumHWThreads.from,
-          to: pendingNumHWThreads.to,
-        };
-        numAccelerators = {
-          from: pendingNumAccelerators.from,
-          to: pendingNumAccelerators.to,
-        };
-        isNodesModified = false;
-        isHwthreadsModified = false;
-        isAccsModified = false;
-        namedNode = pendingNamedNode;
-        nodeMatch = pendingNodeMatch;
-        dispatch("set-filter", {
-          numNodes,
-          numHWThreads,
-          numAccelerators,
-          namedNode,
-          nodeMatch
+        resetResources();
+        setFilter({
+          numNodes: pendingNumNodes,
+          numHWThreads: pendingNumHWThreads,
+          numAccelerators: pendingNumAccelerators,
+          node: pendingNamedNode,
+          nodeMatch: pendingNodeMatch
         });
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/StartTime.svelte b/web/frontend/src/generic/filters/StartTime.svelte
index a109fbb3..c722baa9 100644
--- a/web/frontend/src/generic/filters/StartTime.svelte
+++ b/web/frontend/src/generic/filters/StartTime.svelte
@@ -12,8 +12,19 @@
     - `set-filter, {String?, String?}`: Set 'from, to' filter in upstream component
  -->
 
+<script module>
+  export const startTimeSelectOptions = [
+    { range: "", rangeLabel: "No Selection"},
+    { range: "last6h", rangeLabel: "Last 6hrs"},
+    { range: "last24h", rangeLabel: "Last 24hrs"},
+    { range: "last7d", rangeLabel: "Last 7 days"},
+    { range: "last30d", rangeLabel: "Last 30 days"}
+  ];
+</script>
+
 <script>
-  import { createEventDispatcher } from "svelte";
+  /* Note: Ignore VSCode reported 'A component can only have one instance-level <script> element' error */
+
   import { parse, format, sub } from "date-fns";
   import {
     Row,
@@ -26,44 +37,39 @@
     FormGroup,
   } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
-
-  export let isModified = false;
-  export let isOpen = false;
-  export let from = null;
-  export let to = null;
-  export let range = "";
-  export let startTimeSelectOptions;
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetStartTime = { from: null, to: null, range: "" },
+    setFilter
+  } = $props();
 
+  /* Const Init */
   const now = new Date(Date.now());
   const ago = sub(now, { months: 1 });
-  const defaultFrom = {
-    date: format(ago, "yyyy-MM-dd"),
-    time: format(ago, "HH:mm"),
-  };
-  const defaultTo = {
-    date: format(now, "yyyy-MM-dd"),
-    time: format(now, "HH:mm"),
-  };
+  const resetFrom = { date: format(ago, "yyyy-MM-dd"), time: format(ago, "HH:mm")};
+  const resetTo = { date: format(now, "yyyy-MM-dd"), time: format(now, "HH:mm")};
 
-  $: pendingFrom = (from == null) ? defaultFrom : fromRFC3339(from)
-  $: pendingTo = (to == null) ? defaultTo : fromRFC3339(to)
-  $: pendingRange = range
+  /* State Init */
+  let pendingStartTime = $state(presetStartTime);
+  let fromState = $state(fromRFC3339(presetStartTime?.from, resetFrom));
+  let toState = $state(fromRFC3339(presetStartTime?.to, resetTo));
 
-  $: isModified =
-    (from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
-    (range != pendingRange) &&
-    !(
-      from == null &&
-      pendingFrom.date == "0000-00-00" &&
-      pendingFrom.time == "00:00"
-    ) &&
-    !(
-      to == null &&
-      pendingTo.date == "0000-00-00" &&
-      pendingTo.time == "00:00"
-    ) &&
-    !( range == "" && pendingRange == "");
+  /* Derived Init*/
+  const rangeSelect = $derived(pendingStartTime?.range ? pendingStartTime.range : "")
+
+  /* Functions */
+  function fromRFC3339(rfc3339, reset) {
+    if (rfc3339) {
+      const parsedDate = new Date(rfc3339);
+      return {
+        date: format(parsedDate, "yyyy-MM-dd"),
+        time: format(parsedDate, "HH:mm"),
+      }
+    } else {
+      return reset
+    } 
+  }
 
   function toRFC3339({ date, time }, secs = "00") {
     const parsedDate = parse(
@@ -73,26 +79,18 @@
     );
     return parsedDate.toISOString();
   }
-
-  function fromRFC3339(rfc3339) {
-    const parsedDate = new Date(rfc3339);
-    return {
-      date: format(parsedDate, "yyyy-MM-dd"),
-      time: format(parsedDate, "HH:mm"),
-    };
-  }
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
   <ModalHeader>Select Start Time</ModalHeader>
   <ModalBody>
-    {#if range !== ""}
+    {#if rangeSelect !== ""}
       <h4>Current Range</h4>
       <Row>
         <FormGroup class="col">
-          <Input type ="select" bind:value={pendingRange} >
+          <Input type ="select" bind:value={pendingStartTime.range} >
             {#each startTimeSelectOptions as { rangeLabel, range }}
-              <option label={rangeLabel} value={range}/>
+              <option label={rangeLabel} value={range}></option>
             {/each}
           </Input>
         </FormGroup>
@@ -101,42 +99,41 @@
     <h4>From</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingFrom.date} disabled={pendingRange !== ""}/>
+        <Input type="date" bind:value={fromState.date} disabled={rangeSelect !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingFrom.time} disabled={pendingRange !== ""}/>
+        <Input type="time" bind:value={fromState.time} disabled={rangeSelect !== ""}/>
       </FormGroup>
     </Row>
     <h4>To</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingTo.date} disabled={pendingRange !== ""}/>
+        <Input type="date" bind:value={toState.date} disabled={rangeSelect !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingTo.time} disabled={pendingRange !== ""}/>
+        <Input type="time" bind:value={toState.time} disabled={rangeSelect !== ""}/>
       </FormGroup>
     </Row>
   </ModalBody>
   <ModalFooter>
-    {#if pendingRange !== ""}
+    {#if rangeSelect !== ""}
       <Button
         color="warning"
-        disabled={pendingRange === ""}
-        on:click={() => {
-          pendingRange = ""
+        disabled={rangeSelect === ""}
+        onclick={() => {
+          pendingStartTime.range = "";
         }}
       >
         Reset Range
       </Button>
       <Button
         color="primary"
-        disabled={pendingRange === ""}
-        on:click={() => {
+        disabled={rangeSelect === ""}
+        onclick={() => {
           isOpen = false;
-          from = null;
-          to = null;
-          range = pendingRange;
-          dispatch("set-filter", { from, to, range });
+          pendingStartTime.from = null;
+          pendingStartTime.to = null;
+          setFilter({ startTime: pendingStartTime });
         }}
       >
         Close & Apply Range
@@ -144,14 +141,14 @@
     {:else}
       <Button
         color="primary"
-        disabled={pendingFrom.date == "0000-00-00" ||
-          pendingTo.date == "0000-00-00"}
-        on:click={() => {
+        disabled={fromState.date == "0000-00-00" ||
+          toState.date == "0000-00-00"}
+        onclick={() => {
           isOpen = false;
-          from = toRFC3339(pendingFrom);
-          to = toRFC3339(pendingTo, "59");
-          range = "";
-          dispatch("set-filter", { from, to, range });
+          pendingStartTime.from = toRFC3339(fromState);
+          pendingStartTime.to = toRFC3339(toState, "59");
+          pendingStartTime.range = "";
+          setFilter({ startTime: pendingStartTime });
         }}
       >
         Close & Apply Dates
@@ -159,14 +156,16 @@
     {/if}
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        from = null;
-        to = null;
-        range = "";
-        dispatch("set-filter", { from, to, range });
+        fromState = resetFrom;
+        toState = resetTo;
+        pendingStartTime.from = null;
+        pendingStartTime.to = null;
+        pendingStartTime.range = "";
+        setFilter({ startTime: pendingStartTime });
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/Stats.svelte b/web/frontend/src/generic/filters/Stats.svelte
index 3252d390..fe05466d 100644
--- a/web/frontend/src/generic/filters/Stats.svelte
+++ b/web/frontend/src/generic/filters/Stats.svelte
@@ -2,7 +2,6 @@
     @component Filter sub-component for selecting job statistics
 
     Properties:
-    - `isModified Bool?`: Is this filter component modified [Default: false]
     - `isOpen Bool?`: Is this filter component opened [Default: false]
     - `stats [Object]?`: The currently selected statistics filter [Default: []]
 
@@ -11,7 +10,6 @@
  -->
 
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
   import { getStatsItems } from "../utils.js";
   import {
     Button,
@@ -22,75 +20,68 @@
   } from "@sveltestrap/sveltestrap";
   import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
 
-  const initialized = getContext("initialized"),
-    dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let { 
+    isOpen = $bindable(),
+    presetStats,
+    setFilter
+   } = $props();
 
-  export let isModified = false;
-  export let isOpen = false;
-  export let stats = [];
-
-  let statistics = [];
-
-  function loadRanges(isInitialized) {
-    if (!isInitialized) return;
-    statistics = getStatsItems(stats);
-  }
+  /* Derived Init */
+  const availableStats = $derived(getStatsItems(presetStats));
 
+  /* Functions */
   function resetRanges() {
-    for (let st of statistics) {
-      st.enabled = false
-      st.from = 0
-      st.to = st.peak
-    } 
+    for (let as of availableStats) {
+      as.enabled = false
+      as.from = 0
+      as.to = as.peak
+    };
   }
-
-  $: isModified = !statistics.every((a) => {
-    let b = stats.find((s) => s.field == a.field);
-    if (b == null) return !a.enabled;
-
-    return a.from == b.from && a.to == b.to;
-  });
-
-  $: loadRanges($initialized);
-
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
-  <ModalHeader>Filter based on statistics</ModalHeader>
+  <ModalHeader>
+    <span>Filter based on statistics</span>
+  </ModalHeader>
   <ModalBody>
-    {#each statistics as stat}
-      <h4>{stat.text}</h4>
-      <DoubleRangeSlider
-        on:change={({ detail }) => (
-          (stat.from = detail[0]), (stat.to = detail[1]), (stat.enabled = true)
-        )}
-        min={0}
-        max={stat.peak}
-        firstSlider={stat.from}
-        secondSlider={stat.to}
-        inputFieldFrom={stat.from}
-        inputFieldTo={stat.to}
-      />
+    {#each availableStats as aStat}
+      <div class="mb-3">
+        <div class="mb-0"><b>{aStat.text}</b></div>
+        <DoubleRangeSlider
+          changeRange={(detail) => {
+            aStat.from = detail[0];
+            aStat.to = detail[1];
+            if (aStat.from == 0 && aStat.to == aStat.peak) {
+              aStat.enabled = false;
+            } else {
+              aStat.enabled = true;
+            }
+          }}
+          sliderMin={0.0}
+          sliderMax={aStat.peak}
+          fromPreset={aStat.from}
+          toPreset={aStat.to}
+        />
+      </div>
     {/each}
   </ModalBody>
   <ModalFooter>
     <Button
       color="primary"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        stats = statistics.filter((stat) => stat.enabled);
-        dispatch("set-filter", { stats });
+        setFilter({ stats: [...availableStats.filter((as) => as.enabled)] });
       }}>Close & Apply</Button
     >
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
         resetRanges();
-        stats = [];
-        dispatch("set-filter", { stats });
+        setFilter({stats: []});
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/filters/Tags.svelte b/web/frontend/src/generic/filters/Tags.svelte
index e42d1857..0cbed278 100644
--- a/web/frontend/src/generic/filters/Tags.svelte
+++ b/web/frontend/src/generic/filters/Tags.svelte
@@ -11,7 +11,7 @@
  -->
 
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext } from "svelte";
   import {
     Button,
     ListGroup,
@@ -26,20 +26,20 @@
   import { fuzzySearchTags } from "../utils.js";
   import Tag from "../helper/Tag.svelte";
 
-  const allTags = getContext("tags"),
-    initialized = getContext("initialized"),
-    dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    presetTags = [],
+    setFilter
+  } = $props();
 
-  export let isModified = false;
-  export let isOpen = false;
-  export let tags = [];
+  /* Derived */
+  const allTags = $derived(getContext("tags"))
+  const initialized = $derived(getContext("initialized"))
 
-  let pendingTags = [...tags];
-  $: isModified =
-    tags.length != pendingTags.length ||
-    !tags.every((tagId) => pendingTags.includes(tagId));
-
-  let searchTerm = "";
+  /* State Init */
+  let pendingTags = $state(presetTags);
+  let searchTerm = $state("");
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -55,7 +55,7 @@
               <Button
                 outline
                 color="danger"
-                on:click={() =>
+                onclick={() =>
                   (pendingTags = pendingTags.filter((id) => id != tag.id))}
               >
                 <Icon name="dash-circle" />
@@ -64,7 +64,7 @@
               <Button
                 outline
                 color="success"
-                on:click={() => (pendingTags = [...pendingTags, tag.id])}
+                onclick={() => (pendingTags = [...pendingTags, tag.id])}
               >
                 <Icon name="plus-circle" />
               </Button>
@@ -81,21 +81,25 @@
   <ModalFooter>
     <Button
       color="primary"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        tags = [...pendingTags];
-        dispatch("set-filter", { tags });
+        setFilter({ tags: [...pendingTags] });
       }}>Close & Apply</Button
     >
+    <Button
+      color="warning"
+      onclick={() => {
+        pendingTags = [];
+      }}>Clear Selection</Button
+    >
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
-        tags = [];
         pendingTags = [];
-        dispatch("set-filter", { tags });
+        setFilter({ tags: [...pendingTags] });
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/helper/ConcurrentJobs.svelte b/web/frontend/src/generic/helper/ConcurrentJobs.svelte
index 85bac83e..d42ace13 100644
--- a/web/frontend/src/generic/helper/ConcurrentJobs.svelte
+++ b/web/frontend/src/generic/helper/ConcurrentJobs.svelte
@@ -17,11 +17,14 @@
     Icon
   } from "@sveltestrap/sveltestrap";
 
-  export let cJobs;
-  export let showLinks = false;
-  export let renderCard = false;
-  export let width = "auto";
-  export let height = "400px";
+  /* Svelte 5 Props */
+  let {
+    cJobs,
+    showLinks = false,
+    renderCard = false,
+    width = "auto",
+    height = "400px",
+  } = $props();
 </script>
 
 {#if renderCard}
diff --git a/web/frontend/src/generic/helper/JobFootprint.svelte b/web/frontend/src/generic/helper/JobFootprint.svelte
index 80e905bc..8d897310 100644
--- a/web/frontend/src/generic/helper/JobFootprint.svelte
+++ b/web/frontend/src/generic/helper/JobFootprint.svelte
@@ -23,79 +23,90 @@
   } from "@sveltestrap/sveltestrap";
   import { findJobFootprintThresholds } from "../utils.js";
 
-  export let job;
-  export let displayTitle = true;
-  export let width = "auto";
-  export let height = "310px";
+  /* Svelte 5 Props */
+  let {
+    job,
+    displayTitle = true,
+    width = "auto",
+    height = "310px",
+  } = $props();
 
-  const footprintData = job?.footprint?.map((jf) => {
-    const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
-    if (fmc) {
-      // Unit
-      const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
+  /* Derived */
+  const footprintData = $derived(buildFootprint(job?.footprint)); 
+  
+  /* Functions */
+  function buildFootprint(input) {
+    let result = input?.map((jf) => {
+      const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
+      if (fmc) {
+        // Unit
+        const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
 
-      // Threshold / -Differences
-      const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
+        // Threshold / -Differences
+        const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
 
-      // Define basic data -> Value: Use as Provided
-      const fmBase = {
-        name: jf.name + ' (' + jf.stat + ')',
-        avg: jf.value,
-        unit: unit,
-        max: fmt.peak,
-        dir: fmc.lowerIsBetter
-      };
-
-      if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
-        return {
-          ...fmBase,
-          color: "danger",
-          message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-          impact: 3
-        };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
-        return {
-          ...fmBase,
-          color: "warning",
-          message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-          impact: 2,
-        };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
-        return {
-          ...fmBase,
-          color: "success",
-          message: "Footprint value within expected thresholds.",
-          impact: 1,
+        // Define basic data -> Value: Use as Provided
+        const fmBase = {
+          name: jf.name + ' (' + jf.stat + ')',
+          avg: jf.value,
+          unit: unit,
+          max: fmt.peak,
+          dir: fmc.lowerIsBetter
         };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
-        return {
-          ...fmBase,
-          color: "info",
-          message:
-            "Footprint value above expected normal threshold: Check for artifacts recommended.",
-          impact: 0,
-        };
-      } else {
+
+        if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
+          return {
+            ...fmBase,
+            color: "danger",
+            message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+            impact: 3
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
+          return {
+            ...fmBase,
+            color: "warning",
+            message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+            impact: 2,
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
+          return {
+            ...fmBase,
+            color: "success",
+            message: "Footprint value within expected thresholds.",
+            impact: 1,
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
+          return {
+            ...fmBase,
+            color: "info",
+            message:
+              "Footprint value above expected normal threshold: Check for artifacts recommended.",
+            impact: 0,
+          };
+        } else {
+          return {
+            ...fmBase,
+            color: "secondary",
+            message:
+              "Footprint value above expected peak threshold: Check for artifacts!",
+            impact: -1,
+          };
+        }
+      } else { // No matching metric config: display as single value
         return {
-          ...fmBase,
-          color: "secondary",
+          name: jf.name + ' (' + jf.stat + ')',
+          avg: jf.value,
           message:
-            "Footprint value above expected peak threshold: Check for artifacts!",
-          impact: -1,
+            `No config for metric ${jf.name} found.`,
+          impact: 4,
         };
       }
-    } else { // No matching metric config: display as single value
-      return {
-        name: jf.name + ' (' + jf.stat + ')',
-        avg: jf.value,
-        message:
-          `No config for metric ${jf.name} found.`,
-        impact: 4,
-      };
-    }
-  }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
-    return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
-  });;
+    }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
+      return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+    });;
+
+    return result;
+  };
 
   function evalFootprint(value, thresholds, lowerIsBetter, level) {
     // Handle Metrics in which less value is better
@@ -176,7 +187,7 @@
           >{fpd.message}</Tooltip
           >
         </div>
-        <Row cols={12} class="{(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
+        <Row cols={12} class={(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
           {#if fpd.dir}
             <Col xs="1">
               <Icon name="caret-left-fill" />
diff --git a/web/frontend/src/generic/helper/Refresher.svelte b/web/frontend/src/generic/helper/Refresher.svelte
index f5c64060..5378d26f 100644
--- a/web/frontend/src/generic/helper/Refresher.svelte
+++ b/web/frontend/src/generic/helper/Refresher.svelte
@@ -8,35 +8,40 @@
     - `refresh`: When fired, the upstream component refreshes its contents
  -->
 <script>
-  import { createEventDispatcher } from "svelte";
   import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let {
+    initially = null,
+    presetClass = "",
+    onRefresh
+  } = $props();
 
-  let refreshInterval = null;
+  /* State Init */
+  let refreshInterval = $state(initially ? initially * 1000 : null);
+
+  /* Var Init */
   let refreshIntervalId = null;
+
+  /* Functions */
   function refreshIntervalChanged() {
     if (refreshIntervalId != null) clearInterval(refreshIntervalId);
-
     if (refreshInterval == null) return;
-
-    refreshIntervalId = setInterval(() => dispatch("refresh"), refreshInterval);
+    refreshIntervalId = setInterval(() => onRefresh(), refreshInterval);
   }
 
-  export let initially = null;
-
-  if (initially != null) {
-    refreshInterval = initially * 1000;
+  /* Svelte 5 onMount */
+  $effect(() => {
     refreshIntervalChanged();
-  }
+  });
 </script>
 
-<InputGroup>
+<InputGroup class={presetClass}>
   <Input
     type="select"
     title="Periodic refresh interval"
     bind:value={refreshInterval}
-    on:change={refreshIntervalChanged}
+    onchange={refreshIntervalChanged}
   >
     <option value={null}>No Interval</option>
     <option value={30 * 1000}>30 Seconds</option>
@@ -46,7 +51,7 @@
   </Input>
   <Button
     outline
-    on:click={() => dispatch("refresh")}
+    onclick={() => onRefresh()}
     disabled={refreshInterval != null}
     >
     <Icon name="arrow-clockwise" /> Refresh
diff --git a/web/frontend/src/generic/helper/Tag.svelte b/web/frontend/src/generic/helper/Tag.svelte
index 7efaf63a..217de7fb 100644
--- a/web/frontend/src/generic/helper/Tag.svelte
+++ b/web/frontend/src/generic/helper/Tag.svelte
@@ -9,21 +9,30 @@
 
 <script>
     import { getContext } from 'svelte'
-    const allTags = getContext('tags'),
-          initialized = getContext('initialized')
-
-    export let id = null
-    export let tag = null
-    export let clickable = true
-
-    if (tag != null && id == null)
-        id = tag.id
-
-    $: {
+    
+    /* Svelte 5 Props */
+    let {
+        id = null,
+        tag = null,
+        clickable = true
+    } = $props();
+
+    /* Derived */
+    const allTags = $derived(getContext('tags'));
+    const initialized = $derived(getContext('initialized'));
+
+    /* Effects */
+    $effect(() => {
+        if (tag != null && id == null)
+            id = tag.id
+    });
+
+    $effect(() => {
         if ($initialized && tag == null)
             tag = allTags.find(tag => tag.id == id)
-    }
+    });
 
+    /* Function*/
     function getScopeColor(scope) {
         switch (scope) {
         case "admin":
diff --git a/web/frontend/src/generic/helper/TagManagement.svelte b/web/frontend/src/generic/helper/TagManagement.svelte
index eb2a8ee3..037b54dc 100644
--- a/web/frontend/src/generic/helper/TagManagement.svelte
+++ b/web/frontend/src/generic/helper/TagManagement.svelte
@@ -33,26 +33,42 @@
   import { fuzzySearchTags } from "../utils.js";
   import Tag from "./Tag.svelte";
 
-  export let job;
-  export let jobTags = job.tags;
-  export let username;
-  export let authlevel;
-  export let roles;
-  export let renderModal = true;
+  /* Svelte 5 Props */
+  let {
+    jobTags = $bindable(),
+    job,
+    username,
+    authlevel,
+    roles,
+    renderModal = true,
+  } = $props();
 
-  let allTags = getContext("tags"),
-    initialized = getContext("initialized");
-  let newTagType = "",
-    newTagName = "",
-    newTagScope = username;
-  let filterTerm = "";
-  let pendingChange = false;
-  let isOpen = false;
+  /* Const Init */
   const isAdmin = (roles && authlevel == roles.admin);
   const isSupport = (roles && authlevel == roles.support);
-
   const client = getContextClient();
 
+  /* State Init */
+  let initialized = getContext("initialized")
+  let allTags = getContext("tags")
+  let newTagType = $state("");
+  let newTagName = $state("");
+  let newTagScope = $state(username);
+  let filterTerm = $state("");
+  let pendingChange = $state(false);
+  let isOpen = $state(false);
+
+  /* Derived Init */
+  const allTagsFiltered = $derived(($initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
+  const usedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport));
+  const unusedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport));
+
+  /* Effects */
+  $effect(() => {
+    updateNewTag(filterTerm)
+  });
+
+  /* Const Mutations */
   const createTagMutation = ({ type, name, scope }) => {
     return mutationStore({
       client: client,
@@ -104,19 +120,16 @@
     });
   };
 
-  $: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags));
-  $: usedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport);
-  $: unusedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport);
-
-  $: {
+  /* Functions */
+  function updateNewTag(term) {
     newTagType = "";
     newTagName = "";
-    let parts = filterTerm.split(":").map((s) => s.trim());
+    let parts = term.split(":").map((s) => s.trim());
     if (parts.length == 2 && parts.every((s) => s.length > 0)) {
       newTagType = parts[0];
       newTagName = parts[1];
-    }
-  }
+    };
+  };
 
   function matchJobTags(tags, availableTags, type, isAdmin, isSupport) {
     const jobTagIds = tags.map((t) => t.id)
@@ -183,7 +196,7 @@
 </script>
 
 {#if renderModal}
-  <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
+  <Modal {isOpen} toggle={() => {isOpen = !isOpen; filterTerm = "";}}>
     <ModalHeader>
       Manage Tags <Icon name="tags"/>
     </ModalHeader>
@@ -232,7 +245,7 @@
                       <Button
                         size="sm"
                         color="danger"
-                        on:click={() => removeTagFromJob(utag)}
+                        onclick={() => removeTagFromJob(utag)}
                       >
                         <Icon name="x" />
                       </Button>
@@ -282,7 +295,7 @@
                       <Button
                         size="sm"
                         color="success"
-                        on:click={() => addTagToJob(uutag)}
+                        onclick={() => addTagToJob(uutag)}
                       >
                         <Icon name="plus" />
                       </Button>
@@ -314,7 +327,7 @@
               outline
               style="width:100%;"
               color="success"
-              on:click={(e) => (
+              onclick={(e) => (
                 e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
               )}
             >
@@ -345,11 +358,11 @@
       {/if}
     </ModalBody>
     <ModalFooter>
-      <Button color="primary" on:click={() => (isOpen = false)}>Close</Button>
+      <Button color="primary" onclick={() => {isOpen = false; filterTerm = "";}}>Close</Button>
     </ModalFooter>
   </Modal>
 
-  <Button outline on:click={() => (isOpen = true)} size="sm" color="primary">
+  <Button outline onclick={() => (isOpen = true)} size="sm" color="primary">
     Manage {jobTags?.length ? jobTags.length : ''} Tags
   </Button>
 
@@ -387,7 +400,7 @@
                   <Button
                     size="sm"
                     color="danger"
-                    on:click={() => removeTagFromJob(utag)}
+                    onclick={() => removeTagFromJob(utag)}
                   >
                     <Icon name="x" />
                   </Button>
@@ -396,7 +409,7 @@
                 <Button
                   size="sm"
                   color="danger"
-                  on:click={() => removeTagFromJob(utag)}
+                  onclick={() => removeTagFromJob(utag)}
                 >
                   <Icon name="x" />
                 </Button>
@@ -435,7 +448,7 @@
                   <Button
                     size="sm"
                     color="success"
-                    on:click={() => addTagToJob(uutag)}
+                    onclick={() => addTagToJob(uutag)}
                   >
                     <Icon name="plus" />
                   </Button>
@@ -444,7 +457,7 @@
                 <Button
                   size="sm"
                   color="success"
-                  on:click={() => addTagToJob(uutag)}
+                  onclick={() => addTagToJob(uutag)}
                 >
                   <Icon name="plus" />
                 </Button>
@@ -475,7 +488,7 @@
           outline
           style="width:100%;"
           color="success"
-          on:click={(e) => (
+          onclick={(e) => (
             e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
           )}
         >
diff --git a/web/frontend/src/generic/helper/TextFilter.svelte b/web/frontend/src/generic/helper/TextFilter.svelte
index c47c979d..7cb9f2da 100644
--- a/web/frontend/src/generic/helper/TextFilter.svelte
+++ b/web/frontend/src/generic/helper/TextFilter.svelte
@@ -12,21 +12,31 @@
 
 <script>
   import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { scramble, scrambleNames } from "../utils.js";
 
-  const dispatch = createEventDispatcher();
+  // Note: If page with this component has project preset, keep preset until reset
+  /* Svelte 5 Props */
+  let {
+    presetProject = "",
+    authlevel = null,
+    roles = null,
+    setFilter
+  } = $props();
 
-  export let presetProject = ""; // If page with this component has project preset, keep preset until reset
-  export let authlevel = null;
-  export let roles = null;
-  let mode = presetProject ? "jobName" : "project";
-  let term = "";
+  /* Const Init*/
+  const throttle = 500;
+
+  /* Var Init */
   let user = "";
   let project = presetProject ? presetProject : "";
   let jobName = "";
-  const throttle = 500;
+  let timeoutId = null;
+
+  /* State Init */
+  let mode = $state(presetProject ? "jobName" : "project");
+  let term = $state("");
 
+  /* Functions */
   function modeChanged() {
     if (mode == "user") {
       project = presetProject ? presetProject : "";
@@ -41,7 +51,6 @@
     termChanged(0);
   }
 
-  let timeoutId = null;
   // Compatibility: Handle "user role" and "no role" identically
   function termChanged(sleep = throttle) {
     if (roles && authlevel >= roles.manager) {
@@ -52,7 +61,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           user,
           project,
           jobName
@@ -65,7 +74,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           project,
           jobName
         });
@@ -78,6 +87,8 @@
     term = ""
     presetProject = ""
     project = ""
+    jobName = ""
+    user = ""
     termChanged(0);
   }
 </script>
@@ -86,10 +97,10 @@
   <Input
     type="select"
     style="max-width: 120px;"
-    class="form-select"
+    class="form-select w-auto"
     title="Search Mode"
     bind:value={mode}
-    on:change={modeChanged}
+    onchange={modeChanged}
   >
     {#if !presetProject}
       <option value={"project"}>Project</option>
@@ -102,12 +113,12 @@
   <Input
     type="text"
     bind:value={term}
-    on:change={() => termChanged()}
-    on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
-    placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
+    onchange={() => termChanged()}
+    onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
+    placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}
-  <Button title="Reset Project" on:click={resetProject}
+  <Button title="Reset Project" onclick={() => resetProject()}
     ><Icon name="arrow-counterclockwise" /></Button
   >
   {/if}
diff --git a/web/frontend/src/generic/joblist/JobInfo.svelte b/web/frontend/src/generic/joblist/JobInfo.svelte
index f5cb066a..5886c614 100644
--- a/web/frontend/src/generic/joblist/JobInfo.svelte
+++ b/web/frontend/src/generic/joblist/JobInfo.svelte
@@ -12,15 +12,22 @@
   import Tag from "../helper/Tag.svelte";
   import TagManagement from "../helper/TagManagement.svelte";
 
-  export let job;
-  export let jobTags = job.tags;
-  export let showTagedit = false;
-  export let username = null;
-  export let authlevel= null;
-  export let roles = null;
-  export let isSelected = null;
-  export let showSelect = false;
+  /* Svelte 5 Props */
+  let {
+    job,
+    jobTags = job.tags,
+    showTagedit = false,
+    username = null,
+    authlevel= null,
+    roles = null,
+    isSelected = null,
+    showSelect = false,
+  } = $props();
 
+  /* State Init */
+  let displayCheck = $state(false);
+
+  /* Functions */
   function formatDuration(duration) {
     const hours = Math.floor(duration / 3600);
     duration -= hours * 3600;
@@ -41,9 +48,8 @@
     }
   }
 
-  let displayCheck = false;
   function clipJobId(jid) {
-    displayCheck = true;
+    
     // Navigator clipboard api needs a secure context (https)
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard
@@ -65,14 +71,11 @@
           textArea.remove();
       }
     }
-    setTimeout(function () {
-      displayCheck = false;
-    }, 1000);
   }
 </script>
 
 <div>
-  <p class="mb-2">
+  <p class="mb-2 text-truncate">
     <span class="d-flex justify-content-between">
       <span class="align-self-center fw-bold mr-2">
         <a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
@@ -81,7 +84,7 @@
       <span>
         {#if showSelect}
           <Button id={`${job.cluster}-${job.jobId}-select`} outline={!isSelected} color={isSelected? `success`: `secondary`} size="sm" class="mr-2"
-            on:click={() => {
+            onclick={() => {
               isSelected = !isSelected
             }}>
             {#if isSelected}
@@ -98,7 +101,13 @@
               { 'Add or Remove Job to/from Comparison Selection' }
           </Tooltip>
         {/if}
-        <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
+        <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" onclick={() => {
+          displayCheck = true;
+          clipJobId(job.jobId);
+          setTimeout(function () {
+            displayCheck = false;
+          }, 1000);
+        }}>
           {#if displayCheck}
             <Icon name="clipboard2-check-fill"/>
           {:else}
@@ -113,16 +122,15 @@
       </span>
     </span>
     {#if job.metaData?.jobName}
-      {#if job.metaData?.jobName.length <= 25}
-        <div>{job.metaData.jobName}</div>
+      {#if job.metaData?.jobName.length <= 20}
+        <span>{job.metaData.jobName}</span>
       {:else}
-        <div
-          class="truncate"
+        <span
           style="cursor:help;"
           title={job.metaData.jobName}
         >
           {job.metaData.jobName}
-        </div>
+  </span>
       {/if}
     {/if}
     {#if job.arrayJobId}
@@ -207,11 +215,3 @@
     </p>
   {/if}
 </div>
-
-<style>
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
diff --git a/web/frontend/src/generic/joblist/Pagination.svelte b/web/frontend/src/generic/joblist/Pagination.svelte
index 77f6bc9f..1a04fd25 100644
--- a/web/frontend/src/generic/joblist/Pagination.svelte
+++ b/web/frontend/src/generic/joblist/Pagination.svelte
@@ -11,11 +11,51 @@
       - Dispatched once immediately and then each time page or itemsPerPage changes
  -->
 
+<script>
+    /* Svelte 5 Props */
+    let {
+        page = $bindable(1),
+        itemsPerPage = 10,
+        totalItems = 0,
+        itemText = "items",
+        pageSizes = [10,25,50],
+        updatePaging
+    } = $props();
+
+    /* Derived */
+    const backButtonDisabled = $derived((page === 1));
+    const nextButtonDisabled = $derived((page >= (totalItems / itemsPerPage)));
+
+    /* Functions */
+    function pageUp ( event ) {
+        event.preventDefault();
+        page += 1;
+        updatePaging({ itemsPerPage, page });
+    }
+    
+    function pageBack ( event ) {
+        event.preventDefault();
+        page -= 1;
+        updatePaging({ itemsPerPage, page });
+    }
+
+    function pageReset ( event ) {
+        event.preventDefault();
+        page = 1;
+        updatePaging({ itemsPerPage, page });
+    }
+
+    function updateItems ( event ) {
+        event.preventDefault();
+        updatePaging({ itemsPerPage, page });
+    }
+</script>
+
 <div class="cc-pagination" >
     <div class="cc-pagination-left">
         <label for="cc-pagination-select">{ itemText } per page:</label>
         <div class="cc-pagination-select-wrapper">
-            <select on:blur|preventDefault={reset} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
+            <select onblur={(e) => pageReset(e)} onchange={(e) => updateItems(e)} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
                 {#each pageSizes as size}
                     <option value="{size}">{size}</option>
                 {/each}
@@ -28,49 +68,18 @@
     </div>
     <div class="cc-pagination-right">
         {#if !backButtonDisabled}
-        <button class="reset nav" type="button"
-            on:click|preventDefault="{reset}"></button>
-        <button class="left nav" type="button"
-            on:click|preventDefault="{() => { page -= 1; }}"></button>
+        <button aria-label="page-reset"  class="reset nav" type="button"
+            onclick={(e) => pageReset(e)}></button>
+        <button aria-label="page-back" class="left nav" type="button"
+            onclick={(e) => pageBack(e)}></button>
         {/if}
         {#if !nextButtonDisabled}
-        <button class="right nav" type="button"
-            on:click|preventDefault="{() => { page += 1; }}"></button>
+        <button aria-label="page-up" class="right nav" type="button"
+            onclick={(e) => pageUp(e)}></button>
         {/if}
     </div>
 </div>
 
-<script>
-    import { createEventDispatcher } from "svelte";
-    export let page = 1;
-    export let itemsPerPage = 10;
-    export let totalItems = 0;
-    export let itemText = "items";
-    export let pageSizes = [10,25,50];
-
-    let backButtonDisabled, nextButtonDisabled;
-
-    const dispatch = createEventDispatcher();
-
-    $: {
-        if (typeof page !== "number") {
-            page = Number(page);
-        }
-
-        if (typeof itemsPerPage !== "number") {
-            itemsPerPage = Number(itemsPerPage);
-        }
-
-        dispatch("update-paging", { itemsPerPage, page });
-    }
-    $: backButtonDisabled = (page === 1);
-    $: nextButtonDisabled = (page >= (totalItems / itemsPerPage));
-
-    function reset ( event ) {
-        page = 1;
-    }
-</script>
-
 <style>
     *, *::before, *::after {
         box-sizing: border-box;
diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte
index 67793082..ca3bf9c8 100644
--- a/web/frontend/src/generic/plots/Comparogram.svelte
+++ b/web/frontend/src/generic/plots/Comparogram.svelte
@@ -306,7 +306,7 @@
 {#if data && data[0].length > 0}
   <div bind:this={plotWrapper} bind:clientWidth={width}
         style="background-color: rgba(255, 255, 255, 1.0);" class="rounded"
-  />
+  ></div>
 {:else}
   <Card body color="warning" class="mx-4 my-2"
     >Cannot render plot: No series data returned for <code>{metric?metric:'job resources'}</code></Card
diff --git a/web/frontend/src/generic/plots/Histogram.svelte b/web/frontend/src/generic/plots/Histogram.svelte
index 44081120..c8f17f2e 100644
--- a/web/frontend/src/generic/plots/Histogram.svelte
+++ b/web/frontend/src/generic/plots/Histogram.svelte
@@ -244,7 +244,7 @@
 <!-- Define Wrapper and NoData Card within $width -->
 <div bind:clientWidth={width}>
   {#if data.length > 0}
-    <div bind:this={plotWrapper} />
+    <div bind:this={plotWrapper}></div>
   {:else}
     <Card class="mx-4" body color="warning"
       >Cannot render histogram: No data!</Card
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index a1992746..56e819db 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -591,7 +591,7 @@
 {#if series[0]?.data && series[0].data.length > 0}
   <div bind:this={plotWrapper} bind:clientWidth={width}
         style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
-  />
+  ></div>
 {:else}
   <Card body color="warning" class="mx-4"
     >Cannot render plot: No series data returned for <code>{metric}</code></Card
diff --git a/web/frontend/src/generic/plots/Pie.svelte b/web/frontend/src/generic/plots/Pie.svelte
index 89c333c1..6cf68c7d 100644
--- a/web/frontend/src/generic/plots/Pie.svelte
+++ b/web/frontend/src/generic/plots/Pie.svelte
@@ -1,5 +1,5 @@
 <!--
-    @component Pie Plot based on uPlot Pie
+    @component Pie Plot based on chart.js Pie
 
     Properties:
     - `size Number`: X and Y size of the plot, for square shape
@@ -31,33 +31,17 @@
     ]
 </script>
 <script>
-    import { Pie } from 'svelte-chartjs';
-    import {
-        Chart as ChartJS,
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        ArcElement,
-        CategoryScale
-    } from 'chart.js';
-
-    ChartJS.register(
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        ArcElement,
-        CategoryScale
-    );
+    import Chart from 'chart.js/auto'
+    import { onMount } from 'svelte';
 
+    export let canvasId = "pie-default"
     export let size
     export let sliceLabel
     export let quantities
     export let entities
     export let displayLegend = false
 
-    $: data = {
+    const data = {
         labels: entities,
         datasets: [
             {
@@ -79,10 +63,22 @@
         }
     }
 
+    onMount(() => {
+        new Chart(
+            document.getElementById(canvasId),
+            {
+                type: 'pie',
+                data: data,
+                options: options
+            }
+        );
+	});
+
 </script>
 
+<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container" style="--container-width: {size}; --container-height: {size}">
-    <Pie {data} {options}/>
+    <canvas id={canvasId}></canvas>
 </div>
 
 <style>
diff --git a/web/frontend/src/generic/plots/Polar.svelte b/web/frontend/src/generic/plots/Polar.svelte
index 9ae693ad..2040a1dd 100644
--- a/web/frontend/src/generic/plots/Polar.svelte
+++ b/web/frontend/src/generic/plots/Polar.svelte
@@ -1,5 +1,5 @@
 <!--
-    @component Polar Plot based on chartJS Radar
+    @component Polar Plot based on chart.js Radar
 
     Properties:
     - `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
@@ -8,7 +8,8 @@
  -->
 
 <script>
-    import { Radar } from 'svelte-chartjs';
+    import { getContext, onMount } from 'svelte'
+    import Chart from 'chart.js/auto'
     import {
         Chart as ChartJS,
         Title,
@@ -30,8 +31,10 @@
         LineElement
     );
 
+
     export let polarMetrics = [];
     export let polarData = [];
+    export let canvasId = "polar-default";
     export let height = 350;
 
     const labels = polarMetrics
@@ -113,10 +116,23 @@
         }
     }
 
+    onMount(() => {
+        new Chart(
+            document.getElementById(canvasId),
+            {
+                type: 'radar',
+                data: data,
+                options: options,
+                height: height
+            }
+        );
+    });
+
 </script>
 
+<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container">
-    <Radar {data} {options} {height}/>
+    <canvas id={canvasId}></canvas>
 </div>
 
 <style>
diff --git a/web/frontend/src/generic/plots/Roofline.svelte b/web/frontend/src/generic/plots/Roofline.svelte
index 2941ecbf..f979062c 100644
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -363,7 +363,7 @@
 </script>
 
 {#if data != null}
-  <div bind:this={plotWrapper} class="p-2"/>
+  <div bind:this={plotWrapper} class="p-2"></div>
 {:else}
   <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card
   >
diff --git a/web/frontend/src/generic/select/DoubleRangeSlider.svelte b/web/frontend/src/generic/select/DoubleRangeSlider.svelte
index 57bcace0..00226735 100644
--- a/web/frontend/src/generic/select/DoubleRangeSlider.svelte
+++ b/web/frontend/src/generic/select/DoubleRangeSlider.svelte
@@ -2,6 +2,7 @@
 Copyright (c) 2021 Michael Keller
 Originally created by Michael Keller (https://github.com/mhkeller/svelte-double-range-slider)
 Changes: remove dependency, text inputs, configurable value ranges, on:change event
+Changes #2: Rewritten for Svelte 5, removed bodyHandler
 -->
 <!-- 
 	@component Selector component to display range selections via min and max double-sliders
@@ -9,82 +10,80 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 	Properties:
 	- min:          Number
 	- max:          Number
-	- firstSlider:  Number (Starting position of slider #1)
-	- secondSlider: Number (Starting position of slider #2)
+	- sliderHandleFrom:  Number (Starting position of slider #1)
+	- sliderHandleTo: Number (Starting position of slider #2)
 	
 	Events:
 	- `change`: [Number, Number] (Positions of the two sliders)
  -->
-<script>
-	import { createEventDispatcher } from "svelte";
-
-	export let min;
-	export let max;
-	export let firstSlider;
-	export let secondSlider;
-	export let inputFieldFrom = 0;
-	export let inputFieldTo = 0;
-
-	const dispatch = createEventDispatcher();
 
-	let values;
-	let start, end; /* Positions of sliders from 0 to 1 */
-	$: values = [firstSlider, secondSlider]; /* Avoid feedback loop */
-	$: start = Math.max(((firstSlider  == null ? min : firstSlider)  - min) / (max - min), 0);
-	$: end =   Math.min(((secondSlider == null ? min : secondSlider) - min) / (max - min), 1);
-
-	let leftHandle;
-	let body;
-	let slider;
+<script>
+	let {
+		sliderMin,
+		sliderMax,
+		fromPreset = 1,
+		toPreset = 100,
+		changeRange
+	} = $props();
+
+	let pendingValues = $state([fromPreset, toPreset]);
+	let sliderFrom = $state(Math.max(((fromPreset  == null ? sliderMin : fromPreset)  - sliderMin) / (sliderMax - sliderMin), 0.));
+	let sliderTo = $state(Math.min(((toPreset == null ? sliderMin : toPreset) - sliderMin) / (sliderMax - sliderMin), 1.));
+	let inputFieldFrom = $state(fromPreset.toString());
+	let inputFieldTo = $state(toPreset.toString());
+	let leftHandle = $state();
+	let sliderMain = $state();
 
 	let timeoutId = null;
 	function queueChangeEvent() {
 		if (timeoutId !== null) {
-			clearTimeout(timeoutId);
+			clearTimeout(timeoutId)
 		}
-
 		timeoutId = setTimeout(() => {
-			timeoutId = null;
-
-			// Show selection but avoid feedback loop
-			if (values[0] != null && inputFieldFrom != values[0].toString())
-				inputFieldFrom = values[0].toString();
-			if (values[1] != null && inputFieldTo != values[1].toString())
-				inputFieldTo = values[1].toString();
-
-			dispatch('change', values);
-		}, 250);
-	}
+			timeoutId = null
+			changeRange(pendingValues);
+		}, 100);
+	}
+
+	function updateStates(newValue, newPosition, target) {
+		if (target === 'from') {
+			pendingValues[0] = isNaN(newValue) ? null : newValue;
+			inputFieldFrom = isNaN(newValue) ? null : newValue.toString();
+			sliderFrom = newPosition;
+		} else if (target === 'to') {
+			pendingValues[1] = isNaN(newValue) ? null : newValue;
+			inputFieldTo = isNaN(newValue) ? null : newValue.toString();
+			sliderTo = newPosition;
+		}
 
-	function update() {
-		values = [
-			Math.floor(min + start  * (max - min)),
-			Math.floor(min + end * (max - min))
-		];
 		queueChangeEvent();
 	}
 
-	function inputChanged(idx, event) {
-		let val = Number.parseInt(event.target.value);
-		if (Number.isNaN(val) || val < min) {
-			event.target.classList.add('bad');
-			return;
-		}
-
-		values[idx] = val;
-		event.target.classList.remove('bad');
-		if (idx == 0)
-			start = clamp((val - min) / (max - min), 0., 1.);
-		else
-			end = clamp((val - min) / (max - min), 0., 1.);
+	function rangeChanged (evt, target) {
+		evt.preventDefault()
+		evt.stopPropagation()
+		const { left, right } = sliderMain.getBoundingClientRect();
+		const parentWidth = right - left;
+		const newP = Math.min(Math.max((evt.detail.x - left) / parentWidth, 0), 1);
+		const newV = Math.floor(sliderMin + newP * (sliderMax - sliderMin));
+		updateStates(newV, newP, target);
+	}
 
-		queueChangeEvent();
+	function inputChanged(evt, target) {
+		evt.preventDefault()
+		evt.stopPropagation()
+		const newV = Number.parseInt(evt.target.value);
+		const newP = clamp((newV - sliderMin) / (sliderMax - sliderMin), 0., 1.)
+		updateStates(newV, newP, target);
 	}
 
-	function clamp(x, min, max) {
-		return x < min
-			? min
-			: (x < max ? x : max);
+	function clamp(x, testMin, testMax) {
+		return x < testMin
+			? testMin
+			: (x > testMax 
+				? testMax
+				: x
+			);
 	}
 
 	function draggable(node) {
@@ -151,84 +150,38 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 		};
 	}
 
-	function setHandlePosition (which) {
-		return function (evt) {
-			const { left, right } = slider.getBoundingClientRect();
-			const parentWidth = right - left;
-
-			const p = Math.min(Math.max((evt.detail.x - left) / parentWidth, 0), 1);
-
-			if (which === 'start') {
-				start = p;
-				end = Math.max(end, p);
-			} else {
-				start = Math.min(p, start);
-				end = p;
-			}
-
-			update();
-		}
-	}
-
-	function setHandlesFromBody (evt) {
-		const { width } = body.getBoundingClientRect();
-		const { left, right } = slider.getBoundingClientRect();
-
-		const parentWidth = right - left;
-
-		const leftHandleLeft = leftHandle.getBoundingClientRect().left;
-
-		const pxStart = clamp((leftHandleLeft + evt.detail.dx) - left, 0, parentWidth - width);
-		const pxEnd = clamp(pxStart + width, width, parentWidth);
-
-		const pStart = pxStart / parentWidth;
-		const pEnd = pxEnd / parentWidth;
-
-		start = pStart;
-		end = pEnd;
-		update();
-	}
 </script>
 
 <div class="double-range-container">
 	<div class="header">
-		<input class="form-control" type="text" placeholder="from..." bind:value={inputFieldFrom}
-			on:input={(e) => inputChanged(0, e)} />
+		<input class="form-control" type="text" placeholder="from..." value={inputFieldFrom}
+			oninput={(e) => inputChanged(e, 'from')} />
 
-		<span>Full Range: <b> {min} </b> - <b> {max} </b></span>
+		<span>Full Range: <b> {sliderMin} </b> - <b> {sliderMax} </b></span>
 
-		<input class="form-control" type="text" placeholder="to..." bind:value={inputFieldTo}
-			on:input={(e) => inputChanged(1, e)} />
+		<input class="form-control" type="text" placeholder="to..." value={inputFieldTo}
+			oninput={(e) => inputChanged(e, 'to')} />
 	</div>
-	<div class="slider" bind:this={slider}>
+
+	<div id="slider-active" class="slider" bind:this={sliderMain}>
 		<div
-			class="body"
-			bind:this={body}
-			use:draggable
-			on:dragmove|preventDefault|stopPropagation="{setHandlesFromBody}"
-			style="
-				left: {100 * start}%;
-				right: {100 * (1 - end)}%;
-			"
+			class="slider-body"
+			style="left: {100 * sliderFrom}%;right: {100 * (1 - sliderTo)}%;"
 			></div>
 		<div
-			class="handle"
+			class="slider-handle"
 			bind:this={leftHandle}
-			data-which="start"
+			data-which="from"
 			use:draggable
-			on:dragmove|preventDefault|stopPropagation="{setHandlePosition('start')}"
-			style="
-				left: {100 * start}%
-			"
+			ondragmove={(e) => rangeChanged(e, 'from')}
+			style="left: {100 * sliderFrom}%"
 		></div>
 		<div
-			class="handle"
-			data-which="end"
+			class="slider-handle"
+			data-which="to"
 			use:draggable
-			on:dragmove|preventDefault|stopPropagation="{setHandlePosition('end')}"
-			style="
-				left: {100 * end}%
-			"
+			ondragmove={(e) => rangeChanged(e, 'to')}
+			style="left: {100 * sliderTo}%"
 		></div>
 	</div>
 </div>
@@ -238,7 +191,8 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: -5px;
+		align-items: flex-end;
+		margin-bottom: 5px;
 	}
 	.header :nth-child(2) {
 		padding-top: 10px;
@@ -249,17 +203,13 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 		width: 100px;
 	}
 
-	:global(.double-range-container .header input[type="text"].bad) {
-		color: #ff5c33;
-		border-color: #ff5c33;
-	}
-
 	.double-range-container {
 		width: 100%;
 		height: 50px;
 		user-select: none;
 		box-sizing: border-box;
-		white-space: nowrap
+		white-space: nowrap;
+		margin-top: -4px;
 	}
 	.slider {
 		position: relative;
@@ -271,13 +221,13 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 		box-shadow: inset 0 7px 10px -5px #4a4a4a, inset 0 -1px 0px 0px #9c9c9c;
 		border-radius: 6px;
 	}
-	.handle {
+	.slider-handle {
 		position: absolute;
 		top: 50%;
 		width: 0;
 		height: 0;
 	}
-	.handle:after {
+	.slider-handle:after {
 		content: ' ';
 		box-sizing: border-box;
 		position: absolute;
@@ -291,11 +241,11 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 	/* .handle[data-which="end"]:after{
 		transform: translate(-100%, -50%);
 	} */
-	.handle:active:after {
+	.slider-handle:active:after {
 		background-color: #ddd;
 		z-index: 9;
 	}
-	.body {
+	.slider-body {
 		top: 0;
 		position: absolute;
 		background-color: #34a1ff;
diff --git a/web/frontend/src/generic/select/HistogramSelection.svelte b/web/frontend/src/generic/select/HistogramSelection.svelte
index 604fc95c..08fb89a1 100644
--- a/web/frontend/src/generic/select/HistogramSelection.svelte
+++ b/web/frontend/src/generic/select/HistogramSelection.svelte
@@ -92,7 +92,7 @@
     </ListGroup>
   </ModalBody>
   <ModalFooter>
-    <Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
+    <Button color="primary" on:click={() => closeAndApply()}>Close & Apply</Button>
     <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/select/MetricSelection.svelte b/web/frontend/src/generic/select/MetricSelection.svelte
index da0b340f..ffbeac6a 100644
--- a/web/frontend/src/generic/select/MetricSelection.svelte
+++ b/web/frontend/src/generic/select/MetricSelection.svelte
@@ -12,7 +12,7 @@
  -->
 
 <script>
-  import { getContext, createEventDispatcher } from "svelte";
+  import { getContext } from "svelte";
   import {
     Modal,
     ModalBody,
@@ -23,46 +23,71 @@
   } from "@sveltestrap/sveltestrap";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
-  export let metrics;
-  export let isOpen;
-  export let configName;
-  export let allMetrics = null;
-  export let cluster = null;
-  export let subCluster = null;
-  export let showFootprint = false;
-  export let footprintSelect = false;
-
-  const onInit = getContext("on-init")
-  const globalMetrics = getContext("globalMetrics")
-  const dispatch = createEventDispatcher();
-
-  let newMetricsOrder = [];
-  let unorderedMetrics = [...metrics];
-  let pendingShowFootprint = !!showFootprint;
-
-  onInit(() => {
-    if (allMetrics == null) allMetrics = new Set();
-    for (let metric of globalMetrics) allMetrics.add(metric.name);
+  /* Svelte 5 Props */
+  let {
+    isOpen = $bindable(false),
+    showFootprint = $bindable(false),
+    totalMetrics = $bindable(0),
+    presetMetrics = [],
+    cluster = null,
+    subCluster = null,
+    footprintSelect = false,
+    preInitialized = false, // Job View is Pre-Init'd: $initialized "alone" store returns false
+    configName,
+    applyMetrics
+  } = $props();
+
+  /* Const Init */
+  const globalMetrics = getContext("globalMetrics");
+  const initialized = getContext("initialized");
+  const client = getContextClient();
+  const updateConfigurationMutation = ({ name, value }) => {
+    return mutationStore({
+      client: client,
+      query: gql`
+        mutation ($name: String!, $value: String!) {
+          updateConfiguration(name: $name, value: $value)
+        }
+      `,
+      variables: { name, value },
+    });
+  };
+
+  /* State Init */
+  let pendingMetrics = $state(presetMetrics);
+  let pendingShowFootprint = $state(!!showFootprint);
+  let listedMetrics = $state([]);
+  let columnHovering = $state(null);
+
+  /* Derives States */
+  const allMetrics = $derived(loadAvailable(preInitialized || $initialized));
+
+  /* Reactive Effects */
+  $effect(() => {
+    totalMetrics = allMetrics.size;
+  });
+
+  $effect(() => {
+    listedMetrics = [...presetMetrics, ...allMetrics.difference(new Set(presetMetrics))]; // List (preset) active metrics first, then list inactives
   });
 
-  $: {
-    if (allMetrics != null) {
-      if (!cluster) {
-        for (let metric of globalMetrics) allMetrics.add(metric.name);
-      } else {
-        allMetrics.clear();
-        for (let gm of globalMetrics) {
+  /* Functions */
+  function loadAvailable(init) {
+    const availableMetrics = new Set();
+    if (init) {
+      for (let gm of globalMetrics) {
+        if (!cluster) {
+          availableMetrics.add(gm.name)
+        } else {
           if (!subCluster) {
-            if (gm.availability.find((av) => av.cluster === cluster)) allMetrics.add(gm.name);
+            if (gm.availability.find((av) => av.cluster === cluster)) availableMetrics.add(gm.name);
           } else {
-            if (gm.availability.find((av) => av.cluster === cluster && av.subClusters.includes(subCluster))) allMetrics.add(gm.name);
+            if (gm.availability.find((av) => av.cluster === cluster && av.subClusters.includes(subCluster))) availableMetrics.add(gm.name);
           }
         }
       }
-      newMetricsOrder = [...allMetrics].filter((m) => !metrics.includes(m));
-      newMetricsOrder.unshift(...metrics.filter((m) => allMetrics.has(m)));
-      unorderedMetrics = unorderedMetrics.filter((m) => allMetrics.has(m));
     }
+    return availableMetrics
   }
 
   function printAvailability(metric, cluster) {
@@ -74,21 +99,6 @@
     }
   }
 
-  const client = getContextClient();
-  const updateConfigurationMutation = ({ name, value }) => {
-    return mutationStore({
-      client: client,
-      query: gql`
-        mutation ($name: String!, $value: String!) {
-          updateConfiguration(name: $name, value: $value)
-        }
-      `,
-      variables: { name, value },
-    });
-  };
-
-  let columnHovering = null;
-
   function columnsDragStart(event, i) {
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.dropEffect = "move";
@@ -98,18 +108,21 @@
   function columnsDrag(event, target) {
     event.dataTransfer.dropEffect = "move";
     const start = Number.parseInt(event.dataTransfer.getData("text/plain"));
+
+    let pendingMetricsOrder = [...listedMetrics];
     if (start < target) {
-      newMetricsOrder.splice(target + 1, 0, newMetricsOrder[start]);
-      newMetricsOrder.splice(start, 1);
+      pendingMetricsOrder.splice(target + 1, 0, listedMetrics[start]);
+      pendingMetricsOrder.splice(start, 1);
     } else {
-      newMetricsOrder.splice(target, 0, newMetricsOrder[start]);
-      newMetricsOrder.splice(start + 1, 1);
+      pendingMetricsOrder.splice(target, 0, listedMetrics[start]);
+      pendingMetricsOrder.splice(start + 1, 1);
     }
+    listedMetrics = [...pendingMetricsOrder];
     columnHovering = null;
   }
 
   function closeAndApply() {
-    metrics = newMetricsOrder.filter((m) => unorderedMetrics.includes(m));
+    pendingMetrics = listedMetrics.filter((m) => pendingMetrics.includes(m));
     isOpen = false;
 
     let configKey;
@@ -123,7 +136,7 @@
 
     updateConfigurationMutation({
       name: configKey,
-      value: JSON.stringify(metrics),
+      value: JSON.stringify(pendingMetrics),
     }).subscribe((res) => {
       if (res.fetching === false && res.error) {
         throw res.error;
@@ -145,7 +158,7 @@
       });
     };
 
-    dispatch('update-metrics', metrics);
+    applyMetrics(pendingMetrics);
   }
 </script>
 
@@ -159,27 +172,35 @@
         </li>
         <hr />
       {/if}
-      {#each newMetricsOrder as metric, index (metric)}
+      {#each listedMetrics as metric, index (metric)}
         <li
           class="cc-config-column list-group-item"
           draggable={true}
-          ondragover="return false"
-          on:dragstart={(event) => columnsDragStart(event, index)}
-          on:drop|preventDefault={(event) => columnsDrag(event, index)}
-          on:dragenter={() => (columnHovering = index)}
+          ondragover={(event) => {
+            event.preventDefault()
+            return false
+          }}
+          ondragstart={(event) => {
+            columnsDragStart(event, index)
+          }}
+          ondrop={(event) => {
+            event.preventDefault()
+            columnsDrag(event, index)
+          }}
+          ondragenter={() => (columnHovering = index)}
           class:is-active={columnHovering === index}
         >
-          {#if unorderedMetrics.includes(metric)}
+          {#if pendingMetrics.includes(metric)}
             <input
               type="checkbox"
-              bind:group={unorderedMetrics}
+              bind:group={pendingMetrics}
               value={metric}
               checked
             />
           {:else}
             <input
               type="checkbox"
-              bind:group={unorderedMetrics}
+              bind:group={pendingMetrics}
               value={metric}
             />
           {/if}
@@ -192,8 +213,8 @@
     </ListGroup>
   </ModalBody>
   <ModalFooter>
-    <Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
-    <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Cancel</Button>
+    <Button color="primary" onclick={() => closeAndApply()}>Close & Apply</Button>
+    <Button color="secondary" onclick={() => (isOpen = !isOpen)}>Cancel</Button>
   </ModalFooter>
 </Modal>
 
diff --git a/web/frontend/src/header.entrypoint.js b/web/frontend/src/header.entrypoint.js
index 25ff1340..12dd455e 100644
--- a/web/frontend/src/header.entrypoint.js
+++ b/web/frontend/src/header.entrypoint.js
@@ -1,10 +1,17 @@
-import Header from './Header.svelte'
+import { mount } from 'svelte';
+import Header from './Header.svelte';
 
-const headerDomTarget = document.getElementById('svelte-header')
+const headerDomTarget = document.getElementById('svelte-header');
 
 if (headerDomTarget != null) {
-    new Header({
+    mount(Header, {
         target: headerDomTarget,
-        props: { ...header },
-    })
+        props: { // { ...header },
+            username: hUsername, 
+            authlevel: hAuthlevel,
+            clusters: hClusters, 
+            subClusters: hSubClusters,
+            roles: hRoles,
+        },
+    });
 }
diff --git a/web/frontend/src/header/NavbarLinks.svelte b/web/frontend/src/header/NavbarLinks.svelte
index 26e73701..50aaf3a0 100644
--- a/web/frontend/src/header/NavbarLinks.svelte
+++ b/web/frontend/src/header/NavbarLinks.svelte
@@ -18,10 +18,13 @@
     DropdownItem,
   } from "@sveltestrap/sveltestrap";
 
-  export let clusters;
-  export let subClusters;
-  export let links;
-  export let direction = "down";
+  /* Svelte 5 Props */
+  let {
+    clusters,
+    subClusters,
+    links,
+    direction = "down"
+  } = $props();
 </script>
 
 {#each links as item}
diff --git a/web/frontend/src/header/NavbarTools.svelte b/web/frontend/src/header/NavbarTools.svelte
index 1382b281..ac0a261b 100644
--- a/web/frontend/src/header/NavbarTools.svelte
+++ b/web/frontend/src/header/NavbarTools.svelte
@@ -25,10 +25,13 @@
     Col,
   } from "@sveltestrap/sveltestrap";
 
-  export let username;
-  export let authlevel;
-  export let roles;
-  export let screenSize;
+  /* Svelte 5 Props */
+  let {
+    username,
+    authlevel,
+    roles,
+    screenSize
+  } = $props();
 </script>
 
 <Nav navbar>
@@ -91,7 +94,7 @@
     <NavItem>
       <Button
         outline
-        on:click={() => (window.location.href = "/config")}
+        onclick={() => (window.location.href = "/config")}
         style="margin-left: 10px;"
         title="Settings"
       >
@@ -136,7 +139,7 @@
           <Col xs="4">
             <Button
               outline
-              on:click={() => (window.location.href = "/config")}
+              onclick={() => (window.location.href = "/config")}
               size="sm"
               class="my-2 w-100"
             >
diff --git a/web/frontend/src/job.entrypoint.js b/web/frontend/src/job.entrypoint.js
index 78ce1d1d..cde1a9bf 100644
--- a/web/frontend/src/job.entrypoint.js
+++ b/web/frontend/src/job.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Job from './Job.root.svelte'
 
-new Job({
+mount(Job, {
     target: document.getElementById('svelte-app'),
     props: {
         dbid: jobInfos.id,
diff --git a/web/frontend/src/job/JobSummary.svelte b/web/frontend/src/job/JobSummary.svelte
index c2483b25..818b273e 100644
--- a/web/frontend/src/job/JobSummary.svelte
+++ b/web/frontend/src/job/JobSummary.svelte
@@ -18,9 +18,12 @@
   import JobFootprintPolar from "./jobsummary/JobFootprintPolar.svelte";
 
 
-  export let job;
-  export let width = "auto";
-  export let height = "400px";
+  /* Svelte 5 Props */
+  let {
+    job,
+    width = "auto",
+    height = "400px",
+  } = $props();
 
   const showFootprintTab = !!getContext("cc-config")[`job_view_showFootprint`];
 </script>
diff --git a/web/frontend/src/job/StatsTab.svelte b/web/frontend/src/job/StatsTab.svelte
index b7647b59..ecdcec38 100644
--- a/web/frontend/src/job/StatsTab.svelte
+++ b/web/frontend/src/job/StatsTab.svelte
@@ -33,7 +33,7 @@
   let loadScopes = false;
   let selectedScopes = [];
   let selectedMetrics = [];
-  let availableMetrics = new Set(); // For Info Only, filled by MetricSelection Component
+  let totalMetrics = 0; // For Info Only, filled by MetricSelection Component
   let isMetricSelectionOpen = false;
 
   const client = getContextClient();
@@ -99,7 +99,7 @@
   <Row>
     <Col class="m-2">
       <Button outline on:click={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
-        Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
+        Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
       </Button>
       {#if job.numNodes > 1}
         <Button class="px-2 ml-auto" color="success" outline on:click={() => (loadScopes = !loadScopes)} disabled={loadScopes}>
@@ -129,17 +129,21 @@
   {:else}
     <StatsTable 
       hosts={job.resources.map((r) => r.hostname).sort()}
-      data={$scopedStats?.data?.scopedJobStats}
+      jobStats={$scopedStats?.data?.scopedJobStats}
       {selectedMetrics}
     />
   {/if}
 </TabPane>
 
 <MetricSelection
+  bind:isOpen={isMetricSelectionOpen}
+  bind:totalMetrics
+  presetMetrics={selectedMetrics}
   cluster={job.cluster}
   subCluster={job.subCluster}
   configName="job_view_nodestats_selectedMetrics"
-  bind:allMetrics={availableMetrics}
-  bind:metrics={selectedMetrics}
-  bind:isOpen={isMetricSelectionOpen}
+  preInitialized
+  applyMetrics={(newMetrics) => 
+    selectedMetrics = [...newMetrics]
+  }
 />
diff --git a/web/frontend/src/job/jobsummary/JobFootprintBars.svelte b/web/frontend/src/job/jobsummary/JobFootprintBars.svelte
index 6c9df55f..0fe3e2bf 100644
--- a/web/frontend/src/job/jobsummary/JobFootprintBars.svelte
+++ b/web/frontend/src/job/jobsummary/JobFootprintBars.svelte
@@ -17,79 +17,88 @@
     } from "@sveltestrap/sveltestrap";
     import { findJobFootprintThresholds } from "../../generic/utils.js";
   
-    export let job;
+    /* Svelte 5 Props */
+    let {job} = $props();
     
+    /* Derived */
     // Prepare Job Footprint Data Based On Values Saved In Database
-    const jobFootprintData = job?.footprint?.map((jf) => {
-      const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
-      if (fmc) {
-        // Unit
-        const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
-  
-        // Threshold / -Differences
-        const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
-  
-        // Define basic data -> Value: Use as Provided
-        const fmBase = {
-          name: jf.name,
-          stat: jf.stat,
-          value: jf.value,
-          unit: unit,
-          peak: fmt.peak,
-          dir: fmc.lowerIsBetter
-        };
-  
-        if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
-          return {
-            ...fmBase,
-            color: "danger",
-            message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-            impact: 3
-          };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
-          return {
-            ...fmBase,
-            color: "warning",
-            message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-            impact: 2,
-          };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
-          return {
-            ...fmBase,
-            color: "success",
-            message: "Footprint value within expected thresholds.",
-            impact: 1,
-          };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
-          return {
-            ...fmBase,
-            color: "info",
-            message:
-              "Footprint value above expected normal threshold: Check for artifacts recommended.",
-            impact: 0,
+    const jobFootprintData = $derived(buildFootprint(job?.footprint));
+    
+    /* Functions */
+    function buildFootprint(input) {
+      let result = input?.map((jf) => {
+        const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
+        if (fmc) {
+          // Unit
+          const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
+    
+          // Threshold / -Differences
+          const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
+    
+          // Define basic data -> Value: Use as Provided
+          const fmBase = {
+            name: jf.name,
+            stat: jf.stat,
+            value: jf.value,
+            unit: unit,
+            peak: fmt.peak,
+            dir: fmc.lowerIsBetter
           };
-        } else {
+    
+          if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
+            return {
+              ...fmBase,
+              color: "danger",
+              message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+              impact: 3
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
+            return {
+              ...fmBase,
+              color: "warning",
+              message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+              impact: 2,
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
+            return {
+              ...fmBase,
+              color: "success",
+              message: "Footprint value within expected thresholds.",
+              impact: 1,
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
+            return {
+              ...fmBase,
+              color: "info",
+              message:
+                "Footprint value above expected normal threshold: Check for artifacts recommended.",
+              impact: 0,
+            };
+          } else {
+            return {
+              ...fmBase,
+              color: "secondary",
+              message:
+                "Footprint value above expected peak threshold: Check for artifacts!",
+              impact: -1,
+            };
+          }
+        } else { // No matching metric config: display as single value
           return {
-            ...fmBase,
-            color: "secondary",
+            name: jf.name,
+            stat: jf.stat,
+            value: jf.value,
             message:
-              "Footprint value above expected peak threshold: Check for artifacts!",
-            impact: -1,
+              `No config for metric ${jf.name} found.`,
+            impact: 4,
           };
         }
-      } else { // No matching metric config: display as single value
-        return {
-          name: jf.name,
-          stat: jf.stat,
-          value: jf.value,
-          message:
-            `No config for metric ${jf.name} found.`,
-          impact: 4,
-        };
-      }
-    }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
-      return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
-    });;
+      }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
+        return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+      });;
+
+    return result
+    };
   
     function evalFootprint(value, thresholds, lowerIsBetter, level) {
         // Handle Metrics in which less value is better
@@ -161,7 +170,7 @@
                 >{fpd.message}</Tooltip
                 >
                 </div>
-                <Row cols={12} class="{(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
+                <Row cols={12} class={(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
                 {#if fpd.dir}
                     <Col xs="1">
                     <Icon name="caret-left-fill" />
diff --git a/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte b/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
index 4048b2b9..f606ad5c 100644
--- a/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
+++ b/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
@@ -20,8 +20,10 @@
     import Polar from "../../generic/plots/Polar.svelte";
     import { findJobFootprintThresholds } from "../../generic/utils.js";
   
-    export let job;
+    /* Svelte 5 Props */
+    let { job } = $props();
   
+    /* Const Init */
     // Metric Names Configured To Be Footprints For (sub)Cluster
     const clusterFootprintMetrics = getContext("clusters")
     .find((c) => c.name == job.cluster)?.subClusters
@@ -39,23 +41,24 @@
     // Pull All Series For Footprint Metrics Statistics Only On Node Scope
     const client = getContextClient();
     const polarQuery = gql`
-    query ($dbid: ID!, $selectedMetrics: [String!]!) {
-      jobStats(id: $dbid, metrics: $selectedMetrics) {
-        name
-        data {
-          min
-          avg
-          max
+      query ($dbid: ID!, $selectedMetrics: [String!]!) {
+        jobStats(id: $dbid, metrics: $selectedMetrics) {
+          name
+          data {
+            min
+            avg
+            max
+          }
         }
       }
-    }
     `;
 
-    $: polarData = queryStore({
+    /* Derived */
+    const polarData = $derived(queryStore({
       client: client,
       query: polarQuery,
       variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
-    });
+    }));
 </script>
 
 <CardBody>
diff --git a/web/frontend/src/job/statstab/StatsTable.svelte b/web/frontend/src/job/statstab/StatsTable.svelte
index 2ed2f285..d55f4205 100644
--- a/web/frontend/src/job/statstab/StatsTable.svelte
+++ b/web/frontend/src/job/statstab/StatsTable.svelte
@@ -2,9 +2,9 @@
     @component Job-View subcomponent; display table of metric data statistics with selectable scopes
 
     Properties:
-    - `data Object`: The data object
-    - `selectedMetrics [String]`: The selected metrics
     - `hosts [String]`: The list of hostnames of this job
+    - `jobStats Object`: The data object
+    - `selectedMetrics [String]`: The selected metrics
  -->
 
 <script>
@@ -17,39 +17,87 @@
   } from "@sveltestrap/sveltestrap";
   import StatsTableEntry from "./StatsTableEntry.svelte";
 
-  export let data = [];
-  export let selectedMetrics = [];
-  export let hosts = [];
+  /* Svelte 5 Props */
+  let {
+    hosts = [],
+    jobStats = [],
+    selectedMetrics = [],
+  } = $props();
 
-  let sorting = {};
-  let availableScopes = {};
-  let selectedScopes = {};
+  /* State Init */
+  let sortedHosts = $state(hosts);
+  let sorting = $state(setupSorting(selectedMetrics));
+  let availableScopes = $state(setupAvailable(jobStats));
+  let selectedScopes = $state(setupSelected(availableScopes));
 
-  const scopesForMetric = (metric) =>
-    data?.filter((jm) => jm.name == metric)?.map((jm) => jm.scope) || [];
-  const setScopeForMetric = (metric, scope) =>
-    selectedScopes[metric] = scope
+  /* Derived Init */
+  const tableData = $derived(setupData(jobStats, hosts, selectedMetrics, availableScopes))
+
+  /* Functions */
+  function setupSorting(metrics) {
+    let pendingSorting = {};
+    if (metrics) {
+      for (let metric of metrics) {
+        pendingSorting[metric] = {
+          min: { dir: "up", active: false },
+          avg: { dir: "up", active: false },
+          max: { dir: "up", active: false },
+        };
+      };
+    };
+    return pendingSorting;
+  };
 
-  $: if (data && selectedMetrics) {
-    for (let metric of selectedMetrics) {
-      availableScopes[metric] = scopesForMetric(metric);
-      // Set Initial Selection, but do not use selectedScopes: Skips reactivity
-      if (availableScopes[metric].includes("accelerator")) {
-        setScopeForMetric(metric, "accelerator");
-      } else if (availableScopes[metric].includes("core")) {
-        setScopeForMetric(metric, "core");
-      } else if (availableScopes[metric].includes("socket")) {
-        setScopeForMetric(metric, "socket");
+  function setupAvailable(data) {
+    let pendingAvailable = {};
+    if (data) {
+      for (let d of data) {
+        if (!pendingAvailable[d.name]) {
+          pendingAvailable[d.name] = [d.scope]
+        } else {
+          pendingAvailable[d.name] = [...pendingAvailable[d.name], d.scope]
+        };
+      };
+    };
+    return pendingAvailable;
+  };
+  
+  function setupSelected(available) {
+    let pendingSelected = {};
+    for (const [metric, scopes] of Object.entries(available)) {
+      if (scopes.includes("accelerator")) {
+        pendingSelected[metric] = "accelerator"
+      } else if (scopes.includes("core")) {
+        pendingSelected[metric] = "core"
+      } else if (scopes.includes("socket")) {
+        pendingSelected[metric] = "socket"
       } else {
-        setScopeForMetric(metric, "node");
-      }
+        pendingSelected[metric] = "node"
+      };
+    };
+    return pendingSelected;
+  };
 
-      sorting[metric] = {
-        min: { dir: "up", active: false },
-        avg: { dir: "up", active: false },
-        max: { dir: "up", active: false },
+  function setupData(js, h, sm, as) {
+    let pendingTableData = {};
+    if (js) {
+      for (const host of h) {
+        if (!pendingTableData[host]) {
+          pendingTableData[host] = {};
+        };
+        for (const metric of sm) {
+          if (!pendingTableData[host][metric]) {
+            pendingTableData[host][metric] = {};
+          };
+          for (const scope of as[metric]) {
+            pendingTableData[host][metric][scope] = js.find((d) => d.name == metric && d.scope == scope)
+              ?.stats.filter((st) => st.hostname == host && st.data != null)
+              ?.sort((a, b) => a.id - b.id) || []
+          };
+        };
       };
-    }
+    };
+    return pendingTableData;
   }
 
   function sortBy(metric, stat) {
@@ -62,11 +110,12 @@
       s.active = true;
     }
 
-    let stats = data.find(
-      (d) => d.name == metric && d.scope == "node",
+    let stats = jobStats.find(
+      (js) => js.name == metric && js.scope == "node",
     )?.stats || [];
     sorting = { ...sorting };
-    hosts = hosts.sort((h1, h2) => {
+
+    sortedHosts = sortedHosts.sort((h1, h2) => {
       let s1 = stats.find((s) => s.hostname == h1)?.data;
       let s2 = stats.find((s) => s.hostname == h2)?.data;
       if (s1 == null || s2 == null) return -1;
@@ -81,7 +130,7 @@
   <thead>
     <!-- Header Row 1: Selectors -->
     <tr>
-      <th/>
+      <th></th>
       {#each selectedMetrics as metric}
         <!-- To Match Row-2 Header Field Count-->
         <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
@@ -89,7 +138,7 @@
             <InputGroupText>
               {metric}
             </InputGroupText>
-            <Input type="select" bind:value={selectedScopes[metric]} disabled={availableScopes[metric].length === 1}>
+            <Input type="select" bind:value={selectedScopes[metric]} disabled={availableScopes[metric]?.length === 1}>
               {#each (availableScopes[metric] || []) as scope}
                 <option value={scope}>{scope}</option>
               {/each}
@@ -106,7 +155,7 @@
           <th>Id</th>
         {/if}
         {#each ["min", "avg", "max"] as stat}
-          <th on:click={() => sortBy(metric, stat)}>
+          <th onclick={() => sortBy(metric, stat)}>
             {stat}
             {#if selectedScopes[metric] == "node"}
               <Icon
@@ -122,14 +171,12 @@
     </tr>
   </thead>
   <tbody>
-    {#each hosts as host (host)}
+    {#each sortedHosts as host (host)}
       <tr>
         <th scope="col">{host}</th>
         {#each selectedMetrics as metric (metric)}
           <StatsTableEntry
-            {data}
-            {host}
-            {metric}
+            data={tableData[host][metric][selectedScopes[metric]]}
             scope={selectedScopes[metric]}
           />
         {/each}
diff --git a/web/frontend/src/job/statstab/StatsTableEntry.svelte b/web/frontend/src/job/statstab/StatsTableEntry.svelte
index c3161a5a..587e6a1e 100644
--- a/web/frontend/src/job/statstab/StatsTableEntry.svelte
+++ b/web/frontend/src/job/statstab/StatsTableEntry.svelte
@@ -2,97 +2,83 @@
     @component Job-View subcomponent; Single Statistics entry component for statstable
 
     Properties:
-    - `host String`: The hostname (== node)
-    - `metric String`: The metric name
+    - `data [Object]`: The jobs statsdata for host-metric-scope
     - `scope String`: The selected scope
-    - `data [Object]`: The jobs statsdata
  -->
 
 <script>
   import { Icon } from "@sveltestrap/sveltestrap";
 
-  export let host;
-  export let metric;
-  export let scope;
-  export let data;
+  /* Svelte 5 Props */
+  let {
+    data,
+    scope,
+  } = $props();
 
-  let entrySorting = {
-    id: { dir: "down", active: true },
-    min: { dir: "up", active: false },
-    avg: { dir: "up", active: false },
-    max: { dir: "up", active: false },
-  };
-
-  function compareNumbers(a, b) {
-    return a.id - b.id;
-  }
+  /* State Init */
+  let sortBy = $state("id");
+  let sortDir = $state("down");
 
-  function sortByField(field) {
-    let s = entrySorting[field];
-    if (s.active) {
-      s.dir = s.dir == "up" ? "down" : "up";
-    } else {
-      for (let field in entrySorting) entrySorting[field].active = false;
-      s.active = true;
-    }
+  /* Derived */
+  const sortedData = $derived(updateData(data, sortBy, sortDir));
 
-    entrySorting = { ...entrySorting };
-    stats = stats.sort((a, b) => {
-      if (a == null || b == null) return -1;
-
-      if (field === "id") {
-        return s.dir != "up" ?
-          a[field].localeCompare(b[field], undefined, {numeric: true, sensitivity: 'base'}) :
-          b[field].localeCompare(a[field], undefined, {numeric: true, sensitivity: 'base'})
+  /* Functions */
+  function updateData(data, sortBy, sortDir) {
+    data.sort((a, b) => {
+      if (a == null || b == null) { 
+        return -1;
+      } else if (sortBy === "id") {
+        return sortDir != "up"
+          ? a[sortBy].localeCompare(b[sortBy], undefined, {numeric: true, sensitivity: 'base'})
+          : b[sortBy].localeCompare(a[sortBy], undefined, {numeric: true, sensitivity: 'base'});
       } else {
-        return s.dir != "up"
-          ? a.data[field] - b.data[field]
-          : b.data[field] - a.data[field];
-      }
+        return sortDir != "up"
+          ? a.data[sortBy] - b.data[sortBy]
+          : b.data[sortBy] - a.data[sortBy];
+      };
     });
-  }
-
-  $: stats = data
-    ?.find((d) => d.name == metric && d.scope == scope)
-    ?.stats.filter((s) => s.hostname == host && s.data != null)
-    ?.sort(compareNumbers) || [];
+    return [...data];
+  };
 </script>
 
-{#if stats == null || stats.length == 0}
+{#if data == null || data.length == 0}
   <td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
-{:else if stats.length == 1 && scope == "node"}
+{:else if data.length == 1 && scope == "node"}
   <td>
-    {stats[0].data.min}
+    {data[0].data.min}
   </td>
   <td>
-    {stats[0].data.avg}
+    {data[0].data.avg}
   </td>
   <td>
-    {stats[0].data.max}
+    {data[0].data.max}
   </td>
 {:else}
   <td colspan="4">
     <table style="width: 100%;">
-      <tr>
-        {#each ["id", "min", "avg", "max"] as field}
-          <th on:click={() => sortByField(field)}>
-            Sort
-            <Icon
-              name="caret-{entrySorting[field].dir}{entrySorting[field].active
-                ? '-fill'
-                : ''}"
-            />
-          </th>
-        {/each}
-      </tr>
-      {#each stats as s, i}
+      <tbody>
         <tr>
-          <th>{s.id ?? i}</th>
-          <td>{s.data.min}</td>
-          <td>{s.data.avg}</td>
-          <td>{s.data.max}</td>
+          {#each ["id", "min", "avg", "max"] as field}
+            <th onclick={() => {
+                sortBy = field; 
+                sortDir = (sortDir == "up" ? "down" : "up");
+              }}>
+              Sort
+              <Icon
+                name="caret-{sortBy == field? sortDir: 'down'}{sortBy == field? '-fill': ''}"
+              />
+            </th>
+          {/each}
         </tr>
-      {/each}
+        {#each sortedData as s, i}
+          <tr>
+            <th>{s.id ?? i}</th>
+            <td>{s.data.min}</td>
+            <td>{s.data.avg}</td>
+            <td>{s.data.max}</td>
+          </tr>
+        {/each}
+      </tbody>
     </table>
   </td>
 {/if}
diff --git a/web/frontend/src/jobs.entrypoint.js b/web/frontend/src/jobs.entrypoint.js
index 9e98d0d7..42e721f8 100644
--- a/web/frontend/src/jobs.entrypoint.js
+++ b/web/frontend/src/jobs.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Jobs from './Jobs.root.svelte'
 
-new Jobs({
+mount(Jobs, {
     target: document.getElementById('svelte-app'),
     props: {
         filterPresets: filterPresets,
diff --git a/web/frontend/src/list.entrypoint.js b/web/frontend/src/list.entrypoint.js
index 21c8f5d2..6707a4b5 100644
--- a/web/frontend/src/list.entrypoint.js
+++ b/web/frontend/src/list.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import List from './List.root.svelte'
 
-new List({
+mount(List, {
     target: document.getElementById('svelte-app'),
     props: {
         filterPresets: filterPresets,
diff --git a/web/frontend/src/node.entrypoint.js b/web/frontend/src/node.entrypoint.js
index e6e6f9a6..7d73e5d2 100644
--- a/web/frontend/src/node.entrypoint.js
+++ b/web/frontend/src/node.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Node from './Node.root.svelte'
 
-new Node({
+mount(Node, {
     target: document.getElementById('svelte-app'),
     props: {
         cluster: infos.cluster,
diff --git a/web/frontend/src/status.entrypoint.js b/web/frontend/src/status.entrypoint.js
index 39c374b0..3e45cb73 100644
--- a/web/frontend/src/status.entrypoint.js
+++ b/web/frontend/src/status.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Status from './Status.root.svelte'
 
-new Status({
+mount(Status, {
     target: document.getElementById('svelte-app'),
     props: {
         cluster: infos.cluster,
diff --git a/web/frontend/src/systems.entrypoint.js b/web/frontend/src/systems.entrypoint.js
index 7cee46f9..8d5fd413 100644
--- a/web/frontend/src/systems.entrypoint.js
+++ b/web/frontend/src/systems.entrypoint.js
@@ -1,14 +1,15 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Systems from './Systems.root.svelte'
 
-new Systems({
+mount(Systems, {
     target: document.getElementById('svelte-app'),
     props: {
         displayType: displayType,
         cluster: infos.cluster,
         subCluster: infos.subCluster,
-        from: infos.from,
-        to: infos.to
+        fromPreset: infos.from,
+        toPreset: infos.to
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig],
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index c8a5e51b..b166ecdf 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -10,38 +10,28 @@
  -->
 
 <script>
-  import { getContext } from "svelte";
   import { queryStore, gql, getContextClient, mutationStore } from "@urql/svelte";
   import { Row, Col, Card, Table, Spinner } from "@sveltestrap/sveltestrap";
   import { stickyHeader } from "../generic/utils.js";
   import NodeListRow from "./nodelist/NodeListRow.svelte";
   import Pagination from "../generic/joblist/Pagination.svelte";
 
-  export let cluster;
-  export let subCluster = "";
-  export let ccconfig = null;
-  export let selectedMetrics = [];
-  export let selectedResolution = 0;
-  export let hostnameFilter = "";
-  export let systemUnits = null;
-  export let from = null;
-  export let to = null;
+  /* Svelte 5 Props */
+  let {
+    cluster,
+    subCluster = "",
+    ccconfig = null,
+    selectedMetrics = [],
+    selectedResolution = 0,
+    hostnameFilter = "",
+    presetSystemUnits = null,
+    from = null,
+    to = null
+  } = $props();
 
-  // Decouple from Job List Paging Params?
-  let usePaging = ccconfig?.node_list_usePaging || false
-  let itemsPerPage = usePaging ? (ccconfig?.plot_list_nodesPerPage || 10) : 10;
-  let page = 1;
-  let paging = { itemsPerPage, page };
-
-  let headerPaddingTop = 0;
-  stickyHeader(
-    ".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
-    (x) => (headerPaddingTop = x),
-  );
-
-  // const { query: initq } = init();
-  const initialized = getContext("initialized");
+  /* Const Init */
   const client = getContextClient();
+  const usePaging = ccconfig?.node_list_usePaging || false;
   const nodeListQuery = gql`
     query ($cluster: String!, $subCluster: String!, $nodeFilter: String!, $metrics: [String!], $scopes: [MetricScope!]!, $from: Time!, $to: Time!, $paging: PageRequest!, $selectedResolution: Int) {
       nodeMetricsList(
@@ -91,51 +81,16 @@
     }
   `
 
-  const updateConfigurationMutation = ({ name, value }) => {
-    return mutationStore({
-      client: client,
-      query: gql`
-        mutation ($name: String!, $value: String!) {
-          updateConfiguration(name: $name, value: $value)
-        }
-      `,
-      variables: { name, value },
-    });
-  };
+  /* State Init */
+  let nodes = $state([]);
+  let page = $state(1);
+  let itemsPerPage = $state(usePaging ? (ccconfig?.plot_list_nodesPerPage || 10) : 10);
+  let headerPaddingTop = $state(0);
+  let matchedNodes = $state(0);
 
-  // Decouple from Job List Paging Params?
-  function updateConfiguration(value, page) {
-    updateConfigurationMutation({
-      name: "plot_list_nodesPerPage",
-      value: value,
-    }).subscribe((res) => {
-      if (res.fetching === false && !res.error) {
-        nodes = [] // Empty List
-        paging = { itemsPerPage: value, page: page }; // Trigger reload of nodeList
-      } else if (res.fetching === false && res.error) {
-        throw res.error;
-      }
-    });
-  }
-
-  if (!usePaging) {
-    window.addEventListener('scroll', () => {
-      let {
-        scrollTop,
-        scrollHeight,
-        clientHeight
-      } = document.documentElement;
-
-      // Add 100 px offset to trigger load earlier
-      if (scrollTop + clientHeight >= scrollHeight - 100 && $nodesQuery?.data != null && $nodesQuery.data?.nodeMetricsList.hasNextPage) {
-        let pendingPaging = { ...paging }
-        pendingPaging.page += 1
-        paging = pendingPaging
-      };
-    });
-  };
-
-  $: nodesQuery = queryStore({
+  /* Derived */
+  const paging = $derived({ itemsPerPage, page });
+  const nodesQuery = $derived(queryStore({
     client: client,
     query: nodeListQuery,
     variables: {
@@ -150,24 +105,93 @@
       selectedResolution: selectedResolution,
     },
     requestPolicy: "network-only", // Resolution queries are cached, but how to access them? For now: reload on every change
+  }));
+  
+  /* Effects */
+    $effect(() => {
+    if (!usePaging) {
+      window.addEventListener('scroll', () => {
+        let {
+          scrollTop,
+          scrollHeight,
+          clientHeight
+        } = document.documentElement;
+
+        // Add 100 px offset to trigger load earlier
+        if (scrollTop + clientHeight >= scrollHeight - 100  && $nodesQuery?.data?.nodeMetricsList?.hasNextPage) {
+          page += 1
+        };
+      });
+    };
   });
 
-  let nodes = [];
-  $: if ($initialized && $nodesQuery.data) {
-    if (usePaging) {
-      nodes = [...$nodesQuery.data.nodeMetricsList.items].sort((a, b) => a.host.localeCompare(b.host));
-    } else { 
-      nodes = nodes.concat([...$nodesQuery.data.nodeMetricsList.items].sort((a, b) => a.host.localeCompare(b.host)))
+  $effect(() => {
+    handleNodes($nodesQuery?.data?.nodeMetricsList);
+  });
+
+  $effect(() => {
+    // Triggers (Except Paging)
+    from, to
+    selectedMetrics, selectedResolution
+    hostnameFilter
+    // Continous Scroll: Reset nodes and paging if parameters change: Existing entries will not match new selections
+    if (!usePaging) {
+      nodes = [];
+      page = 1;
     }
-  }
+  });
 
-  $: if (!usePaging && (selectedMetrics || selectedResolution || hostnameFilter || from || to)) {
-    // Continous Scroll: Reset list and paging if parameters change: Existing entries will not match new selections
-    nodes = [];
-    paging = { itemsPerPage, page: 1 };
+  /* Functions */
+  function handleNodes(data) {
+    if (data) {
+      matchedNodes = data.totalNodes;
+      if (usePaging || nodes.length == 0) {
+        nodes = [...data.items].sort((a, b) => a.host.localeCompare(b.host));
+      } else {
+        // Workaround to ignore secondary store triggers (reason tbd)
+        const oldNodes = $state.snapshot(nodes)
+        const newNodes = [...data.items].map((d) => d.host)
+        if (!oldNodes.some((n) => newNodes.includes(n.host))) {
+          nodes = nodes.concat([...data.items].sort((a, b) => a.host.localeCompare(b.host)))
+        };
+      };
+    };
+  };
+
+  // Decouple from Job List Paging Params?
+  function updateConfiguration(newItems, newPage) {
+    updateConfigurationMutation({
+      name: "plot_list_nodesPerPage",
+      value: newItems.toString(),
+    }).subscribe((res) => {
+      if (res.fetching === false && !res.error) {
+        nodes = []; // Empty List
+        itemsPerPage = newItems;
+        page = newPage; // Trigger reload of nodeList
+      } else if (res.fetching === false && res.error) {
+        throw res.error;
+      }
+    });
   }
 
-  $: matchedNodes = $nodesQuery.data?.nodeMetricsList.totalNodes || matchedNodes;
+  /* Const Functions */
+  const updateConfigurationMutation = ({ name, value }) => {
+    return mutationStore({
+      client: client,
+      query: gql`
+        mutation ($name: String!, $value: String!) {
+          updateConfiguration(name: $name, value: $value)
+        }
+      `,
+      variables: { name, value },
+    });
+  };
+
+  /* Init Header */
+  stickyHeader(
+    ".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
+    (x) => (headerPaddingTop = x),
+  );
 </script>
 
 <Row>
@@ -192,7 +216,7 @@
               scope="col"
               style="padding-top: {headerPaddingTop}px"
             >
-              {metric} ({systemUnits[metric]})
+              {metric} ({presetSystemUnits[metric]})
             </th>
           {/each}
         </tr>
@@ -212,7 +236,7 @@
               <td colspan={selectedMetrics.length + 1}> No nodes found </td>
             </tr>
           {/each}
-          {/if}
+        {/if}
         {#if $nodesQuery.fetching || !$nodesQuery.data}
           <tr>
             <td colspan={selectedMetrics.length + 1}>
@@ -242,12 +266,13 @@
     {itemsPerPage}
     itemText="Nodes"
     totalItems={matchedNodes}
-    on:update-paging={({ detail }) => {
+    updatePaging={(detail) => {
       if (detail.itemsPerPage != itemsPerPage) {
-        updateConfiguration(detail.itemsPerPage.toString(), detail.page);
+        updateConfiguration(detail.itemsPerPage, detail.page);
       } else {
-        nodes = []
-        paging = { itemsPerPage: detail.itemsPerPage, page: detail.page };
+        nodes = [];
+        itemsPerPage = detail.itemsPerPage;
+        page = detail.page;
       }
     }}
   />
diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte
index 68ccd787..2e7ae3c8 100644
--- a/web/frontend/src/systems/NodeOverview.svelte
+++ b/web/frontend/src/systems/NodeOverview.svelte
@@ -10,101 +10,99 @@
  <script>
   import { queryStore, gql, getContextClient } from "@urql/svelte";
   import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
-  import { init, checkMetricsDisabled } from "../generic/utils.js";
+  import { checkMetricDisabled } from "../generic/utils.js";
   import MetricPlot from "../generic/plots/MetricPlot.svelte";
 
-  export let ccconfig = null;
-  export let cluster = "";
-  export const subCluster = "";
-  export let selectedMetrics = null;
-  export let hostnameFilter = "";
-  export let from = null;
-  export let to = null;
+  /* Svelte 5 Props */
+  let {
+    ccconfig = null,
+    cluster = "",
+    selectedMetric = "",
+    hostnameFilter = "",
+    from = null,
+    to = null
+  } = $props();
 
-  const { query: initq } = init();
+  /* Const Init */
   const client = getContextClient();
-  const nodeQuery = gql`
-    query ($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
-      nodeMetrics(
-        cluster: $cluster
-        metrics: $metrics
-        from: $from
-        to: $to
-      ) {
-        host
-        subCluster
-        metrics {
-          name
-          scope
-          metric {
-            timestep
-            unit {
-              base
-              prefix
-            }
-            series {
-              statistics {
-                min
-                avg
-                max
+
+  /* Derived */
+  const nodesQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query ($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
+        nodeMetrics(
+          cluster: $cluster
+          metrics: $metrics
+          from: $from
+          to: $to
+        ) {
+          host
+          subCluster
+          metrics {
+            name
+            scope
+            metric {
+              timestep
+              unit {
+                base
+                prefix
+              }
+              series {
+                statistics {
+                  min
+                  avg
+                  max
+                }
+                data
               }
-              data
             }
           }
         }
       }
-    }
-  `
-
-  $: selectedMetric = selectedMetrics[0] ? selectedMetrics[0] : "";
-
-  $: nodesQuery = queryStore({
-    client: client,
-    query: nodeQuery,
+    `,
     variables: {
       cluster: cluster,
-      metrics: selectedMetrics,
-      from: from.toISOString(),
-      to: to.toISOString(),
+      metrics: [selectedMetric],
+      from: from,
+      to: to,
     },
-  });
-
-  let rawData = []
-  $: if ($initq.data && $nodesQuery?.data) {
-    rawData = $nodesQuery?.data?.nodeMetrics.filter((h) => {
-      if (h.subCluster === '') { // Exclude nodes with empty subCluster field
-        console.warn('subCluster not configured for node', h.host)
-        return false
-      } else {
-        return h.metrics.some(
-          (m) => selectedMetrics.includes(m.name) && m.scope == "node",
-        )
-      }
-    })
-  }
+  }));
 
-  let mappedData = []
-  $: if (rawData?.length > 0) {
-    mappedData = rawData.map((h) => ({
-      host: h.host,
-      subCluster: h.subCluster,
-      data: h.metrics.filter(
-        (m) => selectedMetrics.includes(m.name) && m.scope == "node",
-      ),
-      disabled: checkMetricsDisabled(
-        selectedMetrics,
-        cluster,
-        h.subCluster,
-      ),
-    }))
-    .sort((a, b) => a.host.localeCompare(b.host))
-  }
+  const mappedData = $derived(handleQueryData($nodesQuery?.data));
+  const filteredData = $derived(mappedData.filter((h) => h.host.includes(hostnameFilter)));
 
-  let filteredData = []
-  $: if (mappedData?.length > 0) {
-    filteredData = mappedData.filter((h) =>
-      h.host.includes(hostnameFilter)
-    )
+  /* Functions */
+  function handleQueryData(queryData) {
+    let rawData = []
+    if (queryData) { 
+      rawData = queryData.nodeMetrics.filter((h) => {
+        if (h.subCluster !== '') { // Exclude nodes with empty subCluster field
+          return h.metrics.some(
+            (m) =>  m?.name == selectedMetric && m.scope == "node",
+          )
+        };
+      });
+    };
+    
+    let pendingMapped = [];
+    if (rawData.length > 0) {
+      pendingMapped = rawData.map((h) => ({
+        host: h.host,
+        subCluster: h.subCluster,
+        data: h.metrics.filter(
+          (m) => m?.name == selectedMetric && m.scope == "node",
+        ),
+        disabled: checkMetricDisabled(
+          selectedMetric,
+          cluster,
+          h.subCluster,
+        ),
+      }))
+      .sort((a, b) => a.host.localeCompare(b.host))
+    }
+    
+    return pendingMapped;
   }
 </script>
 
@@ -132,22 +130,25 @@
             >{item.host} ({item.subCluster})</a
           >
         </h4>
-        {#if item?.disabled[selectedMetric]}
+        {#if item?.disabled}
           <Card body class="mx-3" color="info"
             >Metric disabled for subcluster <code
               >{selectedMetric}:{item.subCluster}</code
             ></Card
           >
         {:else}
-          <!-- "No Data"-Warning included in MetricPlot-Component -->
-          <MetricPlot
-            timestep={item.data[0].metric.timestep}
-            series={item.data[0].metric.series}
-            metric={item.data[0].name}
-            {cluster}
-            subCluster={item.subCluster}
-            forNode
-          />
+          <!-- "No Data"-Warning included in MetricPlot-Component   -->
+          <!-- #key: X-axis keeps last selected timerange otherwise -->
+          {#key item.data[0].metric.series[0].data.length}
+            <MetricPlot
+              timestep={item.data[0].metric.timestep}
+              series={item.data[0].metric.series}
+              metric={item.data[0].name}
+              {cluster}
+              subCluster={item.subCluster}
+              forNode
+            />
+          {/key}
         {/if}
       </Col>
     {/each}
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index ee8ef49f..7adb282b 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -158,7 +158,7 @@
               height={175}
               forNode
             />
-          <div class="my-2"/>
+          <div class="my-2"></div>
           {#key extendedLegendData}
             <MetricPlot
               {cluster}
diff --git a/web/frontend/src/tags.entrypoint.js b/web/frontend/src/tags.entrypoint.js
index 024a92d6..732a23d8 100644
--- a/web/frontend/src/tags.entrypoint.js
+++ b/web/frontend/src/tags.entrypoint.js
@@ -1,16 +1,15 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import Tags from './Tags.root.svelte'
 
-new Tags({
+mount(Tags, {
     target: document.getElementById('svelte-app'),
     props: {
         username: username,
         isAdmin: isAdmin,
-        tagmap: tagmap,
+        presetTagmap: tagmap,
     },
     context: new Map([
         ['cc-config', clusterCockpitConfig]
     ])
 })
-
-
diff --git a/web/frontend/src/user.entrypoint.js b/web/frontend/src/user.entrypoint.js
index 16c616de..972e07c8 100644
--- a/web/frontend/src/user.entrypoint.js
+++ b/web/frontend/src/user.entrypoint.js
@@ -1,7 +1,8 @@
+import { mount } from 'svelte';
 import {} from './header.entrypoint.js'
 import User from './User.root.svelte'
 
-new User({
+mount(User, {
     target: document.getElementById('svelte-app'),
     props: {
         filterPresets: filterPresets,
diff --git a/web/templates/base.tmpl b/web/templates/base.tmpl
index 358f9268..7fd35a0a 100644
--- a/web/templates/base.tmpl
+++ b/web/templates/base.tmpl
@@ -14,13 +14,12 @@
         {{block "stylesheets" .}}
         {{end}}
         <script>
-            const header = {
-                "username":   "{{ .User.Username }}",
-                "authlevel":   {{ .User.GetAuthLevel }},
-                "clusters":    {{ .Clusters }},
-                "subClusters": {{ .SubClusters }},
-                "roles":       {{ .Roles }}
-            };
+            // Used for header.entrypoint.js mount and filters/Resources.svelte
+            const hUsername = {{ .User.Username }};
+            const hAuthlevel = {{ .User.GetAuthLevel }};
+            const hClusters = {{ .Clusters }};
+            const hSubClusters = {{ .SubClusters }};
+            const hRoles = {{ .Roles }};
         </script>
     </head>
     <body  class="site">