diff --git a/.devcontainer/docker/devcontainer.json b/.devcontainer/docker/devcontainer.json
index 7ccca257..6169d917 100644
--- a/.devcontainer/docker/devcontainer.json
+++ b/.devcontainer/docker/devcontainer.json
@@ -4,7 +4,7 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       // Should match what is defined in ui/package.json
-      "version": "22.20.0"
+      "version": "22.21.1"
     }
   },
   "mounts": [
diff --git a/.devcontainer/podman/devcontainer.json b/.devcontainer/podman/devcontainer.json
index 81f1962c..039ada42 100644
--- a/.devcontainer/podman/devcontainer.json
+++ b/.devcontainer/podman/devcontainer.json
@@ -4,7 +4,7 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       // Should match what is defined in ui/package.json
-      "version": "22.20.0"
+      "version": "22.21.1"
     }
   },
   "runArgs": [
diff --git a/ui/package-lock.json b/ui/package-lock.json
index e6da44fd..2248dde4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kvm-ui",
-  "version": "2025.11.11.1900",
+  "version": "2025.11.20.0300",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvm-ui",
-      "version": "2025.11.11.1900",
+      "version": "2025.11.20.0300",
       "dependencies": {
         "@headlessui/react": "^2.2.9",
         "@headlessui/tailwindcss": "^0.2.2",
@@ -26,11 +26,11 @@
         "react": "^19.2.0",
         "react-animate-height": "^3.2.3",
         "react-dom": "^19.2.0",
-        "react-hook-form": "^7.66.0",
+        "react-hook-form": "^7.66.1",
         "react-hot-toast": "^2.6.0",
         "react-icons": "^5.5.0",
-        "react-router": "^7.9.5",
-        "react-simple-keyboard": "^3.8.133",
+        "react-router": "^7.9.6",
+        "react-simple-keyboard": "^3.8.136",
         "react-use-websocket": "^4.13.0",
         "react-xtermjs": "^1.0.10",
         "recharts": "^3.4.1",
@@ -40,11 +40,11 @@
         "zustand": "^4.5.2"
       },
       "devDependencies": {
-        "@eslint/compat": "^1.4.1",
+        "@eslint/compat": "^2.0.0",
         "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.39.1",
         "@inlang/cli": "^3.0.12",
-        "@inlang/paraglide-js": "^2.4.0",
+        "@inlang/paraglide-js": "^2.5.0",
         "@inlang/plugin-m-function-matcher": "^2.1.0",
         "@inlang/plugin-message-format": "^4.0.0",
         "@inlang/sdk": "^2.4.9",
@@ -52,13 +52,13 @@
         "@tailwindcss/postcss": "^4.1.17",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.1.17",
-        "@types/react": "^19.2.3",
-        "@types/react-dom": "^19.2.2",
+        "@types/react": "^19.2.6",
+        "@types/react-dom": "^19.2.3",
         "@types/semver": "^7.7.1",
-        "@types/validator": "^13.15.5",
-        "@typescript-eslint/eslint-plugin": "^8.46.4",
-        "@typescript-eslint/parser": "^8.46.4",
-        "@vitejs/plugin-react-swc": "^4.2.1",
+        "@types/validator": "^13.15.10",
+        "@typescript-eslint/eslint-plugin": "^8.47.0",
+        "@typescript-eslint/parser": "^8.47.0",
+        "@vitejs/plugin-react-swc": "^4.2.2",
         "autoprefixer": "^10.4.22",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
@@ -74,7 +74,7 @@
         "prettier-plugin-tailwindcss": "^0.7.1",
         "tailwindcss": "^4.1.17",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.4",
+        "typescript-eslint": "^8.47.0",
         "vite": "^7.2.2",
         "vite-tsconfig-paths": "^5.1.4"
       },
@@ -801,16 +801,16 @@
       }
     },
     "node_modules/@eslint/compat": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.1.tgz",
-      "integrity": "sha512-cfO82V9zxxGBxcQDr1lfaYB7wykTa0b00mGa36FrJl7iTFd0Z2cHfEYuxcBRP/iNijCsWsEkA+jzT8hGYmv33w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-2.0.0.tgz",
+      "integrity": "sha512-T9AfE1G1uv4wwq94ozgTGio5EUQBqAVe1X9qsQtSNVEYW6j3hvtZVm8Smr4qL1qDPFg+lOB2cL5RxTRMzq4CTA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.17.0"
+        "@eslint/core": "^1.0.0"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "peerDependencies": {
         "eslint": "^8.40 || 9"
@@ -849,7 +849,7 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/core": {
+    "node_modules/@eslint/config-helpers/node_modules/@eslint/core": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
       "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
@@ -862,6 +862,19 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/core": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.0.0.tgz",
+      "integrity": "sha512-PRfWP+8FOldvbApr6xL7mNCw4cJcSTq4GA7tYbgq15mRb0kWKO/wEB2jr+uwjFH3sZvEZneZyCUGTxsv4Sahyw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
@@ -936,6 +949,19 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
@@ -1100,9 +1126,9 @@
       }
     },
     "node_modules/@inlang/paraglide-js": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js/-/paraglide-js-2.4.0.tgz",
-      "integrity": "sha512-T/m9uoev574/1JrhCnPcgK1xnAwkVMgaDev4LFthnmID8ubX2xjboSGO3IztwXWwO0aJoT1UJr89JCwjbwgnJQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@inlang/paraglide-js/-/paraglide-js-2.5.0.tgz",
+      "integrity": "sha512-FnycOM6j0GYd/n97NCDyXJiHnyPYGPgufL640eZWs+rTIRrOgDVz/o77iWRYFZK84REOcmSDi0N6PbbY8NT8+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1414,16 +1440,16 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.46",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.46.tgz",
-      "integrity": "sha512-xMNwJo/pHkEP/mhNVnW+zUiJDle6/hxrwO0mfSJuEVRbBfgrJFuUSRoZx/nYUw5pCjrysl9OkNXCkAdih8GCnA==",
+      "version": "1.0.0-beta.47",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.47.tgz",
+      "integrity": "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.2.tgz",
-      "integrity": "sha512-yDPzwsgiFO26RJA4nZo8I+xqzh7sJTZIWQOxn+/XOdPE31lAvLIYCKqjV+lNH/vxE2L2iH3plKxDCRK6i+CwhA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
       "cpu": [
         "arm"
       ],
@@ -1434,9 +1460,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.2.tgz",
-      "integrity": "sha512-k8FontTxIE7b0/OGKeSN5B6j25EuppBcWM33Z19JoVT7UTXFSo3D9CdU39wGTeb29NO3XxpMNauh09B+Ibw+9g==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
       "cpu": [
         "arm64"
       ],
@@ -1447,9 +1473,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.2.tgz",
-      "integrity": "sha512-A6s4gJpomNBtJ2yioj8bflM2oogDwzUiMl2yNJ2v9E7++sHrSrsQ29fOfn5DM/iCzpWcebNYEdXpaK4tr2RhfQ==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
       "cpu": [
         "arm64"
       ],
@@ -1460,9 +1486,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.2.tgz",
-      "integrity": "sha512-e6XqVmXlHrBlG56obu9gDRPW3O3hLxpwHpLsBJvuI8qqnsrtSZ9ERoWUXtPOkY8c78WghyPHZdmPhHLWNdAGEw==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
       "cpu": [
         "x64"
       ],
@@ -1473,9 +1499,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.2.tgz",
-      "integrity": "sha512-v0E9lJW8VsrwPux5Qe5CwmH/CF/2mQs6xU1MF3nmUxmZUCHazCjLgYvToOk+YuuUqLQBio1qkkREhxhc656ViA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
       "cpu": [
         "arm64"
       ],
@@ -1486,9 +1512,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.2.tgz",
-      "integrity": "sha512-ClAmAPx3ZCHtp6ysl4XEhWU69GUB1D+s7G9YjHGhIGCSrsg00nEGRRZHmINYxkdoJehde8VIsDC5t9C0gb6yqA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
       "cpu": [
         "x64"
       ],
@@ -1499,9 +1525,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.2.tgz",
-      "integrity": "sha512-EPlb95nUsz6Dd9Qy13fI5kUPXNSljaG9FiJ4YUGU1O/Q77i5DYFW5KR8g1OzTcdZUqQQ1KdDqsTohdFVwCwjqg==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
       "cpu": [
         "arm"
       ],
@@ -1512,9 +1538,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.2.tgz",
-      "integrity": "sha512-BOmnVW+khAUX+YZvNfa0tGTEMVVEerOxN0pDk2E6N6DsEIa2Ctj48FOMfNDdrwinocKaC7YXUZ1pHlKpnkja/Q==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
       "cpu": [
         "arm"
       ],
@@ -1525,9 +1551,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.2.tgz",
-      "integrity": "sha512-Xt2byDZ+6OVNuREgBXr4+CZDJtrVso5woFtpKdGPhpTPHcNG7D8YXeQzpNbFRxzTVqJf7kvPMCub/pcGUWgBjA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
       "cpu": [
         "arm64"
       ],
@@ -1538,9 +1564,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.2.tgz",
-      "integrity": "sha512-+LdZSldy/I9N8+klim/Y1HsKbJ3BbInHav5qE9Iy77dtHC/pibw1SR/fXlWyAk0ThnpRKoODwnAuSjqxFRDHUQ==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
       "cpu": [
         "arm64"
       ],
@@ -1551,9 +1577,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.2.tgz",
-      "integrity": "sha512-8ms8sjmyc1jWJS6WdNSA23rEfdjWB30LH8Wqj0Cqvv7qSHnvw6kgMMXRdop6hkmGPlyYBdRPkjJnj3KCUHV/uQ==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
       "cpu": [
         "loong64"
       ],
@@ -1564,9 +1590,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.2.tgz",
-      "integrity": "sha512-3HRQLUQbpBDMmzoxPJYd3W6vrVHOo2cVW8RUo87Xz0JPJcBLBr5kZ1pGcQAhdZgX9VV7NbGNipah1omKKe23/g==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
       "cpu": [
         "ppc64"
       ],
@@ -1577,9 +1603,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.2.tgz",
-      "integrity": "sha512-fMjKi+ojnmIvhk34gZP94vjogXNNUKMEYs+EDaB/5TG/wUkoeua7p7VCHnE6T2Tx+iaghAqQX8teQzcvrYpaQA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
       "cpu": [
         "riscv64"
       ],
@@ -1590,9 +1616,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.2.tgz",
-      "integrity": "sha512-XuGFGU+VwUUV5kLvoAdi0Wz5Xbh2SrjIxCtZj6Wq8MDp4bflb/+ThZsVxokM7n0pcbkEr2h5/pzqzDYI7cCgLQ==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
       "cpu": [
         "riscv64"
       ],
@@ -1603,9 +1629,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.2.tgz",
-      "integrity": "sha512-w6yjZF0P+NGzWR3AXWX9zc0DNEGdtvykB03uhonSHMRa+oWA6novflo2WaJr6JZakG2ucsyb+rvhrKac6NIy+w==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
       "cpu": [
         "s390x"
       ],
@@ -1616,9 +1642,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.2.tgz",
-      "integrity": "sha512-yo8d6tdfdeBArzC7T/PnHd7OypfI9cbuZzPnzLJIyKYFhAQ8SvlkKtKBMbXDxe1h03Rcr7u++nFS7tqXz87Gtw==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
       "cpu": [
         "x64"
       ],
@@ -1629,9 +1655,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.2.tgz",
-      "integrity": "sha512-ah59c1YkCxKExPP8O9PwOvs+XRLKwh/mV+3YdKqQ5AMQ0r4M4ZDuOrpWkUaqO7fzAHdINzV9tEVu8vNw48z0lA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
       "cpu": [
         "x64"
       ],
@@ -1642,9 +1668,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.2.tgz",
-      "integrity": "sha512-4VEd19Wmhr+Zy7hbUsFZ6YXEiP48hE//KPLCSVNY5RMGX2/7HZ+QkN55a3atM1C/BZCGIgqN+xrVgtdak2S9+A==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
       "cpu": [
         "arm64"
       ],
@@ -1655,9 +1681,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.2.tgz",
-      "integrity": "sha512-IlbHFYc/pQCgew/d5fslcy1KEaYVCJ44G8pajugd8VoOEI8ODhtb/j8XMhLpwHCMB3yk2J07ctup10gpw2nyMA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
       "cpu": [
         "arm64"
       ],
@@ -1668,9 +1694,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.2.tgz",
-      "integrity": "sha512-lNlPEGgdUfSzdCWU176ku/dQRnA7W+Gp8d+cWv73jYrb8uT7HTVVxq62DUYxjbaByuf1Yk0RIIAbDzp+CnOTFg==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
       "cpu": [
         "ia32"
       ],
@@ -1681,9 +1707,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.2.tgz",
-      "integrity": "sha512-S6YojNVrHybQis2lYov1sd+uj7K0Q05NxHcGktuMMdIQ2VixGwAfbJ23NnlvvVV1bdpR2m5MsNBViHJKcA4ADw==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
       "cpu": [
         "x64"
       ],
@@ -1694,9 +1720,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.2.tgz",
-      "integrity": "sha512-k+/Rkcyx//P6fetPoLMb8pBeqJBNGx81uuf7iljX9++yNBVRDQgD04L+SVXmXmh5ZP4/WOp4mWF0kmi06PW2tA==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
       "cpu": [
         "x64"
       ],
@@ -1743,9 +1769,9 @@
       "license": "MIT"
     },
     "node_modules/@swc/core": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.1.tgz",
-      "integrity": "sha512-s9GN3M2jA32k+StvuS9uGe4ztf5KVGBdlJMMC6LR6Ah23Lq/CWKVcC3WeQi8qaAcLd+DiddoNCNMUWymLv+wWQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.2.tgz",
+      "integrity": "sha512-OQm+yJdXxvSjqGeaWhP6Ia264ogifwAO7Q12uTDVYj/Ks4jBTI4JknlcjDRAXtRhqbWsfbZyK/5RtuIPyptk3w==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
@@ -1761,16 +1787,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.15.1",
-        "@swc/core-darwin-x64": "1.15.1",
-        "@swc/core-linux-arm-gnueabihf": "1.15.1",
-        "@swc/core-linux-arm64-gnu": "1.15.1",
-        "@swc/core-linux-arm64-musl": "1.15.1",
-        "@swc/core-linux-x64-gnu": "1.15.1",
-        "@swc/core-linux-x64-musl": "1.15.1",
-        "@swc/core-win32-arm64-msvc": "1.15.1",
-        "@swc/core-win32-ia32-msvc": "1.15.1",
-        "@swc/core-win32-x64-msvc": "1.15.1"
+        "@swc/core-darwin-arm64": "1.15.2",
+        "@swc/core-darwin-x64": "1.15.2",
+        "@swc/core-linux-arm-gnueabihf": "1.15.2",
+        "@swc/core-linux-arm64-gnu": "1.15.2",
+        "@swc/core-linux-arm64-musl": "1.15.2",
+        "@swc/core-linux-x64-gnu": "1.15.2",
+        "@swc/core-linux-x64-musl": "1.15.2",
+        "@swc/core-win32-arm64-msvc": "1.15.2",
+        "@swc/core-win32-ia32-msvc": "1.15.2",
+        "@swc/core-win32-x64-msvc": "1.15.2"
       },
       "peerDependencies": {
         "@swc/helpers": ">=0.5.17"
@@ -1782,9 +1808,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.1.tgz",
-      "integrity": "sha512-vEPrVxegWIjKEz+1VCVuKRY89jhokhSmQ/YXBWLnmLj9cI08G61RTZJvdsIcjYUjjTu7NgZlYVK+b2y0fbh11g==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.2.tgz",
+      "integrity": "sha512-Ghyz4RJv4zyXzrUC1B2MLQBbppIB5c4jMZJybX2ebdEQAvryEKp3gq1kBksCNsatKGmEgXul88SETU19sMWcrw==",
       "cpu": [
         "arm64"
       ],
@@ -1799,9 +1825,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.1.tgz",
-      "integrity": "sha512-z9QguKxE3aldvwKHHDg5OlKehasbJBF1lacn5CnN6SlrHbdwokXHFA3nIoO3Bh1Tw7bCgFtdIR4jKlTTn3kBZA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.2.tgz",
+      "integrity": "sha512-7n/PGJOcL2QoptzL42L5xFFfXY5rFxLHnuz1foU+4ruUTG8x2IebGhtwVTpaDN8ShEv2UZObBlT1rrXTba15Zw==",
       "cpu": [
         "x64"
       ],
@@ -1816,9 +1842,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.1.tgz",
-      "integrity": "sha512-yS2FHA8E4YeiPG9YeYk/6mKiCWuXR5RdYlCmtlGzKcjWbI4GXUVe7+p9C0M6myRt3zdj3M1knmJxk52MQA9EZQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.2.tgz",
+      "integrity": "sha512-ZUQVCfRJ9wimuxkStRSlLwqX4TEDmv6/J+E6FicGkQ6ssLMWoKDy0cAo93HiWt/TWEee5vFhFaSQYzCuBEGO6A==",
       "cpu": [
         "arm"
       ],
@@ -1833,9 +1859,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.1.tgz",
-      "integrity": "sha512-IFrjDu7+5Y61jLsUqBVXlXutDoPBX10eEeNTjW6C1yzm+cSTE7ayiKXMIFri4gEZ4VpXS6MUgkwjxtDpIXTh+w==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.2.tgz",
+      "integrity": "sha512-GZh3pYBmfnpQ+JIg+TqLuz+pM+Mjsk5VOzi8nwKn/m+GvQBsxD5ectRtxuWUxMGNG8h0lMy4SnHRqdK3/iJl7A==",
       "cpu": [
         "arm64"
       ],
@@ -1850,9 +1876,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.1.tgz",
-      "integrity": "sha512-fKzP9mRQGbhc5QhJPIsqKNNX/jyWrZgBxmo3Nz1SPaepfCUc7RFmtcJQI5q8xAun3XabXjh90wqcY/OVyg2+Kg==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.2.tgz",
+      "integrity": "sha512-5av6VYZZeneiYIodwzGMlnyVakpuYZryGzFIbgu1XP8wVylZxduEzup4eP8atiMDFmIm+s4wn8GySJmYqeJC0A==",
       "cpu": [
         "arm64"
       ],
@@ -1867,9 +1893,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.1.tgz",
-      "integrity": "sha512-ZLjMi138uTJxb+1wzo4cB8mIbJbAsSLWRNeHc1g1pMvkERPWOGlem+LEYkkzaFzCNv1J8aKcL653Vtw8INHQeg==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.2.tgz",
+      "integrity": "sha512-1nO/UfdCLuT/uE/7oB3EZgTeZDCIa6nL72cFEpdegnqpJVNDI6Qb8U4g/4lfVPkmHq2lvxQ0L+n+JdgaZLhrRA==",
       "cpu": [
         "x64"
       ],
@@ -1884,9 +1910,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.1.tgz",
-      "integrity": "sha512-jvSI1IdsIYey5kOITzyajjofXOOySVitmLxb45OPUjoNojql4sDojvlW5zoHXXFePdA6qAX4Y6KbzAOV3T3ctA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.2.tgz",
+      "integrity": "sha512-Ksfrb0Tx310kr+TLiUOvB/I80lyZ3lSOp6cM18zmNRT/92NB4mW8oX2Jo7K4eVEI2JWyaQUAFubDSha2Q+439A==",
       "cpu": [
         "x64"
       ],
@@ -1901,9 +1927,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.1.tgz",
-      "integrity": "sha512-X/FcDtNrDdY9r4FcXHt9QxUqC/2FbQdvZobCKHlHe8vTSKhUHOilWl5EBtkFVfsEs4D5/yAri9e3bJbwyBhhBw==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.2.tgz",
+      "integrity": "sha512-IzUb5RlMUY0r1A9IuJrQ7Tbts1wWb73/zXVXT8VhewbHGoNlBKE0qUhKMED6Tv4wDF+pmbtUJmKXDthytAvLmg==",
       "cpu": [
         "arm64"
       ],
@@ -1918,9 +1944,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.1.tgz",
-      "integrity": "sha512-vfheiWBux8PpC87oy1cshcqzgH7alWYpnVq5jWe7xuVkjqjGGDbBUKuS84eJCdsWcVaB5EXIWLKt+11W3/BOwA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.2.tgz",
+      "integrity": "sha512-kCATEzuY2LP9AlbU2uScjcVhgnCAkRdu62vbce17Ro5kxEHxYWcugkveyBRS3AqZGtwAKYbMAuNloer9LS/hpw==",
       "cpu": [
         "ia32"
       ],
@@ -1935,9 +1961,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.1.tgz",
-      "integrity": "sha512-n3Ppn0LSov/IdlANq+8kxHqENuJRX5XtwQqPgQsgwKIcFq22u17NKfDs9vL5PwRsEHY6Xd67pnOqQX0h4AvbuQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.2.tgz",
+      "integrity": "sha512-iJaHeYCF4jTn7OEKSa3KRiuVFIVYts8jYjNmCdyz1u5g8HRyTDISD76r8+ljEOgm36oviRQvcXaw6LFp1m0yyA==",
       "cpu": [
         "x64"
       ],
@@ -2400,18 +2426,18 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.3.tgz",
-      "integrity": "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg==",
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.6.tgz",
+      "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
       "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
-      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -2431,24 +2457,24 @@
       "license": "MIT"
     },
     "node_modules/@types/validator": {
-      "version": "13.15.6",
-      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.6.tgz",
-      "integrity": "sha512-jc8VD+GfyVLfjVXG9qGq7MPR4UTz6e2fNHI6xmZhZ37f3iZLn0KecpxUnTsHLOPGgf1PfHUZmteBIJVsnYTDkQ==",
+      "version": "13.15.10",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.4.tgz",
-      "integrity": "sha512-R48VhmTJqplNyDxCyqqVkFSZIx1qX6PzwqgcXn1olLrzxcSBDlOsbtcnQuQhNtnNiJ4Xe5gREI1foajYaYU2Vg==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.47.0.tgz",
+      "integrity": "sha512-fe0rz9WJQ5t2iaLfdbDc9T80GJy0AeO453q8C3YCilnGozvOyCG5t+EZtg7j7D88+c3FipfP/x+wzGnh1xp8ZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/type-utils": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
+        "@typescript-eslint/scope-manager": "8.47.0",
+        "@typescript-eslint/type-utils": "8.47.0",
+        "@typescript-eslint/utils": "8.47.0",
+        "@typescript-eslint/visitor-keys": "8.47.0",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -2462,7 +2488,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.46.4",
+        "@typescript-eslint/parser": "^8.47.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -2478,16 +2504,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.4.tgz",
-      "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.47.0.tgz",
+      "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
+        "@typescript-eslint/scope-manager": "8.47.0",
+        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/typescript-estree": "8.47.0",
+        "@typescript-eslint/visitor-keys": "8.47.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2503,14 +2529,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.4.tgz",
-      "integrity": "sha512-nPiRSKuvtTN+no/2N1kt2tUh/HoFzeEgOm9fQ6XQk4/ApGqjx0zFIIaLJ6wooR1HIoozvj2j6vTi/1fgAz7UYQ==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.47.0.tgz",
+      "integrity": "sha512-2X4BX8hUeB5JcA1TQJ7GjcgulXQ+5UkNb0DL8gHsHUHdFoiCTJoYLTpib3LtSDPZsRET5ygN4qqIWrHyYIKERA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.46.4",
-        "@typescript-eslint/types": "^8.46.4",
+        "@typescript-eslint/tsconfig-utils": "^8.47.0",
+        "@typescript-eslint/types": "^8.47.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2525,14 +2551,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.4.tgz",
-      "integrity": "sha512-tMDbLGXb1wC+McN1M6QeDx7P7c0UWO5z9CXqp7J8E+xGcJuUuevWKxuG8j41FoweS3+L41SkyKKkia16jpX7CA==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.47.0.tgz",
+      "integrity": "sha512-a0TTJk4HXMkfpFkL9/WaGTNuv7JWfFTQFJd6zS9dVAjKsojmv9HT55xzbEpnZoY+VUb+YXLMp+ihMLz/UlZfDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4"
+        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/visitor-keys": "8.47.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2543,9 +2569,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.4.tgz",
-      "integrity": "sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.47.0.tgz",
+      "integrity": "sha512-ybUAvjy4ZCL11uryalkKxuT3w3sXJAuWhOoGS3T/Wu+iUu1tGJmk5ytSY8gbdACNARmcYEB0COksD2j6hfGK2g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2560,15 +2586,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.4.tgz",
-      "integrity": "sha512-V4QC8h3fdT5Wro6vANk6eojqfbv5bpwHuMsBcJUJkqs2z5XnYhJzyz9Y02eUmF9u3PgXEUiOt4w4KHR3P+z0PQ==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.47.0.tgz",
+      "integrity": "sha512-QC9RiCmZ2HmIdCEvhd1aJELBlD93ErziOXXlHEZyuBo3tBiAZieya0HLIxp+DoDWlsQqDawyKuNEhORyku+P8A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4",
+        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/typescript-estree": "8.47.0",
+        "@typescript-eslint/utils": "8.47.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -2585,9 +2611,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.4.tgz",
-      "integrity": "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.47.0.tgz",
+      "integrity": "sha512-nHAE6bMKsizhA2uuYZbEbmp5z2UpffNrPEqiKIeN7VsV6UY/roxanWfoRrf6x/k9+Obf+GQdkm0nPU+vnMXo9A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2599,16 +2625,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.4.tgz",
-      "integrity": "sha512-7oV2qEOr1d4NWNmpXLR35LvCfOkTNymY9oyW+lUHkmCno7aOmIf/hMaydnJBUTBMRCOGZh8YjkFOc8dadEoNGA==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.47.0.tgz",
+      "integrity": "sha512-k6ti9UepJf5NpzCjH31hQNLHQWupTRPhZ+KFF8WtTuTpy7uHPfeg2NM7cP27aCGajoEplxJDFVCEm9TGPYyiVg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.46.4",
-        "@typescript-eslint/tsconfig-utils": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/visitor-keys": "8.46.4",
+        "@typescript-eslint/project-service": "8.47.0",
+        "@typescript-eslint/tsconfig-utils": "8.47.0",
+        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/visitor-keys": "8.47.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -2654,16 +2680,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.4.tgz",
-      "integrity": "sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.47.0.tgz",
+      "integrity": "sha512-g7XrNf25iL4TJOiPqatNuaChyqt49a/onq5YsJ9+hXeugK+41LVg7AxikMfM02PC6jbNtZLCJj6AUcQXJS/jGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.46.4",
-        "@typescript-eslint/types": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4"
+        "@typescript-eslint/scope-manager": "8.47.0",
+        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/typescript-estree": "8.47.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2678,13 +2704,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.4.tgz",
-      "integrity": "sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.47.0.tgz",
+      "integrity": "sha512-SIV3/6eftCy1bNzCQoPmbWsRLujS8t5iDIZ4spZOBHqrM+yfX2ogg8Tt3PDTAVKw3sSCiUgg30uOAvK2r9zGjQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/types": "8.47.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2721,13 +2747,13 @@
       }
     },
     "node_modules/@vitejs/plugin-react-swc": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.2.1.tgz",
-      "integrity": "sha512-SIZ/XxeS2naLw4L2vVvpTyujM2OY+Rf+y6nWETqfoBrZpI3SFdyNJof3nQ8HbLhXJ1Eh9e9c0JGYC8GYPhLkCw==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.2.2.tgz",
+      "integrity": "sha512-x+rE6tsxq/gxrEJN3Nv3dIV60lFflPj94c90b+NNo6n1QV1QQUTLoL0MpaOVasUZ0zqVBn7ead1B5ecx1JAGfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rolldown/pluginutils": "1.0.0-beta.46",
+        "@rolldown/pluginutils": "1.0.0-beta.47",
         "@swc/core": "^1.13.5"
       },
       "engines": {
@@ -3093,9 +3119,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.26",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.26.tgz",
-      "integrity": "sha512-73lC1ugzwoaWCLJ1LvOgrR5xsMLTqSKIEoMHVtL9E/HNk0PXtTM76ZIm84856/SF7Nv8mPZxKoBsgpm0tR1u1Q==",
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.29.tgz",
+      "integrity": "sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3221,9 +3247,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001754",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
-      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
+      "version": "1.0.30001756",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz",
+      "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==",
       "dev": true,
       "funding": [
         {
@@ -3381,9 +3407,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/cva": {
@@ -3708,9 +3734,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.250",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
-      "integrity": "sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==",
+      "version": "1.5.258",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.258.tgz",
+      "integrity": "sha512-rHUggNV5jKQ0sSdWwlaRDkFc3/rRJIVnOSe9yR4zrR07m3ZxhP4N27Hlg8VeJGGYgFTxK5NqDmWI4DSH72vIJg==",
       "dev": true,
       "license": "ISC"
     },
@@ -3906,9 +3932,9 @@
       }
     },
     "node_modules/es-toolkit": {
-      "version": "1.41.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.41.0.tgz",
-      "integrity": "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.42.0.tgz",
+      "integrity": "sha512-SLHIyY7VfDJBM8clz4+T2oquwTQxEzu263AyhVK4jREOAwJ+8eebaa4wM3nlvnAqhDrMm2EsA6hWHaQsMPQ1nA==",
       "license": "MIT",
       "workspaces": [
         "docs",
@@ -4337,6 +4363,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
@@ -5539,9 +5578,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6602,9 +6641,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.66.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
-      "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
+      "version": "7.66.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.1.tgz",
+      "integrity": "sha512-2KnjpgG2Rhbi+CIiIBQQ9Df6sMGH5ExNyFl4Hw9qO7pIqMBR8Bvu9RQyjl3JM4vehzCh9soiNUM/xYMswb2EiA==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -6674,9 +6713,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz",
-      "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.6.tgz",
+      "integrity": "sha512-Y1tUp8clYRXpfPITyuifmSoE2vncSME18uVLgaqyxh9H35JWpIfzHo+9y3Fzh5odk/jxPW29IgLgzcdwxGqyNA==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -6696,9 +6735,9 @@
       }
     },
     "node_modules/react-simple-keyboard": {
-      "version": "3.8.133",
-      "resolved": "https://registry.npmjs.org/react-simple-keyboard/-/react-simple-keyboard-3.8.133.tgz",
-      "integrity": "sha512-py0LmHqv5BDCB7rLr2JTZAQr8xQkuF/Iv3D2tfnJrCBCqnmE0ICQKUaS44/Xrw5bugYdf2532Szrn953NYzfJg==",
+      "version": "3.8.136",
+      "resolved": "https://registry.npmjs.org/react-simple-keyboard/-/react-simple-keyboard-3.8.136.tgz",
+      "integrity": "sha512-zuyRXzDd4k8+ksl03SfNeky4W67s/p3VYlE39C6WEqENUdwTaJpcjmZpSNElJ438nBm8yRXQPCqniX+hPAnqkA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -6858,9 +6897,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.53.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.2.tgz",
-      "integrity": "sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g==",
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -6873,28 +6912,28 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.53.2",
-        "@rollup/rollup-android-arm64": "4.53.2",
-        "@rollup/rollup-darwin-arm64": "4.53.2",
-        "@rollup/rollup-darwin-x64": "4.53.2",
-        "@rollup/rollup-freebsd-arm64": "4.53.2",
-        "@rollup/rollup-freebsd-x64": "4.53.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.53.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.53.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.53.2",
-        "@rollup/rollup-linux-arm64-musl": "4.53.2",
-        "@rollup/rollup-linux-loong64-gnu": "4.53.2",
-        "@rollup/rollup-linux-ppc64-gnu": "4.53.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.53.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.53.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.53.2",
-        "@rollup/rollup-linux-x64-gnu": "4.53.2",
-        "@rollup/rollup-linux-x64-musl": "4.53.2",
-        "@rollup/rollup-openharmony-arm64": "4.53.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.53.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.53.2",
-        "@rollup/rollup-win32-x64-gnu": "4.53.2",
-        "@rollup/rollup-win32-x64-msvc": "4.53.2",
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
+        "@rollup/rollup-android-arm64": "4.53.3",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
+        "@rollup/rollup-darwin-x64": "4.53.3",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -7620,16 +7659,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.46.4",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.46.4.tgz",
-      "integrity": "sha512-KALyxkpYV5Ix7UhvjTwJXZv76VWsHG+NjNlt/z+a17SOQSiOcBdUXdbJdyXi7RPxrBFECtFOiPwUJQusJuCqrg==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.47.0.tgz",
+      "integrity": "sha512-Lwe8i2XQ3WoMjua/r1PHrCTpkubPYJCAfOurtn+mtTzqB6jNd+14n9UN1bJ4s3F49x9ixAm0FLflB/JzQ57M8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.46.4",
-        "@typescript-eslint/parser": "8.46.4",
-        "@typescript-eslint/typescript-estree": "8.46.4",
-        "@typescript-eslint/utils": "8.46.4"
+        "@typescript-eslint/eslint-plugin": "8.47.0",
+        "@typescript-eslint/parser": "8.47.0",
+        "@typescript-eslint/typescript-estree": "8.47.0",
+        "@typescript-eslint/utils": "8.47.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
diff --git a/ui/package.json b/ui/package.json
index 632b0377..ce3df894 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.11.11.1900",
+  "version": "2025.11.20.0300",
   "type": "module",
   "engines": {
     "node": "^22.21.1"
@@ -47,11 +47,11 @@
     "react": "^19.2.0",
     "react-animate-height": "^3.2.3",
     "react-dom": "^19.2.0",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
-    "react-router": "^7.9.5",
-    "react-simple-keyboard": "^3.8.133",
+    "react-router": "^7.9.6",
+    "react-simple-keyboard": "^3.8.136",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
     "recharts": "^3.4.1",
@@ -61,11 +61,11 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.1",
     "@inlang/cli": "^3.0.12",
-    "@inlang/paraglide-js": "^2.4.0",
+    "@inlang/paraglide-js": "^2.5.0",
     "@inlang/plugin-m-function-matcher": "^2.1.0",
     "@inlang/plugin-message-format": "^4.0.0",
     "@inlang/sdk": "^2.4.9",
@@ -73,13 +73,13 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
-    "@types/react": "^19.2.3",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
-    "@types/validator": "^13.15.5",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@vitejs/plugin-react-swc": "^4.2.1",
+    "@types/validator": "^13.15.10",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
     "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
@@ -95,7 +95,7 @@
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4",
+    "typescript-eslint": "^8.47.0",
     "vite": "^7.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   }
diff --git a/ui/src/components/ActionBar.tsx b/ui/src/components/ActionBar.tsx
index 3a6a283d..36484519 100644
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@@ -6,12 +6,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
 
 import { cx } from "@/cva.config";
-import {
-  useHidStore,
-  useMountMediaStore,
-  useSettingsStore,
-  useUiStore,
-} from "@hooks/stores";
+import { useHidStore, useMountMediaStore, useSettingsStore, useUiStore } from "@hooks/stores";
 import { useDeviceUiNavigation } from "@hooks/useAppNavigation";
 import { Button } from "@components/Button";
 import Container from "@components/Container";
@@ -28,7 +23,8 @@ export default function Actionbar({
 }) {
   const { navigateTo } = useDeviceUiNavigation();
   const { isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } = useHidStore();
-  const { setDisableVideoFocusTrap, terminalType, setTerminalType, toggleSidebarView } = useUiStore();
+  const { setDisableVideoFocusTrap, terminalType, setTerminalType, toggleSidebarView } =
+    useUiStore();
   const { remoteVirtualMediaState } = useMountMediaStore();
   const { developerMode } = useSettingsStore();
 
@@ -246,10 +242,7 @@ export default function Actionbar({
               theme="light"
               text={m.action_bar_connection_stats()}
               LeadingIcon={({ className }) => (
-                <LuSignal
-                  className={cx(className, "mb-0.5 text-green-500")}
-                  strokeWidth={4}
-                />
+                <LuSignal className={cx(className, "mb-0.5 text-green-500")} strokeWidth={4} />
               )}
               onClick={() => {
                 toggleSidebarView("connection-stats");
@@ -264,7 +257,7 @@ export default function Actionbar({
               LeadingIcon={LuSettings}
               onClick={() => {
                 setDisableVideoFocusTrap(true);
-                navigateTo("/settings")
+                navigateTo("/settings");
               }}
             />
           </div>
diff --git a/ui/src/components/AuthLayout.tsx b/ui/src/components/AuthLayout.tsx
index 7d66e95c..863000ec 100644
--- a/ui/src/components/AuthLayout.tsx
+++ b/ui/src/components/AuthLayout.tsx
@@ -55,9 +55,7 @@ export default function AuthLayout({
                 </div>
               ) : null}
               <div className="space-y-2 text-center">
-                <h1 className="text-4xl font-semibold text-black dark:text-white">
-                  {title}
-                </h1>
+                <h1 className="text-4xl font-semibold text-black dark:text-white">{title}</h1>
                 <p className="text-slate-600 dark:text-slate-400">{description}</p>
               </div>
 
@@ -65,12 +63,8 @@ export default function AuthLayout({
                 <div className="mx-auto max-w-sm space-y-4">
                   <form action={`${CLOUD_API}/oidc/google`} method="POST">
                     {/*This could be the KVM ID*/}
-                    {deviceId ? (
-                      <input type="hidden" name="deviceId" value={deviceId} />
-                    ) : null}
-                    {returnTo ? (
-                      <input type="hidden" name="returnTo" value={returnTo} />
-                    ) : null}
+                    {deviceId ? <input type="hidden" name="deviceId" value={deviceId} /> : null}
+                    {returnTo ? <input type="hidden" name="returnTo" value={returnTo} /> : null}
                     <Button
                       size="LG"
                       theme="light"
@@ -80,8 +74,7 @@ export default function AuthLayout({
                       textAlign="center"
                       type="submit"
                       loading={
-                        (navigation.state === "submitting" ||
-                          navigation.state === "loading") &&
+                        (navigation.state === "submitting" || navigation.state === "loading") &&
                         navigation.formMethod?.toLowerCase() === "post" &&
                         navigation.formAction?.includes("auth/google")
                       }
diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
index 6ae358f2..358a706a 100644
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -16,7 +16,7 @@ const sizes = {
 const themes = {
   primary: cx(
     // Base styles
-    "bg-blue-700 dark:border-blue-600 border border-blue-900/60 text-white shadow-sm",
+    "border border-blue-900/60 bg-blue-700 text-white shadow-sm dark:border-blue-600",
     // Hover states
     "group-hover:bg-blue-800",
     // Active states
@@ -24,9 +24,9 @@ const themes = {
   ),
   danger: cx(
     // Base styles
-    "bg-red-600 text-white border-red-700 shadow-xs shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
+    "border-red-700 bg-red-600 text-white shadow-xs shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
     // Hover states
-    "group-hover:bg-red-700 group-hover:border-red-800 dark:group-hover:bg-red-700 dark:group-hover:border-red-600",
+    "group-hover:border-red-800 group-hover:bg-red-700 dark:group-hover:border-red-600 dark:group-hover:bg-red-700",
     // Active states
     "group-active:bg-red-800 dark:group-active:bg-red-800",
     // Focus states
@@ -34,7 +34,7 @@ const themes = {
   ),
   light: cx(
     // Base styles
-    "bg-white text-black border-slate-800/30 shadow-xs dark:bg-slate-800 dark:border-slate-300/20 dark:text-white",
+    "border-slate-800/30 bg-white text-black shadow-xs dark:border-slate-300/20 dark:bg-slate-800 dark:text-white",
     // Hover states
     "group-hover:bg-blue-50/80 dark:group-hover:bg-slate-700",
     // Active states
@@ -44,7 +44,7 @@ const themes = {
   ),
   lightDanger: cx(
     // Base styles
-    "bg-white text-black border-red-400/60 shadow-xs",
+    "border-red-400/60 bg-white text-black shadow-xs",
     // Hover states
     "group-hover:bg-red-50/80",
     // Active states
@@ -54,9 +54,9 @@ const themes = {
   ),
   blank: cx(
     // Base styles
-    "bg-white/0 text-black border-transparent dark:text-white",
+    "border-transparent bg-white/0 text-black dark:text-white",
     // Hover states
-    "group-hover:bg-white group-hover:border-slate-800/30 group-hover:shadow-sm dark:group-hover:bg-slate-700 dark:group-hover:border-slate-600",
+    "group-hover:border-slate-800/30 group-hover:bg-white group-hover:shadow-sm dark:group-hover:border-slate-600 dark:group-hover:bg-slate-700",
     // Active states
     "group-active:bg-slate-100/80",
   ),
@@ -65,16 +65,16 @@ const themes = {
 const btnVariants = cva({
   base: cx(
     // Base styles
-    "border rounded-sm select-none",
+    "rounded-sm border select-none",
     // Size classes
-    "justify-center items-center shrink-0",
+    "shrink-0 items-center justify-center",
     // Transition classes
     "outline-hidden transition-all duration-200",
     // Text classes
-    "font-display text-center font-medium leading-tight",
+    "text-center font-display leading-tight font-medium",
     // States
-    "group-focus:outline-hidden group-focus:ring-2 group-focus:ring-offset-2 group-focus:ring-blue-700",
-    "group-disabled:opacity-50 group-disabled:pointer-events-none",
+    "group-focus:ring-2 group-focus:ring-blue-700 group-focus:ring-offset-2 group-focus:outline-hidden",
+    "group-disabled:pointer-events-none group-disabled:opacity-50",
   ),
 
   variants: {
@@ -115,8 +115,7 @@ interface ButtonContentPropsType {
 }
 
 function ButtonContent(props: ButtonContentPropsType) {
-  const { text, LeadingIcon, TrailingIcon, fullWidth, className, textAlign, loading } =
-    props;
+  const { text, LeadingIcon, TrailingIcon, fullWidth, className, textAlign, loading } = props;
 
   // Based on the size prop, we'll use the corresponding variant classnames
   const iconClassName = iconVariants(props);
@@ -136,9 +135,7 @@ function ButtonContent(props: ButtonContentPropsType) {
             <LoadingSpinner className={cx(iconClassName, "animate-spin")} />
           </div>
         ) : (
-          LeadingIcon && (
-            <LeadingIcon className={cx(iconClassName, "shrink-0 justify-start")} />
-          )
+          LeadingIcon && <LeadingIcon className={cx(iconClassName, "shrink-0 justify-start")} />
         )}
 
         {text && typeof text === "string" ? (
@@ -147,9 +144,7 @@ function ButtonContent(props: ButtonContentPropsType) {
           text
         )}
 
-        {TrailingIcon && (
-          <TrailingIcon className={cx(iconClassName, "shrink-0 justify-end")} />
-        )}
+        {TrailingIcon && <TrailingIcon className={cx(iconClassName, "shrink-0 justify-end")} />}
       </div>
     </div>
   );
@@ -175,7 +170,7 @@ type ButtonPropsType = Pick<
 export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
   ({ type, disabled, onClick, formNoValidate, loading, fetcher, ...props }, ref) => {
     const classes = cx(
-      "group outline-hidden cursor-pointer",
+      "group cursor-pointer outline-hidden",
       props.fullWidth ? "w-full" : "",
       loading ? "pointer-events-none" : "",
     );
@@ -212,7 +207,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
 Button.displayName = "Button";
 
 type LinkPropsType = Pick<LinkProps, "to"> &
-  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean, reloadDocument?: boolean };
+  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean; reloadDocument?: boolean };
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
   const classes = cx(
     "group outline-hidden",
@@ -241,7 +236,7 @@ type LabelPropsType = Pick<HTMLLabelElement, "htmlFor"> &
   React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LabelButton = ({ htmlFor, ...props }: LabelPropsType) => {
   const classes = cx(
-    "group outline-hidden block cursor-pointer",
+    "group block cursor-pointer outline-hidden",
     props.disabled ? "pointer-events-none opacity-70!" : "",
     props.fullWidth ? "w-full" : "",
     props.loading ? "pointer-events-none" : "",
diff --git a/ui/src/components/CardHeader.tsx b/ui/src/components/CardHeader.tsx
index c9ed3ce0..218e3629 100644
--- a/ui/src/components/CardHeader.tsx
+++ b/ui/src/components/CardHeader.tsx
@@ -8,10 +8,12 @@ interface Props {
 
 export const CardHeader = ({ headline, description, Button }: Props) => {
   return (
-    <div className="flex items-center justify-between pb-0 gap-x-4">
-      <div className="space-y-1 grow">
-        <h3 className="text-lg font-bold leading-none text-black dark:text-white">{headline}</h3>
-        {description && <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>}
+    <div className="flex items-center justify-between gap-x-4 pb-0">
+      <div className="grow space-y-1">
+        <h3 className="text-lg leading-none font-bold text-black dark:text-white">{headline}</h3>
+        {description && (
+          <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+        )}
       </div>
       {Button && <div>{Button}</div>}
     </div>
diff --git a/ui/src/components/Checkbox.tsx b/ui/src/components/Checkbox.tsx
index dd987b18..e01e9077 100644
--- a/ui/src/components/Checkbox.tsx
+++ b/ui/src/components/Checkbox.tsx
@@ -15,7 +15,7 @@ const checkboxVariants = cva({
     "form-checkbox block rounded",
 
     // Colors
-    "border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 checked:accent-blue-700 checked:dark:accent-blue-500 transition-colors",
+    "border-slate-300 bg-slate-50 transition-colors checked:accent-blue-700 dark:border-slate-600 dark:bg-slate-800 checked:dark:accent-blue-500",
 
     // Hover
     "hover:bg-slate-200/50 dark:hover:bg-slate-700/50",
@@ -24,7 +24,7 @@ const checkboxVariants = cva({
     "active:bg-slate-200 dark:active:bg-slate-700",
 
     // Focus
-    "focus:border-slate-300 dark:focus:border-slate-600 focus:outline-hidden focus:ring-2 focus:ring-blue-700 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900",
+    "focus:border-slate-300 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:outline-hidden dark:focus:border-slate-600 dark:focus:ring-blue-500 dark:focus:ring-offset-slate-900",
 
     // Disabled
     "disabled:pointer-events-none disabled:opacity-30",
@@ -41,9 +41,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>(function Checkbox(
   ref,
 ) {
   const classes = checkboxVariants({ size });
-  return (
-    <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />
-  );
+  return <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />;
 });
 Checkbox.displayName = "Checkbox";
 
diff --git a/ui/src/components/Combobox.tsx b/ui/src/components/Combobox.tsx
index fe8007a3..a85b2c64 100644
--- a/ui/src/components/Combobox.tsx
+++ b/ui/src/components/Combobox.tsx
@@ -74,11 +74,11 @@ export function Combobox({
                 "dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 dark:active:bg-slate-800/60",
 
                 // Focus
-                "focus:outline-blue-600 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 dark:focus:outline-blue-500 dark:focus:ring-blue-500",
+                "focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:outline-blue-600 dark:focus:ring-blue-500 dark:focus:outline-blue-500",
 
                 // Disabled
                 disabled &&
-                "pointer-events-none select-none bg-slate-50 text-slate-500/80 disabled:hover:bg-white dark:bg-slate-800 dark:text-slate-400/80 dark:disabled:hover:bg-slate-800",
+                  "pointer-events-none bg-slate-50 text-slate-500/80 select-none disabled:hover:bg-white dark:bg-slate-800 dark:text-slate-400/80 dark:disabled:hover:bg-slate-800",
               )}
               placeholder={disabled ? disabledMessage : placeholder}
               displayValue={displayValue}
@@ -95,7 +95,7 @@ export function Combobox({
                   value={option}
                   className={clsx(
                     // General styling
-                    "cursor-default select-none px-4 py-2",
+                    "cursor-default px-4 py-2 select-none",
 
                     // Hover and active states
                     "hover:bg-blue-50/80 ui-active:bg-blue-50/80 ui-active:text-blue-900",
diff --git a/ui/src/components/ConfirmDialog.tsx b/ui/src/components/ConfirmDialog.tsx
index bbe34e14..264a2057 100644
--- a/ui/src/components/ConfirmDialog.tsx
+++ b/ui/src/components/ConfirmDialog.tsx
@@ -77,14 +77,13 @@ export function ConfirmDialog({
           <div className="pointer-events-auto relative w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900">
             <div className="p-6">
               <div className="flex items-start gap-3.5">
-                <Icon aria-hidden="true" className={cx("size-[18px] shrink-0 mt-[2px]", iconClass)} />
-                <div className="flex-1 min-w-0 space-y-2">
-                  <h2 className="font-semibold text-slate-950 dark:text-white">
-                    {title}
-                  </h2>
-                  <div className="text-sm text-slate-700 dark:text-slate-300">
-                    {description}
-                  </div>
+                <Icon
+                  aria-hidden="true"
+                  className={cx("mt-[2px] size-[18px] shrink-0", iconClass)}
+                />
+                <div className="min-w-0 flex-1 space-y-2">
+                  <h2 className="font-semibold text-slate-950 dark:text-white">{title}</h2>
+                  <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
                 </div>
               </div>
 
diff --git a/ui/src/components/Container.tsx b/ui/src/components/Container.tsx
index a759ca5a..114ad969 100644
--- a/ui/src/components/Container.tsx
+++ b/ui/src/components/Container.tsx
@@ -4,7 +4,7 @@ import React, { ReactNode } from "react";
 import { cx } from "@/cva.config";
 
 function Container({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={cx("mx-auto h-full w-full px-8 ", className)}>{children}</div>;
+  return <div className={cx("mx-auto h-full w-full px-8", className)}>{children}</div>;
 }
 
 function Article({ children }: { children: React.ReactNode }) {
diff --git a/ui/src/components/DhcpLeaseCard.tsx b/ui/src/components/DhcpLeaseCard.tsx
index 0a8fb99b..1143b0ae 100644
--- a/ui/src/components/DhcpLeaseCard.tsx
+++ b/ui/src/components/DhcpLeaseCard.tsx
@@ -7,7 +7,6 @@ import { LifeTimeLabel } from "@routes/devices.$id.settings.network";
 import { NetworkState } from "@hooks/stores";
 import { m } from "@localizations/messages.js";
 
-
 export default function DhcpLeaseCard({
   networkState,
   setShowRenewLeaseConfirm,
@@ -54,10 +53,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.ip_address()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.ip}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.ip}</span>
                 </div>
               )}
 
@@ -65,10 +63,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.subnet_mask()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.netmask}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.netmask}</span>
                 </div>
               )}
 
@@ -76,7 +73,8 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dns_servers()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-right text-sm font-medium">
                     {networkState?.dhcp_lease?.dns_servers.map(dns => (
                       <div key={dns}>{dns}</div>
@@ -89,10 +87,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_broadcast()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.broadcast}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.broadcast}</span>
                 </div>
               )}
 
@@ -100,10 +97,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_domain()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.domain}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.domain}</span>
                 </div>
               )}
 
@@ -112,7 +108,8 @@ export default function DhcpLeaseCard({
                   <div className="flex justify-between gap-x-8 border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                     <div className="w-full grow text-sm text-slate-600 dark:text-slate-400">
                       {m.ntp_servers()}
-                    </div>&nbsp;
+                    </div>
+                    &nbsp;
                     <div className="shrink text-right text-sm font-medium">
                       {networkState?.dhcp_lease?.ntp_servers.map(server => (
                         <div key={server}>{server}</div>
@@ -125,10 +122,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_hostname()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.hostname}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.hostname}</span>
                 </div>
               )}
             </div>
@@ -139,7 +135,8 @@ export default function DhcpLeaseCard({
                   <div className="flex justify-between pt-2">
                     <span className="text-sm text-slate-600 dark:text-slate-400">
                       {m.dhcp_lease_gateway()}
-                    </span>&nbsp;
+                    </span>
+                    &nbsp;
                     <span className="text-right text-sm font-medium">
                       {networkState?.dhcp_lease?.routers.map(router => (
                         <div key={router}>{router}</div>
@@ -152,10 +149,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_server()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.server_id}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.server_id}</span>
                 </div>
               )}
 
@@ -163,11 +159,10 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_lease_expires()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-sm font-medium">
-                    <LifeTimeLabel
-                      lifetime={`${networkState?.dhcp_lease?.lease_expiry}`}
-                    />
+                    <LifeTimeLabel lifetime={`${networkState?.dhcp_lease?.lease_expiry}`} />
                   </span>
                 </div>
               )}
@@ -176,10 +171,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_broadcast()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.broadcast}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.broadcast}</span>
                 </div>
               )}
 
@@ -187,10 +181,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_maximum_transfer_unit()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.mtu}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.mtu}</span>
                 </div>
               )}
 
@@ -198,10 +191,9 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_time_to_live()}
-                  </span>&nbsp;
-                  <span className="text-sm font-medium">
-                    {networkState?.dhcp_lease?.ttl}
                   </span>
+                  &nbsp;
+                  <span className="text-sm font-medium">{networkState?.dhcp_lease?.ttl}</span>
                 </div>
               )}
 
@@ -209,7 +201,8 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_boot_next_server()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-sm font-medium">
                     {networkState?.dhcp_lease?.bootp_next_server}
                   </span>
@@ -220,7 +213,8 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_boot_server_name()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-sm font-medium">
                     {networkState?.dhcp_lease?.bootp_server_name}
                   </span>
@@ -231,7 +225,8 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.dhcp_lease_boot_file()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-sm font-medium">
                     {networkState?.dhcp_lease?.bootp_file}
                   </span>
@@ -242,7 +237,8 @@ export default function DhcpLeaseCard({
                 <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
                   <span className="text-sm text-slate-600 dark:text-slate-400">
                     {m.network_dhcp_client_title()}
-                  </span>&nbsp;
+                  </span>
+                  &nbsp;
                   <span className="text-sm font-medium">
                     {networkState?.dhcp_lease?.dhcp_client}
                   </span>
diff --git a/ui/src/components/EmptyCard.tsx b/ui/src/components/EmptyCard.tsx
index b276e1f1..c6fa4b13 100644
--- a/ui/src/components/EmptyCard.tsx
+++ b/ui/src/components/EmptyCard.tsx
@@ -11,13 +11,7 @@ interface Props {
   className?: string;
 }
 
-export default function EmptyCard({
-  IconElm,
-  headline,
-  description,
-  BtnElm,
-  className,
-}: Props) {
+export default function EmptyCard({ IconElm, headline, description, BtnElm, className }: Props) {
   return (
     <GridCard>
       <div
@@ -28,16 +22,12 @@ export default function EmptyCard({
       >
         <div className="max-w-[90%] space-y-1.5 text-center md:max-w-[60%]">
           <div className="space-y-2">
-            {IconElm && (
-              <IconElm className="mx-auto h-5 w-5 text-blue-600 dark:text-blue-600" />
-            )}
-            <h4 className="text-base font-bold leading-none text-black dark:text-white">
+            {IconElm && <IconElm className="mx-auto h-5 w-5 text-blue-600 dark:text-blue-600" />}
+            <h4 className="text-base leading-none font-bold text-black dark:text-white">
               {headline}
             </h4>
           </div>
-          <p className="mx-auto text-sm text-slate-600 dark:text-slate-400">
-            {description}
-          </p>
+          <p className="mx-auto text-sm text-slate-600 dark:text-slate-400">{description}</p>
         </div>
         {BtnElm}
       </div>
diff --git a/ui/src/components/FailSafeModeBanner.tsx b/ui/src/components/FailSafeModeBanner.tsx
index 04fddc67..5b318dbf 100644
--- a/ui/src/components/FailSafeModeBanner.tsx
+++ b/ui/src/components/FailSafeModeBanner.tsx
@@ -18,13 +18,10 @@ export function FailsafeModeBanner({ reason }: FailsafeModeBannerProps) {
 
   return (
     <Card>
-      <div className="diagonal-stripes flex items-center gap-3 p-4 rounded">
-          <LuTriangleAlert className="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-400" />
-          <p className="text-sm font-medium text-red-800 dark:text-white">
-            {getReasonMessage()}
-          </p>
+      <div className="diagonal-stripes flex items-center gap-3 rounded p-4">
+        <LuTriangleAlert className="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-400" />
+        <p className="text-sm font-medium text-red-800 dark:text-white">{getReasonMessage()}</p>
       </div>
     </Card>
   );
 }
-
diff --git a/ui/src/components/FailSafeModeOverlay.tsx b/ui/src/components/FailSafeModeOverlay.tsx
index eadc5d9d..d519aded 100644
--- a/ui/src/components/FailSafeModeOverlay.tsx
+++ b/ui/src/components/FailSafeModeOverlay.tsx
@@ -14,8 +14,6 @@ import { DOWNGRADE_VERSION } from "@/ui.config";
 
 import { GitHubIcon } from "./Icons";
 
-
-
 interface FailSafeModeOverlayProps {
   reason: string;
 }
@@ -45,13 +43,12 @@ function Tooltip({ children, text, show }: TooltipProps) {
     return <>{children}</>;
   }
 
-
   return (
     <div className="group/tooltip relative">
       {children}
       <div className="pointer-events-none absolute bottom-full left-1/2 mb-2 hidden -translate-x-1/2 opacity-0 transition-opacity group-hover/tooltip:block group-hover/tooltip:opacity-100">
         <Card>
-          <div className="whitespace-nowrap px-2 py-1 text-xs flex items-center gap-1 justify-center">
+          <div className="flex items-center justify-center gap-1 px-2 py-1 text-xs whitespace-nowrap">
             <LuInfo className="h-3 w-3 text-slate-700 dark:text-slate-300" />
             {text}
           </div>
@@ -152,7 +149,7 @@ Please attach the recovery logs file that was downloaded to your computer:
   return (
     <AnimatePresence>
       <motion.div
-        className="aspect-video h-full w-full isolate"
+        className="isolate aspect-video h-full w-full"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0, transition: { duration: 0 } }}
@@ -178,10 +175,12 @@ Please attach the recovery logs file that was downloaded to your computer:
                       size="SM"
                       disabled={isDownloadingLogs}
                       LeadingIcon={GitHubIcon}
-                      text={isDownloadingLogs ? "Downloading Logs..." : "Download Logs & Report Issue"}
+                      text={
+                        isDownloadingLogs ? "Downloading Logs..." : "Download Logs & Report Issue"
+                      }
                     />
 
-                    <div className="h-8 w-px bg-slate-200 dark:bg-slate-700 block" />
+                    <div className="block h-8 w-px bg-slate-200 dark:bg-slate-700" />
                     <Tooltip text="Download logs first" show={!hasDownloadedLogs}>
                       <Button
                         onClick={() => navigateTo("/settings/general/reboot")}
@@ -202,8 +201,6 @@ Please attach the recovery logs file that was downloaded to your computer:
                       />
                     </Tooltip>
                   </div>
-
-
                 </div>
               </div>
             </div>
@@ -213,4 +210,3 @@ Please attach the recovery logs file that was downloaded to your computer:
     </AnimatePresence>
   );
 }
-
diff --git a/ui/src/components/FeatureFlag.tsx b/ui/src/components/FeatureFlag.tsx
index 460571a7..e3d5906f 100644
--- a/ui/src/components/FeatureFlag.tsx
+++ b/ui/src/components/FeatureFlag.tsx
@@ -19,8 +19,8 @@ export function FeatureFlag({
     if (!appVersion) return;
     console.log(
       `Feature '${name}' ${isEnabled ? "ENABLED" : "DISABLED"}: ` +
-      `Current version: ${appVersion}, ` +
-      `Required min version: ${minAppVersion || "N/A"}`,
+        `Current version: ${appVersion}, ` +
+        `Required min version: ${minAppVersion || "N/A"}`,
     );
   }, [isEnabled, name, minAppVersion, appVersion]);
 
diff --git a/ui/src/components/FieldLabel.tsx b/ui/src/components/FieldLabel.tsx
index dc7018d2..7c4d77ae 100644
--- a/ui/src/components/FieldLabel.tsx
+++ b/ui/src/components/FieldLabel.tsx
@@ -9,19 +9,13 @@ interface Props {
   description?: string | React.ReactNode | null;
   disabled?: boolean;
 }
-export default function FieldLabel({
-  label,
-  id,
-  as = "label",
-  description,
-  disabled,
-}: Props) {
+export default function FieldLabel({ label, id, as = "label", description, disabled }: Props) {
   if (as === "label") {
     return (
       <label
         htmlFor={id}
         className={cx(
-          "flex select-none flex-col text-left font-display text-[13px] font-semibold leading-snug text-black dark:text-white",
+          "flex flex-col text-left font-display text-[13px] leading-snug font-semibold text-black select-none dark:text-white",
           disabled && "opacity-50",
         )}
       >
@@ -35,8 +29,8 @@ export default function FieldLabel({
     );
   } else if (as === "span") {
     return (
-      <div className="flex select-none flex-col">
-        <span className="font-display text-[13px] font-semibold leading-snug text-black dark:text-white">
+      <div className="flex flex-col select-none">
+        <span className="font-display text-[13px] leading-snug font-semibold text-black dark:text-white">
           {label}
         </span>
         {description && (
diff --git a/ui/src/components/GridBackground.tsx b/ui/src/components/GridBackground.tsx
index 7b4349eb..d5f93ba0 100644
--- a/ui/src/components/GridBackground.tsx
+++ b/ui/src/components/GridBackground.tsx
@@ -18,11 +18,7 @@ export default function GridBackground() {
           </pattern>
         </defs>
 
-        <svg
-          x="50%"
-          y={-1}
-          className="overflow-visible fill-blue-100 dark:fill-blue-900/30"
-        >
+        <svg x="50%" y={-1} className="overflow-visible fill-blue-100 dark:fill-blue-900/30">
           <path
             d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
             strokeWidth={0}
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 22e456e2..5b1f57a0 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -59,8 +59,8 @@ export default function DashboardNavbar({
         <div className="flex h-14 items-center justify-between">
           <div className="flex shrink-0 items-center gap-x-8">
             <div className="inline-block shrink-0">
-              <img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
-              <img src={LogoWhiteIcon} alt="" className="hidden h-[24px] dark:block" />
+              <img src={LogoBlueIcon} alt="" className="h-6 dark:hidden" />
+              <img src={LogoWhiteIcon} alt="" className="hidden h-6 dark:block" />
             </div>
 
             <div className="flex gap-x-2">
@@ -84,22 +84,16 @@ export default function DashboardNavbar({
                 {showConnectionStatus && (
                   <>
                     <div className="w-[159px]">
-                      <PeerConnectionStatusCard
-                        state={peerConnectionState}
-                        title={kvmName}
-                      />
+                      <PeerConnectionStatusCard state={peerConnectionState} title={kvmName} />
                     </div>
                     <div className="hidden w-[159px] md:block">
-                      <USBStateStatus
-                        state={usbState}
-                        peerConnectionState={peerConnectionState}
-                      />
+                      <USBStateStatus state={usbState} peerConnectionState={peerConnectionState} />
                     </div>
                   </>
                 )}
                 {isLoggedIn ? (
                   <>
-                    <hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
+                    <hr className="h-5 w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
                         <MenuButton as="div" className="h-full">
@@ -111,7 +105,7 @@ export default function DashboardNavbar({
                                 className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
                               />
                             ) : userEmail ? (
-                              <span className="font-display max-w-[200px] truncate text-sm/6 font-semibold">
+                              <span className="max-w-[200px] truncate font-display text-sm/6 font-semibold">
                                 {userEmail}
                               </span>
                             ) : null}
@@ -129,20 +123,15 @@ export default function DashboardNavbar({
                                 <div className="space-y-1 p-1 dark:text-white">
                                   <div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
                                     <div className="p-2">
-                                      <div className="font-display text-xs">
-                                        {m.logged_in_as()}
-                                      </div>
-                                      <div className="font-display max-w-[200px] truncate text-sm font-semibold">
+                                      <div className="font-display text-xs">{m.logged_in_as()}</div>
+                                      <div className="max-w-[200px] truncate font-display text-sm font-semibold">
                                         {userEmail}
                                       </div>
                                     </div>
                                   </div>
                                 </div>
                               )}
-                              <div
-                                className="space-y-1 p-1 dark:text-white"
-                                onClick={onLogout}
-                              >
+                              <div className="space-y-1 p-1 dark:text-white" onClick={onLogout}>
                                 <button className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
                                   <ArrowLeftEndOnRectangleIcon className="size-4" />
                                   <div className="font-display">{m.log_out()}</div>
diff --git a/ui/src/components/InfoBar.tsx b/ui/src/components/InfoBar.tsx
index 2c4eb9e0..12ec142f 100644
--- a/ui/src/components/InfoBar.tsx
+++ b/ui/src/components/InfoBar.tsx
@@ -6,7 +6,7 @@ import {
   useRTCStore,
   useSettingsStore,
   useVideoStore,
-  VideoState
+  VideoState,
 } from "@hooks/stores";
 import { useHidRpc } from "@hooks/useHidRpc";
 import { keys, modifiers } from "@/keyboardMappings";
@@ -48,10 +48,10 @@ export default function InfoBar() {
   }, [keysDownState, showPressedKeys]);
 
   return (
-    <div className="bg-white border-t border-t-slate-800/30 text-slate-800 dark:border-t-slate-300/20 dark:bg-slate-900 dark:text-slate-300">
+    <div className="border-t border-t-slate-800/30 bg-white text-slate-800 dark:border-t-slate-300/20 dark:bg-slate-900 dark:text-slate-300">
       <div className="flex flex-wrap items-stretch justify-between gap-1">
         <div className="flex items-center">
-          <div className="flex flex-wrap items-center pl-2 gap-x-4">
+          <div className="flex flex-wrap items-center gap-x-4 pl-2">
             {debugMode ? (
               <div className="flex">
                 <span className="text-xs font-semibold">{m.info_resolution()}</span>{" "}
@@ -66,18 +66,22 @@ export default function InfoBar() {
               </div>
             ) : null}
 
-            {(debugMode && mouseMode == "absolute") ? (
+            {debugMode && mouseMode == "absolute" ? (
               <div className="flex w-[118px] items-center gap-x-1">
                 <span className="text-xs font-semibold">{m.info_pointer()}</span>
-                <span className="text-xs">{mouseX},{mouseY}</span>
+                <span className="text-xs">
+                  {mouseX},{mouseY}
+                </span>
               </div>
             ) : null}
 
-            {(debugMode && mouseMode == "relative") ? (
+            {debugMode && mouseMode == "relative" ? (
               <div className="flex w-[118px] items-center gap-x-1">
                 <span className="text-xs font-semibold">{m.info_last_move()}</span>
                 <span className="text-xs">
-                  {mouseMove ? `${mouseMove.x},${mouseMove.y} ${mouseMove.buttons ? `(${mouseMove.buttons})` : ""}` : "N/A"}
+                  {mouseMove
+                    ? `${mouseMove.x},${mouseMove.y} ${mouseMove.buttons ? `(${mouseMove.buttons})` : ""}`
+                    : "N/A"}
                 </span>
               </div>
             ) : null}
@@ -119,7 +123,7 @@ export default function InfoBar() {
           </div>
         </div>
 
-        <div className="flex items-center divide-x first:divide-l divide-slate-800/20 dark:divide-slate-300/20">
+        <div className="first:divide-l flex items-center divide-x divide-slate-800/20 dark:divide-slate-300/20">
           {isTurnServerInUse && (
             <div className="shrink-0 p-1 px-1.5 text-xs text-black dark:text-white">
               {m.info_relayed_by_cloudflare()}
diff --git a/ui/src/components/InputField.tsx b/ui/src/components/InputField.tsx
index aed4ce78..c44a44d1 100644
--- a/ui/src/components/InputField.tsx
+++ b/ui/src/components/InputField.tsx
@@ -43,14 +43,18 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
           "[&:has(:user-invalid)]:ring-2 [&:has(:user-invalid)]:ring-red-600 [&:has(:user-invalid)]:ring-offset-2",
 
           // Focus Within
-          "focus-within:border-slate-300 dark:focus-within:border-slate-600 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-blue-700 focus-within:ring-offset-2",
+          "focus-within:border-slate-300 focus-within:ring-2 focus-within:ring-blue-700 focus-within:ring-offset-2 focus-within:outline-hidden dark:focus-within:border-slate-600",
 
           // Disabled Within
-          "disabled-within:pointer-events-none disabled-within:select-none disabled-within:bg-slate-50 dark:disabled-within:bg-slate-800 disabled-within:text-slate-500/80",
+          "disabled-within:pointer-events-none disabled-within:bg-slate-50 disabled-within:text-slate-500/80 disabled-within:select-none dark:disabled-within:bg-slate-800",
         )}
       >
         {LeadingElm && (
-          <div className={clsx("pointer-events-none border-r border-r-slate-300 dark:border-r-slate-600")}>
+          <div
+            className={clsx(
+              "pointer-events-none border-r border-r-slate-300 dark:border-r-slate-600",
+            )}
+          >
             {LeadingElm}
           </div>
         )}
@@ -60,12 +64,12 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
             sizeClasses,
             TrailingElm ? "pr-2" : "",
             className,
-            "block flex-1 border-0 bg-transparent leading-none placeholder:text-sm placeholder:text-slate-300 dark:placeholder:text-slate-500 focus:ring-0 text-black dark:text-white",
+            "block flex-1 border-0 bg-transparent leading-none text-black placeholder:text-sm placeholder:text-slate-300 focus:ring-0 dark:text-white dark:placeholder:text-slate-500",
           )}
           {...props}
         />
         {TrailingElm && (
-          <div className="flex items-center pr-3 pointer-events-none">{TrailingElm}</div>
+          <div className="pointer-events-none flex items-center pr-3">{TrailingElm}</div>
         )}
       </Card>
       {error && <FieldError error={error} />}
@@ -75,15 +79,10 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
 InputField.displayName = "InputField";
 
 const InputFieldWithLabel = forwardRef<HTMLInputElement, InputFieldWithLabelProps>(
-  function InputFieldWithLabel(
-    { label, description, id, ...props },
-    ref: Ref<HTMLInputElement>,
-  ) {
+  function InputFieldWithLabel({ label, description, id, ...props }, ref: Ref<HTMLInputElement>) {
     return (
       <div className="w-full space-y-1">
-        {(label || description) && (
-          <FieldLabel label={label} id={id} description={description} />
-        )}
+        {(label || description) && <FieldLabel label={label} id={id} description={description} />}
         <InputField ref={ref as never} id={id} {...props} />
       </div>
     );
diff --git a/ui/src/components/Ipv6NetworkCard.tsx b/ui/src/components/Ipv6NetworkCard.tsx
index b4db23cf..a2024cde 100644
--- a/ui/src/components/Ipv6NetworkCard.tsx
+++ b/ui/src/components/Ipv6NetworkCard.tsx
@@ -4,16 +4,14 @@ import { GridCard } from "@components/Card";
 import { LifeTimeLabel } from "@routes/devices.$id.settings.network";
 import { m } from "@localizations/messages.js";
 
-export function FlagLabel({ flag, className }: { flag: string, className?: string }) {
+export function FlagLabel({ flag, className }: { flag: string; className?: string }) {
   const classes = cx(
-    "ml-2 rounded-sm bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border",
+    "ml-2 rounded-sm bg-red-500 px-2 py-1 text-[10px] leading-none font-medium text-white dark:border",
     "bg-red-500 text-white dark:border-red-700 dark:bg-red-800 dark:text-red-50",
     className,
   );
 
-  return <span className={classes}>
-    {flag}
-  </span>
+  return <span className={classes}>{flag}</span>;
 }
 
 export default function Ipv6NetworkCard({
@@ -33,28 +31,22 @@ export default function Ipv6NetworkCard({
             <div className="flex flex-col justify-between">
               <span className="text-sm text-slate-600 dark:text-slate-400">
                 {m.ipv6_link_local()}
-              </span>&nbsp;
-              <span className="text-sm font-medium">
-                {networkState?.ipv6_link_local}
               </span>
+              &nbsp;
+              <span className="text-sm font-medium">{networkState?.ipv6_link_local}</span>
             </div>
 
             <div className="flex flex-col justify-between">
-              <span className="text-sm text-slate-600 dark:text-slate-400">
-                {m.ipv6_gateway()}
-              </span>&nbsp;
-              <span className="text-sm font-medium">
-                {networkState?.ipv6_gateway}
-              </span>
+              <span className="text-sm text-slate-600 dark:text-slate-400">{m.ipv6_gateway()}</span>
+              &nbsp;
+              <span className="text-sm font-medium">{networkState?.ipv6_gateway}</span>
             </div>
           </div>
 
           <div className="space-y-3 pt-2">
             {networkState?.ipv6_addresses && networkState?.ipv6_addresses.length > 0 && (
               <div className="space-y-3">
-                <h4 className="text-sm font-semibold">
-                  {m.network_ipv6_addresses_header()}
-                </h4>
+                <h4 className="text-sm font-semibold">{m.network_ipv6_addresses_header()}</h4>
                 {networkState.ipv6_addresses.map(addr => (
                   <div
                     key={addr.address}
@@ -64,12 +56,17 @@ export default function Ipv6NetworkCard({
                       <div className="col-span-2 flex flex-col justify-between">
                         <span className="text-sm text-slate-600 dark:text-slate-400">
                           {m.ipv6_address_label()}
-                        </span>&nbsp;
-                        <span className="text-sm font-medium flex">
+                        </span>
+                        &nbsp;
+                        <span className="flex text-sm font-medium">
                           <span className="flex-1">{addr.address}</span>&nbsp;
-                          <span className="text-sm font-medium flex gap-x-1">
-                            {addr.flag_deprecated ? <FlagLabel flag={m.network_ipv6_flag_deprecated()} /> : null}
-                            {addr.flag_dad_failed ? <FlagLabel flag={m.network_ipv6_flag_dad_failed()} /> : null}
+                          <span className="flex gap-x-1 text-sm font-medium">
+                            {addr.flag_deprecated ? (
+                              <FlagLabel flag={m.network_ipv6_flag_deprecated()} />
+                            ) : null}
+                            {addr.flag_dad_failed ? (
+                              <FlagLabel flag={m.network_ipv6_flag_dad_failed()} />
+                            ) : null}
                           </span>
                         </span>
                       </div>
@@ -78,7 +75,8 @@ export default function Ipv6NetworkCard({
                         <div className="flex flex-col justify-between">
                           <span className="text-sm text-slate-600 dark:text-slate-400">
                             {m.ipv6_valid_lifetime()}
-                          </span>&nbsp;
+                          </span>
+                          &nbsp;
                           <span className="text-sm font-medium">
                             {addr.valid_lifetime === "" ? (
                               <span className="text-slate-400 dark:text-slate-600">
@@ -95,7 +93,8 @@ export default function Ipv6NetworkCard({
                         <div className="flex flex-col justify-between">
                           <span className="text-sm text-slate-600 dark:text-slate-400">
                             {m.ipv6_preferred_lifetime()}
-                          </span>&nbsp;
+                          </span>
+                          &nbsp;
                           <span className="text-sm font-medium">
                             {addr.preferred_lifetime === "" ? (
                               <span className="text-slate-400 dark:text-slate-600">
diff --git a/ui/src/components/JigglerSetting.tsx b/ui/src/components/JigglerSetting.tsx
index ba74e096..92af9402 100644
--- a/ui/src/components/JigglerSetting.tsx
+++ b/ui/src/components/JigglerSetting.tsx
@@ -72,7 +72,9 @@ export function JigglerSetting({
   return (
     <div className="space-y-4">
       <div className="space-y-2">
-        <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{m.jiggler_examples_label()}</h4>
+        <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {m.jiggler_examples_label()}
+        </h4>
         <div className="flex flex-wrap gap-2">
           {exampleConfigs.map((example, index) => (
             <Button
diff --git a/ui/src/components/KvmCard.tsx b/ui/src/components/KvmCard.tsx
index c44fea38..deb9cb23 100644
--- a/ui/src/components/KvmCard.tsx
+++ b/ui/src/components/KvmCard.tsx
@@ -53,12 +53,10 @@ export default function KvmCard({
 }) {
   return (
     <Card>
-      <div className="px-5 py-5 space-y-3">
-        <div className="flex justify-between items-center">
+      <div className="space-y-3 px-5 py-5">
+        <div className="flex items-center justify-between">
           <div className="space-y-1.5">
-            <div className="text-lg font-bold leading-none text-black dark:text-white">
-              {title}
-            </div>
+            <div className="text-lg leading-none font-bold text-black dark:text-white">{title}</div>
 
             {online ? (
               <div className="flex items-center gap-x-1.5">
@@ -67,7 +65,7 @@ export default function KvmCard({
               </div>
             ) : (
               <div className="flex items-center gap-x-1.5">
-                <div className="h-2.5 w-2.5 rounded-full border border-slate-400/60 dark:border-slate-500 bg-slate-200 dark:bg-slate-600" />
+                <div className="h-2.5 w-2.5 rounded-full border border-slate-400/60 bg-slate-200 dark:border-slate-500 dark:bg-slate-600" />
                 <div className="text-sm text-black dark:text-white">
                   {lastSeen ? (
                     <>{m.last_online({ time: getRelativeTimeString(lastSeen) })}</>
@@ -109,14 +107,14 @@ export default function KvmCard({
             ></MenuButton>
             <MenuItems
               transition
-              className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"
+              className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
             >
-              <Card className="absolute right-0 z-10 w-56 px-1 mt-2 transition origin-top-right ring-1 ring-black/50 focus:outline-hidden">
+              <Card className="absolute right-0 z-10 mt-2 w-56 origin-top-right px-1 ring-1 ring-black/50 transition focus:outline-hidden">
                 <div className="divide-y divide-slate-800/20 dark:divide-slate-300/20">
                   <MenuItem>
                     <div>
                       <div className="block w-full">
-                        <div className="flex items-center px-2 my-1 text-sm transition-colors rounded-md gap-x-2 hover:bg-slate-100 dark:hover:bg-slate-700">
+                        <div className="my-1 flex items-center gap-x-2 rounded-md px-2 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
                           <Link
                             className="block w-full py-1.5 text-black dark:text-white"
                             to={`./${id}/rename`}
@@ -130,7 +128,7 @@ export default function KvmCard({
                   <MenuItem>
                     <div>
                       <div className="block w-full">
-                        <div className="flex items-center px-2 my-1 text-sm transition-colors rounded-md gap-x-2 hover:bg-slate-100 dark:hover:bg-slate-700">
+                        <div className="my-1 flex items-center gap-x-2 rounded-md px-2 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
                           <Link
                             className="block w-full py-1.5 text-black dark:text-white"
                             to={`./${id}/deregister`}
diff --git a/ui/src/components/LoadingSpinner.tsx b/ui/src/components/LoadingSpinner.tsx
index 261d755e..7589292d 100644
--- a/ui/src/components/LoadingSpinner.tsx
+++ b/ui/src/components/LoadingSpinner.tsx
@@ -1,25 +1,14 @@
 import clsx from "clsx";
 
-export default function LoadingSpinner({
-  className,
-}: {
-  className: string | undefined;
-}) {
+export default function LoadingSpinner({ className }: { className: string | undefined }) {
   return (
     <svg
-      className={clsx(className, "shrink-0 animate-spin p-[2px]")}
+      className={clsx(className, "shrink-0 animate-spin p-0.5")}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
     >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
       <path
         // className="opacity-75"
         fill="currentColor"
diff --git a/ui/src/components/MacroBar.tsx b/ui/src/components/MacroBar.tsx
index 338bd6f4..63c99b61 100644
--- a/ui/src/components/MacroBar.tsx
+++ b/ui/src/components/MacroBar.tsx
@@ -25,7 +25,7 @@ export default function MacroBar() {
   }
 
   return (
-    <Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
+    <Container className="border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
       <div className="flex items-center gap-x-2 py-1.5">
         <div className="absolute -ml-5">
           <LuCommand className="h-4 w-4 text-slate-500" />
@@ -45,4 +45,4 @@ export default function MacroBar() {
       </div>
     </Container>
   );
-} 
\ No newline at end of file
+}
diff --git a/ui/src/components/MacroForm.tsx b/ui/src/components/MacroForm.tsx
index d592e588..c299e26a 100644
--- a/ui/src/components/MacroForm.tsx
+++ b/ui/src/components/MacroForm.tsx
@@ -8,11 +8,7 @@ import FieldLabel from "@components/FieldLabel";
 import Fieldset from "@components/Fieldset";
 import { InputFieldWithLabel, FieldError } from "@components/InputField";
 import { MacroStepCard } from "@components/MacroStepCard";
-import {
-  DEFAULT_DELAY,
-  MAX_STEPS_PER_MACRO,
-  MAX_KEYS_PER_STEP,
-} from "@/constants/macros";
+import { DEFAULT_DELAY, MAX_STEPS_PER_MACRO, MAX_KEYS_PER_STEP } from "@/constants/macros";
 import { m } from "@localizations/messages.js";
 
 interface ValidationErrors {
@@ -61,8 +57,8 @@ export function MacroForm({
       newErrors.name = m.macro_name_too_long();
     }
 
-    const steps = (macro.steps || []);
-  
+    const steps = macro.steps || [];
+
     if (steps.length) {
       const hasKeyOrModifier = steps.some(
         step => step.keys.length > 0 || step.modifiers.length > 0,
@@ -91,7 +87,9 @@ export function MacroForm({
       await onSubmit(macro);
     } catch (error) {
       if (error instanceof Error) {
-        showTemporaryError(m.macro_save_failed_error({error: error.message || m.unknown_error()}));
+        showTemporaryError(
+          m.macro_save_failed_error({ error: error.message || m.unknown_error() }),
+        );
       } else {
         showTemporaryError(m.macro_save_failed());
       }
@@ -196,13 +194,13 @@ export function MacroForm({
       <div>
         <div className="flex items-center justify-between text-sm">
           <div className="flex items-center gap-1">
-            <FieldLabel
-              label={m.macro_steps_label()}
-              description={m.macro_steps_description()}
-            />
+            <FieldLabel label={m.macro_steps_label()} description={m.macro_steps_description()} />
           </div>
           <span className="text-slate-500 dark:text-slate-400">
-            {m.macro_step_count({ steps: macro.steps?.length || 0, max: MAX_STEPS_PER_MACRO })}
+            {m.macro_step_count({
+              steps: macro.steps?.length || 0,
+              max: MAX_STEPS_PER_MACRO,
+            })}
           </span>
         </div>
         {errors.steps?.[0]?.keys && (
@@ -220,10 +218,10 @@ export function MacroForm({
                 onDelete={
                   macro.steps && macro.steps.length > 1
                     ? () => {
-                      const newSteps = [...(macro.steps || [])];
-                      newSteps.splice(stepIndex, 1);
-                      setMacro(prev => ({ ...prev, steps: newSteps }));
-                    }
+                        const newSteps = [...(macro.steps || [])];
+                        newSteps.splice(stepIndex, 1);
+                        setMacro(prev => ({ ...prev, steps: newSteps }));
+                      }
                     : undefined
                 }
                 onMoveUp={() => handleStepMove(stepIndex, "up")}
@@ -231,9 +229,7 @@ export function MacroForm({
                 onKeySelect={option => handleKeySelect(stepIndex, option)}
                 onKeyQueryChange={query => handleKeyQueryChange(stepIndex, query)}
                 keyQuery={keyQueries[stepIndex] || ""}
-                onModifierChange={modifiers =>
-                  handleModifierChange(stepIndex, modifiers)
-                }
+                onModifierChange={modifiers => handleModifierChange(stepIndex, modifiers)}
                 onDelayChange={delay => handleDelayChange(stepIndex, delay)}
                 isLastStep={stepIndex === (macro.steps?.length || 0) - 1}
                 keyboard={selectedKeyboard}
@@ -248,7 +244,11 @@ export function MacroForm({
             theme="light"
             fullWidth
             LeadingIcon={LuPlus}
-            text={m.macro_add_step({ maxed_out: isMaxStepsReached ? m.macro_max_steps_reached({ max: MAX_STEPS_PER_MACRO }) : "" })}
+            text={m.macro_add_step({
+              maxed_out: isMaxStepsReached
+                ? m.macro_max_steps_reached({ max: MAX_STEPS_PER_MACRO })
+                : "",
+            })}
             onClick={() => {
               if (isMaxStepsReached) {
                 showTemporaryError(m.macro_max_steps_error({ max: MAX_STEPS_PER_MACRO }));
@@ -257,10 +257,7 @@ export function MacroForm({
 
               setMacro(prev => ({
                 ...prev,
-                steps: [
-                  ...(prev.steps || []),
-                  { keys: [], modifiers: [], delay: DEFAULT_DELAY },
-                ],
+                steps: [...(prev.steps || []), { keys: [], modifiers: [], delay: DEFAULT_DELAY }],
               }));
               setErrors({});
             }}
diff --git a/ui/src/components/MacroStepCard.tsx b/ui/src/components/MacroStepCard.tsx
index 26d26912..37927a73 100644
--- a/ui/src/components/MacroStepCard.tsx
+++ b/ui/src/components/MacroStepCard.tsx
@@ -72,7 +72,7 @@ const ensureArray = <T,>(arr: T[] | null | undefined): T[] => {
 };
 
 const keyDisplay = (keyDisplayMap: Record<string, string>, key: string): string => {
-   return keyDisplayMap[key] || key
+  return keyDisplayMap[key] || key;
 };
 
 export function MacroStepCard({
@@ -113,9 +113,7 @@ export function MacroStepCard({
 
   const filteredKeys = useMemo(() => {
     const selectedKeys = ensureArray(step.keys);
-    const availableKeys = keyOptions.filter(
-      option => !selectedKeys.includes(option.value),
-    );
+    const availableKeys = keyOptions.filter(option => !selectedKeys.includes(option.value));
 
     if (keyQuery === "") {
       return availableKeys;
@@ -186,9 +184,7 @@ export function MacroStepCard({
                       key={option.value}
                       size="XS"
                       theme={
-                        ensureArray(step.modifiers).includes(option.value)
-                          ? "primary"
-                          : "light"
+                        ensureArray(step.modifiers).includes(option.value) ? "primary" : "light"
                       }
                       text={option.label.split(" ")[1] || option.label}
                       onClick={() => handleModifierToggle(option.value)}
@@ -221,9 +217,7 @@ export function MacroStepCard({
                     className=""
                     theme="blank"
                     onClick={() => {
-                      const newKeys = step.keys.filter(
-                        (_, i) => i !== keyIndex,
-                      );
+                      const newKeys = step.keys.filter((_, i) => i !== keyIndex);
                       onKeySelect({ value: null, keys: newKeys });
                     }}
                     LeadingIcon={LuX}
diff --git a/ui/src/components/Metric.tsx b/ui/src/components/Metric.tsx
index 8c0c1446..418b1f24 100644
--- a/ui/src/components/Metric.tsx
+++ b/ui/src/components/Metric.tsx
@@ -35,10 +35,7 @@ interface MetricProps<T, K extends keyof T> {
  * @param metrics - Expected to be ordered from oldest to newest.
  * @param metricName - Name of the metric to create a chart array for.
  */
-export function createChartArray<T, K extends keyof T>(
-  metrics: Map<number, T>,
-  metricName: K,
-) {
+export function createChartArray<T, K extends keyof T>(metrics: Map<number, T>, metricName: K) {
   const result: { date: number; metric: number | null }[] = [];
   const iter = metrics.entries();
   let next = iter.next() as IteratorResult<[number, T]>;
@@ -146,12 +143,7 @@ export function Metric<T, K extends keyof T>({
 
   return (
     <div className="space-y-2">
-      <MetricHeader
-        title={title}
-        description={description}
-        badge={badge}
-        badgeTheme={badgeTheme}
-      />
+      <MetricHeader title={title} description={description} badge={badge} badgeTheme={badgeTheme} />
 
       <GridCard>
         <div
diff --git a/ui/src/components/MetricsChart.tsx b/ui/src/components/MetricsChart.tsx
index a774fac5..3635b45d 100644
--- a/ui/src/components/MetricsChart.tsx
+++ b/ui/src/components/MetricsChart.tsx
@@ -10,7 +10,7 @@ import {
   YAxis,
 } from "recharts";
 
-import { getLocale } from '@localizations/runtime.js';
+import { getLocale } from "@localizations/runtime.js";
 import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
 
 export default function MetricsChart({
diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index d9433df9..63b7f7ed 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -18,27 +18,25 @@ const Modal = React.memo(function Modal({
     <Dialog open={open} onClose={onClose} className="relative z-20">
       <DialogBackdrop
         transition
-        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
+        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-slate-900/90"
       />
-      <div className="fixed inset-0 z-20 w-screen overflow-y-auto" style={{
-        scrollbarGutter: 'stable'
-      }}>
+      <div
+        className="fixed inset-0 z-20 w-screen overflow-y-auto"
+        style={{ scrollbarGutter: "stable" }}
+      >
         {/* TODO: This doesn't work well with other-sessions */}
         <div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4">
           <DialogPanel
             transition
             className={cx(
               "pointer-events-none relative w-full md:my-8 md:mt-[10vh]!",
-              "transform transition-all data-closed:translate-y-8 data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in",
+              "transform transition-all data-closed:translate-y-8 data-closed:opacity-0 data-enter:duration-500 data-enter:ease-out data-leave:duration-200 data-leave:ease-in",
               className,
             )}
           >
             <div className="pointer-events-auto inline-block w-full text-left">
               <div className="flex justify-center" onClick={onClose}>
-                <div
-                  className="pointer-events-none w-full"
-                  onClick={e => e.stopPropagation()}
-                >
+                <div className="pointer-events-none w-full" onClick={e => e.stopPropagation()}>
                   {children}
                 </div>
               </div>
diff --git a/ui/src/components/NestedSettingsGroup.tsx b/ui/src/components/NestedSettingsGroup.tsx
index 3ee57b0f..a6863bf4 100644
--- a/ui/src/components/NestedSettingsGroup.tsx
+++ b/ui/src/components/NestedSettingsGroup.tsx
@@ -11,7 +11,7 @@ export function NestedSettingsGroup(props: NestedSettingsGroupProps) {
   return (
     <div
       className={cx(
-        "space-y-4 border-l-2 border-slate-200 ml-2 pl-4 dark:border-slate-700",
+        "ml-2 space-y-4 border-l-2 border-slate-200 pl-4 dark:border-slate-700",
         className,
       )}
     >
@@ -19,4 +19,3 @@ export function NestedSettingsGroup(props: NestedSettingsGroupProps) {
     </div>
   );
 }
-
diff --git a/ui/src/components/PublicIPCard.tsx b/ui/src/components/PublicIPCard.tsx
index 55c1c407..35d7f28d 100644
--- a/ui/src/components/PublicIPCard.tsx
+++ b/ui/src/components/PublicIPCard.tsx
@@ -9,7 +9,6 @@ import { JsonRpcResponse, useJsonRpc } from "@hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { formatters } from "@/utils";
 
-
 const TimeAgoLabel = ({ date }: { date: Date }) => {
   const [timeAgo, setTimeAgo] = useState<string | undefined>(formatters.timeAgo(date));
   useEffect(() => {
@@ -19,11 +18,7 @@ const TimeAgoLabel = ({ date }: { date: Date }) => {
     return () => clearInterval(interval);
   }, [date]);
 
-  return (
-    <span className="text-sm text-slate-600 dark:text-slate-400 select-none">
-      {timeAgo}
-    </span>
-  );
+  return <span className="text-sm text-slate-600 select-none dark:text-slate-400">{timeAgo}</span>;
 };
 
 export default function PublicIPCard() {
@@ -34,19 +29,23 @@ export default function PublicIPCard() {
     send("getPublicIPAddresses", { refresh: true }, (resp: JsonRpcResponse) => {
       setPublicIPs([]);
       if ("error" in resp) {
-        notifications.error(m.public_ip_card_refresh_error({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.public_ip_card_refresh_error({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
       const publicIPs = resp.result as PublicIP[];
       // sort the public IPs by IP address
       // IPv6 addresses are sorted after IPv4 addresses
-      setPublicIPs(publicIPs.sort(({ ip: aIp }, { ip: bIp }) => {
-        const aIsIPv6 = aIp.includes(":");
-        const bIsIPv6 = bIp.includes(":");
-        if (aIsIPv6 && !bIsIPv6) return 1;
-        if (!aIsIPv6 && bIsIPv6) return -1;
-        return aIp.localeCompare(bIp);
-      }));
+      setPublicIPs(
+        publicIPs.sort(({ ip: aIp }, { ip: bIp }) => {
+          const aIsIPv6 = aIp.includes(":");
+          const bIsIPv6 = bIp.includes(":");
+          if (aIsIPv6 && !bIsIPv6) return 1;
+          if (!aIsIPv6 && bIsIPv6) return -1;
+          return aIp.localeCompare(bIp);
+        }),
+      );
     });
   }, [send, setPublicIPs]);
 
@@ -89,10 +88,11 @@ export default function PublicIPCard() {
             <div className="flex gap-x-6 gap-y-2">
               <div className="flex-1 space-y-2">
                 {publicIPs?.map(ip => (
-                  <div key={ip.ip} className="flex justify-between border-slate-800/10 pt-2 dark:border-slate-300/20">
-                    <span className="text-sm font-medium">
-                      {ip.ip}
-                    </span>
+                  <div
+                    key={ip.ip}
+                    className="flex justify-between border-slate-800/10 pt-2 dark:border-slate-300/20"
+                  >
+                    <span className="text-sm font-medium">{ip.ip}</span>
                     {ip.last_updated && <TimeAgoLabel date={new Date(ip.last_updated)} />}
                   </div>
                 ))}
diff --git a/ui/src/components/SelectMenuBasic.tsx b/ui/src/components/SelectMenuBasic.tsx
index 824c80c8..d4703b46 100644
--- a/ui/src/components/SelectMenuBasic.tsx
+++ b/ui/src/components/SelectMenuBasic.tsx
@@ -82,10 +82,10 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
               "invalid:ring-2 invalid:ring-red-600 invalid:ring-offset-2",
 
               // Focus
-              "focus:outline-blue-600 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 dark:focus:outline-blue-500 dark:focus:ring-blue-500",
+              "focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:outline-blue-600 dark:focus:ring-blue-500 dark:focus:outline-blue-500",
 
               // Disabled
-              "disabled:pointer-events-none disabled:select-none disabled:bg-slate-50 disabled:text-slate-500/80 dark:disabled:bg-slate-800 dark:disabled:text-slate-400/80",
+              "disabled:pointer-events-none disabled:bg-slate-50 disabled:text-slate-500/80 disabled:select-none dark:disabled:bg-slate-800 dark:disabled:text-slate-400/80",
             )}
             value={value}
             id={id}
diff --git a/ui/src/components/SettingsItem.tsx b/ui/src/components/SettingsItem.tsx
index e2cd9489..ac68bcf1 100644
--- a/ui/src/components/SettingsItem.tsx
+++ b/ui/src/components/SettingsItem.tsx
@@ -15,17 +15,14 @@ export function SettingsItem(props: SettingsItemProps) {
 
   return (
     <label
-      className={cx(
-        "flex select-none items-center justify-between gap-x-8 rounded",
-        className,
-      )}
+      className={cx("flex items-center justify-between gap-x-8 rounded select-none", className)}
     >
       <div className="space-y-0.5">
         <div className="flex items-center gap-x-2">
           <div className="flex items-center text-base font-semibold text-black dark:text-white">
             {title}
             {badge && (
-              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
+              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] leading-none font-medium text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
                 {badge}
               </span>
             )}
diff --git a/ui/src/components/SettingsNestedSection.tsx b/ui/src/components/SettingsNestedSection.tsx
index 6a4c6880..2461e6bb 100644
--- a/ui/src/components/SettingsNestedSection.tsx
+++ b/ui/src/components/SettingsNestedSection.tsx
@@ -1,8 +1,4 @@
-export default function SettingsNestedSection({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function SettingsNestedSection({ children }: { children: React.ReactNode }) {
   return (
     <div className="ml-2 border-l border-slate-800/30 pl-4 dark:border-slate-300/30">
       {children}
diff --git a/ui/src/components/SettingsPageheader.tsx b/ui/src/components/SettingsPageheader.tsx
index c63344c3..580c57d9 100644
--- a/ui/src/components/SettingsPageheader.tsx
+++ b/ui/src/components/SettingsPageheader.tsx
@@ -18,4 +18,4 @@ export function SettingsPageHeader({
       {action && <div className="">{action}</div>}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/src/components/SidebarHeader.tsx b/ui/src/components/SidebarHeader.tsx
index 674472bd..ecb9eda1 100644
--- a/ui/src/components/SidebarHeader.tsx
+++ b/ui/src/components/SidebarHeader.tsx
@@ -11,9 +11,9 @@ export default function SidebarHeader({
   setSidebarView: (view: AvailableSidebarViews | null) => void;
 }) {
   return (
-    <div className="flex items-center justify-between border-b border-b-slate-800/20 bg-white px-4 py-1.5 font-semibold text-black dark:bg-slate-900 dark:border-b-slate-300/20">
+    <div className="flex items-center justify-between border-b border-b-slate-800/20 bg-white px-4 py-1.5 font-semibold text-black dark:border-b-slate-300/20 dark:bg-slate-900">
       <div className="min-w-0" style={{ flex: 1 }}>
-        <h2 className="text-sm text-black truncate dark:text-white">{title}</h2>
+        <h2 className="truncate text-sm text-black dark:text-white">{title}</h2>
       </div>
       <Button
         size="XS"
diff --git a/ui/src/components/SimpleNavbar.tsx b/ui/src/components/SimpleNavbar.tsx
index 6b140b4c..f66d0492 100644
--- a/ui/src/components/SimpleNavbar.tsx
+++ b/ui/src/components/SimpleNavbar.tsx
@@ -5,16 +5,19 @@ import LogoBlueIcon from "@assets/logo-blue.png";
 import LogoWhiteIcon from "@assets/logo-white.svg";
 import Container from "@components/Container";
 
-interface Props { logoHref?: string; actionElement?: React.ReactNode }
+interface Props {
+  logoHref?: string;
+  actionElement?: React.ReactNode;
+}
 
 export default function SimpleNavbar({ logoHref, actionElement }: Props) {
   return (
     <div>
       <Container>
-        <div className="pb-4 my-4 border-b border-b-800/20 isolate dark:border-b-slate-300/20">
+        <div className="border-b-800/20 isolate my-4 border-b pb-4 dark:border-b-slate-300/20">
           <div className="flex items-center justify-between">
             <Link to={logoHref ?? "/"} className="hidden h-[26px] dark:inline-block">
-              <img src={LogoWhiteIcon} alt="" className="h-[26px] dark:block hidden" />
+              <img src={LogoWhiteIcon} alt="" className="hidden h-[26px] dark:block" />
               <img src={LogoBlueIcon} alt="" className="h-[26px] dark:hidden" />
             </Link>
             <div>{actionElement}</div>
diff --git a/ui/src/components/StaticIpv4Card.tsx b/ui/src/components/StaticIpv4Card.tsx
index 5c66c5be..15da6212 100644
--- a/ui/src/components/StaticIpv4Card.tsx
+++ b/ui/src/components/StaticIpv4Card.tsx
@@ -25,7 +25,7 @@ export default function StaticIpv4Card() {
 
   const ipv4StaticAddress = watch("ipv4_static.address");
   const hideSubnetMask = ipv4StaticAddress?.includes("/");
-  
+
   useEffect(() => {
     const parts = ipv4StaticAddress?.split("/", 2);
     if (parts?.length !== 2) return;
@@ -38,12 +38,13 @@ export default function StaticIpv4Card() {
   }, [ipv4StaticAddress, setValue]);
 
   const ipv4Validation = (value: string) => {
-    if (!validator.isIP(value, 4)) return m.network_ipv4_invalid()
+    if (!validator.isIP(value, 4)) return m.network_ipv4_invalid();
     return true;
   };
 
   const validateIsIPOrCIDR4 = (value: string) => {
-    if (!validator.isIP(value) && !validator.isIPRange(value, 4)) return m.network_ipv4_invalid_cidr();
+    if (!validator.isIP(value) && !validator.isIPRange(value, 4))
+      return m.network_ipv4_invalid_cidr();
     return true;
   };
 
@@ -55,27 +56,35 @@ export default function StaticIpv4Card() {
             {m.network_static_ipv4_header()}
           </h3>
 
-          <div className={cx("grid grid-cols-1 gap-4", hideSubnetMask ? "md:grid-cols-1" : "md:grid-cols-2")}>
+          <div
+            className={cx(
+              "grid grid-cols-1 gap-4",
+              hideSubnetMask ? "md:grid-cols-1" : "md:grid-cols-2",
+            )}
+          >
             <InputFieldWithLabel
               label={m.network_ipv4_address()}
               type="text"
               size="SM"
               placeholder="192.168.1.100"
-              {
-              ...register("ipv4_static.address", {
-                validate: (value: string | undefined) => validateIsIPOrCIDR4(value ?? "")
+              {...register("ipv4_static.address", {
+                validate: (value: string | undefined) => validateIsIPOrCIDR4(value ?? ""),
               })}
               error={formState.errors.ipv4_static?.address?.message}
             />
 
-            {!hideSubnetMask && <InputFieldWithLabel
-              label={m.network_ipv4_netmask()}
-              type="text"
-              size="SM"
-              placeholder="255.255.255.0"
-              {...register("ipv4_static.netmask", { validate: (value: string | undefined) => ipv4Validation(value ?? "") })}
-              error={formState.errors.ipv4_static?.netmask?.message}
-            />}
+            {!hideSubnetMask && (
+              <InputFieldWithLabel
+                label={m.network_ipv4_netmask()}
+                type="text"
+                size="SM"
+                placeholder="255.255.255.0"
+                {...register("ipv4_static.netmask", {
+                  validate: (value: string | undefined) => ipv4Validation(value ?? ""),
+                })}
+                error={formState.errors.ipv4_static?.netmask?.message}
+              />
+            )}
           </div>
 
           <InputFieldWithLabel
@@ -83,7 +92,9 @@ export default function StaticIpv4Card() {
             type="text"
             size="SM"
             placeholder="192.168.1.1"
-            {...register("ipv4_static.gateway", { validate: (value: string | undefined) => ipv4Validation(value ?? "") })}
+            {...register("ipv4_static.gateway", {
+              validate: (value: string | undefined) => ipv4Validation(value ?? ""),
+            })}
             error={formState.errors.ipv4_static?.gateway?.message}
           />
 
@@ -99,10 +110,9 @@ export default function StaticIpv4Card() {
                         type="text"
                         size="SM"
                         placeholder="1.1.1.1"
-                        {...register(
-                          `ipv4_static.dns.${index}`,
-                          { validate: (value: string | undefined) => ipv4Validation(value ?? "") }
-                        )}
+                        {...register(`ipv4_static.dns.${index}`, {
+                          validate: (value: string | undefined) => ipv4Validation(value ?? ""),
+                        })}
                         error={formState.errors.ipv4_static?.dns?.[index]?.message}
                       />
                     </div>
diff --git a/ui/src/components/StaticIpv6Card.tsx b/ui/src/components/StaticIpv6Card.tsx
index e384bc7a..8276a957 100644
--- a/ui/src/components/StaticIpv6Card.tsx
+++ b/ui/src/components/StaticIpv6Card.tsx
@@ -39,7 +39,7 @@ export default function StaticIpv6Card() {
   };
 
   const ipv6Validation = (value: string) => {
-    if (!validator.isIP(value, 6)) return m.network_ipv6_invalid()
+    if (!validator.isIP(value, 6)) return m.network_ipv6_invalid();
     return true;
   };
 
@@ -56,7 +56,9 @@ export default function StaticIpv6Card() {
             type="text"
             size="SM"
             placeholder="2001:db8::1/64"
-            {...register("ipv6_static.prefix", { validate: (value: string | undefined) => cidrValidation(value ?? "") })}
+            {...register("ipv6_static.prefix", {
+              validate: (value: string | undefined) => cidrValidation(value ?? ""),
+            })}
             error={formState.errors.ipv6_static?.prefix?.message}
           />
 
@@ -65,7 +67,9 @@ export default function StaticIpv6Card() {
             type="text"
             size="SM"
             placeholder="2001:db8::1"
-            {...register("ipv6_static.gateway", { validate: (value: string | undefined) => ipv6Validation(value ?? "") })}
+            {...register("ipv6_static.gateway", {
+              validate: (value: string | undefined) => ipv6Validation(value ?? ""),
+            })}
             error={formState.errors.ipv6_static?.gateway?.message}
           />
 
@@ -81,7 +85,9 @@ export default function StaticIpv6Card() {
                         type="text"
                         size="SM"
                         placeholder="2001:4860:4860::8888"
-                        {...register(`ipv6_static.dns.${index}`, { validate: (value: string | undefined) => ipv6Validation(value ?? "") })}
+                        {...register(`ipv6_static.dns.${index}`, {
+                          validate: (value: string | undefined) => ipv6Validation(value ?? ""),
+                        })}
                         error={formState.errors.ipv6_static?.dns?.[index]?.message}
                       />
                     </div>
diff --git a/ui/src/components/StatusCards.tsx b/ui/src/components/StatusCards.tsx
index 8cbe9f38..25a75f51 100644
--- a/ui/src/components/StatusCards.tsx
+++ b/ui/src/components/StatusCards.tsx
@@ -18,7 +18,7 @@ export default function StatusCard({
   statusIndicatorClassName,
 }: Props) {
   return (
-    <div className="flex items-center gap-x-3 rounded-md border bg-white dark:border-slate-600 dark:bg-slate-800 dark:text-white border-slate-800/20 px-2 py-1.5">
+    <div className="flex items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
       {Icon ? (
         <span>
           <Icon className={cx(iconClassName, "shrink-0")} />
@@ -26,16 +26,11 @@ export default function StatusCard({
       ) : null}
 
       <div className="space-y-1">
-        <div className="text-xs font-semibold leading-none transition text-ellipsis">
-          {title}
-        </div>
+        <div className="text-xs leading-none font-semibold text-ellipsis transition">{title}</div>
         <div className="text-xs leading-none">
           <div className="flex items-center gap-x-1">
             <div
-              className={cx(
-                "h-2 w-2 rounded-full border transition",
-                statusIndicatorClassName,
-              )}
+              className={cx("h-2 w-2 rounded-full border transition", statusIndicatorClassName)}
             />
             <span className={cx("transition")}>{status}</span>
           </div>
diff --git a/ui/src/components/StepCounter.tsx b/ui/src/components/StepCounter.tsx
index a08ae2ce..62a78076 100644
--- a/ui/src/components/StepCounter.tsx
+++ b/ui/src/components/StepCounter.tsx
@@ -24,7 +24,7 @@ const variants = cva({
 export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
   const textStyle = variants({ size });
   return (
-    <Card className="inline-flex! w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
+    <Card className="inline-flex! w-auto items-center justify-center gap-x-2 rounded-lg p-1 select-none">
       {[...Array(nSteps).keys()].map(i => {
         if (i < currStepIdx) {
           return (
diff --git a/ui/src/components/Terminal.tsx b/ui/src/components/Terminal.tsx
index 7e0d3673..e2b90be3 100644
--- a/ui/src/components/Terminal.tsx
+++ b/ui/src/components/Terminal.tsx
@@ -54,7 +54,7 @@ const TERMINAL_CONFIG = {
   // Add these configurations:
   cursorStyle: "block",
   rendererType: "canvas", // Ensure we're using the canvas renderer
-  unicode: { activeVersion: "11" }
+  unicode: { activeVersion: "11" },
 } as const;
 
 function Terminal({
@@ -162,10 +162,7 @@ function Terminal({
   }, [instance]);
 
   return (
-    <div
-      onKeyDown={e => e.stopPropagation()}
-      onKeyUp={e => e.stopPropagation()}
-    >
+    <div onKeyDown={e => e.stopPropagation()} onKeyUp={e => e.stopPropagation()}>
       <div>
         <div
           className={cx(
@@ -184,7 +181,7 @@ function Terminal({
         >
           <div className="h-[500px] w-full bg-[#0f172a]">
             <div className="flex items-center justify-center border-y border-y-slate-800/30 bg-white px-2 py-1 dark:border-y-slate-300/20 dark:bg-slate-800">
-              <h2 className="select-none self-center font-sans text-[12px] text-slate-700 dark:text-slate-300">
+              <h2 className="self-center font-sans text-[12px] text-slate-700 select-none dark:text-slate-300">
                 {title}
               </h2>
               <div className="absolute right-2">
diff --git a/ui/src/components/TextArea.tsx b/ui/src/components/TextArea.tsx
index 6691e614..a186be2c 100644
--- a/ui/src/components/TextArea.tsx
+++ b/ui/src/components/TextArea.tsx
@@ -17,7 +17,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         className={cx(
           "relative w-full",
           "invalid-within::ring-2 invalid-within::ring-red-600 invalid-within::ring-offset-2",
-          "focus-within:border-slate-300 focus-within:outline-hidden focus-within:ring-1 focus-within:ring-blue-700 dark:focus-within:border-slate-600",
+          "focus-within:border-slate-300 focus-within:ring-1 focus-within:ring-blue-700 focus-within:outline-hidden dark:focus-within:border-slate-600",
         )}
       >
         <textarea
@@ -25,7 +25,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
           {...props}
           id="asd"
           className={clsx(
-            "block w-full rounded-sm border-transparent bg-transparent text-black placeholder:text-slate-300 focus:ring-0 disabled:pointer-events-none disabled:select-none disabled:bg-slate-50 disabled:text-slate-300 dark:text-white dark:placeholder:text-slate-500 dark:disabled:bg-slate-800 sm:text-sm",
+            "block w-full rounded-sm border-transparent bg-transparent text-black placeholder:text-slate-300 focus:ring-0 disabled:pointer-events-none disabled:bg-slate-50 disabled:text-slate-300 disabled:select-none sm:text-sm dark:text-white dark:placeholder:text-slate-500 dark:disabled:bg-slate-800",
             props.className,
           )}
         />
@@ -41,17 +41,16 @@ type TextAreaWithLabelProps = {
   error?: string | null;
 } & React.ComponentProps<typeof TextArea>;
 
-export const TextAreaWithLabel = React.forwardRef<
-  HTMLTextAreaElement,
-  TextAreaWithLabelProps
->(function TextAreaWithLabel({ label, error, id, description, ...props }, ref) {
-  return (
-    <div className="space-y-1">
-      <FieldLabel label={label} id={id} description={description} />
-      <TextArea ref={ref} {...props} />
-      {error && <FieldError error={error} />}
-    </div>
-  );
-});
+export const TextAreaWithLabel = React.forwardRef<HTMLTextAreaElement, TextAreaWithLabelProps>(
+  function TextAreaWithLabel({ label, error, id, description, ...props }, ref) {
+    return (
+      <div className="space-y-1">
+        <FieldLabel label={label} id={id} description={description} />
+        <TextArea ref={ref} {...props} />
+        {error && <FieldError error={error} />}
+      </div>
+    );
+  },
+);
 
 export default TextArea;
diff --git a/ui/src/components/USBStateStatus.tsx b/ui/src/components/USBStateStatus.tsx
index 1f7977fe..b582b3ec 100644
--- a/ui/src/components/USBStateStatus.tsx
+++ b/ui/src/components/USBStateStatus.tsx
@@ -64,7 +64,6 @@ export default function USBStateStatus({
   state: USBStates;
   peerConnectionState?: RTCPeerConnectionState | null;
 }) {
-
   const props = StatusCardProps[state];
   if (!props) {
     console.warn("Unsupported USB state: ", state);
@@ -73,11 +72,7 @@ export default function USBStateStatus({
 
   // If the peer connection is not connected, show the USB cable as disconnected
   if (peerConnectionState !== "connected") {
-    const {
-      icon: Icon,
-      iconClassName,
-      statusIndicatorClassName,
-    } = StatusCardProps["not attached"];
+    const { icon: Icon, iconClassName, statusIndicatorClassName } = StatusCardProps["not attached"];
 
     return (
       <StatusCard
@@ -90,7 +85,5 @@ export default function USBStateStatus({
     );
   }
 
-  return (
-    <StatusCard title={m.usb()} status={USBStateMap[state]} {...StatusCardProps[state]} />
-  );
+  return <StatusCard title={m.usb()} status={USBStateMap[state]} {...StatusCardProps[state]} />;
 }
diff --git a/ui/src/components/UpdateInProgressStatusCard.tsx b/ui/src/components/UpdateInProgressStatusCard.tsx
index e29aecff..bfca470d 100644
--- a/ui/src/components/UpdateInProgressStatusCard.tsx
+++ b/ui/src/components/UpdateInProgressStatusCard.tsx
@@ -9,20 +9,18 @@ export default function UpdateInProgressStatusCard() {
   const { navigateTo } = useDeviceUiNavigation();
 
   return (
-    <div className="w-full select-none opacity-100 transition-all duration-300 ease-in-out">
+    <div className="w-full opacity-100 transition-all duration-300 ease-in-out select-none">
       <GridCard cardClassName="shadow-xl!">
         <div className="flex items-center justify-between gap-x-3 px-2.5 py-2.5 text-black dark:text-white">
           <div className="flex items-center gap-x-3">
             <LoadingSpinner className={cx("h-5 w-5", "shrink-0 text-blue-700")} />
             <div className="space-y-1">
-              <div className="text-ellipsis text-sm font-semibold leading-none transition">
+              <div className="text-sm leading-none font-semibold text-ellipsis transition">
                 {m.update_in_progress()}
               </div>
               <div className="text-sm leading-none">
                 <div className="flex items-center gap-x-1">
-                  <span className={cx("transition")}>
-                    {m.updating_leave_device_on()}
-                  </span>
+                  <span className={cx("transition")}>{m.updating_leave_device_on()}</span>
                 </div>
               </div>
             </div>
diff --git a/ui/src/components/UpdatingStatusCard.tsx b/ui/src/components/UpdatingStatusCard.tsx
index 7df9e594..16b26df0 100644
--- a/ui/src/components/UpdatingStatusCard.tsx
+++ b/ui/src/components/UpdatingStatusCard.tsx
@@ -1,4 +1,3 @@
-
 import { CheckCircleIcon } from "@heroicons/react/24/solid"; // adjust import if you use a different icon set
 
 import LoadingSpinner from "@components/LoadingSpinner"; // adjust import path if needed
@@ -11,13 +10,7 @@ export interface UpdatePart {
   complete: boolean;
 }
 
-export default function UpdatingStatusCard({
-  label,
-  part,
-}: {
-  label: string;
-  part: UpdatePart;
-}) {
+export default function UpdatingStatusCard({ label, part }: { label: string; part: UpdatePart }) {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
@@ -34,7 +27,7 @@ export default function UpdatingStatusCard({
         aria-valuemin={0}
         aria-valuemax={100}
         aria-valuenow={Math.round(part.progress)}
-        aria-label={m.general_update_status_progress({part: label})}
+        aria-label={m.general_update_status_progress({ part: label })}
       >
         <div
           className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
diff --git a/ui/src/components/UsbDeviceSetting.tsx b/ui/src/components/UsbDeviceSetting.tsx
index 2fd6eaeb..76821394 100644
--- a/ui/src/components/UsbDeviceSetting.tsx
+++ b/ui/src/components/UsbDeviceSetting.tsx
@@ -64,8 +64,7 @@ export function UsbDeviceSetting() {
   const { send } = useJsonRpc();
   const [loading, setLoading] = useState(false);
 
-  const [usbDeviceConfig, setUsbDeviceConfig] =
-    useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
+  const [usbDeviceConfig, setUsbDeviceConfig] = useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
   const [selectedPreset, setSelectedPreset] = useState<string>("default");
 
   const syncUsbDeviceConfig = useCallback(() => {
@@ -134,9 +133,7 @@ export function UsbDeviceSetting() {
       setSelectedPreset(newPreset);
 
       if (newPreset !== "custom") {
-        const presetConfig = usbPresets.find(
-          preset => preset.value === newPreset,
-        )?.config;
+        const presetConfig = usbPresets.find(preset => preset.value === newPreset)?.config;
 
         if (presetConfig) {
           handleUsbConfigChange(presetConfig);
@@ -176,10 +173,13 @@ export function UsbDeviceSetting() {
       </SettingsItem>
 
       {selectedPreset === "custom" && (
-        <div className="ml-2 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
+        <div className="ml-2 border-l border-slate-800/10 pl-4 dark:border-slate-300/20">
           <div className="space-y-4">
             <div className="space-y-4">
-              <SettingsItem title={m.usb_device_enable_keyboard_title()} description={m.usb_device_enable_keyboard_description()}>
+              <SettingsItem
+                title={m.usb_device_enable_keyboard_title()}
+                description={m.usb_device_enable_keyboard_description()}
+              >
                 <Checkbox
                   checked={usbDeviceConfig.keyboard}
                   onChange={onUsbConfigItemChange("keyboard")}
diff --git a/ui/src/components/UsbInfoSetting.tsx b/ui/src/components/UsbInfoSetting.tsx
index 13b185cd..bba4aa45 100644
--- a/ui/src/components/UsbInfoSetting.tsx
+++ b/ui/src/components/UsbInfoSetting.tsx
@@ -31,7 +31,6 @@ export interface USBConfig {
   product: string;
 }
 
-
 const usbConfigs = [
   {
     label: m.usb_config_default(),
@@ -127,7 +126,10 @@ export function UsbInfoSetting() {
         await sleep(2000);
         setLoading(false);
         notifications.success(
-          m.usb_config_set_success({ manufacturer: usbConfig.manufacturer, product: usbConfig.product }),
+          m.usb_config_set_success({
+            manufacturer: usbConfig.manufacturer,
+            product: usbConfig.product,
+          }),
         );
 
         syncUsbConfigProduct();
@@ -174,13 +176,11 @@ export function UsbInfoSetting() {
         />
       </SettingsItem>
       {usbConfigProduct === "custom" && (
-        <div className="ml-2 space-y-4 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
+        <div className="ml-2 space-y-4 border-l border-slate-800/10 pl-4 dark:border-slate-300/20">
           <USBConfigDialog
             loading={loading}
             onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
-            onRestoreToDefault={() =>
-              handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
-            }
+            onRestoreToDefault={() => handleUsbConfigChange(usbConfigData[usbConfigs[0].value])}
           />
         </div>
       )}
diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index e84cfc04..0bef1ecd 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/ui/src/components/VideoOverlay.tsx
@@ -15,7 +15,6 @@ import LogoWhite from "@/assets/logo-white.svg";
 import { isOnDevice } from "@/main";
 import { sleep } from "@/utils";
 
-
 interface OverlayContentProps {
   readonly children: React.ReactNode;
 }
@@ -86,9 +85,7 @@ export function LoadingConnectionOverlay({ show, text }: LoadingConnectionOverla
               <div className="animate flex h-12 w-12 items-center justify-center">
                 <LoadingSpinner className="h-8 w-8 text-blue-800 dark:text-blue-200" />
               </div>
-              <p className="text-center text-sm text-slate-700 dark:text-slate-300">
-                {text}
-              </p>
+              <p className="text-center text-sm text-slate-700 dark:text-slate-300">{text}</p>
             </div>
           </OverlayContent>
         </motion.div>
@@ -125,7 +122,9 @@ export function ConnectionFailedOverlay({
               <div className="text-left text-sm text-slate-700 dark:text-slate-300">
                 <div className="space-y-4">
                   <div className="space-y-2 text-black dark:text-white">
-                    <h2 className="text-xl font-bold">{m.video_overlay_connection_issue_title()}</h2>
+                    <h2 className="text-xl font-bold">
+                      {m.video_overlay_connection_issue_title()}
+                    </h2>
                     <ul className="list-disc space-y-2 pl-4 text-left">
                       <li>{m.video_overlay_conn_verify_power()}</li>
                       <li>{m.video_overlay_conn_check_cables()}</li>
@@ -163,9 +162,7 @@ interface PeerConnectionDisconnectedOverlay {
   readonly show: boolean;
 }
 
-export function PeerConnectionDisconnectedOverlay({
-  show,
-}: PeerConnectionDisconnectedOverlay) {
+export function PeerConnectionDisconnectedOverlay({ show }: PeerConnectionDisconnectedOverlay) {
   return (
     <AnimatePresence>
       {show && (
@@ -185,7 +182,9 @@ export function PeerConnectionDisconnectedOverlay({
               <div className="text-left text-sm text-slate-700 dark:text-slate-300">
                 <div className="space-y-4">
                   <div className="space-y-2 text-black dark:text-white">
-                    <h2 className="text-xl font-bold">{m.video_overlay_connection_issue_title()}</h2>
+                    <h2 className="text-xl font-bold">
+                      {m.video_overlay_connection_issue_title()}
+                    </h2>
                     <ul className="list-disc space-y-2 pl-4 text-left">
                       <li>{m.video_overlay_conn_verify_power()}</li>
                       <li>{m.video_overlay_conn_check_cables()}</li>
@@ -405,7 +404,7 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
 
   // Check if we've already seen the connection drop (confirms reboot actually started)
   const [hasSeenDisconnect, setHasSeenDisconnect] = useState(
-    ['disconnected', 'closed', 'failed'].includes(peerConnectionState ?? '')
+    ["disconnected", "closed", "failed"].includes(peerConnectionState ?? ""),
   );
 
   // Track if we've timed out
@@ -416,8 +415,8 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
     if (!show) return;
     if (hasSeenDisconnect) return;
 
-    if (['disconnected', 'closed', 'failed'].includes(peerConnectionState ?? '')) {
-      console.log('hasSeenDisconnect', hasSeenDisconnect);
+    if (["disconnected", "closed", "failed"].includes(peerConnectionState ?? "")) {
+      console.log("hasSeenDisconnect", hasSeenDisconnect);
       setHasSeenDisconnect(true);
     }
   }, [show, peerConnectionState, hasSeenDisconnect]);
@@ -438,7 +437,6 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
     };
   }, [show]);
 
-
   // Poll suggested IP in device mode to detect when it's available
   const abortControllerRef = useRef<AbortController | null>(null);
   const isFetchingRef = useRef(false);
@@ -465,17 +463,16 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
       abortControllerRef.current = abortController;
       isFetchingRef.current = true;
 
-      console.log('Checking post-reboot health endpoint:', postRebootAction.healthCheck);
+      console.log("Checking post-reboot health endpoint:", postRebootAction.healthCheck);
       const timeoutId = window.setTimeout(() => abortController.abort(), 2000);
       try {
-        const response = await fetch(
-          postRebootAction.healthCheck,
-          { signal: abortController.signal, }
-        );
+        const response = await fetch(postRebootAction.healthCheck, {
+          signal: abortController.signal,
+        });
 
         if (response.ok) {
           // Device is available, redirect to the specified URL
-          console.log('Device is available, redirecting to:', postRebootAction.redirectTo);
+          console.log("Device is available, redirecting to:", postRebootAction.redirectTo);
 
           // URL constructor handles all cases elegantly:
           // - Absolute paths: resolved against current origin
@@ -492,8 +489,8 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
       } catch (err) {
         // Ignore errors - they're expected while device is rebooting
         // Only log if it's not an abort error
-        if (err instanceof Error && err.name !== 'AbortError') {
-          console.debug('Error checking post-reboot health:', err);
+        if (err instanceof Error && err.name !== "AbortError") {
+          console.debug("Error checking post-reboot health:", err);
         }
       } finally {
         clearTimeout(timeoutId);
@@ -531,8 +528,7 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
           }}
         >
           <OverlayContent>
-
-            <div className="flex flex-col items-start gap-y-4  w-full max-w-md">
+            <div className="flex w-full max-w-md flex-col items-start gap-y-4">
               <div className="h-[24px]">
                 <img src={LogoBlue} alt="" className="h-full dark:hidden" />
                 <img src={LogoWhite} alt="" className="hidden h-full dark:block" />
@@ -540,17 +536,16 @@ export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayPro
               <div className="text-left text-sm text-slate-700 dark:text-slate-300">
                 <div className="space-y-4">
                   <div className="space-y-2 text-black dark:text-white">
-                    <h2 className="text-xl font-bold">{hasTimedOut ? m.video_overlay_reboot_unable_to_reconnect() : m.video_overlay_reboot_device_is_rebooting()}</h2>
+                    <h2 className="text-xl font-bold">
+                      {hasTimedOut
+                        ? m.video_overlay_reboot_unable_to_reconnect()
+                        : m.video_overlay_reboot_device_is_rebooting()}
+                    </h2>
                     <p className="text-sm text-slate-700 dark:text-slate-300">
                       {hasTimedOut ? (
-                        <>
-                          {m.video_overlay_reboot_different_ip_message()}
-                        </>
+                        <>{m.video_overlay_reboot_different_ip_message()}</>
                       ) : (
-                        <>
-                          {m.video_overlay_reboot_please_wait_message()}
-
-                        </>
+                        <>{m.video_overlay_reboot_please_wait_message()}</>
                       )}
                     </p>
                   </div>
diff --git a/ui/src/components/VirtualKeyboard.tsx b/ui/src/components/VirtualKeyboard.tsx
index 523544a2..dd0a81e9 100644
--- a/ui/src/components/VirtualKeyboard.tsx
+++ b/ui/src/components/VirtualKeyboard.tsx
@@ -21,8 +21,7 @@ export const DetachIcon = ({ className }: { className?: string }) => {
 
 function KeyboardWrapper() {
   const keyboardRef = useRef<HTMLDivElement>(null);
-  const { isAttachedVirtualKeyboardVisible, setAttachedVirtualKeyboardVisibility } =
-    useUiStore();
+  const { isAttachedVirtualKeyboardVisible, setAttachedVirtualKeyboardVisibility } = useUiStore();
   const { keyboardLedState, keysDownState, isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } =
     useHidStore();
   const { handleKeyPress, executeMacro } = useKeyboard();
@@ -159,9 +158,7 @@ function KeyboardWrapper() {
       }
 
       if (key === "AltMetaEscape") {
-        await executeMacro([
-          { keys: ["Escape"], modifiers: ["AltLeft", "MetaLeft"], delay: 100 },
-        ]);
+        await executeMacro([{ keys: ["Escape"], modifiers: ["AltLeft", "MetaLeft"], delay: 100 }]);
         return;
       }
 
@@ -258,7 +255,7 @@ function KeyboardWrapper() {
                     {m.virtual_keyboard_header()}
                   </h2>
                   <div className="absolute right-2 flex items-center gap-x-2">
-                    <div className="hidden md:flex gap-x-2 items-center">
+                    <div className="hidden items-center gap-x-2 md:flex">
                       <LinkButton
                         size="XS"
                         to="settings/keyboard"
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index c54d2b8d..bb3ed5ec 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -4,11 +4,7 @@ import { useResizeObserver } from "usehooks-ts";
 import { cx } from "@/cva.config";
 import useKeyboard from "@hooks/useKeyboard";
 import useMouse from "@hooks/useMouse";
-import {
-  useRTCStore,
-  useSettingsStore,
-  useVideoStore,
-} from "@hooks/stores";
+import { useRTCStore, useSettingsStore, useVideoStore } from "@hooks/stores";
 import VirtualKeyboard from "@components/VirtualKeyboard";
 import Actionbar from "@components/ActionBar";
 import MacroBar from "@components/MacroBar";
@@ -32,7 +28,8 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
   const [isPointerLockActive, setIsPointerLockActive] = useState(false);
   const [isKeyboardLockActive, setIsKeyboardLockActive] = useState(false);
 
-  const isPointerLockPossible = window.location.protocol === "https:" || window.location.hostname === "localhost";
+  const isPointerLockPossible =
+    window.location.protocol === "https:" || window.location.hostname === "localhost";
 
   // Store hooks
   const settings = useSettingsStore();
@@ -71,7 +68,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       setVideoClientSize(width || 0, height || 0);
       setVideoSize(videoElm.current.videoWidth, videoElm.current.videoHeight);
     },
-    [setVideoClientSize, setVideoSize]
+    [setVideoClientSize, setVideoSize],
   );
 
   useResizeObserver({
@@ -119,9 +116,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
   }, []);
 
   const requestPointerLock = useCallback(async () => {
-    if (!isPointerLockPossible
-      || videoElm.current === null
-      || document.pointerLockElement) return;
+    if (!isPointerLockPossible || videoElm.current === null || document.pointerLockElement) return;
 
     const isPointerLockGranted = await checkNavigatorPermissions("pointer-lock");
 
@@ -151,7 +146,11 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
   }, [checkNavigatorPermissions, setIsKeyboardLockActive]);
 
   const releaseKeyboardLock = useCallback(async () => {
-    if (fullscreenContainerRef.current === null || document.fullscreenElement !== fullscreenContainerRef.current) return;
+    if (
+      fullscreenContainerRef.current === null ||
+      document.fullscreenElement !== fullscreenContainerRef.current
+    )
+      return;
 
     if (navigator && "keyboard" in navigator) {
       try {
@@ -216,24 +215,19 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
   }, [releaseKeyboardLock]);
 
   const absMouseMoveHandler = useMemo(
-    () => getAbsMouseMoveHandler({
-      videoClientWidth,
-      videoClientHeight,
-      videoWidth,
-      videoHeight,
-    }),
+    () =>
+      getAbsMouseMoveHandler({
+        videoClientWidth,
+        videoClientHeight,
+        videoWidth,
+        videoHeight,
+      }),
     [getAbsMouseMoveHandler, videoClientWidth, videoClientHeight, videoWidth, videoHeight],
   );
 
-  const relMouseMoveHandler = useMemo(
-    () => getRelMouseMoveHandler(),
-    [getRelMouseMoveHandler],
-  );
+  const relMouseMoveHandler = useMemo(() => getRelMouseMoveHandler(), [getRelMouseMoveHandler]);
 
-  const mouseWheelHandler = useMemo(
-    () => getMouseWheelHandler(),
-    [getMouseWheelHandler],
-  );
+  const mouseWheelHandler = useMemo(() => getMouseWheelHandler(), [getMouseWheelHandler]);
 
   function getAdjustedKeyCode(e: KeyboardEvent) {
     const key = e.key;
@@ -263,7 +257,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       // event, so we need to clear the keys after a short delay
       // https://bugs.chromium.org/p/chromium/issues/detail?id=28089
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
-      if (e.metaKey && hidKey < 0xE0) {
+      if (e.metaKey && hidKey < 0xe0) {
         setTimeout(() => {
           console.debug(`Forcing the meta key release of associated key: ${hidKey}`);
           handleKeyPress(hidKey, false);
@@ -403,7 +397,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       const videoElmRefValue = videoElm.current;
       if (!videoElmRefValue) return;
 
-      const isRelativeMouseMode = (settings.mouseMode === "relative");
+      const isRelativeMouseMode = settings.mouseMode === "relative";
       const mouseHandler = isRelativeMouseMode ? relMouseMoveHandler : absMouseMoveHandler;
 
       const abortController = new AbortController();
@@ -418,7 +412,8 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       });
 
       if (isRelativeMouseMode) {
-        videoElmRefValue.addEventListener("click",
+        videoElmRefValue.addEventListener(
+          "click",
           () => {
             if (isPointerLockPossible && !isPointerLockActive && !document.pointerLockElement) {
               requestPointerLock();
@@ -469,7 +464,15 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
     if (!isPlaying) return false;
     if (videoHeight === 0 || videoWidth === 0) return false;
     return true;
-  }, [isPlaying, isPointerLockActive, isPointerLockPossible, isVideoLoading, settings.mouseMode, videoHeight, videoWidth]);
+  }, [
+    isPlaying,
+    isPointerLockActive,
+    isPointerLockPossible,
+    isVideoLoading,
+    settings.mouseMode,
+    videoHeight,
+    videoWidth,
+  ]);
 
   // Conditionally set the filter style so we don't fallback to software rendering if these values are default of 1.0
   const videoStyle = useMemo(() => {
@@ -477,19 +480,15 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
     return isDefault
       ? {} // No filter if all settings are default (1.0)
       : {
-        filter: `saturate(${videoSaturation}) brightness(${videoBrightness}) contrast(${videoContrast})`,
-      };
+          filter: `saturate(${videoSaturation}) brightness(${videoBrightness}) contrast(${videoContrast})`,
+        };
   }, [videoSaturation, videoBrightness, videoContrast]);
 
-
   return (
     <div className="grid h-full w-full grid-rows-(--grid-layout)">
       <div className="flex min-h-[39.5px] flex-col">
         <div className="flex flex-col">
-          <fieldset
-            disabled={peerConnection?.connectionState !== "connected"}
-            className="contents"
-          >
+          <fieldset disabled={peerConnection?.connectionState !== "connected"} className="contents">
             <Actionbar requestFullscreen={requestFullscreen} />
             <MacroBar />
           </fieldset>
@@ -546,7 +545,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
                       {peerConnection?.connectionState == "connected" && !hasConnectionIssues && (
                         <div
                           style={{ animationDuration: "500ms" }}
-                          className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center"
+                          className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center"
                         >
                           <div className="relative h-full w-full rounded-md">
                             <LoadingVideoOverlay show={isVideoLoading} />
diff --git a/ui/src/components/extensions/ATXPowerControl.tsx b/ui/src/components/extensions/ATXPowerControl.tsx
index e471a0a7..cfdf5d44 100644
--- a/ui/src/components/extensions/ATXPowerControl.tsx
+++ b/ui/src/components/extensions/ATXPowerControl.tsx
@@ -18,12 +18,12 @@ interface ATXState {
 
 export function ATXPowerControl() {
   const [isPowerPressed, setIsPowerPressed] = useState(false);
-  const [powerPressTimer, setPowerPressTimer] = useState<ReturnType<
-    typeof setTimeout
-  > | null>(null);
+  const [powerPressTimer, setPowerPressTimer] = useState<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
   const [atxState, setAtxState] = useState<ATXState | null>(null);
 
-  const { send }  = useJsonRpc(function onRequest(resp) {
+  const { send } = useJsonRpc(function onRequest(resp) {
     if (resp.method === "atxState") {
       setAtxState(resp.params as ATXState);
     }
@@ -33,7 +33,9 @@ export function ATXPowerControl() {
   useEffect(() => {
     send("getATXState", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.atx_power_control_get_state_error({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.atx_power_control_get_state_error({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
       setAtxState(resp.result as ATXState);
@@ -54,7 +56,12 @@ export function ATXPowerControl() {
         console.log("Sending long press ATX power action");
         send("setATXPowerAction", { action: "power-long" }, (resp: JsonRpcResponse) => {
           if ("error" in resp) {
-            notifications.error(m.atx_power_control_send_action_error({ action: m.atx_power_control_long_power_button(), error: resp.error.data || m.unknown_error() }));
+            notifications.error(
+              m.atx_power_control_send_action_error({
+                action: m.atx_power_control_long_power_button(),
+                error: resp.error.data || m.unknown_error(),
+              }),
+            );
           }
           setIsPowerPressed(false);
         });
@@ -73,7 +80,12 @@ export function ATXPowerControl() {
         console.log("Sending short press ATX power action");
         send("setATXPowerAction", { action: "power-short" }, (resp: JsonRpcResponse) => {
           if ("error" in resp) {
-            notifications.error(m.atx_power_control_send_action_error({ action: m.atx_power_control_short_power_button(), error: resp.error.data || m.unknown_error() }));
+            notifications.error(
+              m.atx_power_control_send_action_error({
+                action: m.atx_power_control_short_power_button(),
+                error: resp.error.data || m.unknown_error(),
+              }),
+            );
           }
         });
       }
@@ -123,7 +135,12 @@ export function ATXPowerControl() {
                 onClick={() => {
                   send("setATXPowerAction", { action: "reset" }, (resp: JsonRpcResponse) => {
                     if ("error" in resp) {
-                      notifications.error(m.atx_power_control_send_action_error({ action: m.atx_power_control_reset_button(), error: resp.error.data || m.unknown_error() }));
+                      notifications.error(
+                        m.atx_power_control_send_action_error({
+                          action: m.atx_power_control_reset_button(),
+                          error: resp.error.data || m.unknown_error(),
+                        }),
+                      );
                       return;
                     }
                   });
@@ -149,9 +166,7 @@ export function ATXPowerControl() {
                 <span className="text-sm text-slate-600 dark:text-slate-400">
                   <LuHardDrive
                     strokeWidth={3}
-                    className={`mr-1 inline ${
-                      atxState?.hdd ? "text-blue-400" : "text-slate-300"
-                    }`}
+                    className={`mr-1 inline ${atxState?.hdd ? "text-blue-400" : "text-slate-300"}`}
                   />
                   {m.atx_power_control_hdd_led()}
                 </span>
diff --git a/ui/src/components/extensions/DCPowerControl.tsx b/ui/src/components/extensions/DCPowerControl.tsx
index 3f728a81..ee8f084b 100644
--- a/ui/src/components/extensions/DCPowerControl.tsx
+++ b/ui/src/components/extensions/DCPowerControl.tsx
@@ -8,7 +8,7 @@ import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import FieldLabel from "@components/FieldLabel";
 import LoadingSpinner from "@components/LoadingSpinner";
-import {SelectMenuBasic} from "@components/SelectMenuBasic";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import notifications from "@/notifications";
 
 interface DCPowerState {
@@ -26,7 +26,9 @@ export function DCPowerControl() {
   const getDCPowerState = useCallback(() => {
     send("getDCPowerState", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.dc_power_control_get_state_error({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.dc_power_control_get_state_error({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
       setPowerState(resp.result as DCPowerState);
@@ -36,7 +38,12 @@ export function DCPowerControl() {
   const handlePowerToggle = (enabled: boolean) => {
     send("setDCPowerState", { enabled }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.dc_power_control_set_power_state_error({ enabled: enabled, error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.dc_power_control_set_power_state_error({
+            enabled: enabled,
+            error: resp.error.data || m.unknown_error(),
+          }),
+        );
         return;
       }
       getDCPowerState(); // Refresh state after change
@@ -46,7 +53,12 @@ export function DCPowerControl() {
     // const state = powerState?.restoreState === 0 ? 1 : powerState?.restoreState === 1 ? 2 : 0;
     send("setDCRestoreState", { state }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.dc_power_control_set_restore_state_error({ state: state, error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.dc_power_control_set_restore_state_error({
+            state: state,
+            error: resp.error.data || m.unknown_error(),
+          }),
+        );
         return;
       }
       getDCPowerState(); // Refresh state after change
@@ -96,15 +108,15 @@ export function DCPowerControl() {
             {powerState.restoreState > -1 ? (
               <div className="flex items-center">
                 <SelectMenuBasic
-                    size="SM"
-                    label={m.dc_power_control_restore_power_state()}
-                    value={powerState.restoreState}
-                    onChange={e => handleRestoreChange(parseInt(e.target.value))}
-                    options={[
-                      { value: '0', label: m.dc_power_control_power_off_state()},
-                      { value: '1', label: m.dc_power_control_power_on_state()},
-                      { value: '2', label: m.dc_power_control_restore_last_state()},
-                    ]}
+                  size="SM"
+                  label={m.dc_power_control_restore_power_state()}
+                  value={powerState.restoreState}
+                  onChange={e => handleRestoreChange(parseInt(e.target.value))}
+                  options={[
+                    { value: "0", label: m.dc_power_control_power_off_state() },
+                    { value: "1", label: m.dc_power_control_power_on_state() },
+                    { value: "2", label: m.dc_power_control_restore_last_state() },
+                  ]}
                 />
               </div>
             ) : null}
@@ -125,7 +137,7 @@ export function DCPowerControl() {
                 </p>
               </div>
               <div className="space-y-1">
-                <FieldLabel label={m.dc_power_control_power()}/>
+                <FieldLabel label={m.dc_power_control_power()} />
                 <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                   {powerState.power.toFixed(1)}&nbsp;{m.dc_power_control_power_unit()}
                 </p>
diff --git a/ui/src/components/extensions/SerialConsole.tsx b/ui/src/components/extensions/SerialConsole.tsx
index 0acb765c..ab681ebe 100644
--- a/ui/src/components/extensions/SerialConsole.tsx
+++ b/ui/src/components/extensions/SerialConsole.tsx
@@ -29,7 +29,9 @@ export function SerialConsole() {
   useEffect(() => {
     send("getSerialSettings", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.serial_console_get_settings_error({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.serial_console_get_settings_error({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
       setSettings(resp.result as SerialSettings);
@@ -40,7 +42,12 @@ export function SerialConsole() {
     const newSettings = { ...settings, [setting]: value };
     send("setSerialSettings", { settings: newSettings }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.serial_console_set_settings_error({ settings: setting, error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.serial_console_set_settings_error({
+            settings: setting,
+            error: resp.error.data || m.unknown_error(),
+          }),
+        );
         return;
       }
       setSettings(newSettings);
diff --git a/ui/src/components/popovers/ExtensionPopover.tsx b/ui/src/components/popovers/ExtensionPopover.tsx
index 3ac5a0e5..1d7dd45e 100644
--- a/ui/src/components/popovers/ExtensionPopover.tsx
+++ b/ui/src/components/popovers/ExtensionPopover.tsx
@@ -61,7 +61,9 @@ export default function ExtensionPopover() {
     send("setActiveExtension", { extensionId: extension?.id || "" }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         notifications.error(
-          m.extension_popover_set_error_notification({ error: resp.error.data || m.unknown_error() }),
+          m.extension_popover_set_error_notification({
+            error: resp.error.data || m.unknown_error(),
+          }),
         );
         return;
       }
@@ -93,7 +95,7 @@ export default function ExtensionPopover() {
                 {renderActiveExtension()}
 
                 <div
-                  className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
+                  className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
                   style={{
                     animationDuration: "0.7s",
                     animationDelay: "0.2s",
@@ -114,15 +116,12 @@ export default function ExtensionPopover() {
                   title={m.extensions_popover_extensions()}
                   description={m.extension_popover_load_and_manage_extensions()}
                 />
-                <Card className="animate-fadeIn opacity-0" >
+                <Card className="animate-fadeIn opacity-0">
                   <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
                     {AVAILABLE_EXTENSIONS.map(extension => (
-                      <div
-                        key={extension.id}
-                        className="flex items-center justify-between p-3"
-                      >
+                      <div key={extension.id} className="flex items-center justify-between p-3">
                         <div className="space-y-0.5">
-                          <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">
+                          <p className="text-sm leading-none font-semibold text-slate-900 dark:text-slate-100">
                             {extension.name}
                           </p>
                           <p className="text-sm text-slate-600 dark:text-slate-400">
diff --git a/ui/src/components/popovers/MountPopover.tsx b/ui/src/components/popovers/MountPopover.tsx
index 33b9bf02..083dea7a 100644
--- a/ui/src/components/popovers/MountPopover.tsx
+++ b/ui/src/components/popovers/MountPopover.tsx
@@ -51,7 +51,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
             </Card>
           </div>
           <div className="space-y-1">
-            <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
+            <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
               {m.mount_no_mounted_media()}
             </h3>
             <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@@ -138,7 +138,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
               />
 
               <div
-                className="animate-fadeIn opacity-0 space-y-2"
+                className="animate-fadeIn space-y-2 opacity-0"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -156,11 +156,13 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                   </div>
                 </div>
                 {remoteVirtualMediaState ? (
-                  <div className="flex select-none items-center justify-between text-xs">
-                    <div className="select-none text-white dark:text-slate-300">
+                  <div className="flex items-center justify-between text-xs select-none">
+                    <div className="text-white select-none dark:text-slate-300">
                       <span>{m.mount_mounted_as()}</span>{" "}
                       <span className="font-semibold">
-                        {remoteVirtualMediaState.mode === "Disk" ? m.mount_mode_disk() : m.mount_mode_cdrom()}
+                        {remoteVirtualMediaState.mode === "Disk"
+                          ? m.mount_mode_disk()
+                          : m.mount_mode_cdrom()}
                       </span>
                     </div>
 
@@ -189,10 +191,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                                 d="M4.99933 0.775635L0 5.77546H10L4.99933 0.775635Z"
                                 fill="currentColor"
                               />
-                              <path
-                                d="M10 7.49976H0V9.22453H10V7.49976Z"
-                                fill="currentColor"
-                              />
+                              <path d="M10 7.49976H0V9.22453H10V7.49976Z" fill="currentColor" />
                             </g>
                             <defs>
                               <clipPath id="clip0_3137_1186">
@@ -213,7 +212,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
 
         {!remoteVirtualMediaState && (
           <div
-            className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
+            className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
             style={{
               animationDuration: "0.7s",
               animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/PasteModal.tsx b/ui/src/components/popovers/PasteModal.tsx
index 9bc122d5..5c7cd058 100644
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/ui/src/components/popovers/PasteModal.tsx
@@ -39,7 +39,7 @@ export default function PasteModal() {
   const close = useClose();
 
   const debugMode = useSettingsStore(state => state.debugMode);
-  const delayClassName = useMemo(() => debugMode ? "" : "hidden", [debugMode]);
+  const delayClassName = useMemo(() => (debugMode ? "" : "hidden"), [debugMode]);
 
   const { setKeyboardLayout } = useSettingsStore();
   const { selectedKeyboard } = useKeyboardLayout();
@@ -66,7 +66,7 @@ export default function PasteModal() {
       const macroSteps: MacroStep[] = [];
 
       for (const char of text) {
-        const normalizedChar = char.normalize('NFC');
+        const normalizedChar = char.normalize("NFC");
         const keyprops = selectedKeyboard.chars[normalizedChar];
         if (!keyprops) continue;
 
@@ -94,7 +94,7 @@ export default function PasteModal() {
         macroSteps.push({
           keys: [String(key)],
           modifiers: modifiers.length > 0 ? modifiers : null,
-          delay
+          delay,
         });
 
         // if what was requested was a dead key, we need to send an unmodified space to emit
@@ -123,10 +123,7 @@ export default function PasteModal() {
         <div className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="h-full space-y-4">
             <div className="space-y-4">
-              <SettingsPageHeader
-                title={m.paste_text()}
-                description={m.paste_text_description()}
-              />
+              <SettingsPageHeader title={m.paste_text()} description={m.paste_text_description()} />
 
               <div
                 className="animate-fadeIn space-y-2 opacity-0"
@@ -165,7 +162,7 @@ export default function PasteModal() {
                           ...new Set(
                             // @ts-expect-error TS doesn't recognize Intl.Segmenter in some environments
                             [...new Intl.Segmenter().segment(value)]
-                              .map(x => x.segment.normalize('NFC'))
+                              .map(x => x.segment.normalize("NFC"))
                               .filter(char => !selectedKeyboard.chars[char]),
                           ),
                         ];
@@ -178,8 +175,7 @@ export default function PasteModal() {
                       <div className="mt-2 flex items-center gap-x-2">
                         <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
                         <span className="text-xs text-red-500 dark:text-red-400">
-                          {m.paste_modal_invalid_chars_intro()}{" "}
-                          {invalidChars.join(", ")}
+                          {m.paste_modal_invalid_chars_intro()} {invalidChars.join(", ")}
                         </span>
                       </div>
                     )}
@@ -197,18 +193,22 @@ export default function PasteModal() {
                       setDelayValue(parseInt(e.target.value, 10));
                     }}
                   />
-                  {delayValue < 50 || delayValue > 65534 && (
-                    <div className="mt-2 flex items-center gap-x-2">
-                      <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
-                      <span className="text-xs text-red-500 dark:text-red-400">
-                        {m.paste_modal_delay_out_of_range({ min: 50, max: 65534 })}
-                      </span>
-                    </div>
-                  )}
+                  {delayValue < 50 ||
+                    (delayValue > 65534 && (
+                      <div className="mt-2 flex items-center gap-x-2">
+                        <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
+                        <span className="text-xs text-red-500 dark:text-red-400">
+                          {m.paste_modal_delay_out_of_range({ min: 50, max: 65534 })}
+                        </span>
+                      </div>
+                    ))}
                 </div>
                 <div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
-                    {m.paste_modal_sending_using_layout({ iso: selectedKeyboard.isoCode, name: selectedKeyboard.name })}
+                    {m.paste_modal_sending_using_layout({
+                      iso: selectedKeyboard.isoCode,
+                      name: selectedKeyboard.name,
+                    })}
                   </p>
                 </div>
               </div>
diff --git a/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx b/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
index dcdc9965..e1db40c6 100644
--- a/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
+++ b/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
@@ -27,7 +27,7 @@ export default function AddDeviceForm({
   return (
     <div className="space-y-4">
       <div
-        className="animate-fadeIn opacity-0 space-y-4"
+        className="animate-fadeIn space-y-4 opacity-0"
         style={{
           animationDuration: "0.5s",
           animationFillMode: "forwards",
@@ -74,7 +74,7 @@ export default function AddDeviceForm({
         />
       </div>
       <div
-        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/DeviceList.tsx b/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
index 7cad5a69..945cea49 100644
--- a/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
+++ b/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
@@ -34,7 +34,7 @@ export default function DeviceList({
           {storedDevices.map((device, index) => (
             <div key={index} className="flex items-center justify-between gap-x-2 p-3">
               <div className="space-y-0.5">
-                <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">
+                <p className="text-sm leading-none font-semibold text-slate-900 dark:text-slate-100">
                   {device?.name}
                 </p>
                 <p className="text-sm text-slate-600 dark:text-slate-400">
@@ -64,7 +64,7 @@ export default function DeviceList({
         </div>
       </Card>
       <div
-        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx b/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
index 14bbc8d0..6e60a6fe 100644
--- a/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
+++ b/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
@@ -13,7 +13,7 @@ export default function EmptyStateCard({
   setShowAddForm: (show: boolean) => void;
 }) {
   return (
-    <div className="select-none space-y-4">
+    <div className="space-y-4 select-none">
       <Card className="animate-fadeIn opacity-0">
         <div className="flex items-center justify-center py-8 text-center">
           <div className="space-y-3">
@@ -25,7 +25,7 @@ export default function EmptyStateCard({
                   </div>
                 </Card>
               </div>
-              <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
+              <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
                 {m.wake_on_lan_empty_no_devices_added()}
               </h3>
               <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@@ -36,7 +36,7 @@ export default function EmptyStateCard({
         </div>
       </Card>
       <div
-        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/Index.tsx b/ui/src/components/popovers/WakeOnLan/Index.tsx
index 707744a1..4762374a 100644
--- a/ui/src/components/popovers/WakeOnLan/Index.tsx
+++ b/ui/src/components/popovers/WakeOnLan/Index.tsx
@@ -69,13 +69,17 @@ export default function WakeOnLanModal() {
     (index: number) => {
       const updatedDevices = storedDevices.filter((_, i) => i !== index);
 
-      send("setWakeOnLanDevices", { params: { devices: updatedDevices } }, (resp: JsonRpcResponse) => {
-        if ("error" in resp) {
-          console.error("Failed to update Wake-on-LAN devices:", resp.error);
-        } else {
-          syncStoredDevices();
-        }
-      });
+      send(
+        "setWakeOnLanDevices",
+        { params: { devices: updatedDevices } },
+        (resp: JsonRpcResponse) => {
+          if ("error" in resp) {
+            console.error("Failed to update Wake-on-LAN devices:", resp.error);
+          } else {
+            syncStoredDevices();
+          }
+        },
+      );
     },
     [send, storedDevices, syncStoredDevices],
   );
@@ -85,15 +89,19 @@ export default function WakeOnLanModal() {
       if (!name || !macAddress) return;
       const updatedDevices = [...storedDevices, { name, macAddress }];
       console.log("updatedDevices", updatedDevices);
-      send("setWakeOnLanDevices", { params: { devices: updatedDevices } }, (resp: JsonRpcResponse) => {
-        if ("error" in resp) {
-          console.error("Failed to add Wake-on-LAN device:", resp.error);
-          setAddDeviceErrorMessage(m.wake_on_lan_failed_add_device());
-        } else {
-          setShowAddForm(false);
-          syncStoredDevices();
-        }
-      });
+      send(
+        "setWakeOnLanDevices",
+        { params: { devices: updatedDevices } },
+        (resp: JsonRpcResponse) => {
+          if ("error" in resp) {
+            console.error("Failed to add Wake-on-LAN device:", resp.error);
+            setAddDeviceErrorMessage(m.wake_on_lan_failed_add_device());
+          } else {
+            setShowAddForm(false);
+            syncStoredDevices();
+          }
+        },
+      );
     },
     [send, storedDevices, syncStoredDevices],
   );
@@ -103,10 +111,7 @@ export default function WakeOnLanModal() {
       <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="space-y-4">
-            <SettingsPageHeader
-              title={m.wake_on_lan()}
-              description={m.wake_on_lan_description()}
-            />
+            <SettingsPageHeader title={m.wake_on_lan()} description={m.wake_on_lan_description()} />
 
             {showAddForm ? (
               <AddDeviceForm
diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
index e140ad5c..769a6e20 100644
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -124,17 +124,28 @@ export default function ConnectionStatsSidebar() {
                     </div>
                     <div className="flex items-center">
                       <GridCard cardClassName="rounded-r-none">
-                        <div className="h-[34px] flex items-center text-xs select-all text-black font-mono dark:text-white px-3 ">
+                        <div className="flex h-[34px] items-center px-3 font-mono text-xs text-black select-all dark:text-white">
                           {remoteIPAddress}
                         </div>
                       </GridCard>
-                      <Button className="rounded-l-none border-l-slate-800/30 dark:border-slate-300/20" size="SM" type="button" theme="light" LeadingIcon={LuCopy} onClick={async () => {
-                        if (await copy(remoteIPAddress)) {
-                          notifications.success((m.connection_stats_remote_ip_address_copy_success({ ip: remoteIPAddress })));
-                        } else {
-                          notifications.error(m.connection_stats_remote_ip_address_copy_error());
-                        }
-                      }} />
+                      <Button
+                        className="rounded-l-none border-l-slate-800/30 dark:border-slate-300/20"
+                        size="SM"
+                        type="button"
+                        theme="light"
+                        LeadingIcon={LuCopy}
+                        onClick={async () => {
+                          if (await copy(remoteIPAddress)) {
+                            notifications.success(
+                              m.connection_stats_remote_ip_address_copy_success({
+                                ip: remoteIPAddress,
+                              }),
+                            );
+                          } else {
+                            notifications.error(m.connection_stats_remote_ip_address_copy_error());
+                          }
+                        }}
+                      />
                     </div>
                   </div>
                 )}
@@ -184,10 +195,7 @@ export default function ConnectionStatsSidebar() {
                   data={jitterBufferAvgDelayData}
                   gate={inboundVideoRtpStats}
                   supported={
-                    someIterable(
-                      inboundVideoRtpStats,
-                      ([, x]) => x.jitterBufferDelay != null,
-                    ) &&
+                    someIterable(inboundVideoRtpStats, ([, x]) => x.jitterBufferDelay != null) &&
                     someIterable(
                       inboundVideoRtpStats,
                       ([, x]) => x.jitterBufferEmittedCount != null,
diff --git a/ui/src/components/useCopyToClipBoard.tsx b/ui/src/components/useCopyToClipBoard.tsx
index 39041bb9..99de1d77 100644
--- a/ui/src/components/useCopyToClipBoard.tsx
+++ b/ui/src/components/useCopyToClipBoard.tsx
@@ -3,47 +3,50 @@ import { useCallback, useState } from "react";
 export function useCopyToClipboard(resetInterval = 2000) {
   const [isCopied, setIsCopied] = useState(false);
 
-  const copy = useCallback(async (text: string) => {
-    if (!text) return false;
+  const copy = useCallback(
+    async (text: string) => {
+      if (!text) return false;
 
-    let success = false;
+      let success = false;
 
-    if (navigator.clipboard && window.isSecureContext) {
-      try {
-        await navigator.clipboard.writeText(text);
-        success = true;
-      } catch (err) {
-        console.warn("Clipboard API failed:", err);
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          await navigator.clipboard.writeText(text);
+          success = true;
+        } catch (err) {
+          console.warn("Clipboard API failed:", err);
+        }
       }
-    }
 
-    // Fallback for insecure contexts
-    if (!success) {
-      const textarea = document.createElement("textarea");
-      textarea.value = text;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.focus();
-      textarea.select();
+      // Fallback for insecure contexts
+      if (!success) {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
 
-      try {
-        success = document.execCommand("copy");
-      } catch (err) {
-        console.error("Fallback copy failed:", err);
-        success = false;
-      } finally {
-        document.body.removeChild(textarea);
+        try {
+          success = document.execCommand("copy");
+        } catch (err) {
+          console.error("Fallback copy failed:", err);
+          success = false;
+        } finally {
+          document.body.removeChild(textarea);
+        }
       }
-    }
 
-    setIsCopied(success);
-    if (success && resetInterval > 0) {
-      setTimeout(() => setIsCopied(false), resetInterval);
-    }
+      setIsCopied(success);
+      if (success && resetInterval > 0) {
+        setTimeout(() => setIsCopied(false), resetInterval);
+      }
 
-    return success;
-  }, [resetInterval]);
+      return success;
+    },
+    [resetInterval],
+  );
 
   return { copy, isCopied };
 }
diff --git a/ui/src/constants/macros.ts b/ui/src/constants/macros.ts
index 7f21269f..0ffee6c3 100644
--- a/ui/src/constants/macros.ts
+++ b/ui/src/constants/macros.ts
@@ -2,4 +2,4 @@ export const DEFAULT_DELAY = 50;
 export const MAX_STEPS_PER_MACRO = 10;
 export const MAX_KEYS_PER_STEP = 10;
 export const MAX_TOTAL_MACROS = 25;
-export const COPY_SUFFIX = "(copy)";
\ No newline at end of file
+export const COPY_SUFFIX = "(copy)";
diff --git a/ui/src/hooks/hidRpc.ts b/ui/src/hooks/hidRpc.ts
index a429f053..a6b08b90 100644
--- a/ui/src/hooks/hidRpc.ts
+++ b/ui/src/hooks/hidRpc.ts
@@ -1,449 +1,428 @@
 import { hidKeyBufferSize, KeyboardLedState, KeysDownState } from "./stores";
 
 export const HID_RPC_MESSAGE_TYPES = {
-    Handshake: 0x01,
-    KeyboardReport: 0x02,
-    PointerReport: 0x03,
-    WheelReport: 0x04,
-    KeypressReport: 0x05,
-    KeypressKeepAliveReport: 0x09,
-    MouseReport: 0x06,
-    KeyboardMacroReport: 0x07,
-    CancelKeyboardMacroReport: 0x08,
-    KeyboardLedState: 0x32,
-    KeysDownState: 0x33,
-    KeyboardMacroState: 0x34,
-}
+  Handshake: 0x01,
+  KeyboardReport: 0x02,
+  PointerReport: 0x03,
+  WheelReport: 0x04,
+  KeypressReport: 0x05,
+  KeypressKeepAliveReport: 0x09,
+  MouseReport: 0x06,
+  KeyboardMacroReport: 0x07,
+  CancelKeyboardMacroReport: 0x08,
+  KeyboardLedState: 0x32,
+  KeysDownState: 0x33,
+  KeyboardMacroState: 0x34,
+};
 
-export type HidRpcMessageType = typeof HID_RPC_MESSAGE_TYPES[keyof typeof HID_RPC_MESSAGE_TYPES];
+export type HidRpcMessageType = (typeof HID_RPC_MESSAGE_TYPES)[keyof typeof HID_RPC_MESSAGE_TYPES];
 
 export const HID_RPC_VERSION = 0x01;
 
 const withinUint8Range = (value: number) => {
-    return value >= 0 && value <= 255;
+  return value >= 0 && value <= 255;
 };
 
 const fromInt32toUint8 = (n: number) => {
-    if (n !== n >> 0) {
-        throw new Error(`Number ${n} is not within the int32 range`);
-    }
+  if (n !== n >> 0) {
+    throw new Error(`Number ${n} is not within the int32 range`);
+  }
 
-    return new Uint8Array([
-        (n >> 24) & 0xFF,
-        (n >> 16) & 0xFF,
-        (n >> 8) & 0xFF,
-        n & 0xFF,
-    ]);
+  return new Uint8Array([(n >> 24) & 0xff, (n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff]);
 };
 
 const fromUint16toUint8 = (n: number) => {
-    if (n > 65535 || n < 0) {
-        throw new Error(`Number ${n} is not within the uint16 range`);
-    }
+  if (n > 65535 || n < 0) {
+    throw new Error(`Number ${n} is not within the uint16 range`);
+  }
 
-    return new Uint8Array([
-        (n >> 8) & 0xFF,
-        n & 0xFF,
-    ]);
+  return new Uint8Array([(n >> 8) & 0xff, n & 0xff]);
 };
 
 const fromUint32toUint8 = (n: number) => {
-    if (n > 4294967295 || n < 0) {
-        throw new Error(`Number ${n} is not within the uint32 range`);
-    }
+  if (n > 4294967295 || n < 0) {
+    throw new Error(`Number ${n} is not within the uint32 range`);
+  }
 
-    return new Uint8Array([
-        (n >> 24) & 0xFF,
-        (n >> 16) & 0xFF,
-        (n >> 8) & 0xFF,
-        n & 0xFF,
-    ]);
+  return new Uint8Array([(n >> 24) & 0xff, (n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff]);
 };
 
 const fromInt8ToUint8 = (n: number) => {
-    if (n < -128 || n > 127) {
-        throw new Error(`Number ${n} is not within the int8 range`);
-    }
+  if (n < -128 || n > 127) {
+    throw new Error(`Number ${n} is not within the int8 range`);
+  }
 
-    return n & 0xFF;
+  return n & 0xff;
 };
 
 const keyboardLedStateMasks = {
-    num_lock: 1 << 0,
-    caps_lock: 1 << 1,
-    scroll_lock: 1 << 2,
-    compose: 1 << 3,
-    kana: 1 << 4,
-    shift: 1 << 6,
-}
+  num_lock: 1 << 0,
+  caps_lock: 1 << 1,
+  scroll_lock: 1 << 2,
+  compose: 1 << 3,
+  kana: 1 << 4,
+  shift: 1 << 6,
+};
 
 export class RpcMessage {
-    messageType: HidRpcMessageType;
+  messageType: HidRpcMessageType;
 
-    constructor(messageType: HidRpcMessageType) {
-        this.messageType = messageType;
-    }
+  constructor(messageType: HidRpcMessageType) {
+    this.messageType = messageType;
+  }
 
-    marshal(): Uint8Array {
-        throw new Error("Not implemented");
-    }
+  marshal(): Uint8Array {
+    throw new Error("Not implemented");
+  }
 
-    public static unmarshal(_data: Uint8Array): RpcMessage | undefined {
-        throw new Error("Not implemented");
-    }
+  public static unmarshal(_data: Uint8Array): RpcMessage | undefined {
+    throw new Error("Not implemented");
+  }
 }
 
 export class HandshakeMessage extends RpcMessage {
-    version: number;
+  version: number;
 
-    constructor(version: number) {
-        super(HID_RPC_MESSAGE_TYPES.Handshake);
-        this.version = version;
+  constructor(version: number) {
+    super(HID_RPC_MESSAGE_TYPES.Handshake);
+    this.version = version;
+  }
+
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType, this.version]);
+  }
+
+  public static unmarshal(data: Uint8Array): HandshakeMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid handshake message length: ${data.length}`);
     }
 
-    marshal(): Uint8Array {
-        return new Uint8Array([this.messageType, this.version]);
-    }
-
-    public static unmarshal(data: Uint8Array): HandshakeMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid handshake message length: ${data.length}`);
-        }
-
-        return new HandshakeMessage(data[0]);
-    }
+    return new HandshakeMessage(data[0]);
+  }
 }
 
 export class KeypressReportMessage extends RpcMessage {
-    private _key = 0;
-    private _press = false;
+  private _key = 0;
+  private _press = false;
 
-    get key(): number {
-        return this._key;
+  get key(): number {
+    return this._key;
+  }
+
+  set key(value: number) {
+    if (!withinUint8Range(value)) {
+      throw new Error(`Key ${value} is not within the uint8 range`);
     }
 
-    set key(value: number) {
-        if (!withinUint8Range(value)) {
-            throw new Error(`Key ${value} is not within the uint8 range`);
-        }
+    this._key = value;
+  }
 
-        this._key = value;
+  get press(): boolean {
+    return this._press;
+  }
+
+  set press(value: boolean) {
+    this._press = value;
+  }
+
+  constructor(key: number, press: boolean) {
+    super(HID_RPC_MESSAGE_TYPES.KeypressReport);
+    this.key = key;
+    this.press = press;
+  }
+
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType, this.key, this.press ? 1 : 0]);
+  }
+
+  public static unmarshal(data: Uint8Array): KeypressReportMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid keypress report message length: ${data.length}`);
     }
 
-    get press(): boolean {
-        return this._press;
-    }
-
-    set press(value: boolean) {
-        this._press = value;
-    }
-
-    constructor(key: number, press: boolean) {
-        super(HID_RPC_MESSAGE_TYPES.KeypressReport);
-        this.key = key;
-        this.press = press;
-    }
-
-    marshal(): Uint8Array {
-        return new Uint8Array([
-            this.messageType,
-            this.key,
-            this.press ? 1 : 0,
-        ]);
-    }
-
-    public static unmarshal(data: Uint8Array): KeypressReportMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid keypress report message length: ${data.length}`);
-        }
-
-        return new KeypressReportMessage(data[0], data[1] === 1);
-    }
+    return new KeypressReportMessage(data[0], data[1] === 1);
+  }
 }
 
 export class KeyboardReportMessage extends RpcMessage {
-    private _keys: number[] = [];
-    private _modifier = 0;
+  private _keys: number[] = [];
+  private _modifier = 0;
 
-    get keys(): number[] {
-        return this._keys;
+  get keys(): number[] {
+    return this._keys;
+  }
+
+  set keys(value: number[]) {
+    value.forEach(k => {
+      if (!withinUint8Range(k)) {
+        throw new Error(`Key ${k} is not within the uint8 range`);
+      }
+    });
+
+    this._keys = value;
+  }
+
+  get modifier(): number {
+    return this._modifier;
+  }
+
+  set modifier(value: number) {
+    if (!withinUint8Range(value)) {
+      throw new Error(`Modifier ${value} is not within the uint8 range`);
     }
 
-    set keys(value: number[]) {
-        value.forEach((k) => {
-            if (!withinUint8Range(k)) {
-                throw new Error(`Key ${k} is not within the uint8 range`);
-            }
-        });
+    this._modifier = value;
+  }
 
-        this._keys = value;
+  constructor(keys: number[], modifier: number) {
+    super(HID_RPC_MESSAGE_TYPES.KeyboardReport);
+    this.keys = keys;
+    this.modifier = modifier;
+  }
+
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType, this.modifier, ...this.keys]);
+  }
+
+  public static unmarshal(data: Uint8Array): KeyboardReportMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid keyboard report message length: ${data.length}`);
     }
 
-    get modifier(): number {
-        return this._modifier;
-    }
-
-    set modifier(value: number) {
-        if (!withinUint8Range(value)) {
-            throw new Error(`Modifier ${value} is not within the uint8 range`);
-        }
-
-        this._modifier = value;
-    }
-
-    constructor(keys: number[], modifier: number) {
-        super(HID_RPC_MESSAGE_TYPES.KeyboardReport);
-        this.keys = keys;
-        this.modifier = modifier;
-    }
-
-    marshal(): Uint8Array {
-        return new Uint8Array([
-            this.messageType,
-            this.modifier,
-            ...this.keys,
-        ]);
-    }
-
-    public static unmarshal(data: Uint8Array): KeyboardReportMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid keyboard report message length: ${data.length}`);
-        }
-
-        return new KeyboardReportMessage(Array.from(data.slice(1)), data[0]);
-    }
+    return new KeyboardReportMessage(Array.from(data.slice(1)), data[0]);
+  }
 }
 
 export interface KeyboardMacroStep extends KeysDownState {
-    delay: number;
+  delay: number;
 }
 
 export class KeyboardMacroReportMessage extends RpcMessage {
-    isPaste: boolean;
-    stepCount: number;
-    steps: KeyboardMacroStep[];
+  isPaste: boolean;
+  stepCount: number;
+  steps: KeyboardMacroStep[];
 
-    KEYS_LENGTH = hidKeyBufferSize;
+  KEYS_LENGTH = hidKeyBufferSize;
 
-    constructor(isPaste: boolean, stepCount: number, steps: KeyboardMacroStep[]) {
-        super(HID_RPC_MESSAGE_TYPES.KeyboardMacroReport);
-        this.isPaste = isPaste;
-        this.stepCount = stepCount;
-        this.steps = steps;
+  constructor(isPaste: boolean, stepCount: number, steps: KeyboardMacroStep[]) {
+    super(HID_RPC_MESSAGE_TYPES.KeyboardMacroReport);
+    this.isPaste = isPaste;
+    this.stepCount = stepCount;
+    this.steps = steps;
+  }
+
+  marshal(): Uint8Array {
+    // validate if length is correct
+    if (this.stepCount !== this.steps.length) {
+      throw new Error(
+        `Length ${this.stepCount} is not equal to the number of steps ${this.steps.length}`,
+      );
     }
 
-    marshal(): Uint8Array {
-        // validate if length is correct
-        if (this.stepCount !== this.steps.length) {
-            throw new Error(`Length ${this.stepCount} is not equal to the number of steps ${this.steps.length}`);
+    const data = new Uint8Array(this.stepCount * 9 + 6);
+    data.set(
+      new Uint8Array([
+        this.messageType,
+        this.isPaste ? 1 : 0,
+        ...fromUint32toUint8(this.stepCount),
+      ]),
+      0,
+    );
+
+    let offset = 6;
+
+    for (let i = 0; i < this.stepCount; i++) {
+      const step = this.steps[i];
+      if (!withinUint8Range(step.modifier)) {
+        throw new Error(`Modifier ${step.modifier} is not within the uint8 range`);
+      }
+
+      // Ensure the keys are within the KEYS_LENGTH range
+      const keys = step.keys;
+      if (keys.length > this.KEYS_LENGTH) {
+        throw new Error(`Keys ${keys} is not within the hidKeyBufferSize range`);
+      } else if (keys.length < this.KEYS_LENGTH) {
+        keys.push(...Array(this.KEYS_LENGTH - keys.length).fill(0));
+      }
+
+      for (const key of keys) {
+        if (!withinUint8Range(key)) {
+          throw new Error(`Key ${key} is not within the uint8 range`);
         }
+      }
 
-        const data = new Uint8Array(this.stepCount * 9 + 6);
-        data.set(new Uint8Array([
-            this.messageType,
-            this.isPaste ? 1 : 0,
-            ...fromUint32toUint8(this.stepCount),
-        ]), 0);
+      const macroBinary = new Uint8Array([
+        step.modifier,
+        ...keys,
+        ...fromUint16toUint8(step.delay),
+      ]);
 
-        let offset = 6;
-
-        for (let i = 0; i < this.stepCount; i++) {
-            const step = this.steps[i];
-            if (!withinUint8Range(step.modifier)) {
-                throw new Error(`Modifier ${step.modifier} is not within the uint8 range`);
-            }
-
-            // Ensure the keys are within the KEYS_LENGTH range
-            const keys = step.keys;
-            if (keys.length > this.KEYS_LENGTH) {
-                throw new Error(`Keys ${keys} is not within the hidKeyBufferSize range`);
-            } else if (keys.length < this.KEYS_LENGTH) {
-                keys.push(...Array(this.KEYS_LENGTH - keys.length).fill(0));
-            }
-
-            for (const key of keys) {
-                if (!withinUint8Range(key)) {
-                    throw new Error(`Key ${key} is not within the uint8 range`);
-                }
-            }
-
-            const macroBinary = new Uint8Array([
-                step.modifier,
-                ...keys,
-                ...fromUint16toUint8(step.delay),
-            ]);
-
-            data.set(macroBinary, offset);
-            offset += 9;
-        }
-
-        return data;
+      data.set(macroBinary, offset);
+      offset += 9;
     }
+
+    return data;
+  }
 }
 
 export class KeyboardMacroStateMessage extends RpcMessage {
-    state: boolean;
-    isPaste: boolean;
+  state: boolean;
+  isPaste: boolean;
 
-    constructor(state: boolean, isPaste: boolean) {
-        super(HID_RPC_MESSAGE_TYPES.KeyboardMacroState);
-        this.state = state;
-        this.isPaste = isPaste;
+  constructor(state: boolean, isPaste: boolean) {
+    super(HID_RPC_MESSAGE_TYPES.KeyboardMacroState);
+    this.state = state;
+    this.isPaste = isPaste;
+  }
+
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType, this.state ? 1 : 0, this.isPaste ? 1 : 0]);
+  }
+
+  public static unmarshal(data: Uint8Array): KeyboardMacroStateMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid keyboard macro state report message length: ${data.length}`);
     }
 
-    marshal(): Uint8Array {
-        return new Uint8Array([
-            this.messageType,
-            this.state ? 1 : 0,
-            this.isPaste ? 1 : 0,
-        ]);
-    }
-
-    public static unmarshal(data: Uint8Array): KeyboardMacroStateMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid keyboard macro state report message length: ${data.length}`);
-        }
-
-        return new KeyboardMacroStateMessage(data[0] === 1, data[1] === 1);
-    }
+    return new KeyboardMacroStateMessage(data[0] === 1, data[1] === 1);
+  }
 }
 
 export class KeyboardLedStateMessage extends RpcMessage {
-    keyboardLedState: KeyboardLedState;
+  keyboardLedState: KeyboardLedState;
 
-    constructor(keyboardLedState: KeyboardLedState) {
-        super(HID_RPC_MESSAGE_TYPES.KeyboardLedState);
-        this.keyboardLedState = keyboardLedState;
+  constructor(keyboardLedState: KeyboardLedState) {
+    super(HID_RPC_MESSAGE_TYPES.KeyboardLedState);
+    this.keyboardLedState = keyboardLedState;
+  }
+
+  public static unmarshal(data: Uint8Array): KeyboardLedStateMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid keyboard led state message length: ${data.length}`);
     }
 
-    public static unmarshal(data: Uint8Array): KeyboardLedStateMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid keyboard led state message length: ${data.length}`);
-        }
+    const s = data[0];
 
-        const s = data[0];
+    const state = {
+      num_lock: (s & keyboardLedStateMasks.num_lock) !== 0,
+      caps_lock: (s & keyboardLedStateMasks.caps_lock) !== 0,
+      scroll_lock: (s & keyboardLedStateMasks.scroll_lock) !== 0,
+      compose: (s & keyboardLedStateMasks.compose) !== 0,
+      kana: (s & keyboardLedStateMasks.kana) !== 0,
+      shift: (s & keyboardLedStateMasks.shift) !== 0,
+    } as KeyboardLedState;
 
-        const state = {
-            num_lock: (s & keyboardLedStateMasks.num_lock) !== 0,
-            caps_lock: (s & keyboardLedStateMasks.caps_lock) !== 0,
-            scroll_lock: (s & keyboardLedStateMasks.scroll_lock) !== 0,
-            compose: (s & keyboardLedStateMasks.compose) !== 0,
-            kana: (s & keyboardLedStateMasks.kana) !== 0,
-            shift: (s & keyboardLedStateMasks.shift) !== 0,
-        } as KeyboardLedState;
-
-        return new KeyboardLedStateMessage(state);
-    }
+    return new KeyboardLedStateMessage(state);
+  }
 }
 
 export class KeysDownStateMessage extends RpcMessage {
-    keysDownState: KeysDownState;
+  keysDownState: KeysDownState;
 
-    constructor(keysDownState: KeysDownState) {
-        super(HID_RPC_MESSAGE_TYPES.KeysDownState);
-        this.keysDownState = keysDownState;
+  constructor(keysDownState: KeysDownState) {
+    super(HID_RPC_MESSAGE_TYPES.KeysDownState);
+    this.keysDownState = keysDownState;
+  }
+
+  public static unmarshal(data: Uint8Array): KeysDownStateMessage | undefined {
+    if (data.length < 1) {
+      throw new Error(`Invalid keys down state message length: ${data.length}`);
     }
 
-    public static unmarshal(data: Uint8Array): KeysDownStateMessage | undefined {
-        if (data.length < 1) {
-            throw new Error(`Invalid keys down state message length: ${data.length}`);
-        }
-
-        return new KeysDownStateMessage({
-            modifier: data[0],
-            keys: Array.from(data.slice(1))
-        });
-    }
+    return new KeysDownStateMessage({
+      modifier: data[0],
+      keys: Array.from(data.slice(1)),
+    });
+  }
 }
 
 export class PointerReportMessage extends RpcMessage {
-    x: number;
-    y: number;
-    buttons: number;
+  x: number;
+  y: number;
+  buttons: number;
 
-    constructor(x: number, y: number, buttons: number) {
-        super(HID_RPC_MESSAGE_TYPES.PointerReport);
-        this.x = x;
-        this.y = y;
-        this.buttons = buttons;
-    }
+  constructor(x: number, y: number, buttons: number) {
+    super(HID_RPC_MESSAGE_TYPES.PointerReport);
+    this.x = x;
+    this.y = y;
+    this.buttons = buttons;
+  }
 
-    marshal(): Uint8Array {
-        return new Uint8Array([
-            this.messageType,
-            ...fromInt32toUint8(this.x),
-            ...fromInt32toUint8(this.y),
-            this.buttons,
-        ]);
-    }
+  marshal(): Uint8Array {
+    return new Uint8Array([
+      this.messageType,
+      ...fromInt32toUint8(this.x),
+      ...fromInt32toUint8(this.y),
+      this.buttons,
+    ]);
+  }
 }
 
 export class CancelKeyboardMacroReportMessage extends RpcMessage {
+  constructor() {
+    super(HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport);
+  }
 
-    constructor() {
-        super(HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport);
-    }
-
-    marshal(): Uint8Array {
-        return new Uint8Array([this.messageType]);
-    }
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType]);
+  }
 }
 
 export class MouseReportMessage extends RpcMessage {
-    dx: number;
-    dy: number;
-    buttons: number;
+  dx: number;
+  dy: number;
+  buttons: number;
 
-    constructor(dx: number, dy: number, buttons: number) {
-        super(HID_RPC_MESSAGE_TYPES.MouseReport);
-        this.dx = dx;
-        this.dy = dy;
-        this.buttons = buttons;
-    }
+  constructor(dx: number, dy: number, buttons: number) {
+    super(HID_RPC_MESSAGE_TYPES.MouseReport);
+    this.dx = dx;
+    this.dy = dy;
+    this.buttons = buttons;
+  }
 
-    marshal(): Uint8Array {
-        return new Uint8Array([
-            this.messageType,
-            fromInt8ToUint8(this.dx),
-            fromInt8ToUint8(this.dy),
-            this.buttons,
-        ]);
-    }
+  marshal(): Uint8Array {
+    return new Uint8Array([
+      this.messageType,
+      fromInt8ToUint8(this.dx),
+      fromInt8ToUint8(this.dy),
+      this.buttons,
+    ]);
+  }
 }
 
 export class KeypressKeepAliveMessage extends RpcMessage {
-    constructor() {
-        super(HID_RPC_MESSAGE_TYPES.KeypressKeepAliveReport);
-    }
+  constructor() {
+    super(HID_RPC_MESSAGE_TYPES.KeypressKeepAliveReport);
+  }
 
-    marshal(): Uint8Array {
-        return new Uint8Array([this.messageType]);
-    }
+  marshal(): Uint8Array {
+    return new Uint8Array([this.messageType]);
+  }
 }
 
 export const messageRegistry = {
-    [HID_RPC_MESSAGE_TYPES.Handshake]: HandshakeMessage,
-    [HID_RPC_MESSAGE_TYPES.KeysDownState]: KeysDownStateMessage,
-    [HID_RPC_MESSAGE_TYPES.KeyboardLedState]: KeyboardLedStateMessage,
-    [HID_RPC_MESSAGE_TYPES.KeyboardReport]: KeyboardReportMessage,
-    [HID_RPC_MESSAGE_TYPES.KeypressReport]: KeypressReportMessage,
-    [HID_RPC_MESSAGE_TYPES.KeyboardMacroReport]: KeyboardMacroReportMessage,
-    [HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport]: CancelKeyboardMacroReportMessage,
-    [HID_RPC_MESSAGE_TYPES.KeyboardMacroState]: KeyboardMacroStateMessage,
-    [HID_RPC_MESSAGE_TYPES.KeypressKeepAliveReport]: KeypressKeepAliveMessage,
-}
+  [HID_RPC_MESSAGE_TYPES.Handshake]: HandshakeMessage,
+  [HID_RPC_MESSAGE_TYPES.KeysDownState]: KeysDownStateMessage,
+  [HID_RPC_MESSAGE_TYPES.KeyboardLedState]: KeyboardLedStateMessage,
+  [HID_RPC_MESSAGE_TYPES.KeyboardReport]: KeyboardReportMessage,
+  [HID_RPC_MESSAGE_TYPES.KeypressReport]: KeypressReportMessage,
+  [HID_RPC_MESSAGE_TYPES.KeyboardMacroReport]: KeyboardMacroReportMessage,
+  [HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport]: CancelKeyboardMacroReportMessage,
+  [HID_RPC_MESSAGE_TYPES.KeyboardMacroState]: KeyboardMacroStateMessage,
+  [HID_RPC_MESSAGE_TYPES.KeypressKeepAliveReport]: KeypressKeepAliveMessage,
+};
 
 export const unmarshalHidRpcMessage = (data: Uint8Array): RpcMessage | undefined => {
-    if (data.length < 1) {
-        throw new Error(`Invalid HID RPC message length: ${data.length}`);
-    }
+  if (data.length < 1) {
+    throw new Error(`Invalid HID RPC message length: ${data.length}`);
+  }
 
-    const payload = data.slice(1);
+  const payload = data.slice(1);
 
-    const messageType = data[0];
-    if (!(messageType in messageRegistry)) {
-        throw new Error(`Unknown HID RPC message type: ${messageType}`);
-    }
+  const messageType = data[0];
+  if (!(messageType in messageRegistry)) {
+    throw new Error(`Unknown HID RPC message type: ${messageType}`);
+  }
 
-    return messageRegistry[messageType].unmarshal(payload);
-};
\ No newline at end of file
+  return messageRegistry[messageType].unmarshal(payload);
+};
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index 4c3252d6..e0a19a04 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -1,11 +1,7 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
-import {
-  MAX_STEPS_PER_MACRO,
-  MAX_TOTAL_MACROS,
-  MAX_KEYS_PER_STEP,
-} from "@/constants/macros";
+import { MAX_STEPS_PER_MACRO, MAX_TOTAL_MACROS, MAX_KEYS_PER_STEP } from "@/constants/macros";
 
 // Define the JsonRpc types for better type checking
 interface JsonRpcResponse {
@@ -92,8 +88,7 @@ export const useUiStore = create<UIState>(set => ({
   setDisableVideoFocusTrap: (enabled: boolean) => set({ disableVideoFocusTrap: enabled }),
 
   isWakeOnLanModalVisible: false,
-  setWakeOnLanModalVisibility: (enabled: boolean) =>
-    set({ isWakeOnLanModalVisible: enabled }),
+  setWakeOnLanModalVisibility: (enabled: boolean) => set({ isWakeOnLanModalVisible: enabled }),
 
   toggleSidebarView: view =>
     set(state => {
@@ -275,12 +270,7 @@ export const useMouseStore = create<MouseState>(set => ({
   setMousePosition: (x, y) => set({ mouseX: x, mouseY: y }),
 }));
 
-export type HdmiStates =
-  | "ready"
-  | "no_signal"
-  | "no_lock"
-  | "out_of_range"
-  | "connecting";
+export type HdmiStates = "ready" | "no_signal" | "no_lock" | "out_of_range" | "connecting";
 export type HdmiErrorStates = Extract<
   VideoState["hdmiState"],
   "no_signal" | "no_lock" | "out_of_range"
@@ -310,8 +300,7 @@ export const useVideoStore = create<VideoState>(set => ({
   clientHeight: 0,
 
   // The video element's client size
-  setClientSize: (clientWidth: number, clientHeight: number) =>
-    set({ clientWidth, clientHeight }),
+  setClientSize: (clientWidth: number, clientHeight: number) => set({ clientWidth, clientHeight }),
 
   // Resolution
   setSize: (width: number, height: number) => set({ width, height }),
@@ -401,8 +390,7 @@ export const useSettingsStore = create(
         dim_after: 10000,
         off_after: 50000,
       },
-      setBacklightSettings: (settings: BacklightSettings) =>
-        set({ backlightSettings: settings }),
+      setBacklightSettings: (settings: BacklightSettings) => set({ backlightSettings: settings }),
 
       keyboardLayout: "en-US",
       setKeyboardLayout: (layout: string) => set({ keyboardLayout: layout }),
@@ -493,12 +481,7 @@ export interface KeysDownState {
   keys: number[];
 }
 
-export type USBStates =
-  | "configured"
-  | "attached"
-  | "not attached"
-  | "suspended"
-  | "addressed";
+export type USBStates = "configured" | "attached" | "not attached" | "suspended" | "addressed";
 
 export interface HidState {
   keyboardLedState: KeyboardLedState;
@@ -526,15 +509,13 @@ export const useHidStore = create<HidState>(set => ({
     kana: false,
     shift: false,
   } as KeyboardLedState,
-  setKeyboardLedState: (ledState: KeyboardLedState): void =>
-    set({ keyboardLedState: ledState }),
+  setKeyboardLedState: (ledState: KeyboardLedState): void => set({ keyboardLedState: ledState }),
 
   keysDownState: { modifier: 0, keys: [0, 0, 0, 0, 0, 0] } as KeysDownState,
   setKeysDownState: (state: KeysDownState): void => set({ keysDownState: state }),
 
   isVirtualKeyboardEnabled: false,
-  setVirtualKeyboardEnabled: (enabled: boolean): void =>
-    set({ isVirtualKeyboardEnabled: enabled }),
+  setVirtualKeyboardEnabled: (enabled: boolean): void => set({ isVirtualKeyboardEnabled: enabled }),
 
   isPasteInProgress: false,
   setPasteModeEnabled: (enabled: boolean): void => set({ isPasteInProgress: enabled }),
@@ -641,8 +622,7 @@ export const useUpdateStore = create<UpdateState>(set => ({
   setModalView: (view: UpdateModalViews) => set({ modalView: view }),
 
   updateErrorMessage: null,
-  setUpdateErrorMessage: (errorMessage: string) =>
-    set({ updateErrorMessage: errorMessage }),
+  setUpdateErrorMessage: (errorMessage: string) => set({ updateErrorMessage: errorMessage }),
 
   shouldReload: false,
   setShouldReload: (reloadRequired: boolean) => set({ shouldReload: reloadRequired }),
@@ -791,12 +771,7 @@ export type IPv6Mode =
 export type IPv4Mode = "disabled" | "static" | "dhcp" | "unknown";
 export type LLDPMode = "disabled" | "basic" | "all" | "unknown";
 export type mDNSMode = "disabled" | "auto" | "ipv4_only" | "ipv6_only" | "unknown";
-export type TimeSyncMode =
-  | "ntp_only"
-  | "ntp_and_http"
-  | "http_only"
-  | "custom"
-  | "unknown";
+export type TimeSyncMode = "ntp_only" | "ntp_and_http" | "http_only" | "custom" | "unknown";
 
 export interface IPv4StaticConfig {
   address: string;
@@ -861,12 +836,12 @@ export interface MacrosState {
   loadMacros: () => Promise<void>;
   saveMacros: (macros: KeySequence[]) => Promise<void>;
   sendFn:
-  | ((
-    method: string,
-    params: unknown,
-    callback?: ((resp: JsonRpcResponse) => void) | undefined,
-  ) => void)
-  | null;
+    | ((
+        method: string,
+        params: unknown,
+        callback?: ((resp: JsonRpcResponse) => void) | undefined,
+      ) => void)
+    | null;
   setSendFn: (
     sendFn: (
       method: string,
diff --git a/ui/src/hooks/useHidRpc.ts b/ui/src/hooks/useHidRpc.ts
index 2db8279f..a84dae5e 100644
--- a/ui/src/hooks/useHidRpc.ts
+++ b/ui/src/hooks/useHidRpc.ts
@@ -31,7 +31,8 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     rpcHidUnreliableChannel,
     rpcHidUnreliableNonOrderedChannel,
     setRpcHidProtocolVersion,
-    rpcHidProtocolVersion, hidRpcDisabled,
+    rpcHidProtocolVersion,
+    hidRpcDisabled,
   } = useRTCStore();
 
   const rpcHidReady = useMemo(() => {
@@ -40,15 +41,12 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
   }, [rpcHidChannel, rpcHidProtocolVersion, hidRpcDisabled]);
 
   const rpcHidUnreliableReady = useMemo(() => {
-    return (
-      rpcHidUnreliableChannel?.readyState === "open" && rpcHidProtocolVersion !== null
-    );
+    return rpcHidUnreliableChannel?.readyState === "open" && rpcHidProtocolVersion !== null;
   }, [rpcHidProtocolVersion, rpcHidUnreliableChannel?.readyState]);
 
   const rpcHidUnreliableNonOrderedReady = useMemo(() => {
     return (
-      rpcHidUnreliableNonOrderedChannel?.readyState === "open" &&
-      rpcHidProtocolVersion !== null
+      rpcHidUnreliableNonOrderedChannel?.readyState === "open" && rpcHidProtocolVersion !== null
     );
   }, [rpcHidProtocolVersion, rpcHidUnreliableNonOrderedChannel?.readyState]);
 
@@ -64,11 +62,7 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
   const sendMessage = useCallback(
     (
       message: RpcMessage,
-      {
-        ignoreHandshakeState,
-        useUnreliableChannel,
-        requireOrdered = true,
-      }: sendMessageParams = {},
+      { ignoreHandshakeState, useUnreliableChannel, requireOrdered = true }: sendMessageParams = {},
     ) => {
       if (hidRpcDisabled) return;
       if (rpcHidChannel?.readyState !== "open") return;
@@ -96,7 +90,8 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     [
       rpcHidChannel,
       rpcHidUnreliableChannel,
-      hidRpcDisabled, rpcHidUnreliableNonOrderedChannel,
+      hidRpcDisabled,
+      rpcHidUnreliableNonOrderedChannel,
       rpcHidReady,
       rpcHidUnreliableReady,
       rpcHidUnreliableNonOrderedReady,
@@ -140,12 +135,9 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     [sendMessage],
   );
 
-  const cancelOngoingKeyboardMacro = useCallback(
-    () => {
-      sendMessage(new CancelKeyboardMacroReportMessage());
-    },
-    [sendMessage],
-  );
+  const cancelOngoingKeyboardMacro = useCallback(() => {
+    sendMessage(new CancelKeyboardMacroReportMessage());
+  }, [sendMessage]);
 
   const reportKeypressKeepAlive = useCallback(() => {
     sendMessage(KEEPALIVE_MESSAGE);
@@ -224,7 +216,7 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     };
 
     const errorHandler = (e: Event) => {
-      console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${e}`)
+      console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${e}`);
     };
 
     rpcHidChannel.addEventListener("message", messageHandler);
diff --git a/ui/src/hooks/useJsonRpc.ts b/ui/src/hooks/useJsonRpc.ts
index e01dcbc7..abdc9bdd 100644
--- a/ui/src/hooks/useJsonRpc.ts
+++ b/ui/src/hooks/useJsonRpc.ts
@@ -37,14 +37,14 @@ let requestCounter = 0;
 // Map of blocked RPC methods by failsafe reason
 const blockedMethodsByReason: Record<string, string[]> = {
   video: [
-    'setStreamQualityFactor',
-    'getEDID',
-    'setEDID',
-    'getVideoLogStatus',
-    'setDisplayRotation',
-    'getVideoSleepMode',
-    'setVideoSleepMode',
-    'getVideoState',
+    "setStreamQualityFactor",
+    "getEDID",
+    "setEDID",
+    "getVideoLogStatus",
+    "setDisplayRotation",
+    "getVideoSleepMode",
+    "setVideoSleepMode",
+    "getVideoState",
   ],
 };
 
@@ -86,7 +86,7 @@ export function useJsonRpc(onRequest?: (payload: JsonRpcRequest) => void) {
 
       rpcDataChannel.send(JSON.stringify(payload));
     },
-    [rpcDataChannel, isFailsafeMode, reason]
+    [rpcDataChannel, isFailsafeMode, reason],
   );
 
   useEffect(() => {
@@ -117,8 +117,7 @@ export function useJsonRpc(onRequest?: (payload: JsonRpcRequest) => void) {
     return () => {
       rpcDataChannel.removeEventListener("message", messageHandler);
     };
-  },
-    [rpcDataChannel, onRequest]);
+  }, [rpcDataChannel, onRequest]);
 
   return { send };
 }
diff --git a/ui/src/hooks/useKeyboard.ts b/ui/src/hooks/useKeyboard.ts
index 4c4d2d43..3a57ad83 100644
--- a/ui/src/hooks/useKeyboard.ts
+++ b/ui/src/hooks/useKeyboard.ts
@@ -197,9 +197,7 @@ export default function useKeyboard() {
       // If we reach here it means we didn't find an empty slot or the key in the buffer
       if (overrun) {
         if (press) {
-          console.warn(
-            `keyboard buffer overflow current keys ${keys}, key: ${key} not added`,
-          );
+          console.warn(`keyboard buffer overflow current keys ${keys}, key: ${key} not added`);
           // Fill all key slots with ErrorRollOver (0x01) to indicate overflow
           keys.length = hidKeyBufferSize;
           keys.fill(hidErrorRollOver);
@@ -248,11 +246,7 @@ export default function useKeyboard() {
         // Older backends don't support the hidRpc API, so we need:
         // 1. Calculate the state
         // 2. Send the newly calculated state to the device
-        const downState = simulateDeviceSideKeyHandlingForLegacyDevices(
-          keysDownState,
-          key,
-          press,
-        );
+        const downState = simulateDeviceSideKeyHandlingForLegacyDevices(keysDownState, key, press);
 
         handleLegacyKeyboardReport(downState.keys, downState.modifier);
 
diff --git a/ui/src/hooks/useKeyboardLayout.ts b/ui/src/hooks/useKeyboardLayout.ts
index f96d8f6c..f82912d6 100644
--- a/ui/src/hooks/useKeyboardLayout.ts
+++ b/ui/src/hooks/useKeyboardLayout.ts
@@ -7,17 +7,17 @@ export default function useKeyboardLayout() {
   const { keyboardLayout } = useSettingsStore();
 
   const keyboardOptions = useMemo(() => {
-    return keyboards.map((keyboard) => {
-      return { label: keyboard.name, value: keyboard.isoCode }
+    return keyboards.map(keyboard => {
+      return { label: keyboard.name, value: keyboard.isoCode };
     });
   }, []);
 
   const isoCode = useMemo(() => {
     // If we don't have a specific layout, default to "en-US" because that was the original layout
-    // developed so it is a good fallback. Additionally, we replace "en_US" with "en-US" because 
+    // developed so it is a good fallback. Additionally, we replace "en_US" with "en-US" because
     // the original server-side code used "en_US" as the default value, but that's not the correct
     // ISO code for English/United State. To ensure we remain backward compatible with devices that
-    // have not had their Keyboard Layout selected by the user, we want to treat "en_US" as if it was 
+    // have not had their Keyboard Layout selected by the user, we want to treat "en_US" as if it was
     // "en-US" to match the ISO standard codes now used in the keyboardLayouts.
     console.debug("Current keyboard layout from store:", keyboardLayout);
     if (keyboardLayout && keyboardLayout.length > 0)
@@ -27,9 +27,11 @@ export default function useKeyboardLayout() {
 
   const selectedKeyboard = useMemo(() => {
     // fallback to original behaviour of en-US if no isoCode given or matching layout not found
-    return keyboards.find(keyboard => keyboard.isoCode === isoCode)
-      ?? keyboards.find(keyboard => keyboard.isoCode === "en-US")!;
+    return (
+      keyboards.find(keyboard => keyboard.isoCode === isoCode) ??
+      keyboards.find(keyboard => keyboard.isoCode === "en-US")!
+    );
   }, [isoCode]);
 
   return { keyboardOptions, isoCode, selectedKeyboard };
-}
\ No newline at end of file
+}
diff --git a/ui/src/hooks/useMouse.ts b/ui/src/hooks/useMouse.ts
index a814bca0..07799671 100644
--- a/ui/src/hooks/useMouse.ts
+++ b/ui/src/hooks/useMouse.ts
@@ -40,13 +40,7 @@ export default function useMouse() {
       }
       setMouseMove({ x, y, buttons });
     },
-    [
-      send,
-      reportRelMouseEvent,
-      setMouseMove,
-      mouseMode,
-      rpcHidReady,
-    ],
+    [send, reportRelMouseEvent, setMouseMove, mouseMode, rpcHidReady],
   );
 
   const getRelMouseMoveHandler = useCallback(
@@ -72,56 +66,52 @@ export default function useMouse() {
       // We set that for the debug info bar
       setMousePosition(x, y);
     },
-    [
-      send,
-      reportAbsMouseEvent,
-      setMousePosition,
-      mouseMode,
-      rpcHidReady,
-    ],
+    [send, reportAbsMouseEvent, setMousePosition, mouseMode, rpcHidReady],
   );
 
   const getAbsMouseMoveHandler = useCallback(
-    ({ videoClientWidth, videoClientHeight, videoWidth, videoHeight }: AbsMouseMoveHandlerProps) => (e: MouseEvent) => {
-      if (!videoClientWidth || !videoClientHeight) return;
-      if (mouseMode !== "absolute") return;
+    ({ videoClientWidth, videoClientHeight, videoWidth, videoHeight }: AbsMouseMoveHandlerProps) =>
+      (e: MouseEvent) => {
+        if (!videoClientWidth || !videoClientHeight) return;
+        if (mouseMode !== "absolute") return;
 
-      // Get the aspect ratios of the video element and the video stream
-      const videoElementAspectRatio = videoClientWidth / videoClientHeight;
-      const videoStreamAspectRatio = videoWidth / videoHeight;
+        // Get the aspect ratios of the video element and the video stream
+        const videoElementAspectRatio = videoClientWidth / videoClientHeight;
+        const videoStreamAspectRatio = videoWidth / videoHeight;
 
-      // Calculate the effective video display area
-      let effectiveWidth = videoClientWidth;
-      let effectiveHeight = videoClientHeight;
-      let offsetX = 0;
-      let offsetY = 0;
+        // Calculate the effective video display area
+        let effectiveWidth = videoClientWidth;
+        let effectiveHeight = videoClientHeight;
+        let offsetX = 0;
+        let offsetY = 0;
 
-      if (videoElementAspectRatio > videoStreamAspectRatio) {
-        // Pillarboxing: black bars on the left and right
-        effectiveWidth = videoClientHeight * videoStreamAspectRatio;
-        offsetX = (videoClientWidth - effectiveWidth) / 2;
-      } else if (videoElementAspectRatio < videoStreamAspectRatio) {
-        // Letterboxing: black bars on the top and bottom
-        effectiveHeight = videoClientWidth / videoStreamAspectRatio;
-        offsetY = (videoClientHeight - effectiveHeight) / 2;
-      }
+        if (videoElementAspectRatio > videoStreamAspectRatio) {
+          // Pillarboxing: black bars on the left and right
+          effectiveWidth = videoClientHeight * videoStreamAspectRatio;
+          offsetX = (videoClientWidth - effectiveWidth) / 2;
+        } else if (videoElementAspectRatio < videoStreamAspectRatio) {
+          // Letterboxing: black bars on the top and bottom
+          effectiveHeight = videoClientWidth / videoStreamAspectRatio;
+          offsetY = (videoClientHeight - effectiveHeight) / 2;
+        }
 
-      // Clamp mouse position within the effective video boundaries
-      const clampedX = Math.min(Math.max(offsetX, e.offsetX), offsetX + effectiveWidth);
-      const clampedY = Math.min(Math.max(offsetY, e.offsetY), offsetY + effectiveHeight);
+        // Clamp mouse position within the effective video boundaries
+        const clampedX = Math.min(Math.max(offsetX, e.offsetX), offsetX + effectiveWidth);
+        const clampedY = Math.min(Math.max(offsetY, e.offsetY), offsetY + effectiveHeight);
 
-      // Map clamped mouse position to the video stream's coordinate system
-      const relativeX = (clampedX - offsetX) / effectiveWidth;
-      const relativeY = (clampedY - offsetY) / effectiveHeight;
+        // Map clamped mouse position to the video stream's coordinate system
+        const relativeX = (clampedX - offsetX) / effectiveWidth;
+        const relativeY = (clampedY - offsetY) / effectiveHeight;
 
-      // Convert to HID absolute coordinate system (0-32767 range)
-      const x = Math.round(relativeX * 32767);
-      const y = Math.round(relativeY * 32767);
+        // Convert to HID absolute coordinate system (0-32767 range)
+        const x = Math.round(relativeX * 32767);
+        const y = Math.round(relativeY * 32767);
 
-      // Send mouse movement
-      const { buttons } = e;
-      sendAbsMouseMovement(x, y, buttons);
-    }, [mouseMode, sendAbsMouseMovement],
+        // Send mouse movement
+        const { buttons } = e;
+        sendAbsMouseMovement(x, y, buttons);
+      },
+    [mouseMode, sendAbsMouseMovement],
   );
 
   const getMouseWheelHandler = useCallback(
@@ -169,4 +159,4 @@ export default function useMouse() {
     getMouseWheelHandler,
     resetMousePosition,
   };
-}
\ No newline at end of file
+}
diff --git a/ui/src/hooks/useVersion.tsx b/ui/src/hooks/useVersion.tsx
index feb99617..76a4f8ae 100644
--- a/ui/src/hooks/useVersion.tsx
+++ b/ui/src/hooks/useVersion.tsx
@@ -20,12 +20,7 @@ export interface SystemVersionInfo {
 }
 
 export function useVersion() {
-  const {
-    appVersion,
-    systemVersion,
-    setAppVersion,
-    setSystemVersion,
-  } = useDeviceStore();
+  const { appVersion, systemVersion, setAppVersion, setSystemVersion } = useDeviceStore();
 
   const getVersionInfo = useCallback(async () => {
     try {
diff --git a/ui/src/keyboardLayouts.ts b/ui/src/keyboardLayouts.ts
index 8e305c5a..7dd4bfa1 100644
--- a/ui/src/keyboardLayouts.ts
+++ b/ui/src/keyboardLayouts.ts
@@ -1,6 +1,16 @@
-export interface KeyStroke { modifier: number; keys: number[]; }
-export interface KeyInfo { key: string | number; shift?: boolean, altRight?: boolean }
-export interface KeyCombo extends KeyInfo { deadKey?: boolean, accentKey?: KeyInfo }
+export interface KeyStroke {
+  modifier: number;
+  keys: number[];
+}
+export interface KeyInfo {
+  key: string | number;
+  shift?: boolean;
+  altRight?: boolean;
+}
+export interface KeyCombo extends KeyInfo {
+  deadKey?: boolean;
+  accentKey?: KeyInfo;
+}
 export interface KeyboardLayout {
   isoCode: string;
   name: string;
@@ -8,25 +18,39 @@ export interface KeyboardLayout {
   modifierDisplayMap: Record<string, string>;
   keyDisplayMap: Record<string, string>;
   virtualKeyboard: {
-    main: { default: string[], shift: string[] },
-    control?: { default: string[], shift?: string[] },
-    arrows?: { default: string[] }
+    main: { default: string[]; shift: string[] };
+    control?: { default: string[]; shift?: string[] };
+    arrows?: { default: string[] };
   };
 }
 
 // To add a new layout, create a file like the above and add it to the list
-import { cs_CZ } from "@/keyboardLayouts/cs_CZ"
-import { de_CH } from "@/keyboardLayouts/de_CH"
-import { de_DE } from "@/keyboardLayouts/de_DE"
-import { en_US } from "@/keyboardLayouts/en_US"
-import { en_UK } from "@/keyboardLayouts/en_UK"
-import { es_ES } from "@/keyboardLayouts/es_ES"
-import { fr_BE } from "@/keyboardLayouts/fr_BE"
-import { fr_CH } from "@/keyboardLayouts/fr_CH"
-import { fr_FR } from "@/keyboardLayouts/fr_FR"
-import { it_IT } from "@/keyboardLayouts/it_IT"
-import { nb_NO } from "@/keyboardLayouts/nb_NO"
-import { sv_SE } from "@/keyboardLayouts/sv_SE"
-import { da_DK } from "@/keyboardLayouts/da_DK"
+import { cs_CZ } from "@/keyboardLayouts/cs_CZ";
+import { de_CH } from "@/keyboardLayouts/de_CH";
+import { de_DE } from "@/keyboardLayouts/de_DE";
+import { en_US } from "@/keyboardLayouts/en_US";
+import { en_UK } from "@/keyboardLayouts/en_UK";
+import { es_ES } from "@/keyboardLayouts/es_ES";
+import { fr_BE } from "@/keyboardLayouts/fr_BE";
+import { fr_CH } from "@/keyboardLayouts/fr_CH";
+import { fr_FR } from "@/keyboardLayouts/fr_FR";
+import { it_IT } from "@/keyboardLayouts/it_IT";
+import { nb_NO } from "@/keyboardLayouts/nb_NO";
+import { sv_SE } from "@/keyboardLayouts/sv_SE";
+import { da_DK } from "@/keyboardLayouts/da_DK";
 
-export const keyboards: KeyboardLayout[] = [cs_CZ, de_CH, de_DE, en_UK, en_US, es_ES, fr_BE, fr_CH, fr_FR, it_IT, nb_NO, sv_SE, da_DK];
+export const keyboards: KeyboardLayout[] = [
+  cs_CZ,
+  de_CH,
+  de_DE,
+  en_UK,
+  en_US,
+  es_ES,
+  fr_BE,
+  fr_CH,
+  fr_FR,
+  it_IT,
+  nb_NO,
+  sv_SE,
+  da_DK,
+];
diff --git a/ui/src/keyboardLayouts/cs_CZ.ts b/ui/src/keyboardLayouts/cs_CZ.ts
index fd2dbfa9..5815239b 100644
--- a/ui/src/keyboardLayouts/cs_CZ.ts
+++ b/ui/src/keyboardLayouts/cs_CZ.ts
@@ -1,231 +1,231 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Čeština";
 const isoCode = "cs-CZ";
 
-const keyTrema: KeyCombo = { key: "Backslash" } // tréma (umlaut), two dots placed above a vowel
-const keyAcute: KeyCombo = { key: "Equal" } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "Digit3", shift: true, altRight: true } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyCaron: KeyCombo = { key: "Equal", shift: true } // caron or haček (inverted hat), mark ˇ placed above the letter
-const keyGrave: KeyCombo = { key: "Digit7", shift: true, altRight: true } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "Digit1", shift: true, altRight: true } // tilde, mark ~ placed above the letter
-const keyRing: KeyCombo = { key: "Backquote", shift: true } // kroužek (little ring), mark ° placed above the letter
-const keyOverdot: KeyCombo = { key: "Digit8", shift: true, altRight: true } // overdot (dot above), mark ˙ placed above the letter
-const keyHook: KeyCombo = { key: "Digit6", shift: true, altRight: true } // ogonoek (little hook), mark ˛ placed beneath a letter
-const keyCedille: KeyCombo = { key: "Equal", shift: true, altRight: true } // accent cedille (cedilla), mark ¸ placed beneath a letter
+const keyTrema: KeyCombo = { key: "Backslash" }; // tréma (umlaut), two dots placed above a vowel
+const keyAcute: KeyCombo = { key: "Equal" }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "Digit3", shift: true, altRight: true }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyCaron: KeyCombo = { key: "Equal", shift: true }; // caron or haček (inverted hat), mark ˇ placed above the letter
+const keyGrave: KeyCombo = { key: "Digit7", shift: true, altRight: true }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "Digit1", shift: true, altRight: true }; // tilde, mark ~ placed above the letter
+const keyRing: KeyCombo = { key: "Backquote", shift: true }; // kroužek (little ring), mark ° placed above the letter
+const keyOverdot: KeyCombo = { key: "Digit8", shift: true, altRight: true }; // overdot (dot above), mark ˙ placed above the letter
+const keyHook: KeyCombo = { key: "Digit6", shift: true, altRight: true }; // ogonoek (little hook), mark ˛ placed beneath a letter
+const keyCedille: KeyCombo = { key: "Equal", shift: true, altRight: true }; // accent cedille (cedilla), mark ¸ placed beneath a letter
 
 const chars = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
-  "Ȧ": { key: "KeyA", shift: true, accentKey: keyOverdot },
-  "Ą": { key: "KeyA", shift: true, accentKey: keyHook },
+  Ä: { key: "KeyA", shift: true, accentKey: keyTrema },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
+  Ȧ: { key: "KeyA", shift: true, accentKey: keyOverdot },
+  Ą: { key: "KeyA", shift: true, accentKey: keyHook },
   B: { key: "KeyB", shift: true },
-  "Ḃ": { key: "KeyB", shift: true, accentKEy: keyOverdot },
+  Ḃ: { key: "KeyB", shift: true, accentKEy: keyOverdot },
   C: { key: "KeyC", shift: true },
-  "Č": { key: "KeyC", shift: true, accentKey: keyCaron },
-  "Ċ": { key: "KeyC", shift: true, accentKey: keyOverdot },
-  "Ç": { key: "KeyC", shift: true, accentKey: keyCedille },
+  Č: { key: "KeyC", shift: true, accentKey: keyCaron },
+  Ċ: { key: "KeyC", shift: true, accentKey: keyOverdot },
+  Ç: { key: "KeyC", shift: true, accentKey: keyCedille },
   D: { key: "KeyD", shift: true },
-  "Ď": { key: "KeyD", shift: true, accentKey: keyCaron },
-  "Ḋ": { key: "KeyD", shift: true, accentKey: keyOverdot },
+  Ď: { key: "KeyD", shift: true, accentKey: keyCaron },
+  Ḋ: { key: "KeyD", shift: true, accentKey: keyOverdot },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "Ě": { key: "KeyE", shift: true, accentKey: keyCaron },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
-  "Ė": { key: "KeyE", shift: true, accentKEy: keyOverdot },
-  "Ę": { key: "KeyE", shift: true, accentKey: keyHook },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  Ě: { key: "KeyE", shift: true, accentKey: keyCaron },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ė: { key: "KeyE", shift: true, accentKEy: keyOverdot },
+  Ę: { key: "KeyE", shift: true, accentKey: keyHook },
   F: { key: "KeyF", shift: true },
-  "Ḟ": { key: "KeyF", shift: true, accentKey: keyOverdot },
+  Ḟ: { key: "KeyF", shift: true, accentKey: keyOverdot },
   G: { key: "KeyG", shift: true },
-  "Ġ": { key: "KeyG", shift: true, accentKey: keyOverdot },
+  Ġ: { key: "KeyG", shift: true, accentKey: keyOverdot },
   H: { key: "KeyH", shift: true },
-  "Ḣ": { key: "KeyH", shift: true, accentKey: keyOverdot },
+  Ḣ: { key: "KeyH", shift: true, accentKey: keyOverdot },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
-  "İ": { key: "KeyI", shift: true, accentKey: keyOverdot },
-  "Į": { key: "KeyI", shift: true, accentKey: keyHook },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
+  İ: { key: "KeyI", shift: true, accentKey: keyOverdot },
+  Į: { key: "KeyI", shift: true, accentKey: keyHook },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
-  "Ŀ": { key: "KeyL", shift: true },
+  Ŀ: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
-  "Ṁ": { key: "KeyM", shift: true },
+  Ṁ: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
-  "Ň": { key: "KeyN", shift: true, accentKey: keyCaron },
-  "Ñ": { key: "KeyN", shift: true, accentKey: keyTilde },
-  "Ṅ": { key: "KeyN", shift: true, accentKEy: keyOverdot },
+  Ň: { key: "KeyN", shift: true, accentKey: keyCaron },
+  Ñ: { key: "KeyN", shift: true, accentKey: keyTilde },
+  Ṅ: { key: "KeyN", shift: true, accentKEy: keyOverdot },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
-  "Ȯ": { key: "KeyO", shift: true, accentKey: keyOverdot },
-  "Ǫ": { key: "KeyO", shift: true, accentKey: keyHook },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ȯ: { key: "KeyO", shift: true, accentKey: keyOverdot },
+  Ǫ: { key: "KeyO", shift: true, accentKey: keyHook },
   P: { key: "KeyP", shift: true },
-  "Ṗ": { key: "KeyP", shift: true, accentKey: keyOverdot },
+  Ṗ: { key: "KeyP", shift: true, accentKey: keyOverdot },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
-  "Ř": { key: "KeyR", shift: true, accentKey: keyCaron },
-  "Ṙ": { key: "KeyR", shift: true, accentKey: keyOverdot },
+  Ř: { key: "KeyR", shift: true, accentKey: keyCaron },
+  Ṙ: { key: "KeyR", shift: true, accentKey: keyOverdot },
   S: { key: "KeyS", shift: true },
-  "Š": { key: "KeyS", shift: true, accentKey: keyCaron },
-  "Ṡ": { key: "KeyS", shift: true, accentKey: keyOverdot },
+  Š: { key: "KeyS", shift: true, accentKey: keyCaron },
+  Ṡ: { key: "KeyS", shift: true, accentKey: keyOverdot },
   T: { key: "KeyT", shift: true },
-  "Ť": { key: "KeyT", shift: true, accentKey: keyCaron },
-  "Ṫ": { key: "KeyT", shift: true, accentKey: keyOverdot },
+  Ť: { key: "KeyT", shift: true, accentKey: keyCaron },
+  Ṫ: { key: "KeyT", shift: true, accentKey: keyOverdot },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
-  "Ů": { key: "KeyU", shift: true, accentKey: keyRing },
-  "Ų": { key: "KeyU", shift: true, accentKey: keyHook },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ů: { key: "KeyU", shift: true, accentKey: keyRing },
+  Ų: { key: "KeyU", shift: true, accentKey: keyHook },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
-  "Ẇ": { key: "KeyW", shift: true, accentKey: keyOverdot },
+  Ẇ: { key: "KeyW", shift: true, accentKey: keyOverdot },
   X: { key: "KeyX", shift: true },
-  "Ẋ": { key: "KeyX", shift: true, accentKey: keyOverdot },
+  Ẋ: { key: "KeyX", shift: true, accentKey: keyOverdot },
   Y: { key: "KeyY", shift: true },
-  "Ý": { key: "KeyY", shift: true, accentKey: keyAcute },
-  "Ẏ": { key: "KeyY", shift: true, accentKey: keyOverdot },
+  Ý: { key: "KeyY", shift: true, accentKey: keyAcute },
+  Ẏ: { key: "KeyY", shift: true, accentKey: keyOverdot },
   Z: { key: "KeyZ", shift: true },
-  "Ż": { key: "KeyZ", shift: true, accentKey: keyOverdot },
+  Ż: { key: "KeyZ", shift: true, accentKey: keyOverdot },
   a: { key: "KeyA" },
-  "ä": { key: "KeyA", accentKey: keyTrema },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
-  "ã": { key: "KeyA", accentKey: keyTilde },
-  "ȧ": { key: "KeyA", accentKey: keyOverdot },
-  "ą": { key: "KeyA", accentKey: keyHook },
+  ä: { key: "KeyA", accentKey: keyTrema },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
+  ã: { key: "KeyA", accentKey: keyTilde },
+  ȧ: { key: "KeyA", accentKey: keyOverdot },
+  ą: { key: "KeyA", accentKey: keyHook },
   b: { key: "KeyB" },
   "{": { key: "KeyB", altRight: true },
-  "ḃ": { key: "KeyB", accentKey: keyOverdot },
+  ḃ: { key: "KeyB", accentKey: keyOverdot },
   c: { key: "KeyC" },
   "&": { key: "KeyC", altRight: true },
-  "ç": { key: "KeyC", accentKey: keyCedille },
-  "ċ": { key: "KeyC", accentKey: keyOverdot },
+  ç: { key: "KeyC", accentKey: keyCedille },
+  ċ: { key: "KeyC", accentKey: keyOverdot },
   d: { key: "KeyD" },
-  "ď": { key: "KeyD", accentKey: keyCaron },
-  "ḋ": { key: "KeyD", accentKey: keyOverdot },
-  "Đ": { key: "KeyD", altRight: true },
+  ď: { key: "KeyD", accentKey: keyCaron },
+  ḋ: { key: "KeyD", accentKey: keyOverdot },
+  Đ: { key: "KeyD", altRight: true },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "ė": { key: "KeyE", accentKey: keyOverdot },
-  "ę": { key: "KeyE", accentKey: keyHook },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  ê: { key: "KeyE", accentKey: keyHat },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
+  è: { key: "KeyE", accentKey: keyGrave },
+  ė: { key: "KeyE", accentKey: keyOverdot },
+  ę: { key: "KeyE", accentKey: keyHook },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
-  "ḟ": { key: "KeyF", accentKey: keyOverdot },
+  ḟ: { key: "KeyF", accentKey: keyOverdot },
   "[": { key: "KeyF", altRight: true },
   g: { key: "KeyG" },
-  "ġ": { key: "KeyG", accentKey: keyOverdot },
+  ġ: { key: "KeyG", accentKey: keyOverdot },
   "]": { key: "KeyF", altRight: true },
   h: { key: "KeyH" },
-  "ḣ": { key: "KeyH", accentKey: keyOverdot },
+  ḣ: { key: "KeyH", accentKey: keyOverdot },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
-  "ı": { key: "KeyI", accentKey: keyOverdot },
-  "į": { key: "KeyI", accentKey: keyHook },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
+  ı: { key: "KeyI", accentKey: keyOverdot },
+  į: { key: "KeyI", accentKey: keyHook },
   j: { key: "KeyJ" },
-  "ȷ": { key: "KeyJ", accentKey: keyOverdot },
+  ȷ: { key: "KeyJ", accentKey: keyOverdot },
   k: { key: "KeyK" },
-  "ł": { key: "KeyK", altRight: true },
+  ł: { key: "KeyK", altRight: true },
   l: { key: "KeyL" },
-  "ŀ": { key: "KeyL", accentKey: keyOverdot },
-  "Ł": { key: "KeyL", altRight: true },
+  ŀ: { key: "KeyL", accentKey: keyOverdot },
+  Ł: { key: "KeyL", altRight: true },
   m: { key: "KeyM" },
-  "ṁ": { key: "KeyM", accentKey: keyOverdot },
+  ṁ: { key: "KeyM", accentKey: keyOverdot },
   n: { key: "KeyN" },
   "}": { key: "KeyN", altRight: true },
-  "ň": { key: "KeyN", accentKey: keyCaron },
-  "ñ": { key: "KeyN", accentKey: keyTilde },
-  "ṅ": { key: "KeyN", accentKey: keyOverdot },
+  ň: { key: "KeyN", accentKey: keyCaron },
+  ñ: { key: "KeyN", accentKey: keyTilde },
+  ṅ: { key: "KeyN", accentKey: keyOverdot },
   o: { key: "KeyO" },
-  "ö": { key: "Key0", accentKey: keyTrema },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
-  "ȯ": { key: "KeyO", accentKey: keyOverdot },
-  "ǫ": { key: "KeyO", accentKey: keyHook },
+  ö: { key: "Key0", accentKey: keyTrema },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
+  ȯ: { key: "KeyO", accentKey: keyOverdot },
+  ǫ: { key: "KeyO", accentKey: keyHook },
   p: { key: "KeyP" },
-  "ṗ": { key: "KeyP", accentKey: keyOverdot },
+  ṗ: { key: "KeyP", accentKey: keyOverdot },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
-  "ṙ": { key: "KeyR", accentKey: keyOverdot },
+  ṙ: { key: "KeyR", accentKey: keyOverdot },
   s: { key: "KeyS" },
-  "ṡ": { key: "KeyS", accentKey: keyOverdot },
-  "đ": { key: "KeyS", altRight: true },
+  ṡ: { key: "KeyS", accentKey: keyOverdot },
+  đ: { key: "KeyS", altRight: true },
   t: { key: "KeyT" },
-  "ť": { key: "KeyT", accentKey: keyCaron },
-  "ṫ": { key: "KeyT", accentKey: keyOverdot },
+  ť: { key: "KeyT", accentKey: keyCaron },
+  ṫ: { key: "KeyT", accentKey: keyOverdot },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
-  "ų": { key: "KeyU", accentKey: keyHook },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
+  ų: { key: "KeyU", accentKey: keyHook },
   v: { key: "KeyV" },
   "@": { key: "KeyV", altRight: true },
   w: { key: "KeyW" },
-  "ẇ": { key: "KeyW", accentKey: keyOverdot },
+  ẇ: { key: "KeyW", accentKey: keyOverdot },
   x: { key: "KeyX" },
   "#": { key: "KeyX", altRight: true },
-  "ẋ": { key: "KeyX", accentKey: keyOverdot },
+  ẋ: { key: "KeyX", accentKey: keyOverdot },
   y: { key: "KeyY" },
-  "ẏ": { key: "KeyY", accentKey: keyOverdot },
+  ẏ: { key: "KeyY", accentKey: keyOverdot },
   z: { key: "KeyZ" },
-  "ż": { key: "KeyZ", accentKey: keyOverdot },
+  ż: { key: "KeyZ", accentKey: keyOverdot },
   ";": { key: "Backquote" },
   "°": { key: "Backquote", shift: true, deadKey: true },
   "+": { key: "Digit1" },
   1: { key: "Digit1", shift: true },
-  "ě": { key: "Digit2" },
+  ě: { key: "Digit2" },
   2: { key: "Digit2", shift: true },
-  "š": { key: "Digit3" },
+  š: { key: "Digit3" },
   3: { key: "Digit3", shift: true },
-  "č": { key: "Digit4" },
+  č: { key: "Digit4" },
   4: { key: "Digit4", shift: true },
-  "ř": { key: "Digit5" },
+  ř: { key: "Digit5" },
   5: { key: "Digit5", shift: true },
-  "ž": { key: "Digit6" },
+  ž: { key: "Digit6" },
   6: { key: "Digit6", shift: true },
-  "ý": { key: "Digit7" },
+  ý: { key: "Digit7" },
   7: { key: "Digit7", shift: true },
-  "á": { key: "Digit8" },
+  á: { key: "Digit8" },
   8: { key: "Digit8", shift: true },
-  "í": { key: "Digit9" },
+  í: { key: "Digit9" },
   9: { key: "Digit9", shift: true },
-  "é": { key: "Digit0" },
+  é: { key: "Digit0" },
   0: { key: "Digit0", shift: true },
   "=": { key: "Minus" },
   "%": { key: "Minus", shift: true },
-  "ú": { key: "BracketLeft" },
+  ú: { key: "BracketLeft" },
   "/": { key: "BracketLeft", shift: true },
   ")": { key: "BracketRight" },
   "(": { key: "BracketRight", shift: true },
-  "ů": { key: "Semicolon" },
-  "\"": { key: "Semicolon", shift: true },
+  ů: { key: "Semicolon" },
+  '"': { key: "Semicolon", shift: true },
   "§": { key: "Quote" },
   "!": { key: "Quote", shift: true },
   "'": { key: "Backslash", shift: true },
@@ -236,7 +236,7 @@ const chars = {
   ":": { key: "Period", shift: true },
   ">": { key: "Period", altRight: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "*": { key: "Slash", altRight: true },
   "\\": { key: "IntlBackslash" },
   "|": { key: "IntlBackslash", shift: true },
@@ -253,5 +253,5 @@ export const cs_CZ: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/da_DK.ts b/ui/src/keyboardLayouts/da_DK.ts
index b8500b4a..6fe074be 100644
--- a/ui/src/keyboardLayouts/da_DK.ts
+++ b/ui/src/keyboardLayouts/da_DK.ts
@@ -1,133 +1,133 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 export const name = "Dansk";
 const isoCode = "da-DK";
 
-const keyTrema = { key: "BracketRight" }
-const keyAcute = { key: "Equal", altRight: true }
-const keyHat = { key: "BracketRight", shift: true }
-const keyGrave = { key: "Equal", shift: true }
-const keyTilde = { key: "BracketRight", altRight: true }
+const keyTrema = { key: "BracketRight" };
+const keyAcute = { key: "Equal", altRight: true };
+const keyHat = { key: "BracketRight", shift: true };
+const keyGrave = { key: "Equal", shift: true };
+const keyTilde = { key: "BracketRight", altRight: true };
 
 export const chars = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  Ä: { key: "KeyA", shift: true, accentKey: keyTrema },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyY", shift: true },
   Z: { key: "KeyZ", shift: true },
   a: { key: "KeyA" },
-  "ä": { key: "KeyA", accentKey: keyTrema },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
-  "ã": { key: "KeyA", accentKey: keyTilde },
+  ä: { key: "KeyA", accentKey: keyTrema },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
+  ã: { key: "KeyA", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "é": { key: "KeyE", accentKey: keyAcute },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  é: { key: "KeyE", accentKey: keyAcute },
+  ê: { key: "KeyE", accentKey: keyHat },
+  è: { key: "KeyE", accentKey: keyGrave },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "KeyM" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ö": { key: "KeyO", accentKey: keyTrema },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ö: { key: "KeyO", accentKey: keyTrema },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
-  y: { key: "KeyY" },   // <-- corrected
-  z: { key: "KeyZ" },   // <-- corrected
+  y: { key: "KeyY" }, // <-- corrected
+  z: { key: "KeyZ" }, // <-- corrected
   "½": { key: "Backquote" },
   "§": { key: "Backquote", shift: true },
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
   "#": { key: "Digit3", shift: true },
   "£": { key: "Digit3", altRight: true },
   4: { key: "Digit4" },
   "¤": { key: "Digit4", shift: true },
-  "$": { key: "Digit4", altRight: true },
+  $: { key: "Digit4", altRight: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -147,12 +147,12 @@ export const chars = {
   "+": { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "\\": { key: "Equal" },
-  "å": { key: "BracketLeft" },
-  "Å": { key: "BracketLeft", shift: true },
-  "ø": { key: "Semicolon" },
-  "Ø": { key: "Semicolon", shift: true },
-  "æ": { key: "Quote" },
-  "Æ": { key: "Quote", shift: true },
+  å: { key: "BracketLeft" },
+  Å: { key: "BracketLeft", shift: true },
+  ø: { key: "Semicolon" },
+  Ø: { key: "Semicolon", shift: true },
+  æ: { key: "Quote" },
+  Æ: { key: "Quote", shift: true },
   "'": { key: "Backslash" },
   "*": { key: "Backslash", shift: true },
   ",": { key: "Comma" },
@@ -160,20 +160,19 @@ export const chars = {
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   "~": { key: "BracketRight", deadKey: true, altRight: true },
   "^": { key: "BracketRight", deadKey: true, shift: true },
-  "¨": { key: "BracketRight", deadKey: true, },
+  "¨": { key: "BracketRight", deadKey: true },
   "|": { key: "Equal", deadKey: true, altRight: true },
-  "`": { key: "Equal", deadKey: true, shift: true, },
-  "´": { key: "Equal", deadKey: true, },
+  "`": { key: "Equal", deadKey: true, shift: true },
+  "´": { key: "Equal", deadKey: true },
   " ": { key: "Space" },
   "\n": { key: "Enter" },
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
-
 } as Record<string, KeyCombo>;
 
 export const da_DK: KeyboardLayout = {
@@ -183,5 +182,5 @@ export const da_DK: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
+  virtualKeyboard: en_US.virtualKeyboard,
 };
diff --git a/ui/src/keyboardLayouts/de_CH.ts b/ui/src/keyboardLayouts/de_CH.ts
index 75ac49e8..bb348600 100644
--- a/ui/src/keyboardLayouts/de_CH.ts
+++ b/ui/src/keyboardLayouts/de_CH.ts
@@ -1,109 +1,109 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Schwiizerdütsch";
 const isoCode = "de-CH";
 
-const keyTrema: KeyCombo = { key: "BracketRight" } // tréma (umlaut), two dots placed above a vowel
-const keyAcute: KeyCombo = { key: "Minus", altRight: true } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "Equal" } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyGrave: KeyCombo = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "Equal", altRight: true } // tilde, mark ~ placed above the letter
+const keyTrema: KeyCombo = { key: "BracketRight" }; // tréma (umlaut), two dots placed above a vowel
+const keyAcute: KeyCombo = { key: "Minus", altRight: true }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "Equal" }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyGrave: KeyCombo = { key: "Equal", shift: true }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "Equal", altRight: true }; // tilde, mark ~ placed above the letter
 
 const chars = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  Ä: { key: "KeyA", shift: true, accentKey: keyTrema },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyZ", shift: true },
   Z: { key: "KeyY", shift: true },
   a: { key: "KeyA" },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "ã": { key: "KeyA", accentKey: keyTilde },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  ã: { key: "KeyA", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  ê: { key: "KeyE", accentKey: keyHat },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "KeyM" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
@@ -115,13 +115,13 @@ const chars = {
   "+": { key: "Digit1", shift: true },
   "|": { key: "Digit1", altRight: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
   "*": { key: "Digit3", shift: true },
   "#": { key: "Digit3", altRight: true },
   4: { key: "Digit4" },
-  "ç": { key: "Digit4", shift: true },
+  ç: { key: "Digit4", shift: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -139,17 +139,17 @@ const chars = {
   "^": { key: "Equal", deadKey: true },
   "`": { key: "Equal", shift: true },
   "~": { key: "Equal", altRight: true, deadKey: true },
-  "ü": { key: "BracketLeft" },
-  "è": { key: "BracketLeft", shift: true },
+  ü: { key: "BracketLeft" },
+  è: { key: "BracketLeft", shift: true },
   "[": { key: "BracketLeft", altRight: true },
   "!": { key: "BracketRight", shift: true },
   "]": { key: "BracketRight", altRight: true },
-  "ö": { key: "Semicolon" },
-  "é": { key: "Semicolon", shift: true },
-  "ä": { key: "Quote" },
-  "à": { key: "Quote", shift: true },
+  ö: { key: "Semicolon" },
+  é: { key: "Semicolon", shift: true },
+  ä: { key: "Quote" },
+  à: { key: "Quote", shift: true },
   "{": { key: "Quote", altRight: true },
-  "$": { key: "Backslash" },
+  $: { key: "Backslash" },
   "£": { key: "Backslash", shift: true },
   "}": { key: "Backslash", altRight: true },
   ",": { key: "Comma" },
@@ -157,7 +157,7 @@ const chars = {
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   "\\": { key: "IntlBackslash", altRight: true },
@@ -184,5 +184,5 @@ export const de_CH: KeyboardLayout = {
   keyDisplayMap: keyDisplayMap,
   // TODO need to localize these maps and layouts
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/de_DE.ts b/ui/src/keyboardLayouts/de_DE.ts
index d05d542e..2b079cb8 100644
--- a/ui/src/keyboardLayouts/de_DE.ts
+++ b/ui/src/keyboardLayouts/de_DE.ts
@@ -1,23 +1,23 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Deutsch";
 const isoCode = "de-DE";
 
-const keyAcute: KeyCombo = { key: "Equal" } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "Backquote" } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyGrave: KeyCombo = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
+const keyAcute: KeyCombo = { key: "Equal" }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "Backquote" }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyGrave: KeyCombo = { key: "Equal", shift: true }; // accent grave, mark ` placed above the letter
 
 const chars = {
   a: { key: "KeyA" },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
   A: { key: "KeyA", shift: true },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
   "☺": { key: "KeyA", altRight: true }, // white smiling face ☺
   b: { key: "KeyB" },
   B: { key: "KeyB", shift: true },
@@ -29,31 +29,31 @@ const chars = {
   D: { key: "KeyD", shift: true },
   "′": { key: "KeyD", altRight: true }, // prime, mark ′ placed above the letter
   e: { key: "KeyE" },
-  "é": { key: "KeyE", accentKey: keyAcute },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
+  é: { key: "KeyE", accentKey: keyAcute },
+  ê: { key: "KeyE", accentKey: keyHat },
+  è: { key: "KeyE", accentKey: keyGrave },
   "€": { key: "KeyE", altRight: true },
   E: { key: "KeyE", shift: true },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
   f: { key: "KeyF" },
   F: { key: "KeyF", shift: true },
   "˟": { key: "KeyF", deadKey: true, altRight: true }, // modifier letter cross accent, ˟
   G: { key: "KeyG", shift: true },
   g: { key: "KeyG" },
-  "ẞ": { key: "KeyG", altRight: true }, // capital sharp S, ẞ
+  ẞ: { key: "KeyG", altRight: true }, // capital sharp S, ẞ
   h: { key: "KeyH" },
   H: { key: "KeyH", shift: true },
-  "ˍ": { key: "KeyH", deadKey: true, altRight: true }, // modifier letter low macron, ˍ
+  ˍ: { key: "KeyH", deadKey: true, altRight: true }, // modifier letter low macron, ˍ
   i: { key: "KeyI" },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
   I: { key: "KeyI", shift: true },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
   "˜": { key: "KeyI", deadKey: true, altRight: true }, // tilde accent, mark ˜ placed above the letter
   j: { key: "KeyJ" },
   J: { key: "KeyJ", shift: true },
@@ -62,25 +62,25 @@ const chars = {
   K: { key: "KeyK", shift: true },
   l: { key: "KeyL" },
   L: { key: "KeyL", shift: true },
-  "ˏ": { key: "KeyL", deadKey: true, altRight: true }, // modifier letter reversed comma, ˏ
+  ˏ: { key: "KeyL", deadKey: true, altRight: true }, // modifier letter reversed comma, ˏ
   m: { key: "KeyM" },
   M: { key: "KeyM", shift: true },
-  "µ": { key: "KeyM", altRight: true },
+  µ: { key: "KeyM", altRight: true },
   n: { key: "KeyN" },
   N: { key: "KeyN", shift: true },
   "–": { key: "KeyN", altRight: true }, // en dash, –
   o: { key: "KeyO" },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
   O: { key: "KeyO", shift: true },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
   "˚": { key: "KeyO", deadKey: true, altRight: true }, // ring above, ˚
   p: { key: "KeyP" },
   P: { key: "KeyP", shift: true },
-  "ˀ": { key: "KeyP", deadKey: true, altRight: true }, // modifier letter apostrophe, ʾ
+  ˀ: { key: "KeyP", deadKey: true, altRight: true }, // modifier letter apostrophe, ʾ
   q: { key: "KeyQ" },
   Q: { key: "KeyQ", shift: true },
   "@": { key: "KeyQ", altRight: true },
@@ -92,15 +92,15 @@ const chars = {
   "″": { key: "KeyS", altRight: true }, // double prime, mark ″ placed above the letter
   T: { key: "KeyT", shift: true },
   t: { key: "KeyT" },
-  "ˇ": { key: "KeyT", deadKey: true, altRight: true }, // caron/hacek accent, mark ˇ placed above the letter
+  ˇ: { key: "KeyT", deadKey: true, altRight: true }, // caron/hacek accent, mark ˇ placed above the letter
   u: { key: "KeyU" },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
   U: { key: "KeyU", shift: true },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
   "˘": { key: "KeyU", deadKey: true, altRight: true }, // breve accent, ˘ placed above the letter
   v: { key: "KeyV" },
   V: { key: "KeyV", shift: true },
@@ -125,7 +125,7 @@ const chars = {
   "!": { key: "Digit1", shift: true },
   "’": { key: "Digit1", altRight: true }, // single quote, mark ’ placed above the letter
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "²": { key: "Digit2", altRight: true },
   "<": { key: "Digit2", altRight: true }, // non-US < and >
   3: { key: "Digit3" },
@@ -133,8 +133,8 @@ const chars = {
   "³": { key: "Digit3", altRight: true },
   ">": { key: "Digit3", altRight: true }, // non-US < and >
   4: { key: "Digit4" },
-  "$": { key: "Digit4", shift: true },
-  "—": { key: "Digit4", altRight: true }, // em dash, — 
+  $: { key: "Digit4", shift: true },
+  "—": { key: "Digit4", altRight: true }, // em dash, —
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   "¡": { key: "Digit5", altRight: true }, // inverted exclamation mark, ¡
@@ -153,25 +153,25 @@ const chars = {
   0: { key: "Digit0" },
   "=": { key: "Digit0", shift: true },
   "}": { key: "Digit0", altRight: true },
-  "ß": { key: "Minus" },
+  ß: { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "\\": { key: "Minus", altRight: true },
   "´": { key: "Equal", deadKey: true }, // accent acute, mark ´ placed above the letter
-  "`": { key: "Equal", shift: true, deadKey: true },  // accent grave, mark ` placed above the letter
+  "`": { key: "Equal", shift: true, deadKey: true }, // accent grave, mark ` placed above the letter
   "˙": { key: "Equal", control: true, altRight: true, deadKey: true }, // acute accent, mark ˙ placed above the letter
-  "ü": { key: "BracketLeft" },
-  "Ü": { key: "BracketLeft", shift: true },
+  ü: { key: "BracketLeft" },
+  Ü: { key: "BracketLeft", shift: true },
   Escape: { key: "BracketLeft", control: true },
-  "ʼ": { key: "BracketLeft", altRight: true }, // modifier letter apostrophe, ʼ
+  ʼ: { key: "BracketLeft", altRight: true }, // modifier letter apostrophe, ʼ
   "+": { key: "BracketRight" },
   "*": { key: "BracketRight", shift: true },
   Control: { key: "BracketRight", control: true },
   "~": { key: "BracketRight", altRight: true },
-  "ö": { key: "Semicolon" },
-  "Ö": { key: "Semicolon", shift: true },
-  "ˌ": { key: "Semicolon", deadkey: true, altRight: true }, // modifier letter low vertical line, ˌ
-  "ä": { key: "Quote" },
-  "Ä": { key: "Quote", shift: true },
+  ö: { key: "Semicolon" },
+  Ö: { key: "Semicolon", shift: true },
+  ˌ: { key: "Semicolon", deadkey: true, altRight: true }, // modifier letter low vertical line, ˌ
+  ä: { key: "Quote" },
+  Ä: { key: "Quote", shift: true },
   "˗": { key: "Quote", deadKey: true, altRight: true }, // modifier letter minus sign, ˗
   "#": { key: "Backslash" },
   "'": { key: "Backslash", shift: true },
@@ -183,7 +183,7 @@ const chars = {
   ":": { key: "Period", shift: true },
   "·": { key: "Period", altRight: true }, // middle dot, ·
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "\u00ad": { key: "Slash", altRight: true }, // soft hyphen, ­
   " ": { key: "Space" },
   "\n": { key: "Enter" },
@@ -237,7 +237,7 @@ export const keyDisplayMap: Record<string, string> = {
   "(Backslash)": "'",
 
   // Shifted Numbers
-  "(Digit2)": "\"",
+  "(Digit2)": '"',
   "(Digit3)": "§",
   "(Digit6)": "&",
   "(Digit7)": "/",
@@ -265,7 +265,7 @@ export const keyDisplayMap: Record<string, string> = {
   PrintScreen: "Druck",
   ScrollLock: "Rollen",
   "(Pause)": "Unterbr",
-}
+};
 
 export const modifierDisplayMap: Record<string, string> = {
   ShiftLeft: "Umschalt (links)",
@@ -298,25 +298,15 @@ export const virtualKeyboard = {
       "CapsLock (KeyA) (KeyS) (KeyD) (KeyF) (KeyG) (KeyH) (KeyJ) (KeyK) (KeyL) (Semicolon) (Quote) Enter",
       "ShiftLeft (KeyZ) (KeyX) (KeyC) (KeyV) (KeyB) (KeyN) (KeyM) (Comma) (Period) (Slash) ShiftRight",
       "ControlLeft MetaLeft AltLeft Space AltGr MetaRight Menu ControlRight",
-    ]
+    ],
   },
   control: {
-    default: [
-      "PrintScreen ScrollLock Pause",
-      "Insert Home PageUp",
-      "Delete End PageDown"
-    ],
-    shift: [
-      "(PrintScreen) ScrollLock (Pause)",
-      "Insert Home PageUp",
-      "Delete End PageDown"
-    ],
+    default: ["PrintScreen ScrollLock Pause", "Insert Home PageUp", "Delete End PageDown"],
+    shift: ["(PrintScreen) ScrollLock (Pause)", "Insert Home PageUp", "Delete End PageDown"],
   },
 
   arrows: {
-    default: [
-      " ArrowUp ",
-      "ArrowLeft ArrowDown ArrowRight"],
+    default: [" ArrowUp ", "ArrowLeft ArrowDown ArrowRight"],
   },
 
   numpad: {
@@ -334,8 +324,8 @@ export const virtualKeyboard = {
       "End ArrowDown PageDown NumpadEnter",
       "NumpadInsert NumpadDelete",
     ],
-  }
-}
+  },
+};
 
 export const de_DE: KeyboardLayout = {
   isoCode: isoCode,
@@ -343,5 +333,5 @@ export const de_DE: KeyboardLayout = {
   chars: chars,
   keyDisplayMap: keyDisplayMap,
   modifierDisplayMap: modifierDisplayMap,
-  virtualKeyboard: virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/en_UK.ts b/ui/src/keyboardLayouts/en_UK.ts
index 74b111a5..2b08e8f3 100644
--- a/ui/src/keyboardLayouts/en_UK.ts
+++ b/ui/src/keyboardLayouts/en_UK.ts
@@ -1,6 +1,6 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "English (UK)";
 const isoCode = "en-UK";
@@ -61,7 +61,7 @@ const chars = {
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   3: { key: "Digit3" },
   "£": { key: "Digit3", shift: true },
   4: { key: "Digit4" },
@@ -84,7 +84,7 @@ const chars = {
   "=": { key: "Equal" },
   "+": { key: "Equal", shift: true },
   "'": { key: "Quote" },
-  '@': { key: "Quote", shift: true },
+  "@": { key: "Quote", shift: true },
   ",": { key: "Comma" },
   "<": { key: "Comma", shift: true },
   "/": { key: "Slash" },
@@ -107,7 +107,7 @@ const chars = {
   "\n": { key: "Enter" },
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
-} as Record<string, KeyCombo>
+} as Record<string, KeyCombo>;
 
 export const en_UK: KeyboardLayout = {
   isoCode: isoCode,
@@ -116,5 +116,5 @@ export const en_UK: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/en_US.ts b/ui/src/keyboardLayouts/en_US.ts
index c4a1b250..b272bd68 100644
--- a/ui/src/keyboardLayouts/en_US.ts
+++ b/ui/src/keyboardLayouts/en_US.ts
@@ -1,4 +1,4 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
 const name = "English (US)";
 const isoCode = "en-US";
@@ -99,13 +99,13 @@ export const chars = {
   ">": { key: "Period", shift: true },
   ";": { key: "Semicolon" },
   ":": { key: "Semicolon", shift: true },
-  "¶": { key: "Semicolon", altRight: true }, // pilcrow sign 
+  "¶": { key: "Semicolon", altRight: true }, // pilcrow sign
   "[": { key: "BracketLeft" },
   "{": { key: "BracketLeft", shift: true },
-  "«": { key: "BracketLeft", altRight: true }, // double left quote sign 
+  "«": { key: "BracketLeft", altRight: true }, // double left quote sign
   "]": { key: "BracketRight" },
   "}": { key: "BracketRight", shift: true },
-  "»": { key: "BracketRight", altRight: true }, // double right quote sign 
+  "»": { key: "BracketRight", altRight: true }, // double right quote sign
   "\\": { key: "Backslash" },
   "|": { key: "Backslash", shift: true },
   "¬": { key: "Backslash", altRight: true }, // not sign
@@ -125,7 +125,7 @@ export const chars = {
   Break: { key: "Pause", shift: true },
   Insert: { key: "Insert" },
   Delete: { key: "Delete" },
-} as Record<string, KeyCombo>
+} as Record<string, KeyCombo>;
 
 export const modifierDisplayMap: Record<string, string> = {
   ControlLeft: "Left Ctrl",
@@ -173,28 +173,84 @@ export const keyDisplayMap: Record<string, string> = {
   Tab: "Tab ⇥",
 
   // Letters
-  KeyA: "a", KeyB: "b", KeyC: "c", KeyD: "d", KeyE: "e",
-  KeyF: "f", KeyG: "g", KeyH: "h", KeyI: "i", KeyJ: "j",
-  KeyK: "k", KeyL: "l", KeyM: "m", KeyN: "n", KeyO: "o",
-  KeyP: "p", KeyQ: "q", KeyR: "r", KeyS: "s", KeyT: "t",
-  KeyU: "u", KeyV: "v", KeyW: "w", KeyX: "x", KeyY: "y",
+  KeyA: "a",
+  KeyB: "b",
+  KeyC: "c",
+  KeyD: "d",
+  KeyE: "e",
+  KeyF: "f",
+  KeyG: "g",
+  KeyH: "h",
+  KeyI: "i",
+  KeyJ: "j",
+  KeyK: "k",
+  KeyL: "l",
+  KeyM: "m",
+  KeyN: "n",
+  KeyO: "o",
+  KeyP: "p",
+  KeyQ: "q",
+  KeyR: "r",
+  KeyS: "s",
+  KeyT: "t",
+  KeyU: "u",
+  KeyV: "v",
+  KeyW: "w",
+  KeyX: "x",
+  KeyY: "y",
   KeyZ: "z",
 
   // Capital letters
-  "(KeyA)": "A", "(KeyB)": "B", "(KeyC)": "C", "(KeyD)": "D", "(KeyE)": "E",
-  "(KeyF)": "F", "(KeyG)": "G", "(KeyH)": "H", "(KeyI)": "I", "(KeyJ)": "J",
-  "(KeyK)": "K", "(KeyL)": "L", "(KeyM)": "M", "(KeyN)": "N", "(KeyO)": "O",
-  "(KeyP)": "P", "(KeyQ)": "Q", "(KeyR)": "R", "(KeyS)": "S", "(KeyT)": "T",
-  "(KeyU)": "U", "(KeyV)": "V", "(KeyW)": "W", "(KeyX)": "X", "(KeyY)": "Y",
+  "(KeyA)": "A",
+  "(KeyB)": "B",
+  "(KeyC)": "C",
+  "(KeyD)": "D",
+  "(KeyE)": "E",
+  "(KeyF)": "F",
+  "(KeyG)": "G",
+  "(KeyH)": "H",
+  "(KeyI)": "I",
+  "(KeyJ)": "J",
+  "(KeyK)": "K",
+  "(KeyL)": "L",
+  "(KeyM)": "M",
+  "(KeyN)": "N",
+  "(KeyO)": "O",
+  "(KeyP)": "P",
+  "(KeyQ)": "Q",
+  "(KeyR)": "R",
+  "(KeyS)": "S",
+  "(KeyT)": "T",
+  "(KeyU)": "U",
+  "(KeyV)": "V",
+  "(KeyW)": "W",
+  "(KeyX)": "X",
+  "(KeyY)": "Y",
   "(KeyZ)": "Z",
 
   // Numbers
-  Digit1: "1", Digit2: "2", Digit3: "3", Digit4: "4", Digit5: "5",
-  Digit6: "6", Digit7: "7", Digit8: "8", Digit9: "9", Digit0: "0",
+  Digit1: "1",
+  Digit2: "2",
+  Digit3: "3",
+  Digit4: "4",
+  Digit5: "5",
+  Digit6: "6",
+  Digit7: "7",
+  Digit8: "8",
+  Digit9: "9",
+  Digit0: "0",
 
   // Shifted Numbers
-  "(Digit1)": "!", "(Digit2)": "@", "(Digit3)": "#", "(Digit4)": "$", "(Digit5)": "%",
-  "(Digit6)": "^", "(Digit7)": "&", "(Digit8)": "*", "(Digit9)": "(", "(Digit0)": ")",
+  "(Digit1)": "!",
+  "(Digit2)": "@",
+  "(Digit3)": "#",
+  "(Digit4)": "$",
+  "(Digit5)": "%",
+  "(Digit6)": "^",
+  "(Digit7)": "&",
+  "(Digit8)": "*",
+  "(Digit9)": "(",
+  "(Digit0)": ")",
 
   // Symbols
   Minus: "-",
@@ -210,7 +266,7 @@ export const keyDisplayMap: Record<string, string> = {
   Semicolon: ";",
   "(Semicolon)": ":",
   Quote: "'",
-  "(Quote)": "\"",
+  "(Quote)": '"',
   Comma: ",",
   "(Comma)": "<",
   Period: ".",
@@ -222,23 +278,49 @@ export const keyDisplayMap: Record<string, string> = {
   IntlBackslash: "\\",
 
   // Function keys
-  F1: "F1", F2: "F2", F3: "F3", F4: "F4",
-  F5: "F5", F6: "F6", F7: "F7", F8: "F8",
-  F9: "F9", F10: "F10", F11: "F11", F12: "F12",
+  F1: "F1",
+  F2: "F2",
+  F3: "F3",
+  F4: "F4",
+  F5: "F5",
+  F6: "F6",
+  F7: "F7",
+  F8: "F8",
+  F9: "F9",
+  F10: "F10",
+  F11: "F11",
+  F12: "F12",
 
   // Numpad
-  Numpad0: "Num 0", Numpad1: "Num 1", Numpad2: "Num 2",
-  Numpad3: "Num 3", Numpad4: "Num 4", Numpad5: "Num 5",
-  Numpad6: "Num 6", Numpad7: "Num 7", Numpad8: "Num 8",
-  Numpad9: "Num 9", NumpadAdd: "Num +", NumpadSubtract: "Num -",
-  NumpadMultiply: "Num *", NumpadDivide: "Num /", NumpadDecimal: "Num .",
-  NumpadEqual: "Num =", NumpadEnter: "Num Enter", NumpadInsert: "Ins",
-  NumpadDelete: "Del", NumLock: "Num Lock",
+  Numpad0: "Num 0",
+  Numpad1: "Num 1",
+  Numpad2: "Num 2",
+  Numpad3: "Num 3",
+  Numpad4: "Num 4",
+  Numpad5: "Num 5",
+  Numpad6: "Num 6",
+  Numpad7: "Num 7",
+  Numpad8: "Num 8",
+  Numpad9: "Num 9",
+  NumpadAdd: "Num +",
+  NumpadSubtract: "Num -",
+  NumpadMultiply: "Num *",
+  NumpadDivide: "Num /",
+  NumpadDecimal: "Num .",
+  NumpadEqual: "Num =",
+  NumpadEnter: "Num Enter",
+  NumpadInsert: "Ins",
+  NumpadDelete: "Del",
+  NumLock: "Num Lock",
 
   // Modals
-  PrintScreen: "Prt Sc", ScrollLock: "Scr Lk", Pause: "Pause",
-  "(PrintScreen)": "Sys Rq", "(Pause)": "Break",
-  SystemRequest: "Sys Rq", Break: "Break"
+  PrintScreen: "Prt Sc",
+  ScrollLock: "Scr Lk",
+  Pause: "Pause",
+  "(PrintScreen)": "Sys Rq",
+  "(Pause)": "Break",
+  SystemRequest: "Sys Rq",
+  Break: "Break",
 };
 
 export const virtualKeyboard = {
@@ -260,25 +342,15 @@ export const virtualKeyboard = {
       "CapsLock (KeyA) (KeyS) (KeyD) (KeyF) (KeyG) (KeyH) (KeyJ) (KeyK) (KeyL) (Semicolon) (Quote) Enter",
       "ShiftLeft (KeyZ) (KeyX) (KeyC) (KeyV) (KeyB) (KeyN) (KeyM) (Comma) (Period) (Slash) ShiftRight",
       "ControlLeft MetaLeft AltLeft Space AltGr MetaRight Menu ControlRight",
-    ]
+    ],
   },
   control: {
-    default: [
-      "PrintScreen ScrollLock Pause",
-      "Insert Home PageUp",
-      "Delete End PageDown"
-    ],
-    shift: [
-      "(PrintScreen) ScrollLock (Pause)",
-      "Insert Home PageUp",
-      "Delete End PageDown"
-    ],
+    default: ["PrintScreen ScrollLock Pause", "Insert Home PageUp", "Delete End PageDown"],
+    shift: ["(PrintScreen) ScrollLock (Pause)", "Insert Home PageUp", "Delete End PageDown"],
   },
 
   arrows: {
-    default: [
-      "ArrowUp",
-      "ArrowLeft ArrowDown ArrowRight"],
+    default: ["ArrowUp", "ArrowLeft ArrowDown ArrowRight"],
   },
 
   numpad: {
@@ -296,8 +368,8 @@ export const virtualKeyboard = {
       "End ArrowDown PageDown NumpadEnter",
       "NumpadInsert NumpadDelete",
     ],
-  }
-}
+  },
+};
 
 export const en_US: KeyboardLayout = {
   isoCode,
@@ -305,7 +377,5 @@ export const en_US: KeyboardLayout = {
   chars,
   keyDisplayMap,
   modifierDisplayMap,
-  virtualKeyboard
+  virtualKeyboard,
 };
-
-
diff --git a/ui/src/keyboardLayouts/es_ES.ts b/ui/src/keyboardLayouts/es_ES.ts
index 3bf85e93..f5014184 100644
--- a/ui/src/keyboardLayouts/es_ES.ts
+++ b/ui/src/keyboardLayouts/es_ES.ts
@@ -1,134 +1,134 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Español";
 const isoCode = "es-ES";
 
-const keyTrema: KeyCombo = { key: "Quote", shift: true } // tréma (umlaut), two dots placed above a vowel
-const keyAcute: KeyCombo = { key: "Quote" } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "BracketRight", shift: true } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyGrave: KeyCombo = { key: "BracketRight" } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "Key4", altRight: true } // tilde, mark ~ placed above the letter
+const keyTrema: KeyCombo = { key: "Quote", shift: true }; // tréma (umlaut), two dots placed above a vowel
+const keyAcute: KeyCombo = { key: "Quote" }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "BracketRight", shift: true }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyGrave: KeyCombo = { key: "BracketRight" }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "Key4", altRight: true }; // tilde, mark ~ placed above the letter
 
 const chars = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  Ä: { key: "KeyA", shift: true, accentKey: keyTrema },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyY", shift: true },
   Z: { key: "KeyZ", shift: true },
   a: { key: "KeyA" },
-  "ä": { key: "KeyA", accentKey: keyTrema },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
-  "ã": { key: "KeyA", accentKey: keyTilde },
+  ä: { key: "KeyA", accentKey: keyTrema },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
+  ã: { key: "KeyA", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "é": { key: "KeyE", accentKey: keyAcute },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  é: { key: "KeyE", accentKey: keyAcute },
+  ê: { key: "KeyE", accentKey: keyHat },
+  è: { key: "KeyE", accentKey: keyGrave },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "KeyM" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ö": { key: "KeyO", accentKey: keyTrema },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ö: { key: "KeyO", accentKey: keyTrema },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
   y: { key: "KeyY" },
   z: { key: "KeyZ" },
-  "º": { key: "Backquote" },
-  "ª": { key: "Backquote", shift: true },
+  º: { key: "Backquote" },
+  ª: { key: "Backquote", shift: true },
   "\\": { key: "Backquote", altRight: true },
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   "|": { key: "Digit1", altRight: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
   "·": { key: "Digit3", shift: true },
   "#": { key: "Digit3", altRight: true },
   4: { key: "Digit4" },
-  "$": { key: "Digit4", shift: true },
+  $: { key: "Digit4", shift: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -150,18 +150,18 @@ const chars = {
   "+": { key: "BracketRight" },
   "*": { key: "BracketRight", shift: true },
   "]": { key: "BracketRight", altRight: true },
-  "ñ": { key: "Semicolon" },
-  "Ñ": { key: "Semicolon", shift: true },
+  ñ: { key: "Semicolon" },
+  Ñ: { key: "Semicolon", shift: true },
   "{": { key: "Quote", altRight: true },
-  "ç": { key: "Backslash" },
-  "Ç": { key: "Backslash", shift: true },
+  ç: { key: "Backslash" },
+  Ç: { key: "Backslash", shift: true },
   "}": { key: "Backslash", altRight: true },
   ",": { key: "Comma" },
   ";": { key: "Comma", shift: true },
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   " ": { key: "Space" },
@@ -177,5 +177,5 @@ export const es_ES: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/fr_BE.ts b/ui/src/keyboardLayouts/fr_BE.ts
index 0aa47501..9eb0fef0 100644
--- a/ui/src/keyboardLayouts/fr_BE.ts
+++ b/ui/src/keyboardLayouts/fr_BE.ts
@@ -1,111 +1,111 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Belgisch Nederlands";
 const isoCode = "nl-BE";
 
-const keyTrema: KeyCombo = { key: "BracketLeft", shift: true } // tréma (umlaut), two dots placed above a vowel
-const keyHat: KeyCombo = { key: "BracketLeft" } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyAcute: KeyCombo = { key: "Semicolon", altRight: true } // accent aigu (acute accent), mark ´ placed above the letter
-const keyGrave: KeyCombo = { key: "Quote", shift: true } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "Slash", altRight: true } // tilde, mark ~ placed above the letter
+const keyTrema: KeyCombo = { key: "BracketLeft", shift: true }; // tréma (umlaut), two dots placed above a vowel
+const keyHat: KeyCombo = { key: "BracketLeft" }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyAcute: KeyCombo = { key: "Semicolon", altRight: true }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyGrave: KeyCombo = { key: "Quote", shift: true }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "Slash", altRight: true }; // tilde, mark ~ placed above the letter
 
 const chars = {
   A: { key: "KeyQ", shift: true },
-  "Ä": { key: "KeyQ", shift: true, accentKey: keyTrema },
-  "Â": { key: "KeyQ", shift: true, accentKey: keyHat },
-  "Á": { key: "KeyQ", shift: true, accentKey: keyAcute },
-  "À": { key: "KeyQ", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyQ", shift: true, accentKey: keyTilde },
+  Ä: { key: "KeyQ", shift: true, accentKey: keyTrema },
+  Â: { key: "KeyQ", shift: true, accentKey: keyHat },
+  Á: { key: "KeyQ", shift: true, accentKey: keyAcute },
+  À: { key: "KeyQ", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyQ", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "Semicolon", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyA", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyZ", shift: true },
   Z: { key: "KeyY", shift: true },
   a: { key: "KeyQ" },
-  "ä": { key: "KeyQ", accentKey: keyTrema },
-  "â": { key: "KeyQ", accentKey: keyHat },
-  "á": { key: "KeyQ", accentKey: keyAcute },
-  "ã": { key: "KeyQ", accentKey: keyTilde },
+  ä: { key: "KeyQ", accentKey: keyTrema },
+  â: { key: "KeyQ", accentKey: keyHat },
+  á: { key: "KeyQ", accentKey: keyAcute },
+  ã: { key: "KeyQ", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  ê: { key: "KeyE", accentKey: keyHat },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  î: { key: "KeyI", accentKey: keyHat },
+  í: { key: "KeyI", accentKey: keyAcute },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "Semicolon" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ö": { key: "KeyO", accentKey: keyTrema },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ö: { key: "KeyO", accentKey: keyTrema },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyA" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  û: { key: "KeyU", accentKey: keyHat },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
@@ -116,10 +116,10 @@ const chars = {
   "&": { key: "Digit1" },
   1: { key: "Digit1", shift: true },
   "|": { key: "Digit1", altRight: true },
-  "é": { key: "Digit2" },
+  é: { key: "Digit2" },
   2: { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
-  "\"": { key: "Digit3" },
+  '"': { key: "Digit3" },
   3: { key: "Digit3", shift: true },
   "#": { key: "Digit3", altRight: true },
   "'": { key: "Digit4" },
@@ -129,27 +129,27 @@ const chars = {
   "§": { key: "Digit6" },
   6: { key: "Digit6", shift: true },
   "^": { key: "Digit6", altRight: true },
-  "è": { key: "Digit7" },
+  è: { key: "Digit7" },
   7: { key: "Digit7", shift: true },
   "!": { key: "Digit8" },
   8: { key: "Digit8", shift: true },
-  "ç": { key: "Digit9" },
+  ç: { key: "Digit9" },
   9: { key: "Digit9", shift: true },
   "{": { key: "Digit9", altRight: true },
-  "à": { key: "Digit0" },
+  à: { key: "Digit0" },
   0: { key: "Digit0", shift: true },
   "}": { key: "Digit0", altRight: true },
   ")": { key: "Minus" },
   "°": { key: "Minus", shift: true },
   "-": { key: "Equal", deadKey: true },
-  "_": { key: "Equal", shift: true },
+  _: { key: "Equal", shift: true },
   "[": { key: "BracketLeft", altRight: true },
-  "$": { key: "BracketRight" },
+  $: { key: "BracketRight" },
   "*": { key: "BracketRight", altRight: true },
   "]": { key: "BracketRight", altRight: true },
-  "ù": { key: "Quote" },
+  ù: { key: "Quote" },
   "%": { key: "Quote", shift: true },
-  "µ": { key: "Backslash" },
+  µ: { key: "Backslash" },
   "£": { key: "Backslash", shift: true },
   ",": { key: "KeyM" },
   "?": { key: "KeyM", shift: true },
@@ -176,5 +176,5 @@ export const fr_BE: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/fr_CH.ts b/ui/src/keyboardLayouts/fr_CH.ts
index 6b6ee5af..319f2561 100644
--- a/ui/src/keyboardLayouts/fr_CH.ts
+++ b/ui/src/keyboardLayouts/fr_CH.ts
@@ -1,28 +1,28 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { de_CH } from "./de_CH"
+import { de_CH } from "./de_CH";
 
 const name = "Français de Suisse";
 const isoCode = "fr-CH";
 
 const chars = {
   ...de_CH.chars,
-  "è": { key: "BracketLeft" },
-  "ü": { key: "BracketLeft", shift: true },
-  "é": { key: "Semicolon" },
-  "ö": { key: "Semicolon", shift: true },
-  "à": { key: "Quote" },
-  "ä": { key: "Quote", shift: true },
+  è: { key: "BracketLeft" },
+  ü: { key: "BracketLeft", shift: true },
+  é: { key: "Semicolon" },
+  ö: { key: "Semicolon", shift: true },
+  à: { key: "Quote" },
+  ä: { key: "Quote", shift: true },
 } as Record<string, KeyCombo>;
 
 const keyDisplayMap = {
   ...de_CH.keyDisplayMap,
-  "BracketLeft": "è",
-  "BracketLeftShift": "ü",
-  "Semicolon": "é",
-  "SemicolonShift": "ö",
-  "Quote": "à",
-  "QuoteShift": "ä",
+  BracketLeft: "è",
+  BracketLeftShift: "ü",
+  Semicolon: "é",
+  SemicolonShift: "ö",
+  Quote: "à",
+  QuoteShift: "ä",
 } as Record<string, string>;
 
 export const fr_CH: KeyboardLayout = {
@@ -32,5 +32,5 @@ export const fr_CH: KeyboardLayout = {
   keyDisplayMap: keyDisplayMap,
   // TODO need to localize these maps and layouts
   modifierDisplayMap: de_CH.modifierDisplayMap,
-  virtualKeyboard: de_CH.virtualKeyboard
+  virtualKeyboard: de_CH.virtualKeyboard,
 };
diff --git a/ui/src/keyboardLayouts/fr_FR.ts b/ui/src/keyboardLayouts/fr_FR.ts
index 561431b4..6f6d162e 100644
--- a/ui/src/keyboardLayouts/fr_FR.ts
+++ b/ui/src/keyboardLayouts/fr_FR.ts
@@ -1,82 +1,82 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Français";
 const isoCode = "fr-FR";
 
-const keyTrema: KeyCombo = { key: "BracketLeft", shift: true } // tréma (umlaut), two dots placed above a vowel
-const keyHat: KeyCombo = { key: "BracketLeft" } // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyTrema: KeyCombo = { key: "BracketLeft", shift: true }; // tréma (umlaut), two dots placed above a vowel
+const keyHat: KeyCombo = { key: "BracketLeft" }; // accent circonflexe (accent hat), mark ^ placed above the letter
 
 const chars = {
   A: { key: "KeyQ", shift: true },
-  "Ä": { key: "KeyQ", shift: true, accentKey: keyTrema },
-  "Â": { key: "KeyQ", shift: true, accentKey: keyHat },
+  Ä: { key: "KeyQ", shift: true, accentKey: keyTrema },
+  Â: { key: "KeyQ", shift: true, accentKey: keyHat },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "Semicolon", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyA", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyZ", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyY", shift: true },
   Z: { key: "KeyW", shift: true },
   a: { key: "KeyQ" },
-  "ä": { key: "KeyQ", accentKey: keyTrema },
-  "â": { key: "KeyQ", accentKey: keyHat },
+  ä: { key: "KeyQ", accentKey: keyTrema },
+  â: { key: "KeyQ", accentKey: keyHat },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "ê": { key: "KeyE", accentKey: keyHat },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  ê: { key: "KeyE", accentKey: keyHat },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "î": { key: "KeyI", accentKey: keyHat },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  î: { key: "KeyI", accentKey: keyHat },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "Semicolon" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ö": { key: "KeyO", accentKey: keyTrema },
-  "ô": { key: "KeyO", accentKey: keyHat },
+  ö: { key: "KeyO", accentKey: keyTrema },
+  ô: { key: "KeyO", accentKey: keyHat },
   p: { key: "KeyP" },
   q: { key: "KeyA" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "û": { key: "KeyU", accentKey: keyHat },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  û: { key: "KeyU", accentKey: keyHat },
   v: { key: "KeyV" },
   w: { key: "KeyZ" },
   x: { key: "KeyX" },
@@ -85,10 +85,10 @@ const chars = {
   "²": { key: "Backquote" },
   "&": { key: "Digit1" },
   1: { key: "Digit1", shift: true },
-  "é": { key: "Digit2" },
+  é: { key: "Digit2" },
   2: { key: "Digit2", shift: true },
   "~": { key: "Digit2", altRight: true },
-  "\"": { key: "Digit3" },
+  '"': { key: "Digit3" },
   3: { key: "Digit3", shift: true },
   "#": { key: "Digit3", altRight: true },
   "'": { key: "Digit4" },
@@ -100,16 +100,16 @@ const chars = {
   "-": { key: "Digit6" },
   6: { key: "Digit6", shift: true },
   "|": { key: "Digit6", altRight: true },
-  "è": { key: "Digit7" },
+  è: { key: "Digit7" },
   7: { key: "Digit7", shift: true },
   "`": { key: "Digit7", altRight: true },
-  "_": { key: "Digit8" },
+  _: { key: "Digit8" },
   8: { key: "Digit8", shift: true },
   "\\": { key: "Digit8", altRight: true },
-  "ç": { key: "Digit9" },
+  ç: { key: "Digit9" },
   9: { key: "Digit9", shift: true },
   "^": { key: "Digit9", altRight: true },
-  "à": { key: "Digit0" },
+  à: { key: "Digit0" },
   0: { key: "Digit0", shift: true },
   "@": { key: "Digit0", altRight: true },
   ")": { key: "Minus" },
@@ -118,13 +118,13 @@ const chars = {
   "=": { key: "Equal" },
   "+": { key: "Equal", shift: true },
   "}": { key: "Equal", altRight: true },
-  "$": { key: "BracketRight" },
+  $: { key: "BracketRight" },
   "£": { key: "BracketRight", shift: true },
   "¤": { key: "BracketRight", altRight: true },
-  "ù": { key: "Quote" },
+  ù: { key: "Quote" },
   "%": { key: "Quote", shift: true },
   "*": { key: "Backslash" },
-  "µ": { key: "Backslash", shift: true },
+  µ: { key: "Backslash", shift: true },
   ",": { key: "KeyM" },
   "?": { key: "KeyM", shift: true },
   ";": { key: "Comma" },
@@ -148,5 +148,5 @@ export const fr_FR: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/it_IT.ts b/ui/src/keyboardLayouts/it_IT.ts
index 6d24386f..17826599 100644
--- a/ui/src/keyboardLayouts/it_IT.ts
+++ b/ui/src/keyboardLayouts/it_IT.ts
@@ -1,6 +1,6 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Italiano";
 const isoCode = "it-IT";
@@ -64,11 +64,11 @@ const chars = {
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   3: { key: "Digit3" },
   "£": { key: "Digit3", shift: true },
   4: { key: "Digit4" },
-  "$": { key: "Digit4", shift: true },
+  $: { key: "Digit4", shift: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -83,30 +83,30 @@ const chars = {
   "=": { key: "Digit0", shift: true },
   "'": { key: "Minus" },
   "?": { key: "Minus", shift: true },
-  "ì": { key: "Equal" },
+  ì: { key: "Equal" },
   "^": { key: "Equal", shift: true },
-  "è": { key: "BracketLeft" },
-  "é": { key: "BracketLeft", shift: true },
+  è: { key: "BracketLeft" },
+  é: { key: "BracketLeft", shift: true },
   "[": { key: "BracketLeft", altRight: true },
   "{": { key: "BracketLeft", shift: true, altRight: true },
   "+": { key: "BracketRight" },
   "*": { key: "BracketRight", shift: true },
   "]": { key: "BracketRight", altRight: true },
   "}": { key: "BracketRight", shift: true, altRight: true },
-  "ò": { key: "Semicolon" },
-  "ç": { key: "Semicolon", shift: true },
+  ò: { key: "Semicolon" },
+  ç: { key: "Semicolon", shift: true },
   "@": { key: "Semicolon", altRight: true },
-  "à": { key: "Quote" },
+  à: { key: "Quote" },
   "°": { key: "Quote", shift: true },
   "#": { key: "Quote", altRight: true },
-  "ù": { key: "Backslash" },
+  ù: { key: "Backslash" },
   "§": { key: "Backslash", shift: true },
   ",": { key: "Comma" },
   ";": { key: "Comma", shift: true },
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   " ": { key: "Space" },
@@ -122,5 +122,5 @@ export const it_IT: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/nb_NO.ts b/ui/src/keyboardLayouts/nb_NO.ts
index 28dadc59..bd1b462a 100644
--- a/ui/src/keyboardLayouts/nb_NO.ts
+++ b/ui/src/keyboardLayouts/nb_NO.ts
@@ -1,115 +1,115 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Norsk bokmål";
 const isoCode = "nb-NO";
 
-const keyTrema: KeyCombo = { key: "BracketRight" } // tréma (umlaut), two dots placed above a vowel
-const keyAcute: KeyCombo = { key: "Equal", altRight: true } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "BracketRight", shift: true } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyGrave: KeyCombo = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "BracketRight", altRight: true } // tilde, mark ~ placed above the letter
+const keyTrema: KeyCombo = { key: "BracketRight" }; // tréma (umlaut), two dots placed above a vowel
+const keyAcute: KeyCombo = { key: "Equal", altRight: true }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "BracketRight", shift: true }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyGrave: KeyCombo = { key: "Equal", shift: true }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "BracketRight", altRight: true }; // tilde, mark ~ placed above the letter
 
 const chars = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  Ä: { key: "KeyA", shift: true, accentKey: keyTrema },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ö: { key: "KeyO", shift: true, accentKey: keyTrema },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyZ", shift: true },
   Z: { key: "KeyY", shift: true },
   a: { key: "KeyA" },
-  "ä": { key: "KeyA", accentKey: keyTrema },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
-  "ã": { key: "KeyA", accentKey: keyTilde },
+  ä: { key: "KeyA", accentKey: keyTrema },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
+  ã: { key: "KeyA", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "é": { key: "KeyE", accentKey: keyAcute },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  é: { key: "KeyE", accentKey: keyAcute },
+  ê: { key: "KeyE", accentKey: keyHat },
+  è: { key: "KeyE", accentKey: keyGrave },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "KeyM" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ö": { key: "KeyO", accentKey: keyTrema },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ö: { key: "KeyO", accentKey: keyTrema },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
@@ -120,14 +120,14 @@ const chars = {
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
   "#": { key: "Digit3", shift: true },
   "£": { key: "Digit3", altRight: true },
   4: { key: "Digit4" },
   "¤": { key: "Digit4", shift: true },
-  "$": { key: "Digit4", altRight: true },
+  $: { key: "Digit4", altRight: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -147,12 +147,12 @@ const chars = {
   "+": { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "\\": { key: "Equal" },
-  "å": { key: "BracketLeft" },
-  "Å": { key: "BracketLeft", shift: true },
-  "ø": { key: "Semicolon" },
-  "Ø": { key: "Semicolon", shift: true },
-  "æ": { key: "Quote" },
-  "Æ": { key: "Quote", shift: true },
+  å: { key: "BracketLeft" },
+  Å: { key: "BracketLeft", shift: true },
+  ø: { key: "Semicolon" },
+  Ø: { key: "Semicolon", shift: true },
+  æ: { key: "Quote" },
+  Æ: { key: "Quote", shift: true },
   "'": { key: "Backslash" },
   "*": { key: "Backslash", shift: true },
   ",": { key: "Comma" },
@@ -160,7 +160,7 @@ const chars = {
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   " ": { key: "Space" },
@@ -176,5 +176,5 @@ export const nb_NO: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardLayouts/sv_SE.ts b/ui/src/keyboardLayouts/sv_SE.ts
index edefb51c..a75a440f 100644
--- a/ui/src/keyboardLayouts/sv_SE.ts
+++ b/ui/src/keyboardLayouts/sv_SE.ts
@@ -1,111 +1,111 @@
-import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts";
 
-import { en_US } from "./en_US" // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
+import { en_US } from "./en_US"; // for fallback of keyDisplayMap, modifierDisplayMap, and virtualKeyboard
 
 const name = "Svenska";
 const isoCode = "sv-SE";
 
-const keyTrema: KeyCombo = { key: "BracketRight" } // tréma (umlaut), two dots placed above a vowel
-const keyAcute: KeyCombo = { key: "Equal" } // accent aigu (acute accent), mark ´ placed above the letter
-const keyHat: KeyCombo = { key: "BracketRight", shift: true } // accent circonflexe (accent hat), mark ^ placed above the letter
-const keyGrave: KeyCombo = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
-const keyTilde: KeyCombo = { key: "BracketRight", altRight: true } // tilde, mark ~ placed above the letter
+const keyTrema: KeyCombo = { key: "BracketRight" }; // tréma (umlaut), two dots placed above a vowel
+const keyAcute: KeyCombo = { key: "Equal" }; // accent aigu (acute accent), mark ´ placed above the letter
+const keyHat: KeyCombo = { key: "BracketRight", shift: true }; // accent circonflexe (accent hat), mark ^ placed above the letter
+const keyGrave: KeyCombo = { key: "Equal", shift: true }; // accent grave, mark ` placed above the letter
+const keyTilde: KeyCombo = { key: "BracketRight", altRight: true }; // tilde, mark ~ placed above the letter
 
 const chars = {
   A: { key: "KeyA", shift: true },
-  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
-  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
-  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
-  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  Á: { key: "KeyA", shift: true, accentKey: keyAcute },
+  Â: { key: "KeyA", shift: true, accentKey: keyHat },
+  À: { key: "KeyA", shift: true, accentKey: keyGrave },
+  Ã: { key: "KeyA", shift: true, accentKey: keyTilde },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
-  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
-  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
-  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
-  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
+  Ë: { key: "KeyE", shift: true, accentKey: keyTrema },
+  É: { key: "KeyE", shift: true, accentKey: keyAcute },
+  Ê: { key: "KeyE", shift: true, accentKey: keyHat },
+  È: { key: "KeyE", shift: true, accentKey: keyGrave },
+  Ẽ: { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
-  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
+  Ï: { key: "KeyI", shift: true, accentKey: keyTrema },
+  Í: { key: "KeyI", shift: true, accentKey: keyAcute },
+  Î: { key: "KeyI", shift: true, accentKey: keyHat },
+  Ì: { key: "KeyI", shift: true, accentKey: keyGrave },
+  Ĩ: { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  Ó: { key: "KeyO", shift: true, accentKey: keyAcute },
+  Ô: { key: "KeyO", shift: true, accentKey: keyHat },
+  Ò: { key: "KeyO", shift: true, accentKey: keyGrave },
+  Õ: { key: "KeyO", shift: true, accentKey: keyTilde },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
+  Ü: { key: "KeyU", shift: true, accentKey: keyTrema },
+  Ú: { key: "KeyU", shift: true, accentKey: keyAcute },
+  Û: { key: "KeyU", shift: true, accentKey: keyHat },
+  Ù: { key: "KeyU", shift: true, accentKey: keyGrave },
+  Ũ: { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyY", shift: true },
   Z: { key: "KeyZ", shift: true },
   a: { key: "KeyA" },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave },
-  "ã": { key: "KeyA", accentKey: keyTilde },
+  á: { key: "KeyA", accentKey: keyAcute },
+  â: { key: "KeyA", accentKey: keyHat },
+  à: { key: "KeyA", accentKey: keyGrave },
+  ã: { key: "KeyA", accentKey: keyTilde },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   e: { key: "KeyE" },
-  "ë": { key: "KeyE", accentKey: keyTrema },
-  "é": { key: "KeyE", accentKey: keyAcute },
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "ẽ": { key: "KeyE", accentKey: keyTilde },
+  ë: { key: "KeyE", accentKey: keyTrema },
+  é: { key: "KeyE", accentKey: keyAcute },
+  ê: { key: "KeyE", accentKey: keyHat },
+  è: { key: "KeyE", accentKey: keyGrave },
+  ẽ: { key: "KeyE", accentKey: keyTilde },
   "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
   g: { key: "KeyG" },
   h: { key: "KeyH" },
   i: { key: "KeyI" },
-  "ï": { key: "KeyI", accentKey: keyTrema },
-  "í": { key: "KeyI", accentKey: keyAcute },
-  "î": { key: "KeyI", accentKey: keyHat },
-  "ì": { key: "KeyI", accentKey: keyGrave },
-  "ĩ": { key: "KeyI", accentKey: keyTilde },
+  ï: { key: "KeyI", accentKey: keyTrema },
+  í: { key: "KeyI", accentKey: keyAcute },
+  î: { key: "KeyI", accentKey: keyHat },
+  ì: { key: "KeyI", accentKey: keyGrave },
+  ĩ: { key: "KeyI", accentKey: keyTilde },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
   l: { key: "KeyL" },
   m: { key: "KeyM" },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
-  "ó": { key: "KeyO", accentKey: keyAcute },
-  "ô": { key: "KeyO", accentKey: keyHat },
-  "ò": { key: "KeyO", accentKey: keyGrave },
-  "õ": { key: "KeyO", accentKey: keyTilde },
+  ó: { key: "KeyO", accentKey: keyAcute },
+  ô: { key: "KeyO", accentKey: keyHat },
+  ò: { key: "KeyO", accentKey: keyGrave },
+  õ: { key: "KeyO", accentKey: keyTilde },
   p: { key: "KeyP" },
   q: { key: "KeyQ" },
   r: { key: "KeyR" },
   s: { key: "KeyS" },
   t: { key: "KeyT" },
   u: { key: "KeyU" },
-  "ü": { key: "KeyU", accentKey: keyTrema },
-  "ú": { key: "KeyU", accentKey: keyAcute },
-  "û": { key: "KeyU", accentKey: keyHat },
-  "ù": { key: "KeyU", accentKey: keyGrave },
-  "ũ": { key: "KeyU", accentKey: keyTilde },
+  ü: { key: "KeyU", accentKey: keyTrema },
+  ú: { key: "KeyU", accentKey: keyAcute },
+  û: { key: "KeyU", accentKey: keyHat },
+  ù: { key: "KeyU", accentKey: keyGrave },
+  ũ: { key: "KeyU", accentKey: keyTilde },
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
@@ -116,14 +116,14 @@ const chars = {
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
   2: { key: "Digit2" },
-  "\"": { key: "Digit2", shift: true },
+  '"': { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
   "#": { key: "Digit3", shift: true },
   "£": { key: "Digit3", altRight: true },
   4: { key: "Digit4" },
   "¤": { key: "Digit4", shift: true },
-  "$": { key: "Digit4", altRight: true },
+  $: { key: "Digit4", altRight: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
@@ -143,12 +143,12 @@ const chars = {
   "+": { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "\\": { key: "Minus", altRight: true },
-  "å": { key: "BracketLeft" },
-  "Å": { key: "BracketLeft", shift: true },
-  "ö": { key: "Semicolon" },
-  "Ö": { key: "Semicolon", shift: true },
-  "ä": { key: "Quote" },
-  "Ä": { key: "Quote", shift: true },
+  å: { key: "BracketLeft" },
+  Å: { key: "BracketLeft", shift: true },
+  ö: { key: "Semicolon" },
+  Ö: { key: "Semicolon", shift: true },
+  ä: { key: "Quote" },
+  Ä: { key: "Quote", shift: true },
   "'": { key: "Backslash" },
   "*": { key: "Backslash", shift: true },
   ",": { key: "Comma" },
@@ -156,7 +156,7 @@ const chars = {
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
   "-": { key: "Slash" },
-  "_": { key: "Slash", shift: true },
+  _: { key: "Slash", shift: true },
   "<": { key: "IntlBackslash" },
   ">": { key: "IntlBackslash", shift: true },
   "|": { key: "IntlBackslash", altRight: true },
@@ -173,5 +173,5 @@ export const sv_SE: KeyboardLayout = {
   // TODO need to localize these maps and layouts
   keyDisplayMap: en_US.keyDisplayMap,
   modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
-};
\ No newline at end of file
+  virtualKeyboard: en_US.virtualKeyboard,
+};
diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts
index 456a43c4..47d4fda7 100644
--- a/ui/src/keyboardMappings.ts
+++ b/ui/src/keyboardMappings.ts
@@ -5,7 +5,7 @@
 export const keys = {
   Again: 0x79,
   AlternateErase: 0x9d,
-  AltGr: 0xe6,        // aka AltRight
+  AltGr: 0xe6, // aka AltRight
   AltLeft: 0xe2,
   AltRight: 0xe6,
   Application: 0x65,
@@ -14,10 +14,10 @@ export const keys = {
   ArrowRight: 0x4f,
   ArrowUp: 0x52,
   Attention: 0x9a,
-  Backquote: 0x35,    // aka Grave
+  Backquote: 0x35, // aka Grave
   Backslash: 0x31,
   Backspace: 0x2a,
-  BracketLeft: 0x2f,  // aka LeftBrace
+  BracketLeft: 0x2f, // aka LeftBrace
   BracketRight: 0x30, // aka RightBrace
   Cancel: 0x9b,
   CapsLock: 0x39,
@@ -77,7 +77,7 @@ export const keys = {
   F24: 0x73,
   Find: 0x7e,
   Grave: 0x35,
-  HashTilde: 0x32,  // non-US # and ~
+  HashTilde: 0x32, // non-US # and ~
   Help: 0x75,
   Home: 0x4a,
   Insert: 0x49,
@@ -134,19 +134,19 @@ export const keys = {
   MetaRight: 0xe7,
   Minus: 0x2d,
   Mute: 0x7f,
-  NumLock: 0x53,  // and Clear
-  Numpad0: 0x62,  // and Insert
+  NumLock: 0x53, // and Clear
+  Numpad0: 0x62, // and Insert
   Numpad00: 0xb0,
   Numpad000: 0xb1,
-  Numpad1: 0x59,  // and End
-  Numpad2: 0x5a,  // and Down Arrow
-  Numpad3: 0x5b,  // and Page Down
-  Numpad4: 0x5c,  // and Left Arrow
+  Numpad1: 0x59, // and End
+  Numpad2: 0x5a, // and Down Arrow
+  Numpad3: 0x5b, // and Page Down
+  Numpad4: 0x5c, // and Left Arrow
   Numpad5: 0x5d,
-  Numpad6: 0x5e,  // and Right Arrow
-  Numpad7: 0x5f,  // and Home
-  Numpad8: 0x60,  // and Up Arrow
-  Numpad9: 0x61,  // and Page Up
+  Numpad6: 0x5e, // and Right Arrow
+  Numpad7: 0x5f, // and Home
+  Numpad8: 0x60, // and Up Arrow
+  Numpad9: 0x61, // and Page Up
   NumpadAdd: 0x57,
   NumpadAnd: 0xc7,
   NumpadAt: 0xce,
@@ -226,7 +226,7 @@ export const keys = {
   Slash: 0x38,
   Space: 0x2c,
   Stop: 0x78,
-  SystemRequest: 0x9a,  // aka Attention
+  SystemRequest: 0x9a, // aka Attention
   Tab: 0x2b,
   ThousandsSeparator: 0xb2,
   Tilde: 0x35,
@@ -251,7 +251,7 @@ export const deadKeys = {
   Slash: 0x02f8,
   Tilde: 0x007e,
   Umlaut: 0x00a8,
-} as Record<string, number>
+} as Record<string, number>;
 
 export const modifiers = {
   ControlLeft: 0x01,
@@ -286,4 +286,4 @@ export function decodeModifiers(modifier: number) {
     isMetaActive: (modifier & (modifiers.MetaLeft | modifiers.MetaRight)) !== 0,
     isAltGrActive: (modifier & modifiers.AltGr) !== 0,
   };
-}
\ No newline at end of file
+}
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index b3001a69..f18f0847 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -43,10 +43,16 @@ const SettingsHardwareRoute = lazy(() => import("@routes/devices.$id.settings.ha
 const SettingsVideoRoute = lazy(() => import("@routes/devices.$id.settings.video"));
 const SettingsAppearanceRoute = lazy(() => import("@routes/devices.$id.settings.appearance"));
 const SettingsGeneralIndexRoute = lazy(() => import("@routes/devices.$id.settings.general._index"));
-const SettingsGeneralRebootRoute = lazy(() => import("@routes/devices.$id.settings.general.reboot"));
-const SettingsGeneralUpdateRoute = lazy(() => import("@routes/devices.$id.settings.general.update"));
+const SettingsGeneralRebootRoute = lazy(
+  () => import("@routes/devices.$id.settings.general.reboot"),
+);
+const SettingsGeneralUpdateRoute = lazy(
+  () => import("@routes/devices.$id.settings.general.update"),
+);
 const SettingsNetworkRoute = lazy(() => import("@routes/devices.$id.settings.network"));
-const SecurityAccessLocalAuthRoute = lazy(() => import("@routes/devices.$id.settings.access.local-auth"));
+const SecurityAccessLocalAuthRoute = lazy(
+  () => import("@routes/devices.$id.settings.access.local-auth"),
+);
 const SettingsMacrosRoute = lazy(() => import("@routes/devices.$id.settings.macros"));
 const SettingsMacrosAddRoute = lazy(() => import("@routes/devices.$id.settings.macros.add"));
 const SettingsMacrosEditRoute = lazy(() => import("@routes/devices.$id.settings.macros.edit"));
@@ -364,7 +370,7 @@ if (isOnDevice) {
             {
               path: "devices",
               element: <DevicesRoute />,
-              loader: DevicesRoute.loader
+              loader: DevicesRoute.loader,
             },
           ],
         },
diff --git a/ui/src/notifications.tsx b/ui/src/notifications.tsx
index 2b0f24cb..e492a3e6 100644
--- a/ui/src/notifications.tsx
+++ b/ui/src/notifications.tsx
@@ -19,8 +19,9 @@ const ToastContent = ({
   t: Toast;
 }) => (
   <Card
-    className={`${t.visible ? "animate-enter" : "animate-leave"
-      } pointer-events-auto z-30 w-full max-w-sm shadow-xl!`}
+    className={`${
+      t.visible ? "animate-enter" : "animate-leave"
+    } pointer-events-auto z-30 w-full max-w-sm shadow-xl!`}
   >
     <div className="flex items-center gap-x-2 p-2.5 px-2">
       {icon}
@@ -34,7 +35,7 @@ const notifications = {
     return toast.custom(
       (t: Toast) => (
         <ToastContent
-          icon={<CheckCircleIcon className="w-5 h-5 text-green-500 dark:text-green-400" />}
+          icon={<CheckCircleIcon className="h-5 w-5 text-green-500 dark:text-green-400" />}
           message={message}
           t={t}
         />
@@ -47,7 +48,7 @@ const notifications = {
     return toast.custom(
       (t: Toast) => (
         <ToastContent
-          icon={<XCircleIcon className="w-5 h-5 text-red-500 dark:text-red-400" />}
+          icon={<XCircleIcon className="h-5 w-5 text-red-500 dark:text-red-400" />}
           message={message}
           t={t}
         />
diff --git a/ui/src/providers/FeatureFlagProvider.tsx b/ui/src/providers/FeatureFlagProvider.tsx
index bbf9c542..6f2c800a 100644
--- a/ui/src/providers/FeatureFlagProvider.tsx
+++ b/ui/src/providers/FeatureFlagProvider.tsx
@@ -31,7 +31,5 @@ export const FeatureFlagProvider = ({
 
   const value = { appVersion, isFeatureEnabled };
 
-  return (
-    <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>
-  );
+  return <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>;
 };
diff --git a/ui/src/routes/adopt.tsx b/ui/src/routes/adopt.tsx
index b7079f5c..055049b0 100644
--- a/ui/src/routes/adopt.tsx
+++ b/ui/src/routes/adopt.tsx
@@ -37,7 +37,7 @@ const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {
 };
 
 export default function AdoptRoute() {
-  return (<></>);
+  return <></>;
 }
 
 AdoptRoute.loader = loader;
diff --git a/ui/src/routes/devices.$id.deregister.tsx b/ui/src/routes/devices.$id.deregister.tsx
index 07db5d7d..3e691019 100644
--- a/ui/src/routes/devices.$id.deregister.tsx
+++ b/ui/src/routes/devices.$id.deregister.tsx
@@ -1,5 +1,10 @@
 import { Form, redirect, useActionData, useLoaderData } from "react-router";
-import type { ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunction,
+  ActionFunctionArgs,
+  LoaderFunction,
+  LoaderFunctionArgs,
+} from "react-router";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
 
 import { User } from "@hooks/stores";
@@ -76,9 +81,9 @@ export default function DevicesIdDeregister() {
         kvmName={device?.name}
       />
 
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <div className="mt-4">
-          <div className="w-full h-full px-4 mx-auto space-y-6 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
+          <div className="mx-auto h-full w-full space-y-6 px-4 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
             <div className="space-y-4">
               <LinkButton
                 size="SM"
diff --git a/ui/src/routes/devices.$id.mount.tsx b/ui/src/routes/devices.$id.mount.tsx
index b2ff891f..d203bb3c 100644
--- a/ui/src/routes/devices.$id.mount.tsx
+++ b/ui/src/routes/devices.$id.mount.tsx
@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router";
-import {
-  LuLink,
-  LuRadioReceiver,
-  LuCheck,
-  LuUpload,
-} from "react-icons/lu";
+import { LuLink, LuRadioReceiver, LuCheck, LuUpload } from "react-icons/lu";
 import { PlusCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { TrashIcon } from "@heroicons/react/16/solid";
 
@@ -43,13 +38,8 @@ export default function MountRoute() {
 }
 
 export function Dialog({ onClose }: Readonly<{ onClose: () => void }>) {
-  const {
-    modalView,
-    setModalView,
-    setRemoteVirtualMediaState,
-    errorMessage,
-    setErrorMessage,
-  } = useMountMediaStore();
+  const { modalView, setModalView, setRemoteVirtualMediaState, errorMessage, setErrorMessage } =
+    useMountMediaStore();
   const navigate = useNavigate();
 
   const [incompleteFileName, setIncompleteFileName] = useState<string | null>(null);
@@ -65,9 +55,7 @@ export function Dialog({ onClose }: Readonly<{ onClose: () => void }>) {
         if ("error" in resp) {
           reject(new Error(resp.error.message));
         } else {
-          setRemoteVirtualMediaState(
-            resp as unknown as MountMediaState["remoteVirtualMediaState"],
-          );
+          setRemoteVirtualMediaState(resp as unknown as MountMediaState["remoteVirtualMediaState"]);
           resolve(null);
         }
       });
@@ -132,10 +120,7 @@ export function Dialog({ onClose }: Readonly<{ onClose: () => void }>) {
         className={cx("mx-auto max-w-4xl px-4 transition-all duration-300 ease-in-out", {
           "max-w-4xl": modalView === "mode",
           "max-w-2xl": modalView === "device",
-          "max-w-xl":
-            modalView === "url" ||
-            modalView === "upload" ||
-            modalView === "error",
+          "max-w-xl": modalView === "url" || modalView === "upload" || modalView === "error",
         })}
       >
         <GridCard cardClassName="relative w-full text-left pointer-events-auto">
@@ -281,9 +266,7 @@ function ModeSelectionView({
             >
               <div
                 className="relative z-50 flex flex-col items-start p-4 select-none"
-                onClick={() =>
-                  disabled ? null : setSelectedMode(mode as "url" | "device")
-                }
+                onClick={() => (disabled ? null : setSelectedMode(mode as "url" | "device"))}
               >
                 <div>
                   <Card>
@@ -293,14 +276,10 @@ function ModeSelectionView({
                   </Card>
                 </div>
                 <div className="mt-2 space-y-0">
-                  <p className="block pt-1 text-xs text-red-500">
-                    {tag ? tag : <>&nbsp;</>}
-                  </p>
+                  <p className="block pt-1 text-xs text-red-500">{tag ? tag : <>&nbsp;</>}</p>
 
                   <h3 className="text-sm font-medium dark:text-white">{label}</h3>
-                  <p className="text-sm text-gray-700 dark:text-slate-400">
-                    {description}
-                  </p>
+                  <p className="text-sm text-gray-700 dark:text-slate-400">{description}</p>
                 </div>
                 <input
                   type="radio"
@@ -414,10 +393,7 @@ function UrlView({
 
   return (
     <div className="w-full space-y-4">
-      <ViewHeader
-        title={m.mount_view_url_title()}
-        description={m.mount_view_url_description()}
-      />
+      <ViewHeader title={m.mount_view_url_title()} description={m.mount_view_url_description()} />
 
       <div
         className="animate-fadeIn opacity-0"
@@ -452,9 +428,7 @@ function UrlView({
             loading={mountInProgress}
             text={m.mount_button_mount_url()}
             onClick={() => onMount(url, usbMode)}
-            disabled={
-              mountInProgress || !isUrlValid || url.length === 0
-            }
+            disabled={mountInProgress || !isUrlValid || url.length === 0}
           />
         </div>
       </div>
@@ -538,10 +512,9 @@ function DeviceFileView({
   const percentageUsed = useMemo(() => {
     if (!storageSpace) return 0;
     return Number(
-      (
-        (storageSpace.bytesUsed / (storageSpace.bytesUsed + storageSpace.bytesFree)) *
-        100
-      ).toFixed(1),
+      ((storageSpace.bytesUsed / (storageSpace.bytesUsed + storageSpace.bytesFree)) * 100).toFixed(
+        1,
+      ),
     );
   }, [storageSpace]);
 
@@ -681,9 +654,7 @@ function DeviceFileView({
                   onDelete={() => {
                     const selectedFile = onStorageFiles.find(f => f.name === file.name);
                     if (!selectedFile) return;
-                    if (
-                      window.confirm(m.mount_confirm_delete({ name: selectedFile.name }))
-                    ) {
+                    if (window.confirm(m.mount_confirm_delete({ name: selectedFile.name }))) {
                       handleDeleteFile(selectedFile);
                     }
                   }}
@@ -698,7 +669,7 @@ function DeviceFileView({
                     {m.mount_button_showing_results({
                       from: indexOfFirstFile + 1,
                       to: Math.min(indexOfLastFile, onStorageFiles.length),
-                      total: onStorageFiles.length
+                      total: onStorageFiles.length,
                     })}
                   </p>
                   <div className="flex items-center gap-x-2">
@@ -827,9 +798,7 @@ function UploadFileView({
   onCancelUpload: () => void;
   incompleteFileName?: string;
 }) {
-  const [uploadState, setUploadState] = useState<"idle" | "uploading" | "success">(
-    "idle",
-  );
+  const [uploadState, setUploadState] = useState<"idle" | "uploading" | "success">("idle");
   const [uploadProgress, setUploadProgress] = useState(0);
   const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
   const [uploadedFileSize, setUploadedFileSize] = useState<number | null>(null);
@@ -854,14 +823,8 @@ function UploadFileView({
     };
   }, []);
 
-  function handleWebRTCUpload(
-    file: File,
-    alreadyUploadedBytes: number,
-    dataChannel: string,
-  ) {
-    const rtcDataChannel = useRTCStore
-      .getState()
-      .peerConnection?.createDataChannel(dataChannel);
+  function handleWebRTCUpload(file: File, alreadyUploadedBytes: number, dataChannel: string) {
+    const rtcDataChannel = useRTCStore.getState().peerConnection?.createDataChannel(dataChannel);
 
     if (!rtcDataChannel) {
       console.error("Failed to create data channel for file upload");
@@ -903,8 +866,7 @@ function UploadFileView({
           }
 
           // Calculate average speed
-          const averageSpeed =
-            speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length;
+          const averageSpeed = speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length;
 
           setUploadSpeed(averageSpeed);
           setUploadProgress((AlreadyUploadedBytes / Size) * 100);
@@ -961,11 +923,7 @@ function UploadFileView({
     };
   }
 
-  async function handleHttpUpload(
-    file: File,
-    alreadyUploadedBytes: number,
-    dataChannel: string,
-  ) {
+  async function handleHttpUpload(file: File, alreadyUploadedBytes: number, dataChannel: string) {
     const uploadUrl = `${DEVICE_API}/storage/upload?uploadId=${dataChannel}`;
 
     const xhr = new XMLHttpRequest();
@@ -994,8 +952,7 @@ function UploadFileView({
           }
 
           // Calculate average speed
-          const averageSpeed =
-            speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length;
+          const averageSpeed = speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length;
 
           setUploadSpeed(averageSpeed);
           setUploadProgress((totalUploaded / totalSize) * 100);
@@ -1035,10 +992,7 @@ function UploadFileView({
       // Reset the upload error when a new file is selected
       setUploadError(null);
 
-      if (
-        incompleteFileName &&
-        file.name !== incompleteFileName.replace(".incomplete", "")
-      ) {
+      if (incompleteFileName && file.name !== incompleteFileName.replace(".incomplete", "")) {
         setFileError(
           m.mount_please_select_file({ name: incompleteFileName.replace(".incomplete", "") }),
         );
@@ -1052,31 +1006,35 @@ function UploadFileView({
       setUploadState("uploading");
       console.log("Upload state set to 'uploading'");
 
-      send("startStorageFileUpload", { filename: file.name, size: file.size }, (resp: JsonRpcResponse) => {
-        console.log("startStorageFileUpload response:", resp);
-        if ("error" in resp) {
-          console.error("Upload error:", resp.error.message);
-          setUploadError(resp.error.data || resp.error.message);
-          setUploadState("idle");
-          console.log("Upload state set to 'idle'");
-          return;
-        }
+      send(
+        "startStorageFileUpload",
+        { filename: file.name, size: file.size },
+        (resp: JsonRpcResponse) => {
+          console.log("startStorageFileUpload response:", resp);
+          if ("error" in resp) {
+            console.error("Upload error:", resp.error.message);
+            setUploadError(resp.error.data || resp.error.message);
+            setUploadState("idle");
+            console.log("Upload state set to 'idle'");
+            return;
+          }
 
-        const { alreadyUploadedBytes, dataChannel } = resp.result as {
-          alreadyUploadedBytes: number;
-          dataChannel: string;
-        };
+          const { alreadyUploadedBytes, dataChannel } = resp.result as {
+            alreadyUploadedBytes: number;
+            dataChannel: string;
+          };
 
-        console.log(
-          `Already uploaded bytes: ${alreadyUploadedBytes}, Data channel: ${dataChannel}`,
-        );
+          console.log(
+            `Already uploaded bytes: ${alreadyUploadedBytes}, Data channel: ${dataChannel}`,
+          );
 
-        if (isOnDevice) {
-          handleHttpUpload(file, alreadyUploadedBytes, dataChannel);
-        } else {
-          handleWebRTCUpload(file, alreadyUploadedBytes, dataChannel);
-        }
-      });
+          if (isOnDevice) {
+            handleHttpUpload(file, alreadyUploadedBytes, dataChannel);
+          } else {
+            handleWebRTCUpload(file, alreadyUploadedBytes, dataChannel);
+          }
+        },
+      );
     }
   };
 
@@ -1086,7 +1044,9 @@ function UploadFileView({
         title={m.mount_upload_title()}
         description={
           incompleteFileName
-            ? m.mount_continue_uploading_with_name({ name: incompleteFileName.replace(".incomplete", "") })
+            ? m.mount_continue_uploading_with_name({
+                name: incompleteFileName.replace(".incomplete", ""),
+              })
             : m.mount_upload_description()
         }
       />
@@ -1124,7 +1084,9 @@ function UploadFileView({
                       </div>
                       <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
                         {incompleteFileName
-                          ? m.mount_click_to_select_incomplete({ name: incompleteFileName.replace(".incomplete", "") })
+                          ? m.mount_click_to_select_incomplete({
+                              name: incompleteFileName.replace(".incomplete", ""),
+                            })
                           : m.mount_click_to_select_file()}
                       </h3>
                       <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@@ -1143,7 +1105,9 @@ function UploadFileView({
                         </Card>
                       </div>
                       <h3 className="leading-non text-lg font-semibold text-black dark:text-white">
-                        {m.mount_uploading_with_name({ name: formatters.truncateMiddle(uploadedFileName, 30) })}
+                        {m.mount_uploading_with_name({
+                          name: formatters.truncateMiddle(uploadedFileName, 30),
+                        })}
                       </h3>
                       <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
                         {formatters.bytes(uploadedFileSize || 0)}
@@ -1180,7 +1144,9 @@ function UploadFileView({
                         {m.mount_upload_successful()}
                       </h3>
                       <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
-                        {m.mount_uploaded_has_been_uploaded({ name: formatters.truncateMiddle(uploadedFileName, 40) })}
+                        {m.mount_uploaded_has_been_uploaded({
+                          name: formatters.truncateMiddle(uploadedFileName, 40),
+                        })}
                       </p>
                     </div>
                   )}
@@ -1196,15 +1162,13 @@ function UploadFileView({
           className="hidden"
           accept=".iso, .img"
         />
-        {fileError && (
-          <p className="mt-2 text-sm text-red-600 dark:text-red-400">{fileError}</p>
-        )}
+        {fileError && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{fileError}</p>}
       </div>
 
       {/* Display upload error if present */}
       {uploadError && (
         <div
-          className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400 opacity-0"
+          className="mt-2 animate-fadeIn truncate text-sm text-red-600 opacity-0 dark:text-red-400"
           style={{ animationDuration: "0.7s" }}
         >
           {m.mount_upload_error({ error: String(uploadError) })}
@@ -1263,9 +1227,7 @@ function ErrorView({
           <ExclamationTriangleIcon className="h-6 w-6" />
           <h2 className="text-lg leading-tight font-bold">{m.mount_error_title()}</h2>
         </div>
-        <p className="text-sm leading-snug text-slate-600">
-          {m.mount_error_description()}
-        </p>
+        <p className="text-sm leading-snug text-slate-600">{m.mount_error_description()}</p>
       </div>
       {errorMessage && (
         <Card className="border border-red-200 bg-red-50 p-4">
@@ -1274,7 +1236,12 @@ function ErrorView({
       )}
       <div className="flex justify-end space-x-2">
         <Button size="SM" theme="light" text={m.close()} onClick={onClose} />
-        <Button size="SM" theme="primary" text={m.mount_button_back_to_overview()} onClick={onRetry} />
+        <Button
+          size="SM"
+          theme="primary"
+          text={m.mount_button_back_to_overview()}
+          onClick={onRetry}
+        />
       </div>
     </div>
   );
@@ -1379,12 +1346,8 @@ function PreUploadedImageItem({
 function ViewHeader({ title, description }: { title: string; description: string }) {
   return (
     <div className="space-y-0">
-      <h2 className="text-lg leading-tight font-bold text-black dark:text-white">
-        {title}
-      </h2>
-      <div className="text-sm leading-snug text-slate-600 dark:text-slate-400">
-        {description}
-      </div>
+      <h2 className="text-lg leading-tight font-bold text-black dark:text-white">{title}</h2>
+      <div className="text-sm leading-snug text-slate-600 dark:text-slate-400">{description}</div>
     </div>
   );
 }
diff --git a/ui/src/routes/devices.$id.other-session.tsx b/ui/src/routes/devices.$id.other-session.tsx
index 2fb3c896..3f7326bc 100644
--- a/ui/src/routes/devices.$id.other-session.tsx
+++ b/ui/src/routes/devices.$id.other-session.tsx
@@ -30,14 +30,17 @@ export default function OtherSessionRoute() {
           </div>
 
           <div className="text-left">
-            <p className="text-base font-semibold dark:text-white">
-              {m.other_session_detected()}
-            </p>
+            <p className="text-base font-semibold dark:text-white">{m.other_session_detected()}</p>
             <p className="mb-4 text-sm text-slate-600 dark:text-slate-400">
               {m.other_session_take_over()}
             </p>
             <div className="flex items-center justify-start space-x-4">
-              <Button size="SM" theme="primary" text={m.other_session_use_here_button()} onClick={handleClose} />
+              <Button
+                size="SM"
+                theme="primary"
+                text={m.other_session_use_here_button()}
+                onClick={handleClose}
+              />
             </div>
           </div>
         </div>
diff --git a/ui/src/routes/devices.$id.rename.tsx b/ui/src/routes/devices.$id.rename.tsx
index a7191764..b94dca9c 100644
--- a/ui/src/routes/devices.$id.rename.tsx
+++ b/ui/src/routes/devices.$id.rename.tsx
@@ -1,5 +1,10 @@
 import { Form, redirect, useActionData, useLoaderData } from "react-router";
-import type { ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunction,
+  ActionFunctionArgs,
+  LoaderFunction,
+  LoaderFunctionArgs,
+} from "react-router";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
 
 import { Button, LinkButton } from "@components/Button";
diff --git a/ui/src/routes/devices.$id.settings._index.tsx b/ui/src/routes/devices.$id.settings._index.tsx
index a1954d6d..e8034a2e 100644
--- a/ui/src/routes/devices.$id.settings._index.tsx
+++ b/ui/src/routes/devices.$id.settings._index.tsx
@@ -5,10 +5,10 @@ import { getDeviceUiPath } from "@hooks/useAppNavigation";
 
 const loader: LoaderFunction = ({ params }: LoaderFunctionArgs) => {
   return redirect(getDeviceUiPath("/settings/general", params.id));
-}
+};
 
 export default function SettingIndexRoute() {
-  return (<></>);
+  return <></>;
 }
 
-SettingIndexRoute.loader = loader;
\ No newline at end of file
+SettingIndexRoute.loader = loader;
diff --git a/ui/src/routes/devices.$id.settings.access._index.tsx b/ui/src/routes/devices.$id.settings.access._index.tsx
index 9b2d3cd3..adce74c8 100644
--- a/ui/src/routes/devices.$id.settings.access._index.tsx
+++ b/ui/src/routes/devices.$id.settings.access._index.tsx
@@ -125,10 +125,7 @@ export default function SettingsAccessIndexRoute() {
         returnTo.search = "";
         returnTo.hash = "";
         window.location.href =
-          cloudAppUrl +
-          "/signup?deviceId=" +
-          deviceId +
-          `&returnTo=${returnTo.toString()}`;
+          cloudAppUrl + "/signup?deviceId=" + deviceId + `&returnTo=${returnTo.toString()}`;
       });
     },
     [deviceId, send],
@@ -168,7 +165,9 @@ export default function SettingsAccessIndexRoute() {
 
         notifications.success(m.access_tls_updated());
       });
-    }, [send]);
+    },
+    [send],
+  );
 
   // Handle TLS mode change
   const handleTlsModeChange = (value: string) => {
@@ -206,10 +205,7 @@ export default function SettingsAccessIndexRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.access_title()}
-        description={m.access_description()}
-      />
+      <SettingsPageHeader title={m.access_title()} description={m.access_description()} />
 
       {loaderData?.authMode && (
         <>
@@ -246,9 +242,7 @@ export default function SettingsAccessIndexRoute() {
                   <TextAreaWithLabel
                     label={m.access_certificate_label()}
                     rows={3}
-                    placeholder={
-                      "-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----"
-                    }
+                    placeholder={"-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----"}
                     value={tlsCert}
                     onChange={e => handleTlsCertChange(e.target.value)}
                   />
@@ -256,9 +250,7 @@ export default function SettingsAccessIndexRoute() {
                     label={m.access_private_key_label()}
                     description={m.access_private_key_description()}
                     rows={3}
-                    placeholder={
-                      "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
-                    }
+                    placeholder={"-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"}
                     value={tlsKey}
                     onChange={e => handleTlsKeyChange(e.target.value)}
                   />
@@ -275,7 +267,11 @@ export default function SettingsAccessIndexRoute() {
 
               <SettingsItem
                 title={m.access_authentication_mode_title()}
-                description={loaderData.authMode === "password" ? m.access_auth_mode_password() : m.access_auth_mode_no_password()}
+                description={
+                  loaderData.authMode === "password"
+                    ? m.access_auth_mode_password()
+                    : m.access_auth_mode_no_password()
+                }
               >
                 {loaderData.authMode === "password" ? (
                   <Button
@@ -320,10 +316,7 @@ export default function SettingsAccessIndexRoute() {
       )}
 
       <div className="space-y-4">
-        <SettingsSectionHeader
-          title="Remote"
-          description={m.access_remote_description()}
-        />
+        <SettingsSectionHeader title="Remote" description={m.access_remote_description()} />
 
         <div className="space-y-4">
           {!isAdopted && (
@@ -438,11 +431,7 @@ export default function SettingsAccessIndexRoute() {
                     className="text-red-600"
                     onClick={() => {
                       if (deviceId) {
-                        if (
-                          window.confirm(
-                            m.access_confirm_deregister(),
-                          )
-                        ) {
+                        if (window.confirm(m.access_confirm_deregister())) {
                           deregisterDevice();
                         }
                       } else {
diff --git a/ui/src/routes/devices.$id.settings.access.local-auth.tsx b/ui/src/routes/devices.$id.settings.access.local-auth.tsx
index 46b3ecc1..5124ef23 100644
--- a/ui/src/routes/devices.$id.settings.access.local-auth.tsx
+++ b/ui/src/routes/devices.$id.settings.access.local-auth.tsx
@@ -195,9 +195,7 @@ function CreatePasswordModal({
         }}
       >
         <div>
-          <h2 className="text-lg font-semibold dark:text-white">
-            {m.local_auth_create_title()}
-          </h2>
+          <h2 className="text-lg font-semibold dark:text-white">{m.local_auth_create_title()}</h2>
           <p className="text-sm text-slate-600 dark:text-slate-400">
             {m.local_auth_create_description()}
           </p>
@@ -225,7 +223,12 @@ function CreatePasswordModal({
             text={m.local_auth_create_secure_button()}
             onClick={() => onSetPassword(password, confirmPassword)}
           />
-          <Button size="SM" theme="light" text={m.local_auth_create_not_now_button()} onClick={onCancel} />
+          <Button
+            size="SM"
+            theme="light"
+            text={m.local_auth_create_not_now_button()}
+            onClick={onCancel}
+          />
         </div>
         {error && <p className="text-sm text-red-500">{error}</p>}
       </form>
@@ -282,11 +285,7 @@ function UpdatePasswordModal({
   onCancel,
   error,
 }: {
-  onUpdatePassword: (
-    oldPassword: string,
-    newPassword: string,
-    confirmNewPassword: string,
-  ) => void;
+  onUpdatePassword: (oldPassword: string, newPassword: string, confirmNewPassword: string) => void;
   onCancel: () => void;
   error: string | null;
 }) {
diff --git a/ui/src/routes/devices.$id.settings.advanced.tsx b/ui/src/routes/devices.$id.settings.advanced.tsx
index dd39f9b6..fe5dbad3 100644
--- a/ui/src/routes/devices.$id.settings.advanced.tsx
+++ b/ui/src/routes/devices.$id.settings.advanced.tsx
@@ -81,8 +81,12 @@ export default function SettingsAdvancedRoute() {
         if ("error" in resp) {
           notifications.error(
             enabled
-              ? m.advanced_error_usb_emulation_enable({ error: resp.error.data || m.unknown_error() })
-              : m.advanced_error_usb_emulation_disable({ error: resp.error.data || m.unknown_error() })
+              ? m.advanced_error_usb_emulation_enable({
+                  error: resp.error.data || m.unknown_error(),
+                })
+              : m.advanced_error_usb_emulation_disable({
+                  error: resp.error.data || m.unknown_error(),
+                }),
           );
           return;
         }
@@ -97,7 +101,7 @@ export default function SettingsAdvancedRoute() {
     send("resetConfig", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         notifications.error(
-          m.advanced_error_reset_config({ error: resp.error.data || m.unknown_error() })
+          m.advanced_error_reset_config({ error: resp.error.data || m.unknown_error() }),
         );
         return;
       }
@@ -109,7 +113,7 @@ export default function SettingsAdvancedRoute() {
     send("setSSHKeyState", { sshKey }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         notifications.error(
-          m.advanced_error_update_ssh_key({ error: resp.error.data || m.unknown_error() })
+          m.advanced_error_update_ssh_key({ error: resp.error.data || m.unknown_error() }),
         );
         return;
       }
@@ -122,7 +126,7 @@ export default function SettingsAdvancedRoute() {
       send("setDevModeState", { enabled: developerMode }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           notifications.error(
-            m.advanced_error_set_dev_mode({ error: resp.error.data || m.unknown_error() })
+            m.advanced_error_set_dev_mode({ error: resp.error.data || m.unknown_error() }),
           );
           return;
         }
@@ -137,7 +141,7 @@ export default function SettingsAdvancedRoute() {
       send("setDevChannelState", { enabled }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           notifications.error(
-            m.advanced_error_set_dev_channel({ error: resp.error.data || m.unknown_error() })
+            m.advanced_error_set_dev_channel({ error: resp.error.data || m.unknown_error() }),
           );
           return;
         }
@@ -154,7 +158,7 @@ export default function SettingsAdvancedRoute() {
           notifications.error(
             enabled
               ? m.advanced_error_loopback_enable({ error: resp.error.data || m.unknown_error() })
-              : m.advanced_error_loopback_disable({ error: resp.error.data || m.unknown_error() })
+              : m.advanced_error_loopback_disable({ error: resp.error.data || m.unknown_error() }),
           );
           return;
         }
@@ -190,9 +194,10 @@ export default function SettingsAdvancedRoute() {
   const handleVersionUpdateError = useCallback((error?: JsonRpcError | string) => {
     notifications.error(
       m.advanced_error_version_update({
-        error: typeof error === "string" ? error : (error?.data ?? error?.message ?? m.unknown_error())
+        error:
+          typeof error === "string" ? error : (error?.data ?? error?.message ?? m.unknown_error()),
       }),
-      { duration: 1000 * 15 } // 15 seconds
+      { duration: 1000 * 15 }, // 15 seconds
     );
     setCustomVersionUpdateLoading(false);
   }, []);
@@ -200,16 +205,15 @@ export default function SettingsAdvancedRoute() {
   const handleCustomVersionUpdate = useCallback(async () => {
     const components: UpdateComponents = {};
     if (["app", "both"].includes(updateTarget) && appVersion) components.app = appVersion;
-    if (["system", "both"].includes(updateTarget) && systemVersion) components.system = systemVersion;
+    if (["system", "both"].includes(updateTarget) && systemVersion)
+      components.system = systemVersion;
     let versionInfo: SystemVersionInfo | undefined;
 
     try {
       // we do not need to set it to false if check succeeds,
       // because it will be redirected to the update page later
       setCustomVersionUpdateLoading(true);
-      versionInfo = await checkUpdateComponents({
-        components,
-      }, devChannel);
+      versionInfo = await checkUpdateComponents({ components }, devChannel);
     } catch (error: unknown) {
       const jsonRpcError = error as JsonRpcError;
       handleVersionUpdateError(jsonRpcError);
@@ -223,7 +227,11 @@ export default function SettingsAdvancedRoute() {
       hasUpdate = true;
       pageParams.set("custom_app_version", versionInfo.remote?.appVersion);
     }
-    if (components.system && versionInfo?.remote?.systemVersion && versionInfo?.systemUpdateAvailable) {
+    if (
+      components.system &&
+      versionInfo?.remote?.systemVersion &&
+      versionInfo?.systemUpdateAvailable
+    ) {
       hasUpdate = true;
       pageParams.set("custom_system_version", versionInfo.remote?.systemVersion);
     }
@@ -237,17 +245,18 @@ export default function SettingsAdvancedRoute() {
     // Navigate to update page
     navigateTo(`/settings/general/update?${pageParams.toString()}`);
   }, [
-    updateTarget, appVersion, systemVersion, devChannel,
-    navigateTo, resetConfig, handleVersionUpdateError,
-    setCustomVersionUpdateLoading
+    appVersion,
+    devChannel,
+    handleVersionUpdateError,
+    navigateTo,
+    resetConfig,
+    systemVersion,
+    updateTarget,
   ]);
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.advanced_title()}
-        description={m.advanced_description()}
-      />
+      <SettingsPageHeader title={m.advanced_title()} description={m.advanced_description()} />
 
       <div className="space-y-4">
         <SettingsItem
@@ -319,7 +328,8 @@ export default function SettingsAdvancedRoute() {
                   placeholder={m.advanced_ssh_public_key_placeholder()}
                 />
                 <p className="text-xs text-slate-600 dark:text-slate-400">
-                  {m.advanced_ssh_default_user()}<strong>root</strong>.
+                  {m.advanced_ssh_default_user()}
+                  <strong>root</strong>.
                 </p>
                 <div className="flex items-center gap-x-2">
                   <Button
@@ -426,8 +436,6 @@ export default function SettingsAdvancedRoute() {
           />
         </SettingsItem>
 
-
-
         <SettingsItem
           title={m.advanced_troubleshooting_mode_title()}
           description={m.advanced_troubleshooting_mode_description()}
@@ -450,7 +458,9 @@ export default function SettingsAdvancedRoute() {
                 size="SM"
                 theme="light"
                 text={
-                  usbEmulationEnabled ? m.advanced_disable_usb_emulation() : m.advanced_enable_usb_emulation()
+                  usbEmulationEnabled
+                    ? m.advanced_disable_usb_emulation()
+                    : m.advanced_enable_usb_emulation()
                 }
                 onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
               />
@@ -484,12 +494,8 @@ export default function SettingsAdvancedRoute() {
         title={m.advanced_loopback_warning_title()}
         description={
           <>
-            <p>
-              {m.advanced_loopback_warning_description()}
-            </p>
-            <p>
-              {m.advanced_loopback_warning_before()}
-            </p>
+            <p>{m.advanced_loopback_warning_description()}</p>
+            <p>{m.advanced_loopback_warning_before()}</p>
             <ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
               <li>{m.advanced_loopback_warning_ssh()}</li>
               <li>{m.advanced_loopback_warning_cloud()}</li>
diff --git a/ui/src/routes/devices.$id.settings.general._index.tsx b/ui/src/routes/devices.$id.settings.general._index.tsx
index 55b92c00..92eef6fe 100644
--- a/ui/src/routes/devices.$id.settings.general._index.tsx
+++ b/ui/src/routes/devices.$id.settings.general._index.tsx
@@ -9,7 +9,7 @@ import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import notifications from "@/notifications";
-import { getLocale, setLocale, locales, baseLocale } from '@localizations/runtime.js';
+import { getLocale, setLocale, locales, baseLocale } from "@localizations/runtime.js";
 import { m } from "@localizations/messages.js";
 import { deleteCookie, map_locale_code_to_name } from "@/utils";
 
@@ -45,19 +45,21 @@ export default function SettingsGeneralRoute() {
   const [currentLocale, setCurrentLocale] = useState(getLocale());
 
   const localeOptions = useMemo(() => {
-    return ["", ...locales]
-      .map((code) => {
-        const [localizedName, nativeName] = map_locale_code_to_name(currentLocale, code);
-        // don't repeat the name if it's the same in both locales (or blank)
-        const label = nativeName && nativeName !== localizedName ? `${localizedName} - ${nativeName}` : localizedName;
-        return { value: code, label: label }
-      });
+    return ["", ...locales].map(code => {
+      const [localizedName, nativeName] = map_locale_code_to_name(currentLocale, code);
+      // don't repeat the name if it's the same in both locales (or blank)
+      const label =
+        nativeName && nativeName !== localizedName
+          ? `${localizedName} - ${nativeName}`
+          : localizedName;
+      return { value: code, label: label };
+    });
   }, [currentLocale]);
 
   const handleLocaleChange = (newLocale: string) => {
     if (newLocale === currentLocale) return;
 
-    let validLocale = newLocale as typeof locales[number];
+    let validLocale = newLocale as (typeof locales)[number];
 
     if (newLocale !== "") {
       if (!locales.includes(validLocale)) {
@@ -75,10 +77,7 @@ export default function SettingsGeneralRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.general_title()}
-        description={m.general_page_description()}
-      />
+      <SettingsPageHeader title={m.general_title()} description={m.general_page_description()} />
 
       <div className="space-y-4">
         <div className="space-y-4 pb-2">
@@ -92,7 +91,9 @@ export default function SettingsGeneralRoute() {
                 label=""
                 value={currentLocale}
                 options={localeOptions}
-                onChange={e => { handleLocaleChange(e.target.value); }}
+                onChange={e => {
+                  handleLocaleChange(e.target.value);
+                }}
               />
             </SettingsItem>
           </div>
@@ -101,9 +102,13 @@ export default function SettingsGeneralRoute() {
               title={m.general_check_for_updates()}
               description={
                 <>
-                  {m.general_app_version({ version: currentVersions ? currentVersions.appVersion : m.loading() })}
+                  {m.general_app_version({
+                    version: currentVersions ? currentVersions.appVersion : m.loading(),
+                  })}
                   <br />
-                  {m.general_system_version({ version: currentVersions ? currentVersions.systemVersion : m.loading() })}
+                  {m.general_system_version({
+                    version: currentVersions ? currentVersions.systemVersion : m.loading(),
+                  })}
                 </>
               }
             />
diff --git a/ui/src/routes/devices.$id.settings.general.reboot.tsx b/ui/src/routes/devices.$id.settings.general.reboot.tsx
index ec7e7e84..9f87dd1b 100644
--- a/ui/src/routes/devices.$id.settings.general.reboot.tsx
+++ b/ui/src/routes/devices.$id.settings.general.reboot.tsx
@@ -1,15 +1,14 @@
-import { useCallback , useState } from "react";
+import { useCallback, useState } from "react";
 import { useNavigate } from "react-router";
 
+import { useDeviceUiNavigation } from "@hooks/useAppNavigation";
+import { useFailsafeModeStore } from "@hooks/stores";
 import { useJsonRpc } from "@hooks/useJsonRpc";
 import { Button } from "@components/Button";
-import { useFailsafeModeStore } from "@/hooks/stores";
+import LoadingSpinner from "@components/LoadingSpinner";
 import { sleep } from "@/utils";
 import { m } from "@localizations/messages.js";
 
-import LoadingSpinner from "../components/LoadingSpinner";
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
-
 // Time to wait after initiating reboot before redirecting to home
 const REBOOT_REDIRECT_DELAY_MS = 7000;
 
@@ -27,10 +26,9 @@ export default function SettingsGeneralRebootRoute() {
     window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
   }, [navigate]);
 
-
   const onConfirmUpdate = useCallback(async () => {
     setIsRebooting(true);
-    send("reboot", {  force: true });
+    send("reboot", { force: true });
 
     await new Promise(resolve => setTimeout(resolve, REBOOT_REDIRECT_DELAY_MS));
     setFailsafeMode(false, "");
@@ -49,15 +47,10 @@ export function Dialog({
   onClose: () => void;
   onConfirmUpdate: () => void;
 }>) {
-
   return (
     <div className="pointer-events-auto relative mx-auto text-left">
       <div>
-        <ConfirmationBox
-          isRebooting={isRebooting}
-          onYes={onConfirmUpdate}
-          onNo={onClose}
-        />
+        <ConfirmationBox isRebooting={isRebooting} onYes={onConfirmUpdate} onNo={onClose} />
       </div>
     </div>
   );
diff --git a/ui/src/routes/devices.$id.settings.general.update.tsx b/ui/src/routes/devices.$id.settings.general.update.tsx
index 5aead15e..daf5acb4 100644
--- a/ui/src/routes/devices.$id.settings.general.update.tsx
+++ b/ui/src/routes/devices.$id.settings.general.update.tsx
@@ -11,7 +11,12 @@ import LoadingSpinner from "@components/LoadingSpinner";
 import UpdatingStatusCard, { type UpdatePart } from "@components/UpdatingStatusCard";
 import { m } from "@localizations/messages.js";
 import { sleep } from "@/utils";
-import { checkUpdateComponents, SystemVersionInfo, UpdateComponents, updateParams } from "@/utils/jsonrpc";
+import {
+  checkUpdateComponents,
+  SystemVersionInfo,
+  UpdateComponents,
+  updateParams,
+} from "@/utils/jsonrpc";
 
 export default function SettingsGeneralUpdateRoute() {
   const navigate = useNavigate();
@@ -22,8 +27,14 @@ export default function SettingsGeneralUpdateRoute() {
   const { setModalView, otaState, shouldReload, setShouldReload } = useUpdateStore();
   const { send } = useJsonRpc();
 
-  const customAppVersion = useMemo(() => searchParams.get("custom_app_version") || undefined, [searchParams]);
-  const customSystemVersion = useMemo(() => searchParams.get("custom_system_version") || undefined, [searchParams]);
+  const customAppVersion = useMemo(
+    () => searchParams.get("custom_app_version") || undefined,
+    [searchParams],
+  );
+  const customSystemVersion = useMemo(
+    () => searchParams.get("custom_system_version") || undefined,
+    [searchParams],
+  );
   const resetConfig = useMemo(() => searchParams.get("reset_config") === "true", [searchParams]);
 
   const onClose = useCallback(async () => {
@@ -31,7 +42,7 @@ export default function SettingsGeneralUpdateRoute() {
 
     if (shouldReload) {
       setShouldReload(false);
-      await sleep(1000);      // Add 1s delay between navigation and calling reload() to prevent reload from interrupting the navigation.
+      await sleep(1000); // Add 1s delay between navigation and calling reload() to prevent reload from interrupting the navigation.
       window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
     }
   }, [navigate, setShouldReload, shouldReload]);
@@ -42,20 +53,23 @@ export default function SettingsGeneralUpdateRoute() {
     setModalView("updating");
   }, [send, setModalView, setShouldReload]);
 
-  const onConfirmCustomUpdate = useCallback((appTargetVersion?: string, systemTargetVersion?: string) => {
-    const components: UpdateComponents = {};
-    if (appTargetVersion) components.app = appTargetVersion;
-    if (systemTargetVersion) components.system = systemTargetVersion;
+  const onConfirmCustomUpdate = useCallback(
+    (appTargetVersion?: string, systemTargetVersion?: string) => {
+      const components: UpdateComponents = {};
+      if (appTargetVersion) components.app = appTargetVersion;
+      if (systemTargetVersion) components.system = systemTargetVersion;
 
-    setShouldReload(true);
-    setModalView("updating");
+      setShouldReload(true);
+      setModalView("updating");
 
-    send("tryUpdateComponents", {
-      params: { components, },
-      includePreRelease: false,
-      resetConfig,
-    });
-  }, [resetConfig, send, setModalView, setShouldReload]);
+      send("tryUpdateComponents", {
+        params: { components },
+        includePreRelease: false,
+        resetConfig,
+      });
+    },
+    [resetConfig, send, setModalView, setShouldReload],
+  );
 
   useEffect(() => {
     if (otaState.updating) {
@@ -69,13 +83,15 @@ export default function SettingsGeneralUpdateRoute() {
     }
   }, [otaState.error, otaState.updating, setModalView, updateSuccess]);
 
-  return <Dialog
-    onClose={onClose}
-    onConfirmUpdate={onConfirmUpdate}
-    onConfirmCustomUpdate={onConfirmCustomUpdate}
-    customAppVersion={customAppVersion}
-    customSystemVersion={customSystemVersion}
-  />;
+  return (
+    <Dialog
+      onClose={onClose}
+      onConfirmUpdate={onConfirmUpdate}
+      onConfirmCustomUpdate={onConfirmCustomUpdate}
+      customAppVersion={customAppVersion}
+      customSystemVersion={customSystemVersion}
+    />
+  );
 }
 
 export function Dialog({
@@ -105,8 +121,7 @@ export function Dialog({
 
   const onFinishedLoading = useCallback(
     (versionInfo: SystemVersionInfo) => {
-      const hasUpdate =
-        versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
+      const hasUpdate = versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
 
       setVersionInfo(versionInfo);
 
@@ -156,10 +171,7 @@ export function Dialog({
         )}
 
         {modalView === "upToDate" && (
-          <SystemUpToDateState
-            checkUpdate={() => setModalView("loading")}
-            onClose={onClose}
-          />
+          <SystemUpToDateState checkUpdate={() => setModalView("loading")} onClose={onClose} />
         )}
 
         {modalView === "updateCompleted" && <UpdateCompletedState onClose={onClose} />}
@@ -211,7 +223,7 @@ function LoadingState({
       .then(async versionInfo => {
         // Add a small delay to ensure it's not just flickering
         await sleep(600);
-        return versionInfo
+        return versionInfo;
       })
       .then(versionInfo => {
         if (!signal.aborted) {
@@ -268,15 +280,13 @@ function UpdatingDeviceState({
     system: UpdatePart;
     app: UpdatePart;
     areAllUpdatesComplete: boolean;
-  };
+  }
 
   const progress = useMemo<ProgressSummary>(() => {
     const calculateOverallProgress = (type: "system" | "app") => {
       const downloadProgress = Math.round((otaState[`${type}DownloadProgress`] || 0) * 100);
       const updateProgress = Math.round((otaState[`${type}UpdateProgress`] || 0) * 100);
-      const verificationProgress = Math.round(
-        (otaState[`${type}VerificationProgress`] || 0) * 100,
-      );
+      const verificationProgress = Math.round((otaState[`${type}VerificationProgress`] || 0) * 100);
 
       if (!downloadProgress && !updateProgress && !verificationProgress) {
         return 0;
@@ -284,16 +294,17 @@ function UpdatingDeviceState({
 
       if (type === "app") {
         // App: 55% download, 54% verification, 1% update(There is no "real" update for the app)
-        return Math.round(Math.min(
-          downloadProgress * 0.55 + verificationProgress * 0.54 + updateProgress * 0.01,
-          100,
-        ));
+        return Math.round(
+          Math.min(
+            downloadProgress * 0.55 + verificationProgress * 0.54 + updateProgress * 0.01,
+            100,
+          ),
+        );
       } else {
         // System: 10% download, 10% verification, 80% update
-        return Math.round(Math.min(
-          downloadProgress * 0.1 + verificationProgress * 0.1 + updateProgress * 0.8,
-          100,
-        ));
+        return Math.round(
+          Math.min(downloadProgress * 0.1 + verificationProgress * 0.1 + updateProgress * 0.8, 100),
+        );
       }
     };
 
@@ -302,7 +313,8 @@ function UpdatingDeviceState({
       const verifiedAt = otaState[`${type}VerifiedAt`];
       const updatedAt = otaState[`${type}UpdatedAt`];
 
-      const update_type = () => (type === "system" ? m.general_update_system_type() : m.general_update_application_type());
+      const update_type = () =>
+        type === "system" ? m.general_update_system_type() : m.general_update_application_type();
 
       if (!otaState.metadataFetchedAt) {
         return m.general_update_status_fetching();
@@ -321,10 +333,10 @@ function UpdatingDeviceState({
       return !!otaState[`${type}UpdatedAt`];
     };
 
-    const systemUpdatePending = otaState.systemUpdatePending
+    const systemUpdatePending = otaState.systemUpdatePending;
     const systemUpdateComplete = isUpdateComplete("system");
 
-    const appUpdatePending = otaState.appUpdatePending
+    const appUpdatePending = otaState.appUpdatePending;
     const appUpdateComplete = isUpdateComplete("app");
 
     let areAllUpdatesComplete: boolean;
@@ -383,7 +395,10 @@ function UpdatingDeviceState({
               )}
 
               {progress.system.pending && (
-                <UpdatingStatusCard label={m.general_update_system_update_title()} part={progress.system} />
+                <UpdatingStatusCard
+                  label={m.general_update_system_update_title()}
+                  part={progress.system}
+                />
               )}
 
               {progress.system.pending && progress.app.pending && (
@@ -391,7 +406,10 @@ function UpdatingDeviceState({
               )}
 
               {progress.app.pending && (
-                <UpdatingStatusCard label={m.general_update_app_update_title()} part={progress.app} />
+                <UpdatingStatusCard
+                  label={m.general_update_app_update_title()}
+                  part={progress.app}
+                />
               )}
             </>
           )}
@@ -427,7 +445,12 @@ function SystemUpToDateState({
         </p>
 
         <div className="mt-4 flex gap-x-2">
-          <Button size="SM" theme="light" text={m.general_update_check_again_button()} onClick={checkUpdate} />
+          <Button
+            size="SM"
+            theme="light"
+            text={m.general_update_check_again_button()}
+            onClick={checkUpdate}
+          />
           <Button size="SM" theme="blank" text={m.back()} onClick={onClose} />
         </div>
       </div>
@@ -457,13 +480,15 @@ function UpdateAvailableState({
         <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
           {versionInfo?.systemUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.local?.systemVersion} <span className="text-slate-600 dark:text-slate-300">→</span> {versionInfo?.remote?.systemVersion}
+              <span className="font-semibold">{m.general_update_system_type()}</span>:{" "}
+              {versionInfo?.remote?.systemVersion}
               <br />
             </>
           ) : null}
           {versionInfo?.appUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.local?.appVersion} <span className="text-slate-600 dark:text-slate-300">→</span> {versionInfo?.remote?.appVersion}
+              <span className="font-semibold">{m.general_update_application_type()}</span>:{" "}
+              {versionInfo?.remote?.appVersion}
             </>
           ) : null}
           {versionInfo?.willDisableAutoUpdate ? (
@@ -473,8 +498,18 @@ function UpdateAvailableState({
           ) : null}
         </p>
         <div className="flex items-center justify-start gap-x-2">
-          <Button size="SM" theme="primary" text={m.general_update_now_button()} onClick={onConfirm} />
-          <Button size="SM" theme="light" text={m.general_update_later_button()} onClick={onClose} />
+          <Button
+            size="SM"
+            theme="primary"
+            text={m.general_update_now_button()}
+            onClick={onConfirm}
+          />
+          <Button
+            size="SM"
+            theme="light"
+            text={m.general_update_later_button()}
+            onClick={onClose}
+          />
         </div>
       </div>
     </div>
diff --git a/ui/src/routes/devices.$id.settings.hardware.tsx b/ui/src/routes/devices.$id.settings.hardware.tsx
index 3527f269..956e0d9c 100644
--- a/ui/src/routes/devices.$id.settings.hardware.tsx
+++ b/ui/src/routes/devices.$id.settings.hardware.tsx
@@ -26,15 +26,19 @@ export default function SettingsHardwareRoute() {
   };
 
   const handleDisplayRotationSave = () => {
-    send("setDisplayRotation", { params: { rotation: displayRotation } }, (resp: JsonRpcResponse) => {
-      if ("error" in resp) {
-        notifications.error(
-          m.hardware_display_orientation_error({ error: resp.error.data || m.unknown_error() }),
-        );
-        return;
-      }
-      notifications.success(m.hardware_display_orientation_success());
-    });
+    send(
+      "setDisplayRotation",
+      { params: { rotation: displayRotation } },
+      (resp: JsonRpcResponse) => {
+        if ("error" in resp) {
+          notifications.error(
+            m.hardware_display_orientation_error({ error: resp.error.data || m.unknown_error() }),
+          );
+          return;
+        }
+        notifications.success(m.hardware_display_orientation_success());
+      },
+    );
   };
 
   const { backlightSettings, setBacklightSettings } = useSettingsStore();
@@ -82,11 +86,15 @@ export default function SettingsHardwareRoute() {
     const duration = enabled ? 90 : -1;
     send("setVideoSleepMode", { duration }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.hardware_power_saving_failed_error({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.hardware_power_saving_failed_error({ error: resp.error.data || m.unknown_error() }),
+        );
         setPowerSavingEnabled(!enabled); // Attempt to revert on error
         return;
       }
-      notifications.success(enabled ? m.hardware_power_saving_enabled() : m.hardware_power_saving_disabled());
+      notifications.success(
+        enabled ? m.hardware_power_saving_enabled() : m.hardware_power_saving_disabled(),
+      );
     });
   };
 
@@ -115,10 +123,7 @@ export default function SettingsHardwareRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.hardware_title()}
-        description={m.hardware_page_description()}
-      />
+      <SettingsPageHeader title={m.hardware_title()} description={m.hardware_page_description()} />
       <div className="space-y-4">
         <SettingsItem
           title={m.hardware_display_orientation_title()}
@@ -220,7 +225,7 @@ export default function SettingsHardwareRoute() {
           >
             <Checkbox
               checked={powerSavingEnabled}
-              onChange={(e) => handlePowerSavingChange(e.target.checked)}
+              onChange={e => handlePowerSavingChange(e.target.checked)}
             />
           </SettingsItem>
         </div>
diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
index 24e4973e..f6db269b 100644
--- a/ui/src/routes/devices.$id.settings.keyboard.tsx
+++ b/ui/src/routes/devices.$id.settings.keyboard.tsx
@@ -46,10 +46,7 @@ export default function SettingsKeyboardRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.keyboard_title()}
-        description={m.keyboard_description()}
-      />
+      <SettingsPageHeader title={m.keyboard_title()} description={m.keyboard_description()} />
 
       <div className="space-y-4">
         <SettingsItem
diff --git a/ui/src/routes/devices.$id.settings.macros.add.tsx b/ui/src/routes/devices.$id.settings.macros.add.tsx
index b4f97aa8..11871159 100644
--- a/ui/src/routes/devices.$id.settings.macros.add.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.add.tsx
@@ -29,7 +29,9 @@ export default function SettingsMacrosAddRoute() {
       navigate("../");
     } catch (error: unknown) {
       if (error instanceof Error) {
-        notifications.error(m.macros_failed_create_error({ error: error.message || m.unknown_error() }));
+        notifications.error(
+          m.macros_failed_create_error({ error: error.message || m.unknown_error() }),
+        );
       } else {
         notifications.error(m.macros_failed_create());
       }
@@ -40,10 +42,7 @@ export default function SettingsMacrosAddRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.macros_add_new()}
-        description={m.macros_add_description()}
-      />
+      <SettingsPageHeader title={m.macros_add_new()} description={m.macros_add_description()} />
       <MacroForm
         initialData={{
           name: "",
@@ -55,4 +54,4 @@ export default function SettingsMacrosAddRoute() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/src/routes/devices.$id.settings.macros.edit.tsx b/ui/src/routes/devices.$id.settings.macros.edit.tsx
index 0c2609f8..1ec53307 100644
--- a/ui/src/routes/devices.$id.settings.macros.edit.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.edit.tsx
@@ -29,8 +29,8 @@ export default function SettingsMacrosEditRoute() {
           ...step,
           keys: Array.isArray(step.keys) ? step.keys : [],
           modifiers: Array.isArray(step.modifiers) ? step.modifiers : [],
-          delay: typeof step.delay === 'number' ? step.delay : 0
-        }))
+          delay: typeof step.delay === "number" ? step.delay : 0,
+        })),
       });
     } else {
       navigate("../");
@@ -43,11 +43,13 @@ export default function SettingsMacrosEditRoute() {
     setIsUpdating(true);
     try {
       const newMacros = macros.map(m =>
-        m.id === macro.id ? {
-          ...macro,
-          name: updatedMacro.name!.trim(),
-          steps: updatedMacro.steps || [],
-        } : m
+        m.id === macro.id
+          ? {
+              ...macro,
+              name: updatedMacro.name!.trim(),
+              steps: updatedMacro.steps || [],
+            }
+          : m,
       );
 
       await saveMacros(normalizeSortOrders(newMacros));
@@ -55,7 +57,9 @@ export default function SettingsMacrosEditRoute() {
       navigate("../");
     } catch (error: unknown) {
       if (error instanceof Error) {
-        notifications.error(m.macros_failed_update_error({ error: error.message || m.unknown_error() }));
+        notifications.error(
+          m.macros_failed_update_error({ error: error.message || m.unknown_error() }),
+        );
       } else {
         notifications.error(m.macros_failed_update());
       }
@@ -124,4 +128,4 @@ export default function SettingsMacrosEditRoute() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/src/routes/devices.$id.settings.macros.tsx b/ui/src/routes/devices.$id.settings.macros.tsx
index 09d6f801..c5e2871d 100644
--- a/ui/src/routes/devices.$id.settings.macros.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.tsx
@@ -32,10 +32,7 @@ export default function SettingsMacrosRoute() {
   const [macroToDelete, setMacroToDelete] = useState<KeySequence | null>(null);
   const { selectedKeyboard } = useKeyboardLayout();
 
-  const isMaxMacrosReached = useMemo(
-    () => macros.length >= MAX_TOTAL_MACROS,
-    [macros.length],
-  );
+  const isMaxMacrosReached = useMemo(() => macros.length >= MAX_TOTAL_MACROS, [macros.length]);
 
   useEffect(() => {
     if (!initialized) {
@@ -69,7 +66,9 @@ export default function SettingsMacrosRoute() {
         notifications.success(m.macros_duplicated_success({ name: newMacroCopy.name }));
       } catch (error: unknown) {
         if (error instanceof Error) {
-          notifications.error(m.macros_failed_duplicate_error({ error: error.message || m.unknown_error() }));
+          notifications.error(
+            m.macros_failed_duplicate_error({ error: error.message || m.unknown_error() }),
+          );
         } else {
           notifications.error(m.macros_failed_duplicate());
         }
@@ -101,7 +100,9 @@ export default function SettingsMacrosRoute() {
         notifications.success(m.macros_order_updated());
       } catch (error: unknown) {
         if (error instanceof Error) {
-          notifications.error(m.macros_failed_reorder_error({ error: error.message || m.unknown_error() }));
+          notifications.error(
+            m.macros_failed_reorder_error({ error: error.message || m.unknown_error() }),
+          );
         } else {
           notifications.error(m.macros_failed_reorder());
         }
@@ -117,16 +118,16 @@ export default function SettingsMacrosRoute() {
 
     setActionLoadingId(macroToDelete.id);
     try {
-      const updatedMacros = normalizeSortOrders(
-        macros.filter(m => m.id !== macroToDelete.id),
-      );
+      const updatedMacros = normalizeSortOrders(macros.filter(m => m.id !== macroToDelete.id));
       await saveMacros(updatedMacros);
       notifications.success(m.macros_deleted_success({ name: macroToDelete.name }));
       setShowDeleteConfirm(false);
       setMacroToDelete(null);
     } catch (error: unknown) {
       if (error instanceof Error) {
-        notifications.error(m.macros_failed_delete_error({ error: error.message || m.unknown_error() }));
+        notifications.error(
+          m.macros_failed_delete_error({ error: error.message || m.unknown_error() }),
+        );
       } else {
         notifications.error(m.macros_failed_delete());
       }
@@ -173,9 +174,8 @@ export default function SettingsMacrosRoute() {
                         <span key={`step-${stepIndex}`} className="inline-flex items-center">
                           <StepIcon className="mr-1 h-3 w-3 shrink-0 text-slate-400 dark:text-slate-500" />
                           <span className="rounded-md border border-slate-200/50 bg-slate-50 px-2 py-0.5 dark:border-slate-700/50 dark:bg-slate-800">
-                            {(Array.isArray(step.modifiers) &&
-                              step.modifiers.length > 0) ||
-                              (Array.isArray(step.keys) && step.keys.length > 0) ? (
+                            {(Array.isArray(step.modifiers) && step.modifiers.length > 0) ||
+                            (Array.isArray(step.keys) && step.keys.length > 0) ? (
                               <>
                                 {Array.isArray(step.modifiers) &&
                                   step.modifiers.map((modifier, idx) => (
@@ -184,7 +184,9 @@ export default function SettingsMacrosRoute() {
                                         {selectedKeyboard.modifierDisplayMap[modifier] || modifier}
                                       </span>
                                       {idx < step.modifiers.length - 1 && (
-                                        <span className="text-slate-400 dark:text-slate-600">&nbsp;+&nbsp;</span>
+                                        <span className="text-slate-400 dark:text-slate-600">
+                                          &nbsp;+&nbsp;
+                                        </span>
                                       )}
                                     </Fragment>
                                   ))}
@@ -193,7 +195,9 @@ export default function SettingsMacrosRoute() {
                                   step.modifiers.length > 0 &&
                                   Array.isArray(step.keys) &&
                                   step.keys.length > 0 && (
-                                    <span className="text-slate-400 dark:text-slate-600">&nbsp;+&nbsp;</span>
+                                    <span className="text-slate-400 dark:text-slate-600">
+                                      &nbsp;+&nbsp;
+                                    </span>
                                   )}
 
                                 {Array.isArray(step.keys) &&
@@ -203,7 +207,9 @@ export default function SettingsMacrosRoute() {
                                         {selectedKeyboard.keyDisplayMap[key] || key}
                                       </span>
                                       {idx < step.keys.length - 1 && (
-                                        <span className="text-slate-400 dark:text-slate-600">&nbsp;+&nbsp;</span>
+                                        <span className="text-slate-400 dark:text-slate-600">
+                                          &nbsp;+&nbsp;
+                                        </span>
                                       )}
                                     </Fragment>
                                   ))}
@@ -270,7 +276,9 @@ export default function SettingsMacrosRoute() {
           title={m.macros_confirm_delete_title()}
           description={m.macros_confirm_delete_description({ name: macroToDelete?.name || "" })}
           variant="danger"
-          confirmText={actionLoadingId === macroToDelete?.id ? m.macros_confirm_deleting() : m.delete()}
+          confirmText={
+            actionLoadingId === macroToDelete?.id ? m.macros_confirm_deleting() : m.delete()
+          }
           onConfirm={handleDeleteMacro}
           isConfirming={actionLoadingId === macroToDelete?.id}
         />
@@ -287,17 +295,14 @@ export default function SettingsMacrosRoute() {
       selectedKeyboard.modifierDisplayMap,
       selectedKeyboard.keyDisplayMap,
       handleDuplicateMacro,
-      navigate
+      navigate,
     ],
   );
 
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <SettingsPageHeader
-          title={m.macros_title()}
-          description={m.macros_add_new()}
-        />
+        <SettingsPageHeader title={m.macros_title()} description={m.macros_add_new()} />
         {macros.length > 0 && (
           <div className="flex items-center pl-2">
             <Button
diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx
index 27628262..9e8f3ad1 100644
--- a/ui/src/routes/devices.$id.settings.mouse.tsx
+++ b/ui/src/routes/devices.$id.settings.mouse.tsx
@@ -64,16 +64,16 @@ type JigglerValues = (typeof jigglerOptions)[number]["value"] | "custom";
 
 export default function SettingsMouseRoute() {
   const {
-    isCursorHidden, setCursorVisibility,
-    mouseMode, setMouseMode,
-    scrollThrottling, setScrollThrottling
+    isCursorHidden,
+    setCursorVisibility,
+    mouseMode,
+    setMouseMode,
+    scrollThrottling,
+    setScrollThrottling,
   } = useSettingsStore();
 
-  const [selectedJigglerOption, setSelectedJigglerOption] =
-    useState<JigglerValues | null>(null);
-  const [currentJigglerConfig, setCurrentJigglerConfig] = useState<JigglerConfig | null>(
-    null,
-  );
+  const [selectedJigglerOption, setSelectedJigglerOption] = useState<JigglerValues | null>(null);
+  const [currentJigglerConfig, setCurrentJigglerConfig] = useState<JigglerConfig | null>(null);
 
   const scrollThrottlingOptions = [
     { value: "0", label: m.mouse_scroll_off() },
@@ -120,7 +120,9 @@ export default function SettingsMouseRoute() {
       // We assume the jiggler should be set to enabled if the config is being updated
       send("setJigglerState", { enabled: true }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
-          return notifications.error(m.mouse_jiggler_failed_state({ error: resp.error.data || m.unknown_error() }));
+          return notifications.error(
+            m.mouse_jiggler_failed_state({ error: resp.error.data || m.unknown_error() }),
+          );
         }
       });
 
@@ -158,7 +160,9 @@ export default function SettingsMouseRoute() {
     if (option === "disabled") {
       send("setJigglerState", { enabled: false }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
-          return notifications.error(m.mouse_jiggler_failed_state({ error: resp.error.data || m.unknown_error() }));
+          return notifications.error(
+            m.mouse_jiggler_failed_state({ error: resp.error.data || m.unknown_error() }),
+          );
         }
       });
 
@@ -176,10 +180,7 @@ export default function SettingsMouseRoute() {
 
   return (
     <div className="space-y-4">
-      <SettingsPageHeader
-        title={m.mouse_title()}
-        description={m.mouse_description()}
-      />
+      <SettingsPageHeader title={m.mouse_title()} description={m.mouse_description()} />
 
       <div className="space-y-4">
         <SettingsItem
@@ -220,9 +221,7 @@ export default function SettingsMouseRoute() {
               { value: "custom", label: m.mouse_jiggler_custom() },
             ]}
             onChange={e => {
-              handleJigglerChange(
-                e.target.value as (typeof jigglerOptions)[number]["value"],
-              );
+              handleJigglerChange(e.target.value as (typeof jigglerOptions)[number]["value"]);
             }}
           />
         </SettingsItem>
diff --git a/ui/src/routes/devices.$id.settings.network.tsx b/ui/src/routes/devices.$id.settings.network.tsx
index d4dd0bd7..efc87b0f 100644
--- a/ui/src/routes/devices.$id.settings.network.tsx
+++ b/ui/src/routes/devices.$id.settings.network.tsx
@@ -1,4 +1,3 @@
-
 import { useCallback, useEffect, useRef, useState } from "react";
 import { FieldValues, FormProvider, useForm } from "react-hook-form";
 import { LuCopy, LuEthernetPort } from "react-icons/lu";
@@ -72,7 +71,9 @@ export function LifeTimeLabel({ lifetime }: Readonly<{ lifetime: string }>) {
   return (
     <>
       <span className="text-sm font-medium">{remaining && <> {remaining}</>}</span>
-      <span className="text-xs text-slate-700 dark:text-slate-300">&nbsp;({dayjs(lifetime).format("YYYY-MM-DD HH:mm")})</span>
+      <span className="text-xs text-slate-700 dark:text-slate-300">
+        &nbsp;({dayjs(lifetime).format("YYYY-MM-DD HH:mm")})
+      </span>
     </>
   );
 }
@@ -102,10 +103,10 @@ export default function SettingsNetworkRoute() {
     try {
       console.log("Fetching network data...");
 
-      const [settings, state] = (await Promise.all([
-        getNetworkSettings(),
-        getNetworkState(),
-      ])) as [NetworkSettings, NetworkState];
+      const [settings, state] = (await Promise.all([getNetworkSettings(), getNetworkState()])) as [
+        NetworkSettings,
+        NetworkState,
+      ];
 
       setNetworkState(state);
 
@@ -131,7 +132,11 @@ export default function SettingsNetworkRoute() {
       initialSettingsRef.current = settingsWithDefaults;
       return { settings: settingsWithDefaults, state };
     } catch (err) {
-      notifications.error(m.network_settings_load_error({ error: err instanceof Error ? err.message : m.unknown_error() }));
+      notifications.error(
+        m.network_settings_load_error({
+          error: err instanceof Error ? err.message : m.unknown_error(),
+        }),
+      );
       throw err;
     }
   }, [setNetworkState]);
@@ -147,153 +152,165 @@ export default function SettingsNetworkRoute() {
     },
   });
 
-  const prepareSettings = useCallback((data: FieldValues) => {
-    return {
-      ...data,
+  const prepareSettings = useCallback(
+    (data: FieldValues) => {
+      return {
+        ...data,
 
-      // If custom domain option is selected, use the custom domain as value
-      domain: data.domain === "custom" ? customDomain : data.domain,
-    } as NetworkSettings;
-  }, [customDomain]);
+        // If custom domain option is selected, use the custom domain as value
+        domain: data.domain === "custom" ? customDomain : data.domain,
+      } as NetworkSettings;
+    },
+    [customDomain],
+  );
 
   const { register, handleSubmit, watch, formState, reset } = formMethods;
 
-  const onSubmit = useCallback(async (settings: NetworkSettings) => {
-    if (settings.ipv4_static?.address?.includes("/")) {
-      const parts = settings.ipv4_static.address.split("/");
-      const cidrNotation = Number.parseInt(parts[1]);
-      if (Number.isNaN(cidrNotation) || cidrNotation < 0 || cidrNotation > 32) {
-        return notifications.error(m.network_ipv4_invalid_cidr());
-      }
-      settings.ipv4_static.netmask = netMaskFromCidr4(cidrNotation);
-      settings.ipv4_static.address = parts[0];
-    }
-
-    send("setNetworkSettings", { settings }, async (resp) => {
-      if ("error" in resp) {
-        notifications.error(m.network_save_settings_failed({ error: resp.error.message || m.unknown_error() }));
-      } else {
-        // If the settings are saved successfully, fetch the latest network data and reset the form
-        // We do this so we get all the form state values, for stuff like is the form dirty, etc...
-
-        try {
-          const networkData = await fetchNetworkData();
-          if (!networkData) return
-
-          reset(networkData.settings);
-          notifications.success(m.network_save_settings_success());
-
-        } catch (error) {
-          console.error("Failed to fetch network data:", error);
+  const onSubmit = useCallback(
+    async (settings: NetworkSettings) => {
+      if (settings.ipv4_static?.address?.includes("/")) {
+        const parts = settings.ipv4_static.address.split("/");
+        const cidrNotation = Number.parseInt(parts[1]);
+        if (Number.isNaN(cidrNotation) || cidrNotation < 0 || cidrNotation > 32) {
+          return notifications.error(m.network_ipv4_invalid_cidr());
         }
-        notifications.success(m.network_dhcp_lease_renew_success());
+        settings.ipv4_static.netmask = netMaskFromCidr4(cidrNotation);
+        settings.ipv4_static.address = parts[0];
       }
-    });
-  }, [fetchNetworkData, reset, send]);
 
-  const onSubmitGate = useCallback(async (data: FieldValues) => {
-    const settings = prepareSettings(data);
-    const dirty = formState.dirtyFields;
+      send("setNetworkSettings", { settings }, async resp => {
+        if ("error" in resp) {
+          notifications.error(
+            m.network_save_settings_failed({ error: resp.error.message || m.unknown_error() }),
+          );
+        } else {
+          // If the settings are saved successfully, fetch the latest network data and reset the form
+          // We do this so we get all the form state values, for stuff like is the form dirty, etc...
 
-    // Build list of critical changes for display
-    const changes: { label: string; from: string; to: string }[] = [];
+          try {
+            const networkData = await fetchNetworkData();
+            if (!networkData) return;
 
-    if (dirty.dhcp_client) {
-      changes.push({
-        label: m.network_dhcp_client_title(),
-        from: initialSettingsRef.current?.dhcp_client as string,
-        to: data.dhcp_client as string,
+            reset(networkData.settings);
+            notifications.success(m.network_save_settings_success());
+          } catch (error) {
+            console.error("Failed to fetch network data:", error);
+          }
+          notifications.success(m.network_dhcp_lease_renew_success());
+        }
       });
-    }
+    },
+    [fetchNetworkData, reset, send],
+  );
 
-    if (dirty.ipv4_mode) {
-      changes.push({
-        label: m.network_ipv4_mode_title(),
-        from: initialSettingsRef.current?.ipv4_mode as string,
-        to: data.ipv4_mode as string,
-      });
-    }
+  const onSubmitGate = useCallback(
+    async (data: FieldValues) => {
+      const settings = prepareSettings(data);
+      const dirty = formState.dirtyFields;
 
-    if (dirty.ipv4_static?.address) {
-      changes.push({
-        label: m.network_ipv4_address(),
-        from: initialSettingsRef.current?.ipv4_static?.address as string,
-        to: data.ipv4_static?.address as string,
-      });
-    }
+      // Build list of critical changes for display
+      const changes: { label: string; from: string; to: string }[] = [];
 
-    if (dirty.ipv4_static?.netmask) {
-      changes.push({
-        label: m.network_ipv4_netmask(),
-        from: initialSettingsRef.current?.ipv4_static?.netmask as string,
-        to: data.ipv4_static?.netmask as string,
-      });
-    }
+      if (dirty.dhcp_client) {
+        changes.push({
+          label: m.network_dhcp_client_title(),
+          from: initialSettingsRef.current?.dhcp_client as string,
+          to: data.dhcp_client as string,
+        });
+      }
 
-    if (dirty.ipv4_static?.gateway) {
-      changes.push({
-        label: m.network_ipv4_gateway(),
-        from: initialSettingsRef.current?.ipv4_static?.gateway as string,
-        to: data.ipv4_static?.gateway as string,
-      });
-    }
+      if (dirty.ipv4_mode) {
+        changes.push({
+          label: m.network_ipv4_mode_title(),
+          from: initialSettingsRef.current?.ipv4_mode as string,
+          to: data.ipv4_mode as string,
+        });
+      }
 
-    if (dirty.ipv4_static?.dns) {
-      changes.push({
-        label: m.network_ipv4_dns(),
-        from: initialSettingsRef.current?.ipv4_static?.dns.join(", ").toString() ?? "",
-        to: data.ipv4_static?.dns.join(", ").toString() ?? "",
-      });
-    }
+      if (dirty.ipv4_static?.address) {
+        changes.push({
+          label: m.network_ipv4_address(),
+          from: initialSettingsRef.current?.ipv4_static?.address as string,
+          to: data.ipv4_static?.address as string,
+        });
+      }
 
-    if (dirty.ipv6_mode) {
-      changes.push({
-        label: m.network_ipv6_mode_title(),
-        from: initialSettingsRef.current?.ipv6_mode as string,
-        to: data.ipv6_mode as string,
-      });
-    }
+      if (dirty.ipv4_static?.netmask) {
+        changes.push({
+          label: m.network_ipv4_netmask(),
+          from: initialSettingsRef.current?.ipv4_static?.netmask as string,
+          to: data.ipv4_static?.netmask as string,
+        });
+      }
 
-    if (dirty.ipv6_static?.prefix) {
-      changes.push({
-        label: m.network_ipv6_prefix(),
-        from: initialSettingsRef.current?.ipv6_static?.prefix as string,
-        to: data.ipv6_static?.prefix as string,
-      });
-    }
+      if (dirty.ipv4_static?.gateway) {
+        changes.push({
+          label: m.network_ipv4_gateway(),
+          from: initialSettingsRef.current?.ipv4_static?.gateway as string,
+          to: data.ipv4_static?.gateway as string,
+        });
+      }
 
-    if (dirty.ipv6_static?.gateway) {
-      changes.push({
-        label: m.network_ipv6_gateway(),
-        from: initialSettingsRef.current?.ipv6_static?.gateway as string,
-        to: data.ipv6_static?.gateway as string,
-      });
-    }
+      if (dirty.ipv4_static?.dns) {
+        changes.push({
+          label: m.network_ipv4_dns(),
+          from: initialSettingsRef.current?.ipv4_static?.dns.join(", ").toString() ?? "",
+          to: data.ipv4_static?.dns.join(", ").toString() ?? "",
+        });
+      }
 
-    if (dirty.ipv6_static?.dns) {
-      changes.push({
-        label: m.network_ipv6_dns(),
-        from: initialSettingsRef.current?.ipv6_static?.dns.join(", ").toString() ?? "",
-        to: data.ipv6_static?.dns.join(", ").toString() ?? "",
-      });
-    }
+      if (dirty.ipv6_mode) {
+        changes.push({
+          label: m.network_ipv6_mode_title(),
+          from: initialSettingsRef.current?.ipv6_mode as string,
+          to: data.ipv6_mode as string,
+        });
+      }
 
-    // If no critical fields are changed, save immediately
-    if (changes.length === 0) return onSubmit(settings);
+      if (dirty.ipv6_static?.prefix) {
+        changes.push({
+          label: m.network_ipv6_prefix(),
+          from: initialSettingsRef.current?.ipv6_static?.prefix as string,
+          to: data.ipv6_static?.prefix as string,
+        });
+      }
 
-    // Show confirmation dialog for critical changes
-    setStagedSettings(settings);
-    setCriticalChanges(changes);
-    setShowCriticalSettingsConfirm(true);
-  }, [prepareSettings, formState.dirtyFields, onSubmit]);
+      if (dirty.ipv6_static?.gateway) {
+        changes.push({
+          label: m.network_ipv6_gateway(),
+          from: initialSettingsRef.current?.ipv6_static?.gateway as string,
+          to: data.ipv6_static?.gateway as string,
+        });
+      }
+
+      if (dirty.ipv6_static?.dns) {
+        changes.push({
+          label: m.network_ipv6_dns(),
+          from: initialSettingsRef.current?.ipv6_static?.dns.join(", ").toString() ?? "",
+          to: data.ipv6_static?.dns.join(", ").toString() ?? "",
+        });
+      }
+
+      // If no critical fields are changed, save immediately
+      if (changes.length === 0) return onSubmit(settings);
+
+      // Show confirmation dialog for critical changes
+      setStagedSettings(settings);
+      setCriticalChanges(changes);
+      setShowCriticalSettingsConfirm(true);
+    },
+    [prepareSettings, formState.dirtyFields, onSubmit],
+  );
 
   const ipv4mode = watch("ipv4_mode");
   const ipv6mode = watch("ipv6_mode");
 
   const onDhcpLeaseRenew = () => {
-    send("renewDHCPLease", {}, (resp) => {
+    send("renewDHCPLease", {}, resp => {
       if ("error" in resp) {
-        notifications.error(m.network_dhcp_lease_renew_failed({ error: resp.error.message || m.unknown_error() }));
+        notifications.error(
+          m.network_dhcp_lease_renew_failed({ error: resp.error.message || m.unknown_error() }),
+        );
       } else {
         notifications.success(m.network_dhcp_lease_renew_success());
       }
@@ -330,23 +347,33 @@ export default function SettingsNetworkRoute() {
               />
               <div className="flex items-center">
                 <GridCard cardClassName="rounded-r-none">
-                  <div className=" h-[34px] flex items-center text-xs select-all text-black font-mono dark:text-white px-3 ">
-                    {networkState?.mac_address} {" "}
+                  <div className="flex h-[34px] items-center px-3 font-mono text-xs text-black select-all dark:text-white">
+                    {networkState?.mac_address}{" "}
                   </div>
                 </GridCard>
-                <Button className="rounded-l-none border-l-slate-800/30 dark:border-slate-300/20" size="SM" type="button" theme="light" LeadingIcon={LuCopy} onClick={async () => {
-                  const mac = networkState?.mac_address || "";
-                  if (await copy(mac)) {
-                    notifications.success((m.network_mac_address_copy_success({ mac: mac })));
-                  } else {
-                    notifications.error(m.network_mac_address_copy_error());
-                  }
-                }} />
+                <Button
+                  className="rounded-l-none border-l-slate-800/30 dark:border-slate-300/20"
+                  size="SM"
+                  type="button"
+                  theme="light"
+                  LeadingIcon={LuCopy}
+                  onClick={async () => {
+                    const mac = networkState?.mac_address || "";
+                    if (await copy(mac)) {
+                      notifications.success(m.network_mac_address_copy_success({ mac: mac }));
+                    } else {
+                      notifications.error(m.network_mac_address_copy_error());
+                    }
+                  }}
+                />
               </div>
             </div>
 
             <div className="space-y-4">
-              <SettingsItem title={m.network_hostname_title()} description={m.network_hostname_description()}>
+              <SettingsItem
+                title={m.network_hostname_title()}
+                description={m.network_hostname_description()}
+              >
                 <InputField
                   size="SM"
                   placeholder={networkState?.hostname || "jetkvm"}
@@ -355,7 +382,10 @@ export default function SettingsNetworkRoute() {
                 />
               </SettingsItem>
 
-              <SettingsItem title={m.network_http_proxy_title()} description={m.network_http_proxy_description()}>
+              <SettingsItem
+                title={m.network_http_proxy_title()}
+                description={m.network_http_proxy_description()}
+              >
                 <InputField
                   size="SM"
                   placeholder="http://proxy.example.com:8080"
@@ -439,7 +469,10 @@ export default function SettingsNetworkRoute() {
                 />
               </SettingsItem>
 
-              <SettingsItem title={m.network_dhcp_client_title()} description={m.network_dhcp_client_description()}>
+              <SettingsItem
+                title={m.network_dhcp_client_title()}
+                description={m.network_dhcp_client_description()}
+              >
                 <SelectMenuBasic
                   size="SM"
                   options={[
@@ -450,7 +483,10 @@ export default function SettingsNetworkRoute() {
                 />
               </SettingsItem>
 
-              <SettingsItem title={m.network_ipv4_mode_title()} description={m.network_ipv4_mode_description()}>
+              <SettingsItem
+                title={m.network_ipv4_mode_title()}
+                description={m.network_ipv4_mode_description()}
+              >
                 <SelectMenuBasic
                   size="SM"
                   options={[
@@ -503,7 +539,10 @@ export default function SettingsNetworkRoute() {
                 </AutoHeight>
               </div>
 
-              <SettingsItem title={m.network_ipv6_mode_title()} description={m.network_ipv6_mode_description()}>
+              <SettingsItem
+                title={m.network_ipv6_mode_title()}
+                description={m.network_ipv6_mode_description()}
+              >
                 <SelectMenuBasic
                   size="SM"
                   options={[
@@ -543,26 +582,24 @@ export default function SettingsNetworkRoute() {
                 </AutoHeight>
               </div>
 
-              {isLLDPAvailable &&
-                (
-                  <div className="hidden space-y-4">
-                    <SettingsItem
-                      title={m.network_ll_dp_title()}
-                      description={m.network_ll_dp_description()}
-                    >
-                      <SelectMenuBasic
-                        size="SM"
-                        options={[
-                          { value: "disabled", label: m.network_ll_dp_disabled() },
-                          { value: "basic", label: m.network_ll_dp_basic() },
-                          { value: "all", label: m.network_ll_dp_all() },
-                        ]}
-                        {...register("lldp_mode")}
-                      />
-                    </SettingsItem>
-                  </div>
-                )
-              }
+              {isLLDPAvailable && (
+                <div className="hidden space-y-4">
+                  <SettingsItem
+                    title={m.network_ll_dp_title()}
+                    description={m.network_ll_dp_description()}
+                  >
+                    <SelectMenuBasic
+                      size="SM"
+                      options={[
+                        { value: "disabled", label: m.network_ll_dp_disabled() },
+                        { value: "basic", label: m.network_ll_dp_basic() },
+                        { value: "all", label: m.network_ll_dp_all() },
+                      ]}
+                      {...register("lldp_mode")}
+                    />
+                  </SettingsItem>
+                </div>
+              )}
 
               <div className="animate-fadeInStill animation-duration-300">
                 <Button
@@ -600,7 +637,7 @@ export default function SettingsNetworkRoute() {
         }}
         isConfirming={formState.isSubmitting}
         description={
-          <div className="space-y-4" >
+          <div className="space-y-4">
             <div>
               <p className="text-sm leading-relaxed text-slate-700 dark:text-slate-300">
                 {m.network_save_settings_confirm_description()}
@@ -613,16 +650,29 @@ export default function SettingsNetworkRoute() {
               </div>
               <div className="space-y-2.5">
                 {criticalChanges.map((c, idx) => (
-                  <div key={idx + c.label} className="flex items-center gap-x-2 gap-y-1 flex-wrap bg-slate-100/50 dark:bg-slate-800/50 border border-slate-800/10 dark:border-slate-300/20 rounded-md py-2 px-3">
+                  <div
+                    key={idx + c.label}
+                    className="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-slate-800/10 bg-slate-100/50 px-3 py-2 dark:border-slate-300/20 dark:bg-slate-800/50"
+                  >
                     <span className="text-xs text-slate-600 dark:text-slate-400">{c.label}</span>
                     <div className="flex items-center gap-2.5">
-                      <code className="rounded border border-slate-800/20 bg-slate-50 px-1.5 py-1 text-xs text-black font-mono dark:border-slate-300/20 dark:bg-slate-800 dark:text-slate-100">
+                      <code className="rounded border border-slate-800/20 bg-slate-50 px-1.5 py-1 font-mono text-xs text-black dark:border-slate-300/20 dark:bg-slate-800 dark:text-slate-100">
                         {c.from || "—"}
                       </code>
-                      <svg className="size-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      <svg
+                        className="size-3.5 text-slate-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
                       </svg>
-                      <code className="rounded border border-slate-800/20 bg-slate-50 px-1.5 py-1 text-xs text-black font-mono dark:border-slate-300/20 dark:bg-slate-800 dark:text-slate-100">
+                      <code className="rounded border border-slate-800/20 bg-slate-50 px-1.5 py-1 font-mono text-xs text-black dark:border-slate-300/20 dark:bg-slate-800 dark:text-slate-100">
                         {c.to || "—"}
                       </code>
                     </div>
@@ -644,7 +694,8 @@ export default function SettingsNetworkRoute() {
             {m.network_dhcp_lease_renew_confirm_description()}
             <br />
             <br />
-            {m.network_dhcp_lease_renew_confirm_new_a()}{" "}<strong>{m.network_dhcp_lease_renew_confirm_new_b()}</strong>.
+            {m.network_dhcp_lease_renew_confirm_new_a()}{" "}
+            <strong>{m.network_dhcp_lease_renew_confirm_new_b()}</strong>.
           </p>
         }
         onConfirm={() => {
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
index f82b489b..f395284f 100644
--- a/ui/src/routes/devices.$id.settings.tsx
+++ b/ui/src/routes/devices.$id.settings.tsx
@@ -30,7 +30,9 @@ export default function SettingsRoute() {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showLeftGradient, setShowLeftGradient] = useState(false);
   const [showRightGradient, setShowRightGradient] = useState(false);
-  const { width = 0 } = useResizeObserver({ ref: scrollContainerRef as React.RefObject<HTMLDivElement> });
+  const { width = 0 } = useResizeObserver({
+    ref: scrollContainerRef as React.RefObject<HTMLDivElement>,
+  });
   const { isFailsafeMode: isFailsafeMode, reason: failsafeReason } = useFailsafeModeStore();
   const isVideoDisabled = isFailsafeMode && failsafeReason === "video";
 
@@ -76,8 +78,8 @@ export default function SettingsRoute() {
   return (
     <div className="pointer-events-auto relative mx-auto max-w-4xl translate-x-0 transform text-left dark:text-white">
       <div className="h-full">
-        <div className="w-full gap-x-8 gap-y-4 space-y-4 md:grid md:grid-cols-8 md:space-y-0">
-          <div className="w-full select-none space-y-4 md:col-span-2">
+        <div className="w-full space-y-4 gap-x-8 gap-y-4 md:grid md:grid-cols-8 md:space-y-0">
+          <div className="w-full space-y-4 select-none md:col-span-2">
             <Card className="flex w-full gap-x-4 overflow-hidden p-2 md:flex-col dark:bg-slate-800">
               <div className="md:hidden">
                 <LinkButton
@@ -124,25 +126,19 @@ export default function SettingsRoute() {
               ></div>
               <div
                 ref={scrollContainerRef}
-                className="hide-scrollbar relative flex w-full gap-x-4 overflow-x-auto whitespace-nowrap p-2 md:flex-col md:overflow-visible md:whitespace-normal dark:bg-slate-800"
+                className="hide-scrollbar relative flex w-full gap-x-4 overflow-x-auto p-2 whitespace-nowrap md:flex-col md:overflow-visible md:whitespace-normal dark:bg-slate-800"
               >
                 <div className="shrink-0">
-                  <NavLink
-                    to="general"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="general" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuSettings className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_general()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="mouse"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="mouse" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuMouse className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_mouse()}</h1>
                     </div>
@@ -150,96 +146,87 @@ export default function SettingsRoute() {
                 </div>
                 <FeatureFlag minAppVersion="0.4.0" name="Paste text">
                   <div className="shrink-0">
-                    <NavLink
-                      to="keyboard"
-                      className={({ isActive }) => (isActive ? "active" : "")}
-                    >
-                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                    <NavLink to="keyboard" className={({ isActive }) => (isActive ? "active" : "")}>
+                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                         <LuKeyboard className="h-4 w-4 shrink-0" />
                         <h1>{m.settings_keyboard()}</h1>
                       </div>
                     </NavLink>
                   </div>
                 </FeatureFlag>
-                <div className={cx("shrink-0", {
-                  "opacity-50 cursor-not-allowed": isVideoDisabled
-                })}>
+                <div
+                  className={cx("shrink-0", {
+                    "cursor-not-allowed opacity-50": isVideoDisabled,
+                  })}
+                >
                   <NavLink
                     to="video"
-                    className={({ isActive }) => cx(isActive ? "active" : "", {
-                      "pointer-events-none": isVideoDisabled
-                    })}                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                    className={({ isActive }) =>
+                      cx(isActive ? "active" : "", {
+                        "pointer-events-none": isVideoDisabled,
+                      })
+                    }
+                  >
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuVideo className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_video()}</h1>
                     </div>
                   </NavLink>
                 </div>
-                <div className={cx("shrink-0", {
-                  "opacity-50 cursor-not-allowed": isVideoDisabled
-                })}>
+                <div
+                  className={cx("shrink-0", {
+                    "cursor-not-allowed opacity-50": isVideoDisabled,
+                  })}
+                >
                   <NavLink
                     to="hardware"
-                    className={({ isActive }) => cx(isActive ? "active" : "", {
-                      "pointer-events-none": isVideoDisabled
-                    })}
+                    className={({ isActive }) =>
+                      cx(isActive ? "active" : "", {
+                        "pointer-events-none": isVideoDisabled,
+                      })
+                    }
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuCpu className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_hardware()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="access"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="access" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuShieldCheck className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_access()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="appearance"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="appearance" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuPalette className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_appearance()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="macros"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="macros" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuCommand className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_keyboard_macros()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="network"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="network" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuNetwork className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_network()}</h1>
                     </div>
                   </NavLink>
                 </div>
                 <div className="shrink-0">
-                  <NavLink
-                    to="advanced"
-                    className={({ isActive }) => (isActive ? "active" : "")}
-                  >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
+                  <NavLink to="advanced" className={({ isActive }) => (isActive ? "active" : "")}>
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:hover:bg-slate-700 dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuWrench className="h-4 w-4 shrink-0" />
                       <h1>{m.settings_advanced()}</h1>
                     </div>
@@ -248,7 +235,7 @@ export default function SettingsRoute() {
               </div>
             </Card>
           </div>
-          <div className="w-full md:col-span-6 space-y-4">
+          <div className="w-full space-y-4 md:col-span-6">
             {isFailsafeMode && failsafeReason && <FailsafeModeBanner reason={failsafeReason} />}
             <Card className="dark:bg-slate-800">
               <div
diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx
index f1e68a0d..b7517704 100644
--- a/ui/src/routes/devices.$id.settings.video.tsx
+++ b/ui/src/routes/devices.$id.settings.video.tsx
@@ -73,15 +73,15 @@ export default function SettingsVideoRoute() {
     send("getEDID", {}, (resp: JsonRpcResponse) => {
       setEdidLoading(false);
       if ("error" in resp) {
-        notifications.error(m.video_failed_get_edid({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.video_failed_get_edid({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
 
       const receivedEdid = resp.result as string;
 
-      const matchingEdid = edids.find(
-        x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
-      );
+      const matchingEdid = edids.find(x => x.value.toLowerCase() === receivedEdid.toLowerCase());
 
       if (matchingEdid) {
         // EDID is stored in uppercase in the UI
@@ -96,19 +96,21 @@ export default function SettingsVideoRoute() {
   }, [send]);
 
   const handleStreamQualityChange = (factor: string) => {
-    send(
-      "setStreamQualityFactor",
-      { factor: Number(factor) },
-      (resp: JsonRpcResponse) => {
-        if ("error" in resp) {
-          notifications.error(m.video_failed_set_stream_quality({ error: resp.error.data || m.unknown_error() }));
-          return;
-        }
+    send("setStreamQualityFactor", { factor: Number(factor) }, (resp: JsonRpcResponse) => {
+      if ("error" in resp) {
+        notifications.error(
+          m.video_failed_set_stream_quality({ error: resp.error.data || m.unknown_error() }),
+        );
+        return;
+      }
 
-        notifications.success(m.video_stream_quality_set({ quality: streamQualityOptions.find(x => x.value === factor)?.label || "Unknown" }));
-        setStreamQuality(factor);
-      },
-    );
+      notifications.success(
+        m.video_stream_quality_set({
+          quality: streamQualityOptions.find(x => x.value === factor)?.label || "Unknown",
+        }),
+      );
+      setStreamQuality(factor);
+    });
   };
 
   const handleEDIDChange = (newEdid: string) => {
@@ -116,11 +118,17 @@ export default function SettingsVideoRoute() {
     send("setEDID", { edid: newEdid }, (resp: JsonRpcResponse) => {
       setEdidLoading(false);
       if ("error" in resp) {
-        notifications.error(m.video_failed_set_edid({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.video_failed_set_edid({ error: resp.error.data || m.unknown_error() }),
+        );
         return;
       }
 
-      notifications.success(m.video_edid_set_success({ edid: edids.find(x => x.value === newEdid)?.label ?? "the custom EDID" }));
+      notifications.success(
+        m.video_edid_set_success({
+          edid: edids.find(x => x.value === newEdid)?.label ?? "the custom EDID",
+        }),
+      );
       // Update the EDID value in the UI
       setEdid(newEdid);
     });
@@ -132,15 +140,18 @@ export default function SettingsVideoRoute() {
     setDebugInfoLoading(true);
     send("getVideoLogStatus", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        notifications.error(m.video_failed_get_debug_info({ error: resp.error.data || m.unknown_error() }));
+        notifications.error(
+          m.video_failed_get_debug_info({ error: resp.error.data || m.unknown_error() }),
+        );
         setDebugInfoLoading(false);
         return;
       }
       const data = resp.result as string;
-      setDebugInfo(data
-        .split("\n")
-        .map(line => line.trim().replace(/^\[\s*\d+\.\d+\]\s*/, ""))
-        .join("\n")
+      setDebugInfo(
+        data
+          .split("\n")
+          .map(line => line.trim().replace(/^\[\s*\d+\.\d+\]\s*/, ""))
+          .join("\n"),
       );
       setDebugInfoLoading(false);
     });
@@ -149,10 +160,7 @@ export default function SettingsVideoRoute() {
   return (
     <div className="space-y-3">
       <div className="space-y-4">
-        <SettingsPageHeader
-          title={m.video_title()}
-          description={m.video_description()}
-        />
+        <SettingsPageHeader title={m.video_title()} description={m.video_description()} />
 
         <div className="space-y-4">
           <div className="space-y-4">
@@ -300,18 +308,20 @@ export default function SettingsVideoRoute() {
                 title={m.video_debugging_info_title()}
                 description={m.video_debugging_info_description()}
               >
-                <Button size="SM" theme="primary" text={m.video_get_debugging_info()}
+                <Button
+                  size="SM"
+                  theme="primary"
+                  text={m.video_get_debugging_info()}
                   loading={debugInfoLoading}
                   disabled={debugInfoLoading}
                   onClick={() => {
                     getDebugInfo();
-                  }} />
+                  }}
+                />
               </SettingsItem>
               {debugInfo && (
-                <div className="font-mono bg-gray-100 dark:bg-gray-800 p-2 rounded-md text-xs max-h-64 overflow-y-auto">
-                  <pre className="whitespace-pre-wrap">
-                    {debugInfo}
-                  </pre>
+                <div className="max-h-64 overflow-y-auto rounded-md bg-gray-100 p-2 font-mono text-xs dark:bg-gray-800">
+                  <pre className="whitespace-pre-wrap">{debugInfo}</pre>
                 </div>
               )}
             </div>
diff --git a/ui/src/routes/devices.$id.setup.tsx b/ui/src/routes/devices.$id.setup.tsx
index 4e5dda58..10f72a4c 100644
--- a/ui/src/routes/devices.$id.setup.tsx
+++ b/ui/src/routes/devices.$id.setup.tsx
@@ -1,5 +1,10 @@
 import { Form, redirect, useActionData, useParams, useSearchParams } from "react-router";
-import type { ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunction,
+  ActionFunctionArgs,
+  LoaderFunction,
+  LoaderFunctionArgs,
+} from "react-router";
 
 import SimpleNavbar from "@components/SimpleNavbar";
 import GridBackground from "@components/GridBackground";
@@ -62,21 +67,23 @@ export default function SetupRoute() {
       <div className="grid min-h-screen grid-rows-(--grid-layout)">
         <SimpleNavbar />
         <Container>
-          <div className="flex items-center justify-center w-full h-full isolate">
-            <div className="max-w-2xl -mt-32 space-y-8">
+          <div className="isolate flex h-full w-full items-center justify-center">
+            <div className="-mt-32 max-w-2xl space-y-8">
               <div className="text-center">
                 <StepCounter currStepIdx={1} nSteps={2} />
               </div>
 
               <div className="space-y-2 text-center">
-                <h1 className="text-4xl font-semibold text-black dark:text-white">Let&apos;s name your device</h1>
+                <h1 className="text-4xl font-semibold text-black dark:text-white">
+                  Let&apos;s name your device
+                </h1>
                 <p className="text-slate-600 dark:text-slate-400">
                   {m.register_device_name_description()}
                 </p>
               </div>
 
               <Fieldset className="space-y-12">
-                <Form method="POST" className="max-w-sm mx-auto space-y-4">
+                <Form method="POST" className="mx-auto max-w-sm space-y-4">
                   <InputFieldWithLabel
                     label={m.register_device_name_label()}
                     type="text"
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index 1cc28a1b..b3d5c760 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -40,8 +40,8 @@ import { useDeviceUiNavigation } from "@hooks/useAppNavigation";
 import { useVersion } from "@hooks/useVersion";
 import WebRTCVideo from "@components/WebRTCVideo";
 import DashboardNavbar from "@components/Header";
-const ConnectionStatsSidebar = lazy(() => import('@components/sidebar/connectionStats'));
-const Terminal = lazy(() => import('@components/Terminal'));
+const ConnectionStatsSidebar = lazy(() => import("@components/sidebar/connectionStats"));
+const Terminal = lazy(() => import("@components/Terminal"));
 const UpdateInProgressStatusCard = lazy(() => import("@components/UpdateInProgressStatusCard"));
 import Modal from "@components/Modal";
 import { FailSafeModeOverlay } from "@components/FailSafeModeOverlay";
@@ -103,7 +103,6 @@ const loader: LoaderFunction = ({ params }: LoaderFunctionArgs) => {
   return isOnDevice ? deviceLoader() : cloudLoader(params);
 };
 
-
 export default function KvmIdRoute() {
   const loaderResp = useLoaderData();
   // Depending on the mode, we set the appropriate variables
@@ -113,15 +112,19 @@ export default function KvmIdRoute() {
   const authMode = "authMode" in loaderResp ? loaderResp.authMode : null;
 
   const params = useParams() as { id: string };
-  const { sidebarView, setSidebarView, disableVideoFocusTrap, rebootState, setRebootState } = useUiStore();
+  const { sidebarView, setSidebarView, disableVideoFocusTrap, rebootState, setRebootState } =
+    useUiStore();
   const [queryParams, setQueryParams] = useSearchParams();
 
   const {
-    peerConnection, setPeerConnection,
-    peerConnectionState, setPeerConnectionState,
+    peerConnection,
+    setPeerConnection,
+    peerConnectionState,
+    setPeerConnectionState,
     setMediaStream,
     setRpcDataChannel,
-    isTurnServerInUse, setTurnServerInUse,
+    isTurnServerInUse,
+    setTurnServerInUse,
     rpcDataChannel,
     setTransceiver,
     setRpcHidChannel,
@@ -177,13 +180,13 @@ export default function KvmIdRoute() {
 
       try {
         await pc.setRemoteDescription(new RTCSessionDescription(remoteDescription));
-        console.log("[setRemoteSessionDescription] Remote description set successfully to: " + remoteDescription.sdp);
+        console.log(
+          "[setRemoteSessionDescription] Remote description set successfully to: " +
+            remoteDescription.sdp,
+        );
         setLoadingMessage(m.establishing_secure_connection());
       } catch (error) {
-        console.error(
-          "[setRemoteSessionDescription] Failed to set remote description:",
-          error,
-        );
+        console.error("[setRemoteSessionDescription] Failed to set remote description:", error);
         cleanupAndStopReconnecting();
         return;
       }
@@ -228,7 +231,7 @@ export default function KvmIdRoute() {
   const reconnectInterval = (attempt: number) => {
     // Exponential backoff with a max of 10 seconds between attempts
     return Math.min(500 * 2 ** attempt, 10000);
-  }
+  };
 
   const { sendMessage, getWebSocket } = useWebSocket(
     isOnDevice
@@ -244,17 +247,17 @@ export default function KvmIdRoute() {
         cleanupAndStopReconnecting();
       },
 
-      shouldReconnect(event: WebSocketEventMap['close']) {
+      shouldReconnect(event: WebSocketEventMap["close"]) {
         console.debug("[Websocket] shouldReconnect", event);
         return !isLegacySignalingEnabled.current;
       },
 
-      onClose(event: WebSocketEventMap['close']) {
+      onClose(event: WebSocketEventMap["close"]) {
         console.debug("[Websocket] onClose", event);
         // We don't want to close everything down, we wait for the reconnect to stop instead
       },
 
-      onError(event: WebSocketEventMap['error']) {
+      onError(event: WebSocketEventMap["error"]) {
         console.error("[Websocket] onError", event);
         // We don't want to close everything down, we wait for the reconnect to stop instead
       },
@@ -273,7 +276,7 @@ export default function KvmIdRoute() {
         setRebootState({ isRebooting: false, postRebootAction: null });
       },
 
-      onMessage(event: WebSocketEventMap['message']) {
+      onMessage(event: WebSocketEventMap["message"]) {
         const message = event;
         if (message.data === "pong") return;
 
@@ -320,8 +323,7 @@ export default function KvmIdRoute() {
             // If we're making an offer, we don't want to accept an answer
             !makingOffer &&
             // If the peer connection is stable or we're setting the remote answer pending, we're ready for an offer
-            (peerConnection?.signalingState === "stable" ||
-              isSettingRemoteAnswerPending.current);
+            (peerConnection?.signalingState === "stable" || isSettingRemoteAnswerPending.current);
 
           // If we're not ready for an offer, we don't want to accept an offer
           ignoreOffer.current = parsedMessage.type === "offer" && !readyForOffer;
@@ -350,7 +352,7 @@ export default function KvmIdRoute() {
           peerConnection.addIceCandidate(candidate);
         }
       },
-    }
+    },
   );
 
   const sendWebRTCSignal = useCallback(
@@ -409,9 +411,7 @@ export default function KvmIdRoute() {
       setLoadingMessage(m.creating_peer_connection());
       pc = new RTCPeerConnection({
         // We only use STUN or TURN servers if we're in the cloud
-        ...(isInCloud && iceConfig?.iceServers
-          ? { iceServers: [iceConfig?.iceServers] }
-          : {}),
+        ...(isInCloud && iceConfig?.iceServers ? { iceServers: [iceConfig?.iceServers] } : {}),
       });
 
       setPeerConnectionState(pc.connectionState);
@@ -446,10 +446,7 @@ export default function KvmIdRoute() {
           console.log("Legacy signaling. Waiting for ICE Gathering to complete...");
         }
       } catch (e) {
-        console.error(
-          `[setupPeerConnection] Error creating offer: ${e}`,
-          new Date().toISOString(),
-        );
+        console.error(`[setupPeerConnection] Error creating offer: ${e}`, new Date().toISOString());
         cleanupAndStopReconnecting();
       } finally {
         makingOffer.current = false;
@@ -486,7 +483,8 @@ export default function KvmIdRoute() {
 
     const rpcDataChannel = pc.createDataChannel("rpc");
     rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed");
-    rpcDataChannel.onerror = (ev: Event) => console.error(`Error on DataChannel '${rpcDataChannel.label}': ${ev}`);
+    rpcDataChannel.onerror = (ev: Event) =>
+      console.error(`Error on DataChannel '${rpcDataChannel.label}': ${ev}`);
     rpcDataChannel.onopen = () => {
       setRpcDataChannel(rpcDataChannel);
     };
@@ -494,7 +492,8 @@ export default function KvmIdRoute() {
     const rpcHidChannel = pc.createDataChannel("hidrpc");
     rpcHidChannel.binaryType = "arraybuffer";
     rpcHidChannel.onclose = () => console.log("rpcHidChannel has closed");
-    rpcHidChannel.onerror = (ev: Event) => console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${ev}`);
+    rpcHidChannel.onerror = (ev: Event) =>
+      console.error(`Error on rpcHidChannel '${rpcHidChannel.label}': ${ev}`);
     rpcHidChannel.onopen = () => {
       setRpcHidChannel(rpcHidChannel);
     };
@@ -505,7 +504,8 @@ export default function KvmIdRoute() {
     });
     rpcHidUnreliableChannel.binaryType = "arraybuffer";
     rpcHidUnreliableChannel.onclose = () => console.log("rpcHidUnreliableChannel has closed");
-    rpcHidUnreliableChannel.onerror = (ev: Event) => console.error(`Error on rpcHidUnreliableChannel '${rpcHidUnreliableChannel.label}': ${ev}`);
+    rpcHidUnreliableChannel.onerror = (ev: Event) =>
+      console.error(`Error on rpcHidUnreliableChannel '${rpcHidUnreliableChannel.label}': ${ev}`);
     rpcHidUnreliableChannel.onopen = () => {
       setRpcHidUnreliableChannel(rpcHidUnreliableChannel);
     };
@@ -515,8 +515,12 @@ export default function KvmIdRoute() {
       maxRetransmits: 0,
     });
     rpcHidUnreliableNonOrderedChannel.binaryType = "arraybuffer";
-    rpcHidUnreliableNonOrderedChannel.onclose = () => console.log("rpcHidUnreliableNonOrderedChannel has closed");
-    rpcHidUnreliableNonOrderedChannel.onerror = (ev: Event) => console.error(`Error on rpcHidUnreliableNonOrderedChannel '${rpcHidUnreliableNonOrderedChannel.label}': ${ev}`);
+    rpcHidUnreliableNonOrderedChannel.onclose = () =>
+      console.log("rpcHidUnreliableNonOrderedChannel has closed");
+    rpcHidUnreliableNonOrderedChannel.onerror = (ev: Event) =>
+      console.error(
+        `Error on rpcHidUnreliableNonOrderedChannel '${rpcHidUnreliableNonOrderedChannel.label}': ${ev}`,
+      );
     rpcHidUnreliableNonOrderedChannel.onopen = () => {
       setRpcHidUnreliableNonOrderedChannel(rpcHidUnreliableNonOrderedChannel);
     };
@@ -562,7 +566,13 @@ export default function KvmIdRoute() {
       setPeerConnection(null);
       setRpcDataChannel(null);
     };
-  }, [clearCandidatePairStats, clearInboundRtpStats, setPeerConnection, setSidebarView, setRpcDataChannel]);
+  }, [
+    clearCandidatePairStats,
+    clearInboundRtpStats,
+    setPeerConnection,
+    setSidebarView,
+    setRpcDataChannel,
+  ]);
 
   // TURN server usage detection
   useEffect(() => {
@@ -607,21 +617,20 @@ export default function KvmIdRoute() {
     }
 
     // Fire and forget
-    api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
-      bytesReceived: bytesReceivedDelta,
-      bytesSent: bytesSentDelta,
-    }).catch(() => {
-      // we don't care about errors here, but we don't want unhandled promise rejections
-    });
+    api
+      .POST(`${CLOUD_API}/webrtc/turn_activity`, {
+        bytesReceived: bytesReceivedDelta,
+        bytesSent: bytesSentDelta,
+      })
+      .catch(() => {
+        // we don't care about errors here, but we don't want unhandled promise rejections
+      });
   }, 10000);
 
-  const { setNetworkState  } = useNetworkStateStore();
+  const { setNetworkState } = useNetworkStateStore();
   const { setHdmiState } = useVideoStore();
-  const {
-    keyboardLedState, setKeyboardLedState,
-    keysDownState, setKeysDownState,
-    setUsbState,
-  } = useHidStore();
+  const { keyboardLedState, setKeyboardLedState, keysDownState, setKeysDownState, setUsbState } =
+    useHidStore();
   const setHidRpcDisabled = useRTCStore(state => state.setHidRpcDisabled);
   const { setFailsafeMode } = useFailsafeModeStore();
 
@@ -680,7 +689,6 @@ export default function KvmIdRoute() {
           return;
         }
 
-
         // This is to prevent the otaState from handling page refreshes after an update
         // We've recently implemented a new general rebooting flow, so we don't need to handle this specific ota-rebooting case
         // However, with old devices, we wont get the `willReboot` message, so we need to keep this for backwards compatibility
@@ -767,7 +775,14 @@ export default function KvmIdRoute() {
       }
       setNeedKeyDownState(false);
     });
-  }, [keysDownState, needKeyDownState, rpcDataChannel?.readyState, send, setKeysDownState, setHidRpcDisabled]);
+  }, [
+    keysDownState,
+    needKeyDownState,
+    rpcDataChannel?.readyState,
+    send,
+    setKeysDownState,
+    setHidRpcDisabled,
+  ]);
 
   // When the update is successful, we need to refresh the client javascript and show a success modal
   useEffect(() => {
@@ -819,8 +834,7 @@ export default function KvmIdRoute() {
       connectionFailed || ["failed", "closed"].includes(peerConnectionState ?? "");
 
     const isPeerConnectionLoading =
-      ["connecting", "new"].includes(peerConnectionState ?? "") ||
-      peerConnection === null;
+      ["connecting", "new"].includes(peerConnectionState ?? "") || peerConnection === null;
 
     const isDisconnected = peerConnectionState === "disconnected";
 
@@ -830,16 +844,23 @@ export default function KvmIdRoute() {
     }
 
     if (hasConnectionFailed)
-      return (
-        <ConnectionFailedOverlay show={true} setupPeerConnection={setupPeerConnection} />
-      );
+      return <ConnectionFailedOverlay show={true} setupPeerConnection={setupPeerConnection} />;
 
     if (isPeerConnectionLoading) {
       return <LoadingConnectionOverlay show={true} text={loadingMessage} />;
     }
 
     return null;
-  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
+  }, [
+    location.pathname,
+    rebootState?.isRebooting,
+    rebootState?.postRebootAction,
+    connectionFailed,
+    peerConnectionState,
+    peerConnection,
+    setupPeerConnection,
+    loadingMessage,
+  ]);
 
   return (
     <FeatureFlagProvider appVersion={appVersion}>
@@ -881,15 +902,19 @@ export default function KvmIdRoute() {
           />
 
           <div className="relative flex h-full w-full overflow-hidden">
-            {(isFailsafeMode && failsafeReason === "video") ? null : <WebRTCVideo hasConnectionIssues={!!ConnectionStatusElement} />}
+            {isFailsafeMode && failsafeReason === "video" ? null : (
+              <WebRTCVideo hasConnectionIssues={!!ConnectionStatusElement} />
+            )}
             <div
               style={{ animationDuration: "500ms" }}
-              className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"
+              className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center p-4"
             >
-              <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
+              <div className="relative h-full max-h-[720px] w-full max-w-7xl rounded-md">
                 {isFailsafeMode && failsafeReason ? (
                   <FailSafeModeOverlay reason={failsafeReason} />
-                ) : !!ConnectionStatusElement && ConnectionStatusElement}
+                ) : (
+                  !!ConnectionStatusElement && ConnectionStatusElement
+                )}
               </div>
             </div>
             <SidebarContainer sidebarView={sidebarView} />
@@ -915,9 +940,7 @@ export default function KvmIdRoute() {
         </Modal>
       </div>
 
-      {kvmTerminal && (
-        <Terminal type="kvm" dataChannel={kvmTerminal} title={m.kvm_terminal()} />
-      )}
+      {kvmTerminal && <Terminal type="kvm" dataChannel={kvmTerminal} title={m.kvm_terminal()} />}
 
       {serialConsole && (
         <Terminal type="serial" dataChannel={serialConsole} title={m.serial_console()} />
diff --git a/ui/src/routes/devices.already-adopted.tsx b/ui/src/routes/devices.already-adopted.tsx
index 40556525..5ee9a871 100644
--- a/ui/src/routes/devices.already-adopted.tsx
+++ b/ui/src/routes/devices.already-adopted.tsx
@@ -12,10 +12,12 @@ export default function DevicesAlreadyAdopted() {
       <div className="grid min-h-screen grid-rows-(--grid-layout)">
         <SimpleNavbar />
         <Container>
-          <div className="flex items-center justify-center w-full h-full isolate">
-            <div className="max-w-2xl -mt-16 space-y-8">
+          <div className="isolate flex h-full w-full items-center justify-center">
+            <div className="-mt-16 max-w-2xl space-y-8">
               <div className="space-y-4 text-center">
-                <h1 className="text-4xl font-semibold text-black dark:text-white">{m.already_adopted_title()}</h1>
+                <h1 className="text-4xl font-semibold text-black dark:text-white">
+                  {m.already_adopted_title()}
+                </h1>
                 <p className="text-lg text-slate-600 dark:text-slate-400">
                   {m.already_adopted_other_user()}
                 </p>
diff --git a/ui/src/routes/devices.tsx b/ui/src/routes/devices.tsx
index c6972e0e..9651076b 100644
--- a/ui/src/routes/devices.tsx
+++ b/ui/src/routes/devices.tsx
@@ -40,7 +40,7 @@ export default function DevicesRoute() {
   useInterval(revalidate.revalidate, 4000);
   return (
     <div className="relative h-full">
-      <div className="grid h-full select-none grid-rows-(--grid-headerBody)">
+      <div className="grid h-full grid-rows-(--grid-headerBody) select-none">
         <DashboardNavbar
           isLoggedIn={!!user}
           primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
@@ -52,9 +52,7 @@ export default function DevicesRoute() {
           <div className="mx-auto h-full w-full space-y-6 px-4 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
             <div className="mt-8 flex items-center justify-between border-b border-b-slate-800/20 pb-4 dark:border-b-slate-300/20">
               <div>
-                <h1 className="text-xl font-bold text-black dark:text-white">
-                  {m.cloud_kvms()}
-                </h1>
+                <h1 className="text-xl font-bold text-black dark:text-white">{m.cloud_kvms()}</h1>
                 <p className="text-base text-slate-700 dark:text-slate-400">
                   {m.cloud_kvms_description()}
                 </p>
diff --git a/ui/src/routes/login-local.tsx b/ui/src/routes/login-local.tsx
index 16481568..4dd53482 100644
--- a/ui/src/routes/login-local.tsx
+++ b/ui/src/routes/login-local.tsx
@@ -62,11 +62,7 @@ export default function LoginLocalRoute() {
           <div className="isolate flex h-full w-full items-center justify-center">
             <div className="-mt-32 max-w-2xl space-y-8">
               <div className="flex items-center justify-center">
-                <img
-                  src={LogoWhiteIcon}
-                  alt=""
-                  className="-ml-4 hidden h-[32px] dark:block"
-                />
+                <img src={LogoWhiteIcon} alt="" className="-ml-4 hidden h-[32px] dark:block" />
                 <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
diff --git a/ui/src/routes/welcome-local.mode.tsx b/ui/src/routes/welcome-local.mode.tsx
index c68e166b..09076c38 100644
--- a/ui/src/routes/welcome-local.mode.tsx
+++ b/ui/src/routes/welcome-local.mode.tsx
@@ -50,9 +50,7 @@ const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
 
 export default function WelcomeLocalModeRoute() {
   const actionData = useActionData() as { error?: string };
-  const [selectedMode, setSelectedMode] = useState<"password" | "noPassword" | null>(
-    null,
-  );
+  const [selectedMode, setSelectedMode] = useState<"password" | "noPassword" | null>(null);
 
   return (
     <>
@@ -61,12 +59,8 @@ export default function WelcomeLocalModeRoute() {
         <Container>
           <div className="isolate flex h-full w-full items-center justify-center">
             <div className="max-w-xl space-y-8">
-              <div className="animate-fadeIn flex items-center justify-center opacity-0">
-                <img
-                  src={LogoWhiteIcon}
-                  alt=""
-                  className="-ml-4 hidden h-[32px] dark:block"
-                />
+              <div className="flex animate-fadeIn items-center justify-center opacity-0">
+                <img src={LogoWhiteIcon} alt="" className="-ml-4 hidden h-[32px] dark:block" />
                 <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
@@ -84,14 +78,14 @@ export default function WelcomeLocalModeRoute() {
 
               <Form method="POST" className="space-y-8">
                 <div
-                  className="animate-fadeIn grid grid-cols-1 gap-6 opacity-0 sm:grid-cols-2"
+                  className="grid animate-fadeIn grid-cols-1 gap-6 opacity-0 sm:grid-cols-2"
                   style={{ animationDelay: "400ms" }}
                 >
                   {["password", "noPassword"].map(mode => (
                     <GridCard
                       key={mode}
                       cardClassName={cx("transition-all duration-100", {
-                        "outline-blue-700! outline-2!": selectedMode === mode,
+                        "outline-2! outline-blue-700!": selectedMode === mode,
                         "hover:outline-blue-700!": selectedMode !== mode,
                       })}
                     >
@@ -103,7 +97,9 @@ export default function WelcomeLocalModeRoute() {
                       >
                         <div className="space-y-0 text-center">
                           <h3 className="text-base font-bold text-black dark:text-white">
-                            {mode === "password" ? m.auth_mode_local_password() : m.auth_mode_local_no_password()}
+                            {mode === "password"
+                              ? m.auth_mode_local_password()
+                              : m.auth_mode_local_no_password()}
                           </h3>
                           <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                             {mode === "password"
@@ -119,7 +115,7 @@ export default function WelcomeLocalModeRoute() {
                           onChange={() => {
                             setSelectedMode(mode as "password" | "noPassword");
                           }}
-                          className="form-radio absolute top-2 right-2 h-4 w-4 text-blue-600"
+                          className="absolute top-2 right-2 form-radio h-4 w-4 text-blue-600"
                         />
                       </div>
                     </GridCard>
@@ -136,7 +132,7 @@ export default function WelcomeLocalModeRoute() {
                 )}
 
                 <div
-                  className="animate-fadeIn mx-auto max-w-sm opacity-0"
+                  className="mx-auto max-w-sm animate-fadeIn opacity-0"
                   style={{ animationDelay: "500ms" }}
                 >
                   <Button
@@ -152,7 +148,7 @@ export default function WelcomeLocalModeRoute() {
               </Form>
 
               <p
-                className="animate-fadeIn mx-auto max-w-md text-center text-xs text-slate-500 opacity-0 dark:text-slate-400"
+                className="mx-auto max-w-md animate-fadeIn text-center text-xs text-slate-500 opacity-0 dark:text-slate-400"
                 style={{ animationDelay: "600ms" }}
               >
                 {m.auth_mode_local_change_later()}
diff --git a/ui/src/routes/welcome-local.password.tsx b/ui/src/routes/welcome-local.password.tsx
index 0804e552..3d701092 100644
--- a/ui/src/routes/welcome-local.password.tsx
+++ b/ui/src/routes/welcome-local.password.tsx
@@ -72,13 +72,9 @@ export default function WelcomeLocalPasswordRoute() {
         <Container>
           <div className="isolate flex h-full w-full items-center justify-center">
             <div className="max-w-2xl space-y-8">
-              <div className="animate-fadeIn flex items-center justify-center opacity-0">
-                <img
-                  src={LogoWhiteIcon}
-                  alt=""
-                  className="-ml-4 hidden h-[32px] dark:block"
-                />
-                <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
+              <div className="flex animate-fadeIn items-center justify-center opacity-0">
+                <img src={LogoWhiteIcon} alt="" className="-ml-4 hidden h-8 dark:block" />
+                <img src={LogoBlueIcon} alt="" className="-ml-4 h-8 dark:hidden" />
               </div>
 
               <div
@@ -96,10 +92,7 @@ export default function WelcomeLocalPasswordRoute() {
               <Fieldset className="space-y-12">
                 <Form method="POST" className="mx-auto max-w-sm space-y-4">
                   <div className="space-y-4">
-                    <div
-                      className="animate-fadeIn opacity-0"
-                      style={{ animationDelay: "400ms" }}
-                    >
+                    <div className="animate-fadeIn opacity-0" style={{ animationDelay: "400ms" }}>
                       <InputFieldWithLabel
                         label={m.auth_mode_local_password()}
                         type={showPassword ? "text" : "password"}
@@ -130,10 +123,7 @@ export default function WelcomeLocalPasswordRoute() {
                         }
                       />
                     </div>
-                    <div
-                      className="animate-fadeIn opacity-0"
-                      style={{ animationDelay: "400ms" }}
-                    >
+                    <div className="animate-fadeIn opacity-0" style={{ animationDelay: "400ms" }}>
                       <InputFieldWithLabel
                         label={m.auth_mode_local_password_confirm_label()}
                         autoComplete="new-password"
@@ -145,12 +135,9 @@ export default function WelcomeLocalPasswordRoute() {
                     </div>
                   </div>
 
-                  {actionData?.error && <p className="text-sm text-red-600">{ }</p>}
+                  {actionData?.error && <p className="text-sm text-red-600">{}</p>}
 
-                  <div
-                    className="animate-fadeIn opacity-0"
-                    style={{ animationDelay: "600ms" }}
-                  >
+                  <div className="animate-fadeIn opacity-0" style={{ animationDelay: "600ms" }}>
                     <Button
                       size="LG"
                       theme="primary"
@@ -164,10 +151,11 @@ export default function WelcomeLocalPasswordRoute() {
               </Fieldset>
 
               <p
-                className="animate-fadeIn max-w-md text-center text-xs text-slate-500 opacity-0 dark:text-slate-400"
+                className="max-w-md animate-fadeIn text-center text-xs text-slate-500 opacity-0 dark:text-slate-400"
                 style={{ animationDelay: "800ms" }}
               >
-                {m.auth_mode_local_password_note()}&nbsp;<span className="font-bold">{m.auth_mode_local_password_note_local()}</span>
+                {m.auth_mode_local_password_note()}&nbsp;
+                <span className="font-bold">{m.auth_mode_local_password_note_local()}</span>
               </p>
             </div>
           </div>
diff --git a/ui/src/routes/welcome-local.tsx b/ui/src/routes/welcome-local.tsx
index acff985f..1d17a4eb 100644
--- a/ui/src/routes/welcome-local.tsx
+++ b/ui/src/routes/welcome-local.tsx
@@ -50,20 +50,16 @@ export default function WelcomeRoute() {
               <div className="max-w-3xl text-center">
                 <div className="space-y-8">
                   <div className="space-y-4">
-                    <div className="animate-fadeIn animation-delay-1000 flex items-center justify-center opacity-0">
+                    <div className="flex animate-fadeIn items-center justify-center opacity-0 animation-delay-1000">
                       <img
                         src={LogoWhiteIcon}
                         alt={m.jetkvm_logo()}
-                        className="hidden h-[32px] dark:block"
-                      />
-                      <img
-                        src={LogoBlueIcon}
-                        alt={m.jetkvm_logo()}
-                        className="h-[32px] dark:hidden"
+                        className="hidden h-8 dark:block"
                       />
+                      <img src={LogoBlueIcon} alt={m.jetkvm_logo()} className="h-8 dark:hidden" />
                     </div>
 
-                    <div className="animate-fadeIn animation-delay-1500 space-y-1 opacity-0">
+                    <div className="animate-fadeIn space-y-1 opacity-0 animation-delay-1500">
                       <h1 className="text-4xl font-semibold text-black dark:text-white">
                         {m.welcome_to_jetkvm()}
                       </h1>
@@ -77,18 +73,18 @@ export default function WelcomeRoute() {
                     <img
                       src={DeviceImage}
                       alt={m.jetkvm_device()}
-                      className="animation-delay-300 animate-fadeInScaleFloat max-w-md scale-[0.98] opacity-0 transition-all duration-1000 ease-out"
+                      className="max-w-md scale-[0.98] animate-fadeInScaleFloat opacity-0 transition-all duration-1000 ease-out animation-delay-300"
                     />
                   </div>
                 </div>
                 <div className="-mt-8 space-y-4">
                   <p
                     style={{ animationDelay: "2000ms" }}
-                    className="animate-fadeIn mx-auto max-w-lg text-lg text-slate-700 opacity-0 dark:text-slate-300"
+                    className="mx-auto max-w-lg animate-fadeIn text-lg text-slate-700 opacity-0 dark:text-slate-300"
                   >
                     {m.jetkvm_description()}
                   </p>
-                  <div className="animate-fadeIn animation-delay-2300 opacity-0">
+                  <div className="animate-fadeIn opacity-0 animation-delay-2300">
                     <LinkButton
                       size="LG"
                       theme="light"
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 29d31ac1..5e94e6ab 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -1,5 +1,5 @@
 import { KeySequence } from "@hooks/stores";
-import { getLocale , locales } from "@localizations/runtime.js";
+import { getLocale, locales } from "@localizations/runtime.js";
 import { m } from "@localizations/messages.js";
 
 export const formatters = {
@@ -99,10 +99,7 @@ export const formatters = {
   },
 };
 
-export function someIterable<T>(
-  iterable: Iterable<T>,
-  predicate: (item: T) => boolean,
-): boolean {
+export function someIterable<T>(iterable: Iterable<T>, predicate: (item: T) => boolean): boolean {
   for (const item of iterable) {
     if (predicate(item)) return true;
   }
@@ -113,65 +110,59 @@ export function someIterable<T>(
 export const VIDEO = new Blob(
   [
     new Uint8Array([
-      0, 0, 0, 28, 102, 116, 121, 112, 105, 115, 111, 109, 0, 0, 2, 0, 105, 115, 111, 109,
-      105, 115, 111, 50, 109, 112, 52, 49, 0, 0, 0, 8, 102, 114, 101, 101, 0, 0, 2, 239,
-      109, 100, 97, 116, 33, 16, 5, 32, 164, 27, 255, 192, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 55, 167, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 112, 33, 16, 5, 32, 164, 27, 255,
-      192, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 55, 167, 128, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 112, 0, 0, 2, 194, 109, 111, 111, 118, 0, 0, 0, 108, 109, 118, 104, 100, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 232, 0, 0, 0, 47, 0, 1, 0, 0, 1, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 1, 236, 116, 114, 97, 107, 0,
-      0, 0, 92, 116, 107, 104, 100, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0,
-      0, 0, 0, 0, 0, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 101, 100, 116, 115, 0, 0, 0, 28, 101,
-      108, 115, 116, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 47, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      100, 109, 100, 105, 97, 0, 0, 0, 32, 109, 100, 104, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 172, 68, 0, 0, 8, 0, 85, 196, 0, 0, 0, 0, 0, 45, 104, 100, 108, 114,
-      0, 0, 0, 0, 0, 0, 0, 0, 115, 111, 117, 110, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83,
-      111, 117, 110, 100, 72, 97, 110, 100, 108, 101, 114, 0, 0, 0, 1, 15, 109, 105, 110,
-      102, 0, 0, 0, 16, 115, 109, 104, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 100, 105,
-      110, 102, 0, 0, 0, 28, 100, 114, 101, 102, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 12, 117,
-      114, 108, 32, 0, 0, 0, 1, 0, 0, 0, 211, 115, 116, 98, 108, 0, 0, 0, 103, 115, 116,
-      115, 100, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 87, 109, 112, 52, 97, 0, 0, 0, 0, 0, 0,
-      0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 16, 0, 0, 0, 0, 172, 68, 0, 0, 0, 0, 0, 51,
-      101, 115, 100, 115, 0, 0, 0, 0, 3, 128, 128, 128, 34, 0, 2, 0, 4, 128, 128, 128, 20,
-      64, 21, 0, 0, 0, 0, 1, 244, 0, 0, 1, 243, 249, 5, 128, 128, 128, 2, 18, 16, 6, 128,
-      128, 128, 1, 2, 0, 0, 0, 24, 115, 116, 116, 115, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2,
-      0, 0, 4, 0, 0, 0, 0, 28, 115, 116, 115, 99, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0,
-      0, 0, 2, 0, 0, 0, 1, 0, 0, 0, 28, 115, 116, 115, 122, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 2, 0, 0, 1, 115, 0, 0, 1, 116, 0, 0, 0, 20, 115, 116, 99, 111, 0, 0, 0, 0, 0, 0,
-      0, 1, 0, 0, 0, 44, 0, 0, 0, 98, 117, 100, 116, 97, 0, 0, 0, 90, 109, 101, 116, 97,
-      0, 0, 0, 0, 0, 0, 0, 33, 104, 100, 108, 114, 0, 0, 0, 0, 0, 0, 0, 0, 109, 100, 105,
-      114, 97, 112, 112, 108, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 45, 105, 108, 115, 116,
-      0, 0, 0, 37, 169, 116, 111, 111, 0, 0, 0, 29, 100, 97, 116, 97, 0, 0, 0, 1, 0, 0, 0,
-      0, 76, 97, 118, 102, 53, 54, 46, 52, 48, 46, 49, 48, 49,
+      0, 0, 0, 28, 102, 116, 121, 112, 105, 115, 111, 109, 0, 0, 2, 0, 105, 115, 111, 109, 105, 115,
+      111, 50, 109, 112, 52, 49, 0, 0, 0, 8, 102, 114, 101, 101, 0, 0, 2, 239, 109, 100, 97, 116,
+      33, 16, 5, 32, 164, 27, 255, 192, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      55, 167, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 112, 33, 16, 5, 32, 164, 27, 255, 192, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 55, 167, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 112, 0, 0, 2, 194, 109, 111, 111, 118, 0, 0, 0, 108, 109, 118, 104, 100,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 232, 0, 0, 0, 47, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 1, 236, 116, 114, 97, 107, 0, 0, 0, 92, 116, 107, 104, 100, 0,
+      0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 47, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 101, 100, 116,
+      115, 0, 0, 0, 28, 101, 108, 115, 116, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 47, 0, 0, 0, 0, 0, 1,
+      0, 0, 0, 0, 1, 100, 109, 100, 105, 97, 0, 0, 0, 32, 109, 100, 104, 100, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 172, 68, 0, 0, 8, 0, 85, 196, 0, 0, 0, 0, 0, 45, 104, 100, 108, 114, 0,
+      0, 0, 0, 0, 0, 0, 0, 115, 111, 117, 110, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 111, 117,
+      110, 100, 72, 97, 110, 100, 108, 101, 114, 0, 0, 0, 1, 15, 109, 105, 110, 102, 0, 0, 0, 16,
+      115, 109, 104, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 100, 105, 110, 102, 0, 0, 0, 28, 100,
+      114, 101, 102, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 12, 117, 114, 108, 32, 0, 0, 0, 1, 0, 0, 0,
+      211, 115, 116, 98, 108, 0, 0, 0, 103, 115, 116, 115, 100, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 87,
+      109, 112, 52, 97, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 16, 0, 0, 0, 0,
+      172, 68, 0, 0, 0, 0, 0, 51, 101, 115, 100, 115, 0, 0, 0, 0, 3, 128, 128, 128, 34, 0, 2, 0, 4,
+      128, 128, 128, 20, 64, 21, 0, 0, 0, 0, 1, 244, 0, 0, 1, 243, 249, 5, 128, 128, 128, 2, 18, 16,
+      6, 128, 128, 128, 1, 2, 0, 0, 0, 24, 115, 116, 116, 115, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2,
+      0, 0, 4, 0, 0, 0, 0, 28, 115, 116, 115, 99, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 2, 0,
+      0, 0, 1, 0, 0, 0, 28, 115, 116, 115, 122, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 1, 115, 0,
+      0, 1, 116, 0, 0, 0, 20, 115, 116, 99, 111, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 44, 0, 0, 0, 98,
+      117, 100, 116, 97, 0, 0, 0, 90, 109, 101, 116, 97, 0, 0, 0, 0, 0, 0, 0, 33, 104, 100, 108,
+      114, 0, 0, 0, 0, 0, 0, 0, 0, 109, 100, 105, 114, 97, 112, 112, 108, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 45, 105, 108, 115, 116, 0, 0, 0, 37, 169, 116, 111, 111, 0, 0, 0, 29, 100, 97, 116,
+      97, 0, 0, 0, 1, 0, 0, 0, 0, 76, 97, 118, 102, 53, 54, 46, 52, 48, 46, 49, 48, 49,
     ]),
   ],
   { type: "video/mp4" },
diff --git a/ui/src/utils/ip.ts b/ui/src/utils/ip.ts
index d9ad2389..cee17043 100644
--- a/ui/src/utils/ip.ts
+++ b/ui/src/utils/ip.ts
@@ -1,10 +1,10 @@
 export const netMaskFromCidr4 = (cidr: number) => {
   const mask = [];
   let bitCount = cidr;
-  for(let i=0; i<4; i++) {
+  for (let i = 0; i < 4; i++) {
     const n = Math.min(bitCount, 8);
-    mask.push(256 - Math.pow(2, 8-n));
+    mask.push(256 - Math.pow(2, 8 - n));
     bitCount -= n;
   }
-  return mask.join('.');
-};
\ No newline at end of file
+  return mask.join(".");
+};
diff --git a/ui/src/utils/jsonrpc.ts b/ui/src/utils/jsonrpc.ts
index d67b5c2f..03847612 100644
--- a/ui/src/utils/jsonrpc.ts
+++ b/ui/src/utils/jsonrpc.ts
@@ -117,9 +117,7 @@ async function sendRpcRequest<T>(
 export function callJsonRpc<T>(
   options: JsonRpcCallOptions,
 ): Promise<JsonRpcCallResponse<T> & { result: T }>;
-export function callJsonRpc(
-  options: JsonRpcCallOptions,
-): Promise<JsonRpcCallResponse<unknown>>;
+export function callJsonRpc(options: JsonRpcCallOptions): Promise<JsonRpcCallResponse<unknown>>;
 export async function callJsonRpc<T = unknown>(
   options: JsonRpcCallOptions,
 ): Promise<JsonRpcCallResponse<T>> {
@@ -141,11 +139,7 @@ export async function callJsonRpc<T = unknown>(
       timeoutId = setTimeout(() => rpcAbortController.abort(), timeout);
 
       // Send RPC request and wait for response
-      const response = await sendRpcRequest<T>(
-        rpcDataChannel,
-        options,
-        rpcAbortController.signal,
-      );
+      const response = await sendRpcRequest<T>(rpcDataChannel, options, rpcAbortController.signal);
 
       // Retry on error if attempts remain
       if (response.error && attempt < maxAttempts - 1) {
@@ -161,9 +155,7 @@ export async function callJsonRpc<T = unknown>(
         continue;
       }
 
-      throw error instanceof Error
-        ? error
-        : new Error(`JSON-RPC call failed after ${timeout}ms`);
+      throw error instanceof Error ? error : new Error(`JSON-RPC call failed after ${timeout}ms`);
     } finally {
       if (timeoutId !== null) {
         clearTimeout(timeoutId);
@@ -270,4 +262,4 @@ export async function checkUpdateComponents(params: updateParams, includePreRele
   });
   if (response.error) throw response.error;
   return response.result;
-}
\ No newline at end of file
+}